/* ============================================================
   GALVIS - Botones
   Todas las esquinas redondeadas.
   ============================================================ */

.btn-primary,
.btn-secondary,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    font-family: inherit;
}

.btn-primary {
    background: var(--galvis-red);
    color: var(--galvis-white);
    box-shadow: 0 2px 8px rgba(229, 57, 53, 0.25);
}
.btn-primary:hover {
    background: var(--galvis-red-dark);
    box-shadow: 0 4px 12px rgba(229, 57, 53, 0.3);
}

.btn-secondary {
    background: var(--galvis-white);
    color: var(--galvis-text);
    border: 1px solid var(--galvis-border);
}
.btn-secondary:hover {
    background: var(--galvis-gray-1);
}

.btn-danger {
    background: var(--galvis-red);
    color: var(--galvis-white);
}
.btn-danger:hover {
    background: var(--galvis-red-dark);
}

.btn-primary:active,
.btn-secondary:active,
.btn-danger:active {
    transform: scale(0.97);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary .material-icons,
.btn-secondary .material-icons,
.btn-danger .material-icons {
    font-size: 17px;
}

/* ---------- Botones icono del header ---------- */
.btn-admin,
.btn-logout {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, color 0.2s, transform 0.1s, border-color 0.2s;
    text-decoration: none;
}

.btn-admin {
    background: var(--galvis-white);
    color: var(--galvis-red);
    border: 1px solid var(--galvis-red);
}

.btn-admin:hover {
    background: var(--galvis-red);
    color: var(--galvis-white);
}

.btn-logout {
    background: var(--galvis-red-light);
    color: var(--galvis-red);
    border: 1px solid transparent;
}

.btn-logout:hover {
    background: var(--galvis-red);
    color: var(--galvis-white);
}

.btn-admin:active,
.btn-logout:active {
    transform: scale(0.94);
}

.btn-admin .material-icons,
.btn-logout .material-icons {
    font-size: 19px;
}

/* ============================================================
   BOTÓN COMPACTO PARA HEADERS DE MODAL
   ("Añadir usuario" / "Añadir centro" junto al botón cerrar)
   ============================================================ */
.btn-header-primary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: var(--galvis-red);
    color: var(--galvis-white);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    box-shadow: 0 2px 6px rgba(229, 57, 53, 0.2);
    white-space: nowrap;
}

.btn-header-primary:hover {
    background: var(--galvis-red-dark);
    box-shadow: 0 4px 10px rgba(229, 57, 53, 0.3);
}

.btn-header-primary:active {
    transform: scale(0.96);
}

.btn-header-primary:focus-visible {
    outline: 2px solid var(--galvis-red);
    outline-offset: 2px;
}

.btn-header-primary .material-icons {
    font-size: 15px;
}