/* =========================================================================
   noevi — tokens.css · marca de noevi (2026-11-11, docs/marca/guia.md §6), integrada por orden del CEO

   Fuente editable: marca/tokens/tokens.css (las dos copias deben ser idénticas).
   MISMOS NOMBRES que ese fichero (que es la copia de Lydent ce9ee6802): ninguna
   plantilla ni hoja tiene que cambiar para recibirla. Cambian los VALORES, al
   aspecto de macOS moderno decidido por el CEO, y se AÑADEN los tokens que el
   estilo nuevo necesita (marcados «nuevo»).

   Sigue siendo la ÚNICA fuente de verdad de color, tipografía, espaciado, radio
   y densidad. Las --brand-* siguen fuera, en brand/noevi.css.

   Modo oscuro (CEO, 2026-11-11, mecanismo de OdontoHR): el servidor escribe
   <html data-tema="claro|oscuro|auto">. El claro es la base en :root y el
   oscuro SOLO re-apunta tokens que ya existen en :root. Un token que exista
   solo en el bloque oscuro es un fallo mudo.

   Contraste comprobado con marca/tokens/contraste.py (AA, en los dos temas).
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---------- NEUTRALES: los grises de macOS ---------------------------
     Antes grafito frío de Lydent. Ahora los de macOS, con dos correcciones
     de contraste: el gris terciario del sistema (#8E8E93) da 3,0 sobre la
     lateral y no llega a AA, así que el texto terciario es --n-500. */
  --n-0:   #FFFFFF;   /* ventana, superficie                         */
  --n-25:  #FBFBFD;   /* inspector                                   */
  --n-50:  #F5F5F7;   /* lateral                                     */
  --n-100: #E8E8ED;   /* pista de segmentado                         */
  --n-200: #D2D2D7;   /* contorno                                    */
  --n-300: #B0B0B6;
  --n-400: #8E8E93;   /* SOLO iconos y señales, nunca texto           */
  --n-500: #6C6C71;   /* tinta-3: 5,2 sobre blanco, 4,8 sobre lateral */
  --n-600: #5A5A5F;   /* tinta-2: 6,9 sobre blanco                   */
  --n-700: #3A3A3D;
  --n-800: #2C2C2F;
  --n-900: #1D1D1F;   /* tinta                                       */
  --superficie: var(--n-0);   /* nuevo: tarjeta, grupo de ajustes; en oscuro sube un escalón */

  /* ---------- SEMÁNTICOS (los de Lydent, ya validados AA) ------------- */
  --ok:        #157F5B;   --ok-bg:   #E4F2EC;
  --warn:      #B4720A;   --warn-bg: #FBF0DC;
  --risk:      #B3261E;   --risk-bg: #F9E5E4;
  --info:      #1A5FA8;   --info-bg: #E4EDF7;
  --idle:      #697372;   --idle-bg: #F0F2F2;
  --ok-ink:    #137352;
  --warn-ink:  #8F5B08;
  --idle-ink:  #5F6867;
  --risk-ink:  var(--risk);
  --info-ink:  var(--info);

  /* ---------- ACENTO ---------------------------------------------------
     Único. --accent rellena (botón, selección); --accent-ink es el texto y
     el icono del acento: en claro coinciden, en oscuro no (el relleno
     #5856C8 lleva blanco encima y el texto #A3A1F7 se lee sobre la ventana).
     --accent-nav: la barra ya NO es índigo (CEO, 2026-11-11: barra clara);
     el token se conserva y apunta a la lateral. */
  --accent:     var(--brand-500);
  --accent-600: var(--brand-600);
  --accent-bg:  var(--brand-50);
  --accent-nav: var(--n-50);
  --accent-ink: var(--brand-ink);     /* nuevo */
  --on-accent:  #FFFFFF;              /* nuevo */

  /* ---------- AGENDA (nuevo) -------------------------------------------
     El color de la cita es SOLO el del profesional; el estado va en el icono
     de flujo (docs/flujo_paciente_tv.md). Doce tonos que identifican a una
     persona: -bg es el fondo de la cita y el canto de 3 px es el color.
     Comprobado: texto ≥ 4,5 sobre su -bg y canto ≥ 3 sobre la ventana. */
  --ahora: #E5484D;   /* la línea de la hora actual */
  --prof-1: #3B3A8C; --prof-1-bg: #EBEBF4;
  --prof-2: #1F7A6E; --prof-2-bg: #E9F2F0;
  --prof-3: #A34F0A; --prof-3-bg: #F6EDE6;
  --prof-4: #8A3FA0; --prof-4-bg: #F3ECF6;
  --prof-5: #23689B; --prof-5-bg: #E9F0F5;
  --prof-6: #A3324F; --prof-6-bg: #F6EAED;
  --prof-7: #47711C; --prof-7-bg: #EDF1E8;
  --prof-8: #7A5A12; --prof-8-bg: #F2EEE7;
  --prof-9: #24708A; --prof-9-bg: #E9F1F3;
  --prof-10: #6B4FC7; --prof-10-bg: #F0EDF9;
  --prof-11: #9C3D8A; --prof-11-bg: #F5ECF3;
  --prof-12: #4F5A66; --prof-12-bg: #EDEEF0;

  /* Dónde está el paciente: cada estado de flujo apunta a un semántico. */
  --flujo-sala:     var(--warn);  --flujo-sala-bg:     var(--warn-bg);
  --flujo-llamado:  var(--on-accent); --flujo-llamado-bg: var(--accent);
  --flujo-gabinete: var(--ok);    --flujo-gabinete-bg: var(--ok-bg);
  --flujo-caja:     var(--info);  --flujo-caja-bg:     var(--info-bg);
  --flujo-fuera:    var(--n-600); --flujo-fuera-bg:    var(--n-100);
  --flujo-novino:   var(--risk);  --flujo-novino-bg:   var(--risk-bg);

  /* La barra de lo siguiente (propuesta.md §3): una acción con acento. */
  --siguiente-bg:   var(--n-25);
  --siguiente-sep:  var(--sep-fuerte);

  /* ---------- SERIES DE GRÁFICO (las de Lydent, sin cambios) ---------- */
  --viz-1: #7f76dc;
  --viz-2: #00b5b5;
  --viz-3: #994b9e;
  --viz-4: #359bd9;
  --viz-5: #d76a87;
  --viz-seq-1: #e3e6fc;
  --viz-seq-2: #c5caf5;
  --viz-seq-3: #9da4e9;
  --viz-seq-4: #6f73d7;
  --viz-seq-5: #4746a5;
  --viz-div-neg: #00969f;
  --viz-div-mid: var(--n-200);
  --viz-div-pos: #aa55a4;

  /* ---------- TIPOGRAFÍA -----------------------------------------------
     IBM Plex (SIL OFL 1.1), servida en casa. Sans para la interfaz, Mono
     para cifras de código y referencias. Condensed se RETIRA: las
     micro-etiquetas en versalitas condensadas son la firma de Lydent, no
     la de macOS. El token se conserva como alias para no romper nada. */
  --font-ui:   "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-cond: var(--font-ui);
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --fs-micro: 0.6875rem;  /* 11px — rótulo de grupo de la lateral          */
  --fs-xs:    0.75rem;    /* 12px — metadatos, ayudas                      */
  --fs-sm:    0.8125rem;  /* 13px — CUERPO de la interfaz (macOS)          */
  --fs-base:  0.8125rem;  /* 13px — antes 14: el cuerpo de macOS           */
  --fs-md:    0.9375rem;  /* 15px — lectura, formularios largos            */
  --fs-lg:    1.0625rem;  /* 17px — título de sección                      */
  --fs-xl:    1.375rem;   /* 22px — título de página                       */
  --fs-2xl:   1.75rem;    /* 28px — solo la cifra de un KPI                */

  --lh-tight: 1.25;
  --lh-base:  1.45;
  --track-micro: 0.02em;  /* antes 0,06: sin versalitas no hace falta     */

  /* ---------- ESPACIADO (base 4, sin cambios) ------------------------- */
  --s-1:  0.125rem;
  --s-2:  0.25rem;
  --s-3:  0.375rem;
  --s-4:  0.5rem;
  --s-5:  0.75rem;
  --s-6:  1rem;
  --s-7:  1.25rem;
  --s-8:  1.5rem;
  --s-9:  2rem;
  --s-10: 2.5rem;
  --s-11: 3rem;

  /* ---------- RADIO: los de macOS ------------------------------------- */
  --r-sm: 4px;     /* píldora pequeña, chip                              */
  --r-md: 6px;     /* control: botón, campo, segmentado                  */
  --r-lg: 10px;    /* grupo de filas, tarjeta, hoja                      */
  --r-xl: 12px;    /* nuevo: ventana y modal                             */
  --r-pill: 999px;

  /* ---------- ELEVACIÓN ------------------------------------------------
     La sombra sigue indicando solo que algo flota. La de control es el
     medio píxel de macOS que da cuerpo a un botón o un segmento activo. */
  --sh-overlay: 0 0 0 .5px rgb(0 0 0 / 0.18), 0 12px 40px rgb(0 0 0 / 0.14), 0 2px 6px rgb(0 0 0 / 0.06);
  --sh-control: 0 .5px 1px rgb(0 0 0 / 0.12), 0 0 0 .5px rgb(0 0 0 / 0.08);   /* nuevo */
  --scrim: rgb(0 0 0 / 0.32);
  --sep:        rgb(0 0 0 / 0.08);   /* nuevo: separador translúcido, vale en cualquier fondo */
  --sep-fuerte: rgb(0 0 0 / 0.14);   /* nuevo */

  /* ---------- SUPERFICIE AJENA: WHATSAPP (sin cambios) ---------------- */
  --wa-fondo:   #EFEAE2;
  --wa-cab:     #F0F2F5;
  --wa-burbuja: #D9FDD3;
  --wa-tinta:   #111B21;
  --wa-tenue:   #667781;
  --wa-enlace:  #027EB5;
  --wa-tick:    #53BDEB;
  --wa-avatar:  #DFE5E7;

  /* ---------- BORDES --------------------------------------------------- */
  --bd:        1px solid var(--sep);
  --bd-strong: 1px solid var(--sep-fuerte);
  --bd-w-signal: 3px;

  /* ---------- FOCO: el anillo de macOS, del color del acento ---------- */
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);

  /* ---------- DENSIDAD: UNA (CEO, 2026-11-11) --------------------------
     Fila de 36 px: recepción y gabinete trabajan en pantallas de 26–32".
     Control de 26 px, el de macOS. Los selectores de densidad de Lydent se
     conservan abajo con los MISMOS valores, para que las plantillas que los
     llevan no cambien de aspecto. */
  --row-h:      36px;
  --cell-pad-y: var(--s-3);
  --cell-pad-x: var(--s-5);
  --cell-fs:    var(--fs-sm);
  --ctl-h:      26px;
  --ctl-fs:     var(--fs-sm);
  --ctl-pad-y:  var(--s-2);

  /* ---------- LAYOUT --------------------------------------------------- */
  --nav-w:      232px;   /* la lateral agrupada de macOS                  */
  --nav-w-min:  56px;
  --topbar-h:   44px;    /* barra clara                                   */
  --inspector-w: 300px;  /* nuevo: el inspector de la derecha             */
  --content-max: 1600px;
  --form-max: 720px;     /* ajustes al estilo de Ajustes del Sistema      */
  --conv-w:   300px;
  --aparte-w: 280px;

  /* ---------- MOVIMIENTO ----------------------------------------------- */
  --dur-fast: 90ms;
  --dur-base: 160ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

