/* Paleta Idealmedic del visor y de su pantalla de acceso: colores y familias de letra (propuesta UX del 21/10/2026).
   Es la única hoja que define colores; las demás solo usan estas variables. Otra empresa tendría su propio fichero
   en esta carpeta con las mismas variables. Regla de color: verde bosque, lo que se dice; ámbar, ojo; blanco con borde, lo que se elige. */
:root {
  color-scheme: light;

  /* Texto */
  --ink: #19332d;            /* texto principal y respuestas */
  --ink-2: #3d5a51;          /* texto secundario, etiquetas y títulos pequeños (más de 7:1 sobre blanco) */
  --muted: #5b6d66;          /* ayudas, fechas y textos discretos (5,5:1 sobre blanco) */

  /* Superficies y líneas */
  --bg: #f2f5f1;             /* fondo de la página */
  --surface: #ffffff;        /* tarjetas, paneles y campos */
  --surface-2: #e9f0ea;      /* fondo suave: etiquetas, teclas, filas seleccionadas o no disponibles */
  --tint: #fff3d9;           /* fondo al pasar el ratón por lo que se puede elegir */
  --line: #d6dfd8;           /* bordes y separadores */
  --line-strong: #9fb0a6;    /* bordes de respuestas, campos de texto y botones con borde */

  /* Marca y acción */
  --brand: #ffb42e;          /* acción principal y detalles de marca; nunca como color de texto */
  --brand-hover: #f0a010;    /* fondo de los botones naranjas al pasar el ratón */
  --on-brand: #19332d;       /* texto sobre el naranja de marca */
  --deep: #174934;           /* verde profundo: borde al pasar el ratón, selección y títulos destacados */
  --focus: #2b6cb0;          /* contorno al enfocar cualquier control (3 px) */

  /* Lo que dice el operador (bloque «Di») */
  --say-bg: #19332d;         /* fondo verde bosque */
  --say-fg: #ffffff;         /* texto (más de 12:1 sobre su fondo) */
  --say-chip: #ffb42e;       /* resalte de los datos del operador dentro de la frase */
  --say-chip-fg: #19332d;    /* texto del resalte */

  /* Estados */
  --warn-bg: #fff4d6;        /* aviso («ojo»): fondo */
  --warn-line: #e2b043;      /* aviso: borde */
  --warn-fg: #5a3d00;        /* aviso: texto (más de 8:1 sobre su fondo) */
  --ok: #1d7a4c;             /* correcto: paso hecho, caso finalizado */
  --ok-bg: #dff2e6;
  --danger: #b3261e;         /* error y acciones destructivas */
  --danger-bg: #fbe8e5;

  /* Caso finalizado y notas de solo lectura: gris propio que no cambia con la paleta de la propuesta. */
  --closed: #ccc;            /* fondo */
  --closed-ink: #000;        /* texto */
  --closed-muted: #333;      /* aviso de vacío */
  --closed-line: #b3b3b3;    /* borde */

  /* Sombras y velo */
  --shadow: 0 8px 28px rgba(25, 51, 45, .08);     /* tarjetas y paneles */
  --shadow-soft: 0 1px 4px rgba(25, 51, 45, .02); /* pasos del historial */
  --scrim: rgba(12, 26, 23, .45);                 /* fondo semitransparente de los paneles modales */

  /* Familias de letra (ficheros en assets/fonts/) */
  --f-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;          /* lectura continua */
  --f-display: "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif;          /* titulares y pregunta actual */
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;                          /* datos, teclas, identificadores y notas */
}