/* FTC · tokens del sistema de diseño
   Generado desde tokens/tokens.json. NO editar a mano: se regenera.
   Tema por defecto = claro. El oscuro se activa con <html data-theme="dark">.
   Los temas de exploración de marca (Ruta 01 y Ruta 03) no se compilan aquí. */

:root, [data-theme="light"] {
  --surface-page: #f4f0e8; /* Fondo de la aplicacion */
  --surface-raised: #ffffff; /* Filas, tarjetas y paneles sobre el fondo */
  --surface-sunken: #eae6dc; /* Cabeceras de tabla, franjas hundidas y distintivos neutros */
  --border-hairline: #d8d2c5; /* Separador de fila y borde de tarjeta */
  --border-strong: #8b8474; /* Borde de control, input y contenedor de borrador */
  --ink-strong: #153437; /* Texto principal y contenido clinico */
  --ink-muted: #4a5c5a; /* Metadatos, fechas y ayudas de formulario */
  --ink-inverse: #f4f0e8; /* Texto e iconos sobre brand-deep */
  --brand-deep: #153437; /* Navegacion lateral y cabecera de identidad */
  --brand-primary: #2f6460; /* Accion primaria, enlace y foco */
  --brand-soft: #dce8e0; /* Superficie informativa y chip de fuente citada */
  --brand-accent: #649181; /* Segundo verde de la identidad: el nodo de paso del logotipo y acentos graficos de marca */
  --brand-signal: #bd664b; /* Senal humana: el coral arcilla del dibujo original, un punto mas profundo */
  --focus-ring: var(--brand-primary); /* Anillo de foco de teclado, 2px con 2px de separacion */
  --alert-high: #911a13; /* Nivel de atencion alto */
  --alert-high-surface: #fbe7e4; /* Fondo del distintivo y de la fila en atencion alta */
  --alert-high-ink: #7a140e; /* Texto sobre alert-high-surface */
  --alert-medium: #b56d12; /* Nivel de atencion medio */
  --alert-medium-surface: #faeedc; /* Fondo del distintivo en atencion media */
  --alert-medium-ink: #7e4709; /* Texto sobre alert-medium-surface */
  --alert-low: #4f6a8f; /* Nivel de atencion bajo */
  --alert-low-surface: #e7edf5; /* Fondo del distintivo en atencion baja */
  --alert-low-ink: #3a5070; /* Texto sobre alert-low-surface */
  --alert-none: #6b7472; /* Sin alertas activas: la mayoria de la lista */
  --job-pending: #6b7472; /* En cola o procesando */
  --job-pending-surface: var(--surface-sunken); /* Fondo del distintivo en cola o procesando */
  --job-pending-ink: #4e5654; /* Texto sobre job-pending-surface */
  --job-review: #2f6460; /* Listo para revisar */
  --job-review-surface: #e2ece9; /* Fondo del distintivo listo para revisar */
  --job-review-ink: #245450; /* Texto sobre job-review-surface */
  --job-done: var(--ink-muted); /* Terminado y validado */
  --job-failed: var(--alert-high); /* Job fallido */
  --job-failed-surface: var(--alert-high-surface); /* Fondo del distintivo de job fallido */
  --job-failed-ink: var(--alert-high-ink); /* Texto sobre job-failed-surface */
  --ai-draft-surface: #f1ede1; /* Contenedor de contenido generado por IA aun no validado */
  --ai-draft-border: var(--border-strong); /* Borde discontinuo del contenedor de borrador */
  --ai-source-surface: #dce8e0; /* Chip de fuente citada bajo una respuesta del panel de consulta */
  --ai-source-ink: #245450; /* Texto del chip de fuente citada */
  --ai-warning-surface: var(--alert-medium-surface); /* Aviso de contexto truncado, fuentes contradictorias o abstencion por falta de evidencia */
  --ai-warning-ink: var(--alert-medium-ink); /* Texto del aviso de la IA */
  --ai-excluded-surface: var(--surface-sunken); /* Distintivo 'Excluido de IA' */
  --ai-excluded-ink: var(--ink-muted); /* Texto del distintivo 'Excluido de IA' */
}

