/* ═══════════════════════════════════════════════════════════════
   TherapeutIA · Tokens de diseño
   Única fuente de colores, sombras, radios y espaciados de la app.
   Se carga en todas las páginas, justo después de bootstrap.min.css
   y antes de cualquier hoja propia (buttons.css va a continuación).
   Valores medidos en la app real (design system, 07/10/2026).
   Las pantallas nuevas usan estas variables, no hexadecimales.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Tipografía de la web, autoalojada ──────────────────────────
   Lato para los títulos de página y de modal, Open Sans para el texto.
   Mismos ficheros que therapeutia.ai (subset latino). Nada de Google Fonts
   por CDN: mandaría la IP de cada usuaria a Google. Open Sans es variable
   (400-700); Lato solo tiene 400 y 700, por eso va solo en títulos grandes.
   nginx sirve las fuentes con caché inmutable de un año y sin ?v=: si alguna
   cambia, cambia también el nombre del fichero. */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lato-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/lato-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/open-sans.woff2') format('woff2');
}

:root {
    /* Marca */
    --therapeutia-blue: #3a4f66;
    --therapeutia-blue-hover: #2f4054;
    --therapeutia-blue-50: #eef1f5;
    --therapeutia-blue-100: #e2e8f0;
    --therapeutia-blue-200: #c9d2dd;
    --therapeutia-coral: #c46a6a;
    --therapeutia-coral-hover: #b85a5a;
    --therapeutia-coral-light: #e97c7a;
    --therapeutia-coral-light-hover: #d86b69;
    --therapeutia-sage: #8fa8a0;
    --therapeutia-off-white: #f6f7f8;
    --white: #ffffff;
    --therapeutia-gray: var(--gray-500);
    /* Títulos que antes caían al casi negro #2d3436 de reserva (Training, Role Play) */
    --therapeutia-dark: var(--therapeutia-blue);

    --therapeutia-blue-alpha-04: rgba(58, 79, 102, 0.04);
    --therapeutia-blue-alpha-08: rgba(58, 79, 102, 0.08);
    --therapeutia-blue-alpha-10: rgba(58, 79, 102, 0.1);
    --therapeutia-blue-alpha-15: rgba(58, 79, 102, 0.15);
    --therapeutia-coral-alpha-08: rgba(196, 106, 106, 0.08);
    --therapeutia-coral-alpha-10: rgba(196, 106, 106, 0.1);
    --therapeutia-coral-alpha-30: rgba(196, 106, 106, 0.3);

    /* Grises */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Estados */
    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-300: #fca5a5;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --amber-50: #fffbeb;
    --amber-100: #fef3c7;
    --amber-200: #fde68a;
    --amber-300: #fcd34d;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --amber-700: #b45309;
    --amber-800: #92400e;
    --amber-900: #78350f;
    --emerald-50: #ecfdf5;
    --emerald-100: #d1fae5;
    --emerald-200: #a7f3d0;
    --emerald-500: #10b981;
    --emerald-600: #059669;
    --emerald-700: #047857;
    --blue-50: #eff6ff;
    --blue-600: #2563eb;
    --violet-500: #8b5cf6;

    /* Sombras */
    --shadow-navbar: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.02);
    --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-soft: 0 4px 12px rgba(58, 79, 102, 0.1);
    --shadow-modal: 0 8px 30px rgba(58, 79, 102, 0.15);
    --shadow-primary-hover: 0 4px 12px rgba(196, 106, 106, 0.3);
    --focus-ring-coral: 0 0 0 3px rgba(196, 106, 106, 0.1);
    --focus-ring-blue: 0 0 0 3px rgba(58, 79, 102, 0.1);
    /* Foco de los campos (texto, selectores, casillas): siempre azul de marca. El coral queda
       para las acciones y el aro de teclado de botones y enlaces; el rojo, para los errores. */
    --focus-field-border: var(--therapeutia-blue);
    --focus-field-ring: 0 0 0 3px rgba(58, 79, 102, 0.12);

    /* Espaciado */
    --spacer-1: 0.25rem;
    --spacer-2: 0.5rem;
    --spacer-3: 1rem;
    --spacer-4: 1.5rem;
    --spacer-modal-x: 2rem;
    --spacer-5: 3rem;

    /* Radios */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-button: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* Tipografía */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --font-body: 'Open Sans', var(--font-sans);
    --font-heading: 'Lato', var(--font-sans);
}

/* ─── Puente Bootstrap → marca ───────────────────────────────────
   Bootstrap 5.3 trae su azul #0d6efd escrito a mano en varios
   componentes; aquí se reapuntan a la paleta de la marca. */
