/* Tokens EXTRAÍDOS del panel que ya está en producción (styles.css, bloque .khd) para que
   la miniaplicación se sienta la continuación del cuadro del know-how, no otra cosa.
   Superficie de producto: colores fijos, no dependen del tema del sistema. */
.ops {
  color-scheme: dark;

  /* ── superficies (tres planos de profundidad) ───────────────────────── */
  --s0: #05070b;              /* fondo de la aplicación */
  --s1: #0d1119;              /* lienzo del módulo */
  --s2: #141922;              /* tarjeta */
  --s2-2: #10141c;            /* segundo alto del degradado de tarjeta */
  --s3: #1b212c;              /* elemento elevado: panel lateral, menú, tooltip */
  --s3-2: #141922;            /* segundo alto del degradado del elemento elevado */
  --linea: #242c3a;
  --linea-elev: #2c3547;      /* borde de superficie elevada (detalle, modal) */
  --linea-fuerte: #3a4658;    /* borde en hover / énfasis */
  --linea-suave: rgba(255, 255, 255, .07);
  --velo: rgba(255, 255, 255, .035);        /* relleno apenas insinuado (campos, filas) */
  --velo-fuerte: rgba(255, 255, 255, .07);  /* relleno de estado (pestaña activa, pista) */
  --velo-barra: rgba(13, 17, 25, .82);      /* barra superior translúcida */
  --velo-modal: rgba(3, 5, 9, .68);         /* velo del diálogo de confirmación */
  --velo-capa: rgba(3, 5, 9, .82);          /* fondo del overlay a pantalla completa */

  /* ── texto ──────────────────────────────────────────────────────────── */
  --tx: #eef2f7;
  --tx-mu: #b4becb;           /* secundario */
  --tx-dim: #9aa6b6;          /* auxiliar; nunca por debajo de 12px */
  --tx-inv: #08111f;          /* texto SOBRE la superficie de foco (--c-crema) */

  /* ── color semántico (cada uno tiene UN significado) ─────────────────── */
  --c-azul: #4f8cff;          /* estructura y marca */
  --c-azul-dato: #6e86f5;     /* magnitudes en gráficos */
  --c-crema: #fffce1;         /* foco / acción destacada (crema de marca) */
  --c-crema-h: #ffffff;       /* … su hover */
  --c-crema-2: #d8d1a4;       /* … su segundo alto (barra activa) */
  --c-menta: #2ee6c5;         /* resultado positivo, sistema activo */
  --c-ok: #46d39a;            /* confirmado */
  --c-ambar: #e8b53b;         /* atención, pendiente */
  --c-coral: #e0685c;         /* incidencia crítica, solo aquí */
  --c-violeta: #8b5cff;       /* categoría (familia eléctrico) */
  --c-gris-dato: #46536b;     /* categoría neutra */
  --c-cta: #1d4ed8;           /* acción primaria, reservado */

  /* MANCHA de dato (segmentos de barra, series). Se separan del token de texto porque el
     umbral es distinto: un objeto gráfico pide 3:1 (WCAG 1.4.11) y una letra 4,5:1. Sobre
     negro coinciden con el acento de marca; sobre claro NO pueden (ver el bloque claro). */
  --c-coral-dato: #e0685c;
  --c-menta-dato: #2ee6c5;
  --c-violeta-dato: #8b5cff;
  --c-ok-dato: #46d39a;

  /* variantes de TEXTO de cada acento: el acento puro no llega a AA como letra */
  --c-azul-tx: #9dbcff;
  --c-menta-tx: #6ee9c6;
  --c-ambar-tx: #f0c766;
  --c-coral-tx: #f0938a;

  /* ── forma ──────────────────────────────────────────────────────────── */
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 20px; --r-xxl: 20px;
  --sombra-1: 0 12px 26px -14px rgba(0, 0, 0, .6);
  --sombra-2: 0 24px 50px -22px rgba(0, 0, 0, .8);
  --sombra-3: 0 40px 90px -40px rgba(0, 0, 0, .9);
  --sombra-hoja: 0 -20px 50px -20px rgba(0, 0, 0, .85);

  /* ── tipografía (el par de marca) ────────────────────────────────────── */
  --display: 'Inter Tight', system-ui, sans-serif;
  --body: 'Geist', system-ui, sans-serif;

  /* ── ritmo ──────────────────────────────────────────────────────────── */
  --e-salida: cubic-bezier(.2, 0, 0, 1);
  --e-entrada: cubic-bezier(.05, .7, .1, 1);
  --t-rapido: .18s;
  --t-medio: .28s;
}

