/* =====================================================================
   ORVIK OS · TOKENS v1.0
   Fuente única de diseño. Ningún color, medida, radio, sombra, fuente,
   duración o capa (z-index) se escribe fuera de este archivo.
   Si algo no existe aquí, NO se inventa: se pide a Dirección.

   Uso:
   - Oscuro por defecto en la Consola. Claro con <html data-tema="claro">.
   - Las variables --marca-* las escribe el motor de marca al iniciar sesión
     (clave-acceso). Si no llegan, quedan los valores de Orvik de abajo.
   ===================================================================== */

:root {
  /* ── 1. MARCA (las sobreescribe el motor de marca; por defecto, Orvik) ── */
  --marca-principal:        #4ECDC4;   /* aqua Orvik · CONFIRMADO el 16/oct/2026 */
  --marca-principal-texto:  #4ECDC4;   /* variante legible como texto sobre el fondo actual */
  --marca-sobre-principal:  #062A27;   /* texto encima de un fondo --marca-principal */
  --marca-suave:            rgba(78,205,196,.14);   /* `acento-suave` de 08-SISTEMA-VISUAL-v2 §1,
                                                       aprobado el 21/oct/2026.
                                                       Fondo de iconos, pastillas, halo, y la
                                                       casilla «trabaja» del Master Staffing */
  --marca-banda:            #070F1E;   /* banda superior de la app */
  --marca-sobre-banda:      #FFFFFF;
  --marca-degradado-texto:  linear-gradient(90deg, #4ECDC4 0%, #10B981 100%);
  --marca-degradado-boton:  linear-gradient(90deg, rgba(30,58,110,0.85) 0%, rgba(78,205,196,0.55) 100%);
  --marca-logo:             url("./img/marcas/orvik/orvik-imagotipo-oscuro.svg");
  --marca-isotipo:          url("./img/marcas/orvik/orvik-isotipo-oscuro.svg");

  /* ── 2. COLOR · TEMA OSCURO (por defecto) ── */
  --fondo:            #070F1E;
  --fondo-tinte:      radial-gradient(520px 620px at 2% 18%, rgba(78,205,196,0.10), transparent 70%),
                      radial-gradient(700px 420px at 40% -8%, rgba(109,40,217,0.08), transparent 70%);
  --superficie:       #0E1A2E;   /* tarjetas N1 */
  --superficie-2:     #12223A;   /* filas al pasar el cursor, celdas seleccionadas */
  --control:          rgba(255,255,255,0.06);  /* fondo de campos, segmentados, botones secundarios */
  --pista:            rgba(148,163,184,0.18);  /* barras de progreso vacías */
  --texto:            #F1F5F9;
  --texto-2:          #B4C0D0;
  --texto-3:          #8494AA;
  --linea:            rgba(148,163,184,0.16);
  --linea-fuerte:     rgba(148,163,184,0.38);
  --exito:            #10B981;   --exito-texto: #34D399;   --exito-suave: rgba(16,185,129,0.14);
  --peligro:          #EF4444;   --peligro-texto: #FCA5A5; --peligro-suave: rgba(239,68,68,0.12); --peligro-borde: rgba(239,68,68,0.45);
  --proceso:          #8B6CF0;   --proceso-texto: #B9A2F5; --proceso-suave: rgba(109,40,217,0.18);
  --neutro:           #475569;   --neutro-texto: #B4C0D0;  --neutro-suave: rgba(148,163,184,0.14);
  --foco:             #4ECDC4;   /* anillo de foco de teclado */


/* ── 2b. EL SEMÁFORO DEL ORVIK SCORE ──
   Autorizado el 16/oct/2026. Son los CINCO niveles del
   récord mensual del operador, y existen porque el documento de
   recompensas los define así: Púrpura > 99 · Verde 63–99 ·
   Naranja 41–62 · Ámbar 23–40 · Rojo 0–22.

   Valen SÓLO ahí. No son estados de la interfaz y no se usan para
   advertir: el anexo sigue diciendo que no existe el amarillo de
   alerta, y eso no cambia. Son el lenguaje del récord, igual en las
   siete operativas, y por eso tampoco se tiñen con la marca. */
--record-purpura:   #8B6CF0;   /* > 99 · operador estrella */
--record-verde:     #10B981;   /* 63–99 · estándar de excelencia */
--record-naranja:   #F97316;   /* 41–62 · cumple, bajo estándar */
--record-ambar:     #F59E0B;   /* 23–40 · riesgo */
--record-rojo:      #EF4444;   /* 0–22 · crítico */

/* Los cuatro niveles de membresía. Metales, no marca. */
--nivel-bronce:     #B06A3B;
--nivel-plata:      #A8B3C2;
--nivel-oro:        #D9A441;
--nivel-platino:    #C9D7E4;

  /* Vidrio (solo capa de navegación y controles) */
  /* ── EL GRANO ──
     Un desenfoque grande deja bandas visibles en superficies anchas.
     Apple le mete una textura finisima encima; esta es la misma idea,
     en escala de grises y al 10 % de opacidad dentro del propio SVG
     para que no haya forma de que se note como suciedad. */
  --vidrio-grano:     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23g)' opacity='.10'/></svg>");
  /* El tinte baja de 0.34 a 0.16. A 0.34 el vidrio TAPABA en vez de
     dejar pasar, y por eso sobre un fondo oscuro se leia como plastico
     pintado y no como vidrio. Medido lado a lado en el banco. */
  --vidrio-fondo:     var(--vidrio-grano), linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.08)), rgba(14,26,46,0.16);
  --vidrio-solido:    #101C30;   /* reemplazo cuando el usuario pide reducir transparencia */
  --vidrio-borde:     rgba(255,255,255,0.16);
  --vidrio-brillo:    rgba(255,255,255,0.30);
  --vidrio-sombra:    0 18px 50px rgba(0,0,0,0.45);
  /* Menos desenfoque y mas saturacion: el vidrio de Apple no borra lo
     de atras, lo REALZA. El brillo de mas compensa el tinte que se
     quito. */
  --vidrio-filtro:    blur(26px) saturate(210%) brightness(1.06);
  --vidrio-filtro-sm: blur(22px) saturate(190%);   /* controles pequeños sobre mapas */

  /* ── 3. TIPOGRAFÍA ── */
  --fuente:           "Geist", "SF Pro Text", -apple-system, system-ui, sans-serif;
  --fuente-mono:      "Geist Mono", ui-monospace, Menlo, monospace;
  /* Escala: tamaño / interlineado / peso. NO existen otros tamaños. */
  --t-pantalla:  600 30px/36px var(--fuente);   /* título de pantalla, 1 por pantalla */
  --t-cifra:     600 34px/40px var(--fuente);   /* número grande de indicador */
  --t-seccion:   600 20px/26px var(--fuente);   /* título de sección en pantallas de DETALLE */
  --t-tarjeta:   600 17px/22px var(--fuente);   /* título de tarjeta */
  --t-boton-g:   500 16px/22px var(--fuente);   /* botón grande (52), campos en celular y login */
  --t-cuerpo:    400 14px/20px var(--fuente);
  --t-cuerpo-f:  600 14px/20px var(--fuente);   /* cuerpo fuerte: nombres en listas */
  --t-sec:       500 13px/18px var(--fuente);   /* texto secundario, botones, campos */
  --t-nota:      500 12px/16px var(--fuente);   /* hora, ayuda, pies */
  --t-etiqueta:  600 11px/14px var(--fuente);   /* MAYÚSCULAS, espaciado 0.06em */
  --t-banda:     600 28px/34px var(--fuente);   /* título de la banda en la app y cifras secundarias */
  /* Pesos permitidos: 400, 500, 600 y 700 (700 SOLO en texto con degradado y en el botón de pánico). 800 y 900 prohibidos. */

  /* ── 4. ESPACIO (múltiplos de 4). NO existen otros valores. ── */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 20px;
  --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px;

  /* ── 5. FORMA ── */
  --r-contenedor: 24px;  /* barra lateral, hojas flotantes, tarjeta de login */
  --r-tarjeta:    20px;  /* tarjetas N1, barra superior, alertas */
  --r-control:    12px;  /* botones, campos, segmentados (14px solo en botón grande de 52) */
  --r-control-g:  14px;
  --r-chico:      8px;   /* miniaturas, logos en placa */
  --r-pildora:    999px; /* chips, insignias, interruptores */
  --toque:        44px;  /* área táctil mínima, sin excepción */

  /* ── 6. SOMBRAS (solo 3) ── */
  --sombra-1: 0 1px 2px rgba(0,0,0,0.20);          /* tarjeta en reposo (claro) */
  --sombra-2: 0 8px 24px rgba(7,15,30,0.25);       /* botón con degradado, menú abierto */
  --sombra-3: 0 24px 70px rgba(0,0,0,0.50);        /* hoja flotante, diálogo, login */

  /* ── 7. MOVIMIENTO ── */
  --dur-rapida: 120ms;   /* presionar */
  --dur-base:   180ms;   /* pasar el cursor, cambiar pestaña */
  --dur-lenta:  280ms;   /* abrir hoja, diálogo */
  --curva:      cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ── 8. CAPAS ── */
  --z-contenido: 1; --z-barra: 10; --z-lateral: 20; --z-hoja: 30;
  --z-dialogo: 40;  --z-aviso: 50; --z-panico: 60;

  /* ── 9. DISTRIBUCIÓN ── */
  --ancho-lateral:   248px;   /* barra lateral fija en escritorio */
  --ancho-max:       1600px;  /* contenido nunca más ancho que esto */
  --margen-pagina:   20px;    /* escritorio; 16px en tablet y celular */
  --hueco:           20px;    /* entre bloques de la página */
  --hueco-tarjetas:  16px;    /* entre tarjetas de una misma fila */
  --alto-barra:      60px;    /* barra superior de la consola */
  --alto-pestanas:   68px;    /* barra de pestañas flotante de la app */
}

