/* ═══════════════════════════════════════════════════════════════
   TherapeutIA · Sistema de botones
   Se carga justo después de tokens.css en todas las páginas.
   Siempre `btn` + una variante; los estados (hover, foco, activo,
   deshabilitado) salen de las variables --bs-btn-* que lee la
   clase .btn de Bootstrap, así que no hay que redefinirlos a mano.

   Variantes:
   - btn-therapeutia-primary       Principal, coral. Una por vista o modal.
   - btn-therapeutia-secondary     Secundaria, fondo azul muy claro con borde.
   - btn-therapeutia-ghost         Fantasma: sin fondo ni borde (Cancelar, Volver).
   - btn-therapeutia-danger        Destructiva en reposo: contorno con texto rojo.
                                   Abre la confirmación; nunca parece la principal.
   - btn-therapeutia-danger-solid  Destructiva que confirma el borrado: rojo relleno.
   Tamaños: btn-sm y btn-lg de Bootstrap (redefinidos abajo para estas variantes).

   Alias de la principal, para no tocar las vistas antiguas:
   btn-therapeutia-coral, btn-therapeutia (auth), btn-coral (banner de privacidad),
   btn-new-session y btn-new-patient (CTA de cabecera de la ficha y de Consultantes).
   Alias de la secundaria: btn-next-session («Preparar próxima sesión»).
   Contorno coral (variante heredada que ya usan «Crear nuevo consultante»,
   Perfil y videollamada): btn-outline-therapeutia, btn-outline-therapeutia-coral.
   En pantallas nuevas, mejor la secundaria.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Base común ─── */
.btn-therapeutia-primary,
.btn-therapeutia-coral,
.btn-therapeutia,
.btn-coral,
.btn-new-session,
.btn-new-patient,
.btn-therapeutia-secondary,
.btn-next-session,
.btn-therapeutia-ghost,
.btn-therapeutia-danger,
.btn-therapeutia-danger-solid,
.btn-outline-therapeutia,
.btn-outline-therapeutia-coral {
    /* 42px de alto, como la principal de siempre: 1px de borde descontado del relleno */
    --bs-btn-padding-y: calc(0.625rem - 1px);
    --bs-btn-padding-x: calc(1.5rem - 1px);
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-font-weight: 500;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-width: 1px;
    --bs-btn-border-radius: var(--radius-button);
    --bs-btn-disabled-opacity: 0.5;
    --bs-btn-focus-box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out,
        box-shadow 150ms ease-out, transform 150ms ease-out;
}

/* Iconos dentro del botón: heredan el color del texto y sin márgenes verticales.
   Con .btn delante para ganar a reglas de contexto como `.empty-chat-state svg`. */
.btn.btn-therapeutia-primary svg,
.btn.btn-therapeutia-coral svg,
.btn.btn-therapeutia svg,
.btn.btn-coral svg,
.btn.btn-new-session svg,
.btn.btn-new-patient svg,
.btn.btn-therapeutia-secondary svg,
.btn.btn-next-session svg,
.btn.btn-therapeutia-ghost svg,
.btn.btn-therapeutia-danger svg,
.btn.btn-therapeutia-danger-solid svg,
.btn.btn-outline-therapeutia svg,
.btn.btn-outline-therapeutia-coral svg {
    flex-shrink: 0;
    margin-top: 0;
    margin-bottom: 0;
    color: inherit;
}

/* ─── Principal (coral) ─── */
.btn-therapeutia-primary,
.btn-therapeutia-coral,
.btn-therapeutia,
.btn-coral,
.btn-new-session,
.btn-new-patient {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--therapeutia-coral);
    --bs-btn-border-color: var(--therapeutia-coral);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--therapeutia-coral-hover);
    --bs-btn-hover-border-color: var(--therapeutia-coral-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--therapeutia-coral-hover);
    --bs-btn-active-border-color: var(--therapeutia-coral-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--therapeutia-coral);
    --bs-btn-disabled-border-color: var(--therapeutia-coral);
}

.btn-therapeutia-primary:hover:not(:disabled):not(.disabled),
.btn-therapeutia-coral:hover:not(:disabled):not(.disabled),
.btn-therapeutia:hover:not(:disabled):not(.disabled),
.btn-coral:hover:not(:disabled):not(.disabled),
.btn-new-session:hover:not(:disabled):not(.disabled),
.btn-new-patient:hover:not(:disabled):not(.disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary-hover);
}

/* CTA de cabecera de listado y ficha («Nuevo consultante», «Nueva sesión»): algo más estrechos */
.btn-new-session,
.btn-new-patient {
    --bs-btn-padding-x: calc(1.25rem - 1px);
    white-space: nowrap;
}