:root {
    --bs-primary: var(--therapeutia-blue);
    --bs-primary-rgb: 58, 79, 102;
    --bs-primary-text-emphasis: var(--therapeutia-blue);
    --bs-primary-bg-subtle: var(--therapeutia-blue-50);
    --bs-primary-border-subtle: var(--therapeutia-blue-200);
    --bs-link-color: var(--therapeutia-blue);
    --bs-link-color-rgb: 58, 79, 102;
    --bs-link-hover-color: var(--therapeutia-coral-hover);
    --bs-link-hover-color-rgb: 184, 90, 90;
    --bs-focus-ring-color: rgba(196, 106, 106, 0.25);
    --bs-body-font-family: var(--font-body);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--therapeutia-blue);
    --bs-btn-border-color: var(--therapeutia-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--therapeutia-blue-hover);
    --bs-btn-hover-border-color: var(--therapeutia-blue-hover);
    --bs-btn-focus-shadow-rgb: 58, 79, 102;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--therapeutia-blue-hover);
    --bs-btn-active-border-color: var(--therapeutia-blue-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--therapeutia-blue);
    --bs-btn-disabled-border-color: var(--therapeutia-blue);
}

.btn-outline-primary {
    --bs-btn-color: var(--therapeutia-blue);
    --bs-btn-border-color: var(--therapeutia-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--therapeutia-blue);
    --bs-btn-hover-border-color: var(--therapeutia-blue);
    --bs-btn-focus-shadow-rgb: 58, 79, 102;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--therapeutia-blue);
    --bs-btn-active-border-color: var(--therapeutia-blue);
    --bs-btn-disabled-color: var(--therapeutia-blue);
    --bs-btn-disabled-border-color: var(--therapeutia-blue);
}

.btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(196, 106, 106, 0.25);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--therapeutia-blue);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--therapeutia-blue);
}

.pagination {
    --bs-pagination-color: var(--therapeutia-blue);
    --bs-pagination-hover-color: var(--therapeutia-blue-hover);
    --bs-pagination-focus-color: var(--therapeutia-blue-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(196, 106, 106, 0.25);
    --bs-pagination-active-bg: var(--therapeutia-blue);
    --bs-pagination-active-border-color: var(--therapeutia-blue);
}

.list-group {
    --bs-list-group-active-bg: var(--therapeutia-blue);
    --bs-list-group-active-border-color: var(--therapeutia-blue);
}

.alert-info {
    /* El cian de Bootstrap no es de la marca: avisos informativos en azul de marca. */
    --bs-alert-color: var(--therapeutia-blue);
    --bs-alert-bg: var(--therapeutia-blue-50);
    --bs-alert-border-color: var(--therapeutia-blue-200);
    --bs-alert-link-color: var(--therapeutia-blue);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--therapeutia-blue);
}

/* Campos: Bootstrap escribe el foco a mano (#86b7fe + halo azul), no lee variables. */
.form-control:focus,
.form-select:focus {
    border-color: var(--focus-field-border);
    box-shadow: var(--focus-field-ring);
}

/* Casillas, radios e interruptores sin marcar: con el gris de los bordes de
   Bootstrap casi no se veían sobre blanco. */
.form-check-input {
    border-color: var(--gray-400);
}

.form-check-input:focus {
    border-color: var(--focus-field-border);
    box-shadow: var(--focus-field-ring);
}

.form-check-input:checked {
    background-color: var(--therapeutia-coral);
    border-color: var(--therapeutia-coral);
}

.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--therapeutia-coral);
    border-color: var(--therapeutia-coral);
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239da7b3'/%3e%3c/svg%3e");
}

/* Títulos de página y de modal en Lato; los de tarjeta y sección siguen en
   Open Sans 600. Los encabezados de las respuestas del chat (markdown) van
   con el texto, no con la página. */
h1,
.h1,
.modal-title,
.patients-title,
.cb-modal-title,
.recording-modal-title {
    font-family: var(--font-heading);
}

.markdown-content h1,
.markdown-content .h1 {
    font-family: inherit;
}

/* ─── Foco de teclado visible y de marca ─────────────────────────
   Bootstrap quita el contorno de .btn (outline: 0) y pinta un halo
   con variables que las clases propias no definen. Un único aro
   coral para todo lo que se activa con el teclado. */
.btn:focus-visible,
.nav-link:focus-visible,
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
[tabindex="0"]:focus-visible,
.home-card:focus-visible,
.action-tile:focus-visible,
.quick-access-item:focus-visible {
    outline: 2px solid var(--therapeutia-coral);
    outline-offset: 2px;
}

.btn:focus-visible,
.nav-link:focus-visible {
    box-shadow: none;
}

/* Cabeceras plegables (un <div role="button"> a todo el ancho de la tarjeta,
   que recorta lo que sobresale) y zonas con scroll propio enfocables: el aro
   va por dentro para que no lo corte el contenedor. */
[role="button"][data-bs-toggle="collapse"]:focus-visible,
[role="region"][tabindex="0"]:focus-visible {
    outline: 2px solid var(--therapeutia-coral);
    outline-offset: -2px;
}