/* ── TEMA CLARO ── */
:root[data-tema="claro"] {
  --marca-principal-texto: #0B7C75;
  --marca-suave:           rgba(14,159,150,.10);   /* 08-SISTEMA-VISUAL-v2 §1 */
  --marca-degradado-texto: linear-gradient(90deg, #0B7C75 0%, #047857 100%);
  --marca-degradado-boton: linear-gradient(90deg, #1E3A6E 0%, #0B7C75 100%);
  --marca-logo:            url("./img/marcas/orvik/orvik-imagotipo-claro.svg");
  --fondo:        #F4F7FA;
  --fondo-tinte:  radial-gradient(520px 620px at 2% 18%, rgba(78,205,196,0.12), transparent 70%),
                  radial-gradient(700px 420px at 40% -8%, rgba(109,40,217,0.05), transparent 70%);
  --superficie:   #FFFFFF;
  --superficie-2: #F1F5F9;
  --control:      rgba(255,255,255,0.55);
  --pista:        rgba(71,85,105,0.14);
  --texto:        #070F1E;
  --texto-2:      #475569;
  --texto-3:      #5B6B80;
  --linea:        rgba(71,85,105,0.16);
  --linea-fuerte: rgba(71,85,105,0.40);
  --exito-texto:  #047857;  --exito-suave: rgba(16,185,129,0.12);
  --peligro:      #DC2626;  --peligro-texto: #B91C1C; --peligro-suave: rgba(239,68,68,0.08); --peligro-borde: rgba(220,38,38,0.35);
  --proceso:      #6D28D9;  --proceso-texto: #6D28D9; --proceso-suave: rgba(109,40,217,0.10);
  --neutro-texto: #475569;  --neutro-suave: rgba(71,85,105,0.10);
  --foco:         #0B7C75;
--record-purpura: #6D28D9; --record-verde: #047857; --record-naranja: #C2410C;
--record-ambar:   #B45309; --record-rojo:  #DC2626;
  /* En claro el tinte baja MENOS --de 0.78 a 0.66-- porque aqui el
     vidrio sostiene texto oscuro: pasarse de transparente le quita el
     contraste a lo que lleva encima. */
  --vidrio-fondo:   var(--vidrio-grano), linear-gradient(145deg, rgba(255,255,255,0.66), rgba(255,255,255,0.30) 55%, rgba(255,255,255,0.46));
  --vidrio-solido:  #FFFFFF;
  --vidrio-borde:   rgba(255,255,255,0.90);
  --vidrio-brillo:  rgba(255,255,255,1);
  --vidrio-sombra:  0 18px 50px rgba(7,15,30,0.12);
  --sombra-1: 0 1px 2px rgba(7,15,30,0.06);
  --sombra-3: 0 24px 70px rgba(7,15,30,0.18);
}

/* ── EL MODO AUTOMÁTICO · ESTE BLOQUE ESTABA VACÍO Y ERA UN DEFECTO GRAVE ──

   La causa: dos hojas con dos valores por omisión distintos.
     · `panel.css` nació CLARO por omisión y se pone oscuro sólo con
       `@media (prefers-color-scheme: dark)`.
     · Estos tokens hacen la consola OSCURA por omisión, y este bloque
       --el que debía atender el caso contrario-- estaba vacío.

   Con el tema en «automático» el panel quita `data-tema` por completo
   (`app.js`), así que no queda nadie que desempate. Si además el sistema
   operativo está en claro, pasaba esto: el fondo salía oscuro de aquí y
   los textos salían navy de allá. Letra azul sobre fondo azul.

   Ahora, en automático con el sistema en claro, estos tokens dan el tema
   claro, que es lo mismo que hace `panel.css`: las dos hojas dicen lo
   mismo y no hay forma de que se crucen. En automático con el sistema en
   oscuro ya coincidían, porque las dos dan oscuro.

   El cuerpo NO está escrito a mano: es una copia exacta del tema claro de
   arriba, generada de él. Si alguien cambia aquel, hay que regenerar éste
   --o los dos claros se separan sin que nadie lo note. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
  --marca-principal-texto: #0B7C75;
  --marca-suave:           rgba(14,159,150,.10);   /* 08-SISTEMA-VISUAL-v2 §1 */
  --marca-degradado-texto: linear-gradient(90deg, #0B7C75 0%, #047857 100%);
  --marca-degradado-boton: linear-gradient(90deg, #1E3A6E 0%, #0B7C75 100%);
  --marca-logo:            url("./img/marcas/orvik/orvik-imagotipo-claro.svg");
  --fondo:        #F4F7FA;
  --fondo-tinte:  radial-gradient(520px 620px at 2% 18%, rgba(78,205,196,0.12), transparent 70%),
                  radial-gradient(700px 420px at 40% -8%, rgba(109,40,217,0.05), transparent 70%);
  --superficie:   #FFFFFF;
  --superficie-2: #F1F5F9;
  --control:      rgba(255,255,255,0.55);
  --pista:        rgba(71,85,105,0.14);
  --texto:        #070F1E;
  --texto-2:      #475569;
  --texto-3:      #5B6B80;
  --linea:        rgba(71,85,105,0.16);
  --linea-fuerte: rgba(71,85,105,0.40);
  --exito-texto:  #047857;  --exito-suave: rgba(16,185,129,0.12);
  --peligro:      #DC2626;  --peligro-texto: #B91C1C; --peligro-suave: rgba(239,68,68,0.08); --peligro-borde: rgba(220,38,38,0.35);
  --proceso:      #6D28D9;  --proceso-texto: #6D28D9; --proceso-suave: rgba(109,40,217,0.10);
  --neutro-texto: #475569;  --neutro-suave: rgba(71,85,105,0.10);
  --foco:         #0B7C75;
--record-purpura: #6D28D9; --record-verde: #047857; --record-naranja: #C2410C;
--record-ambar:   #B45309; --record-rojo:  #DC2626;
  /* En claro el tinte baja MENOS --de 0.78 a 0.66-- porque aqui el
     vidrio sostiene texto oscuro: pasarse de transparente le quita el
     contraste a lo que lleva encima. */
  --vidrio-fondo:   var(--vidrio-grano), linear-gradient(145deg, rgba(255,255,255,0.66), rgba(255,255,255,0.30) 55%, rgba(255,255,255,0.46));
  --vidrio-solido:  #FFFFFF;
  --vidrio-borde:   rgba(255,255,255,0.90);
  --vidrio-brillo:  rgba(255,255,255,1);
  --vidrio-sombra:  0 18px 50px rgba(7,15,30,0.12);
  --sombra-1: 0 1px 2px rgba(7,15,30,0.06);
  --sombra-3: 0 24px 70px rgba(7,15,30,0.18);
  }
}
@media (max-width: 1023px) { :root { --margen-pagina: 16px; --hueco: 16px; --hueco-tarjetas: 12px; } }
@media (prefers-reduced-transparency: reduce) {
  [data-vidrio] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--vidrio-solido) !important; }
  /* Sin transparencia no hay canto ni lente que mostrar: los dos
     dependen de que se vea lo que hay detras. */
  [data-vidrio]::before, [data-vidrio]::after { content: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}
@media (prefers-contrast: more) {
  .texto-degradado { -webkit-text-fill-color: currentColor; background: none !important; }
  :root { --linea: var(--linea-fuerte); }
}

/* =====================================================================
   LA RECETA DEL VIDRIO · completa
   Sección 5B del prompt maestro, textual en `Main.dc.html` del lienzo.

   Son CUATRO partes y antes sólo había dos. Por eso el vidrio se veía
   como un panel gris plano:
     1. fondo translúcido ............ estaba
     2. backdrop-filter .............. estaba
     3. BORDE CON BRILLO ESPECULAR ... faltaba   ← la que lo hace vidrio
     4. sombra profunda + brillo interior arriba ... faltaba

   La 3 pinta SÓLO el canto de 1 px, no la superficie: una máscara deja
   ver el degradado únicamente en el borde. Pintarlo sobre toda la caja
   no es un reflejo, es un velo —y eso fue lo que dejó el login blanco.

   Toda pieza de vidrio lleva `data-vidrio` y toma la receta de aquí.
   Nunca se repite por pantalla.
   ===================================================================== */

[data-vidrio] {
  position: relative;
  background: var(--vidrio-fondo);
  -webkit-backdrop-filter: var(--vidrio-filtro);
  backdrop-filter: var(--vidrio-filtro);
  border: 1px solid var(--vidrio-borde);
  box-shadow: inset 0 1px 0 var(--vidrio-brillo), var(--vidrio-sombra);
}

/* El canto. `padding:1px` + máscara que excluye el interior: el
   degradado sólo sobrevive en el milímetro del borde. */
[data-vidrio]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  pointer-events: none;
  /* ── EL CANTO SIGUE LA CURVA, NO LA DIAGONAL ──
     Era un degradado LINEAL a 160 grados: brillaba igual a lo largo de
     toda su diagonal, atravesando la pieza de esquina a esquina. La
     luz sobre un canto redondeado no hace eso. Pega arriba a la
     izquierda y vuelve a asomar abajo a la derecha, y se apaga en los
     costados --que es justo lo que hace un degradado CONICO--.

     Comparado lado a lado contra el de Apple el 20/oct: es la
     diferencia entre un canto que parece dibujado y uno que parece
     torneado. */
  background: conic-gradient(from 210deg,
    rgba(255,255,255,.80),
    rgba(255,255,255,.06) 22%,
    rgba(255,255,255,.04) 45%,
    rgba(255,255,255,.60) 62%,
    rgba(255,255,255,.05) 80%,
    rgba(255,255,255,.80));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ── LA LENTE DEL CANTO: SE PROBO Y SE QUITO · 20/oct ──

   Aqui vivia un `[data-vidrio]::after` con su propio
   `backdrop-filter: blur(3px)` y una mascara radial, para fingir el
   grosor del vidrio: CSS difumina lo que hay detras pero no lo
   desplaza, asi que al canto le falta la refraccion que le da cuerpo.

   DURO UNAS HORAS. Se vio en el menu «Mas» del telefono: las
   tres primeras entradas --Clientes y ventas, Capital Humano,
   Finanzas-- salian BORROSAS, y las de abajo nitidas.

   La causa es el orden de pintado. Un `::after` se pinta DESPUES del
   contenido de su elemento, asi que su `backdrop-filter` no desenfoca
   lo que hay detras de la tarjeta: desenfoca LO QUE LA TARJETA TIENE
   DENTRO y quedo debajo de el. En una pieza chica y centrada --la
   barra, el login-- no se notaba. En una hoja alta y llena de
   renglones, la mascara radial deja una banda enorme arriba y abajo, y
   ahi el texto se vuelve ilegible.

   No se arregla con `z-index: -1`: eso la manda detras del fondo del
   propio elemento y deja de verse. Haria falta una capa hermana, fuera
   del elemento, y eso ya no es un token: es cambiarle el marcado a
   cada pieza de vidrio del sistema.

   Asi que se va. De la receta nueva se quedan las tres que si
   funcionan: el tinte que deja pasar el color, el canto conico y el
   grano. Si algun dia se quiere el grosor, la via es una capa hermana
   y hay que probarla EN UNA PIEZA ALTA Y CON TEXTO, que es donde
   falla. */

/* Nunca vidrio sobre vidrio: un control encima de una barra de vidrio
   va sin desenfoque propio, sin su canto y sin su lente. */
[data-vidrio] [data-vidrio] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
[data-vidrio] [data-vidrio]::before { content: none }

/* Los controles pequeños sobre un mapa llevan el desenfoque corto. */
[data-vidrio][data-vidrio-sm] {
  -webkit-backdrop-filter: var(--vidrio-filtro-sm);
  backdrop-filter: var(--vidrio-filtro-sm);
}

/* ── UN CONTENEDOR PUEDE FIJAR SU TEMA ──
   El login lo usa: `data-tema="oscuro"` en `#login` y los tokens dan
   los valores oscuros ahí dentro, aunque el resto del panel esté en
   claro. Es lo que evita los veinte `!important` que había. */
[data-tema="oscuro"]:not(:root) {
  --fondo:        #070F1E;
  --superficie:   #0E1A2E;
  --superficie-2: #12223A;
  --control:      rgba(255,255,255,0.06);
  --texto:        #F1F5F9;
  --texto-2:      #B4C0D0;
  --texto-3:      #8494AA;
  --linea:        rgba(148,163,184,0.16);
  --linea-fuerte: rgba(148,163,184,0.38);
  --vidrio-fondo: linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.06)), rgba(14,26,46,0.34);
  --vidrio-borde: rgba(255,255,255,0.16);
  --vidrio-brillo: rgba(255,255,255,0.22);
  --vidrio-sombra: 0 18px 50px rgba(0,0,0,0.45);
  --vidrio-solido: #101C30;
  --marca-principal-texto: #4ECDC4;
  --foco: #4ECDC4;
  --peligro: #EF4444; --peligro-texto: #FCA5A5;
}