[data-density="comfortable"], [data-density="compact"], [data-density="denso"] {
  --row-h: 36px; --cell-pad-y: var(--s-3); --cell-pad-x: var(--s-5);
  --cell-fs: var(--fs-sm); --ctl-h: 26px; --ctl-fs: var(--fs-sm); --ctl-pad-y: var(--s-2);
}

/* ---------- MODO OSCURO ------------------------------------------------- */
[data-tema="oscuro"] {
  color-scheme: dark;
  --n-0:   #1E1E20;   /* ventana                                     */
  --n-25:  #232326;   /* inspector                                   */
  --n-50:  #262629;   /* lateral, fila par                           */
  --n-100: #3A3A3D;   /* pista de segmentado, separador              */
  --n-200: #48484B;
  --n-300: #636366;
  --n-400: #8E8E93;
  --n-500: #98989D;   /* tinta-3: 5,25 sobre la lateral              */
  --n-600: #AEAEB2;   /* tinta-2                                     */
  --n-700: #D1D1D6;
  --n-800: #E5E5EA;
  --n-900: #F5F5F7;   /* tinta                                       */
  --superficie: #2C2C2F;

  /* Receta invertida, como OdontoHR: tinta luminosa sobre fondo translúcido del mismo tono. */
  --ok:   #6FD6A0;  --ok-bg:   rgb(111 214 160 / 0.14);
  --warn: #F0B860;  --warn-bg: rgb(240 184 96 / 0.14);
  --risk: #FF8A80;  --risk-bg: rgb(255 138 128 / 0.14);
  --info: #7DB4F5;  --info-bg: rgb(125 180 245 / 0.14);
  --idle: #98989D;  --idle-bg: rgb(152 152 157 / 0.14);
  --ok-ink: var(--ok); --warn-ink: var(--warn); --idle-ink: var(--idle);

  --ahora: #FF6369;
  --sh-overlay: 0 0 0 .5px rgb(255 255 255 / 0.12), 0 12px 40px rgb(0 0 0 / 0.5);
  --sh-control: 0 .5px 1px rgb(0 0 0 / 0.4), 0 0 0 .5px rgb(255 255 255 / 0.1);
  --scrim: rgb(0 0 0 / 0.55);
  --sep:        rgb(255 255 255 / 0.09);
  --sep-fuerte: rgb(255 255 255 / 0.16);

  --prof-1: #A3A3C9; --prof-1-bg: #3B3B45;
  --prof-2: #84B6AF; --prof-2-bg: #343F3F;
  --prof-3: #CC9E78; --prof-3-bg: #443A33;
  --prof-4: #C9A5D3; --prof-4-bg: #443C47;
  --prof-5: #86ACC8; --prof-5-bg: #353D45;
  --prof-6: #D49FAD; --prof-6-bg: #463A3F;
  --prof-7: #9AB182; --prof-7-bg: #393E36;
  --prof-8: #B6A47D; --prof-8-bg: #3F3B34;
  --prof-9: #87B0BF; --prof-9-bg: #353E43;
  --prof-10: #AE9EE0; --prof-10-bg: #3E3A4A;
  --prof-11: #D1A4C9; --prof-11-bg: #453B45;
  --prof-12: #ADB2B8; --prof-12-bg: #3D3F41;
}