/* ══ LA MISMA APLICACIÓN EN MENTOLADO CLARO ═══════════════════════════════
   Valores medidos del boceto A aprobado (preview-ops-home-a.html). Sólo cambian
   los VALORES: ni un nombre de token se renombra, así las vistas no se tocan.

   FRONTERA: el selector es `.ops.ops-capa` (0,2,0 > 0,1,0), y `.ops-capa` sólo
   existe en el overlay que crea abrir.js. El panel del capítulo es `.khd.ops`,
   nunca lleva `.ops-capa`: sus valores oscuros quedan intactos.

   Trampa medida y resuelta: sobre superficie clara `#2ee6c5` da 1,6:1 y
   `#4f8cff` 3,1:1. Ningún acento entra como texto con su valor de marca: cada
   uno tiene aquí su variante oscurecida, con el MISMO significado. Los ratios
   anotados son contra la superficie donde ese token realmente se usa. */
.ops.ops-capa {
  color-scheme: light;        /* si no, scrollbars y <select> siguen pintándose en oscuro */

  /* ── superficies: escritorio mentolado + tarjeta-app ─────────────────── */
  --mesa: #a6b9b5;            /* el escritorio, fuera de la tarjeta */
  --hueco: #e9efeb;           /* plano hundido / zócalo */
  --s0: #f6f9f7;              /* «carta»: fondo de la aplicación */
  --s1: #f1f5f2;              /* «carta-2»: lienzo del módulo */
  --s2: #ffffff;              /* tarjeta */
  --s2-2: #ffffff;
  --s3: #ffffff;              /* elevado: en claro se separa por SOMBRA, no por tono */
  --s3-2: #ffffff;
  --linea: #dbe3de;
  --linea-elev: #dbe3de;
  --linea-fuerte: #c9d4ce;
  --linea-suave: rgba(14, 21, 18, .09);
  --velo: rgba(14, 21, 18, .04);
  --velo-fuerte: rgba(14, 21, 18, .08);
  --velo-barra: rgba(246, 249, 247, .88);
  --velo-modal: rgba(10, 17, 15, .5);
  --velo-capa: #a6b9b5;       /* el escritorio es OPACO: es una mesa, no un cristal */

  /* ── texto ──────────────────────────────────────────────────────────── */
  --tx: #0e1512;              /* 17,5:1 sobre carta */
  --tx-mu: #4c5a55;           /* 6,8:1 */
  --tx-dim: #5c6b66;          /* 5,3:1 */
  --tx-inv: #f6f9f7;          /* la superficie de foco se invierte: aquí el texto es claro */

  /* ── color semántico: mismo significado, valor que SÍ llega a AA ──────── */
  --c-azul: #2f47bd;          /* 7,2:1 — estructura y marca */
  --c-azul-dato: #6e86f5;     /* 3,1:1 — sólo dato: relleno de barras y cifra display */
  --c-crema: #12181a;         /* foco: en claro la píldora se invierte a tinta (16,9:1) */
  --c-crema-h: #232b2e;
  --c-crema-2: #2b3538;
  --c-menta: #0d7d6b;         /* 4,8:1 */
  --c-ok: #0f7a52;            /* 5,1:1 */
  --c-ambar: #8a6410;         /* 5,1:1 */
  --c-coral: #b23c2f;         /* 5,5:1 */
  --c-violeta: #6539c9;       /* 6,6:1 */
  --c-gris-dato: #46536b;     /* 7,3:1 */
  --c-cta: #1d4ed8;           /* 6,7:1 con texto blanco */

  --c-azul-tx: #2f47bd;
  --c-menta-tx: #0d7d6b;
  --c-ambar-tx: #8a6410;
  --c-coral-tx: #b23c2f;

  /* MANCHA de dato: aquí el acento SÍ conserva su matiz de marca, porque un segmento de
     barra es objeto gráfico (3:1, WCAG 1.4.11) y no letra. Sin esta separación la paleta
     se volvía barrosa: ladrillo/marino/verde bosque en vez de coral/azul/menta. Ratios
     medidos sobre blanco: coral 3,33 · violeta 4,14 · menta 3,74 · ok 3,63 · azul 3,10. */
  --c-coral-dato: #e0685c;
  --c-violeta-dato: #8b5cff;
  --c-menta-dato: #0f9488;
  --c-ok-dato: #12996a;

  /* ── forma: sombras de TINTA, nunca de negro puro (leerían como mugre) ── */
  --r-xxl: 32px;              /* radio de la tarjeta-app (boceto A) */
  --sombra-1: 0 1px 2px -1px rgba(14, 21, 18, .10);
  --sombra-2: 0 16px 34px -18px rgba(14, 21, 18, .30);
  --sombra-3: 0 2px 4px -2px rgba(14, 21, 18, .18), 0 34px 70px -30px rgba(14, 21, 18, .42),
              0 90px 140px -70px rgba(14, 21, 18, .5);
  --sombra-hoja: 0 -20px 50px -22px rgba(14, 21, 18, .45);
}

@media (prefers-reduced-motion: reduce) {
  .ops { --t-rapido: .001s; --t-medio: .001s; }
  .ops * { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}