/* ─── Secundaria ─── */
.btn-therapeutia-secondary,
.btn-next-session {
    --bs-btn-color: var(--therapeutia-blue);
    --bs-btn-bg: var(--therapeutia-blue-50);
    --bs-btn-border-color: var(--therapeutia-blue-200);
    --bs-btn-hover-color: var(--therapeutia-blue);
    --bs-btn-hover-bg: var(--therapeutia-blue-100);
    --bs-btn-hover-border-color: var(--therapeutia-blue);
    --bs-btn-active-color: var(--therapeutia-blue);
    --bs-btn-active-bg: var(--therapeutia-blue-100);
    --bs-btn-active-border-color: var(--therapeutia-blue);
    --bs-btn-disabled-color: var(--therapeutia-blue);
    --bs-btn-disabled-bg: var(--therapeutia-blue-50);
    --bs-btn-disabled-border-color: var(--therapeutia-blue-200);
    --bs-btn-padding-x: calc(1.25rem - 1px);
    white-space: nowrap;
}

.btn-therapeutia-secondary:hover:not(:disabled):not(.disabled),
.btn-next-session:hover:not(:disabled):not(.disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(58, 79, 102, 0.12);
}

/* ─── Fantasma ─── */
.btn-therapeutia-ghost {
    --bs-btn-color: var(--gray-600);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--gray-800);
    --bs-btn-hover-bg: var(--gray-100);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--gray-800);
    --bs-btn-active-bg: var(--gray-200);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--gray-500);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-padding-x: calc(1rem - 1px);
}

/* ─── Destructiva en reposo (abre la confirmación) ─── */
.btn-therapeutia-danger {
    --bs-btn-color: var(--red-700);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--gray-300);
    --bs-btn-hover-color: var(--red-700);
    --bs-btn-hover-bg: var(--red-50);
    --bs-btn-hover-border-color: var(--red-200);
    --bs-btn-active-color: var(--red-800);
    --bs-btn-active-bg: var(--red-100);
    --bs-btn-active-border-color: var(--red-300);
    --bs-btn-disabled-color: var(--red-700);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--gray-300);
    --bs-btn-padding-x: calc(1.25rem - 1px);
}

/* ─── Destructiva que confirma (dentro del modal de confirmación) ─── */
.btn-therapeutia-danger-solid {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--red-700);
    --bs-btn-border-color: var(--red-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--red-800);
    --bs-btn-hover-border-color: var(--red-800);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--red-800);
    --bs-btn-active-border-color: var(--red-800);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--red-700);
    --bs-btn-disabled-border-color: var(--red-700);
}

/* ─── Contorno coral (heredada) ─── */
.btn-outline-therapeutia,
.btn-outline-therapeutia-coral {
    --bs-btn-color: var(--therapeutia-coral);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--therapeutia-coral);
    --bs-btn-hover-color: var(--therapeutia-coral-hover);
    --bs-btn-hover-bg: var(--therapeutia-coral-alpha-08);
    --bs-btn-hover-border-color: var(--therapeutia-coral-hover);
    --bs-btn-active-color: var(--therapeutia-coral-hover);
    --bs-btn-active-bg: var(--therapeutia-coral-alpha-10);
    --bs-btn-active-border-color: var(--therapeutia-coral-hover);
    --bs-btn-disabled-color: var(--therapeutia-coral);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--therapeutia-coral);
    --bs-btn-padding-x: calc(1rem - 1px);
}

/* ─── Tamaños ───
   Bootstrap define .btn-sm/.btn-lg con la misma especificidad que las variantes,
   y estas se cargan después: sin estas reglas, btn-sm no encogería el botón. */
.btn-therapeutia-primary.btn-sm,
.btn-therapeutia-coral.btn-sm,
.btn-therapeutia.btn-sm,
.btn-coral.btn-sm,
.btn-new-session.btn-sm,
.btn-new-patient.btn-sm,
.btn-therapeutia-secondary.btn-sm,
.btn-next-session.btn-sm,
.btn-therapeutia-ghost.btn-sm,
.btn-therapeutia-danger.btn-sm,
.btn-therapeutia-danger-solid.btn-sm,
.btn-outline-therapeutia.btn-sm,
.btn-outline-therapeutia-coral.btn-sm {
    --bs-btn-padding-y: calc(0.375rem - 1px);
    --bs-btn-padding-x: calc(0.875rem - 1px);
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--radius-md);
    gap: 0.375rem;
}

.btn-therapeutia-primary.btn-lg,
.btn-therapeutia-coral.btn-lg,
.btn-therapeutia.btn-lg,
.btn-coral.btn-lg,
.btn-new-session.btn-lg,
.btn-new-patient.btn-lg,
.btn-therapeutia-secondary.btn-lg,
.btn-next-session.btn-lg,
.btn-therapeutia-ghost.btn-lg,
.btn-therapeutia-danger.btn-lg,
.btn-therapeutia-danger-solid.btn-lg,
.btn-outline-therapeutia.btn-lg,
.btn-outline-therapeutia-coral.btn-lg {
    /* 44px: el alto de los botones de acceso (login, registro, 2FA) */
    --bs-btn-padding-y: calc(0.625rem - 1px);
    --bs-btn-padding-x: calc(1.25rem - 1px);
    --bs-btn-font-size: 1rem;
}