@media (prefers-color-scheme: dark) {
  [data-tema="auto"] {
  color-scheme: dark;
  --n-0:   #1E1E20;   /* ventana                                     */
  --n-25:  #232326;   /* inspector                                   */
  --n-50:  #262629;   /* lateral, fila par                           */
  --n-100: #3A3A3D;   /* pista de segmentado, separador              */
  --n-200: #48484B;
  --n-300: #636366;
  --n-400: #8E8E93;
  --n-500: #98989D;   /* tinta-3: 5,25 sobre la lateral              */
  --n-600: #AEAEB2;   /* tinta-2                                     */
  --n-700: #D1D1D6;
  --n-800: #E5E5EA;
  --n-900: #F5F5F7;   /* tinta                                       */
  --superficie: #2C2C2F;

  /* Receta invertida, como OdontoHR: tinta luminosa sobre fondo translúcido del mismo tono. */
  --ok:   #6FD6A0;  --ok-bg:   rgb(111 214 160 / 0.14);
  --warn: #F0B860;  --warn-bg: rgb(240 184 96 / 0.14);
  --risk: #FF8A80;  --risk-bg: rgb(255 138 128 / 0.14);
  --info: #7DB4F5;  --info-bg: rgb(125 180 245 / 0.14);
  --idle: #98989D;  --idle-bg: rgb(152 152 157 / 0.14);
  --ok-ink: var(--ok); --warn-ink: var(--warn); --idle-ink: var(--idle);

  --ahora: #FF6369;
  --sh-overlay: 0 0 0 .5px rgb(255 255 255 / 0.12), 0 12px 40px rgb(0 0 0 / 0.5);
  --sh-control: 0 .5px 1px rgb(0 0 0 / 0.4), 0 0 0 .5px rgb(255 255 255 / 0.1);
  --scrim: rgb(0 0 0 / 0.55);
  --sep:        rgb(255 255 255 / 0.09);
  --sep-fuerte: rgb(255 255 255 / 0.16);

  --prof-1: #A3A3C9; --prof-1-bg: #3B3B45;
  --prof-2: #84B6AF; --prof-2-bg: #343F3F;
  --prof-3: #CC9E78; --prof-3-bg: #443A33;
  --prof-4: #C9A5D3; --prof-4-bg: #443C47;
  --prof-5: #86ACC8; --prof-5-bg: #353D45;
  --prof-6: #D49FAD; --prof-6-bg: #463A3F;
  --prof-7: #9AB182; --prof-7-bg: #393E36;
  --prof-8: #B6A47D; --prof-8-bg: #3F3B34;
  --prof-9: #87B0BF; --prof-9-bg: #353E43;
  --prof-10: #AE9EE0; --prof-10-bg: #3E3A4A;
  --prof-11: #D1A4C9; --prof-11-bg: #453B45;
  --prof-12: #ADB2B8; --prof-12-bg: #3D3F41;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}