[data-theme="dark"] {
  --surface-page: #101f21;
  --surface-raised: #17292b;
  --surface-sunken: #0b1719;
  --border-hairline: #24393b;
  --border-strong: #678688;
  --ink-strong: #eef2f0;
  --ink-muted: #9db0ad;
  --ink-inverse: #eef2f0;
  --brand-deep: #0b1719;
  --brand-primary: #7fc4b8;
  --brand-soft: #1d3a38;
  --brand-accent: #a9c8b9;
  --brand-signal: #d4836b;
  --focus-ring: var(--brand-primary);
  --alert-high: #ffa79a;
  --alert-high-surface: #3d1b17;
  --alert-high-ink: #ffc9c0;
  --alert-medium: #c07f24;
  --alert-medium-surface: #33260f;
  --alert-medium-ink: #f5d39a;
  --alert-low: #7ba2cc;
  --alert-low-surface: #1c2c3c;
  --alert-low-ink: #cfe0f2;
  --alert-none: #7d8a88;
  --job-pending: #7d8a88;
  --job-pending-surface: var(--surface-sunken);
  --job-pending-ink: #c3cecb;
  --job-review: #7fc4b8;
  --job-review-surface: #16302e;
  --job-review-ink: #a9ddd3;
  --job-done: var(--ink-muted);
  --job-failed: var(--alert-high);
  --job-failed-surface: var(--alert-high-surface);
  --job-failed-ink: var(--alert-high-ink);
  --ai-draft-surface: #182528;
  --ai-draft-border: var(--border-strong);
  --ai-source-surface: #1d3a38;
  --ai-source-ink: #a9ddd3;
  --ai-warning-surface: var(--alert-medium-surface);
  --ai-warning-ink: var(--alert-medium-ink);
  --ai-excluded-surface: var(--surface-sunken);
  --ai-excluded-ink: var(--ink-muted);
}

/* Escalas — no dependen del tema */
:root {
  --space-1: 4px; /* Separacion entre un punto de estado y su etiqueta. */
  --space-2: 8px; /* Relleno interno de distintivos y separacion entre iconos de alerta. */
  --space-3: 12px; /* Relleno vertical de fila de lista y separacion entre campos. */
  --space-4: 16px; /* Relleno de tarjeta y separacion entre columnas. */
  --space-5: 24px; /* Separacion entre bloques y entre grupos de formulario. */
  --space-6: 32px; /* Margen de pantalla en escritorio. */
  --radius-sm: 6px; /* Inputs, botones y distintivos rectangulares. */
  --radius-md: 10px; /* Tarjetas, paneles y contenedores de borrador. */
  --radius-pill: 999px; /* Distintivos de nivel y puntos de estado. */
  --touch-min: 44px; /* Altura minima de cualquier control que se toque en movil (§4.6). */
  --row-height: 52px; /* Altura de fila de la tabla compacta de pacientes. */
  --icon-alert: 18px; /* Icono de alerta en el listado de pacientes. */
  --icon-ui: 20px; /* Icono de interfaz general. */
  --font-sans: "Manrope", system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* Estilos tipográficos */
.titulo-pagina { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 600; }  /* Titulo de pantalla. */
.titulo-seccion { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 600; }  /* Cabecera de bloque, panel o subseccion de la Ficha. */
.cuerpo { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; }  /* Texto corrido de interfaz y contenido clinico. */
.dato { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }  /* Celdas de tabla y valores en lista. */
.etiqueta { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; }  /* Cabeceras de columna, etiquetas de campo y distintivos. */
.micro { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 600; }  /* Contadores, pies de distintivo y texto de ayuda. */
.intro { font-family: var(--font-serif); font-size: 20px; line-height: 30px; font-weight: 400; }  /* Resumen global, entradillas de informe y citas de fuente. */
.identificador { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; }  /* Codigos de caso, sellos de tiempo y trazas de auditoria. */

/* Modo oscuro por preferencia del sistema, sobrescribible a mano (§4.2).
   El atributo data-theme siempre gana sobre la preferencia del sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}