/* ============================================================
   ZORVIX · Sistema de tokens
   Version 1.6

   Un solo archivo de marca para todo el ecosistema.
   Cambia los hex del bloque MARCA y las apps cambian de piel
   sin tocar una linea de logica.

   Registros visuales:
     [data-tema="oscuro"]  negro con nubes de luz lavanda  -> cliente
     [data-tema="claro"]   claro con marca                 -> staff
     [data-densidad="..."] compacta | amplia               -> modificadores

   La escala de datos vive en :root y no se redefine por tema: un dato
   no cambia de significado porque el fondo sea negro.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {

  /* ---------- MARCA · unica fuente de verdad del color ---------- */
  --zx-violeta-900: #33236B;
  --zx-violeta-800: #4B3392;
  --zx-violeta-700: #5B3EAD;
  --zx-violeta-600: #6B51B8;
  --zx-violeta-500: #7B5FC7;
  --zx-violeta-400: #8B6FD4;
  --zx-violeta-300: #A98FE0;
  --zx-violeta-200: #C6B4F0;
  --zx-violeta-100: #E2DEEF;
  --zx-violeta-050: #F1EDFB;

  --zx-lavanda:   #D9CBFA;
  --zx-lavanda-2: #B79BF0;
  --zx-lavanda-3: #EFE4FF;
  --zx-rosa:      #E8C4EE;

  --zx-grafito: #535353;
  --zx-tinta:   #1C1B22;
  --zx-noche:   #05030B;

  /* ---------- Estado · gana sobre el color de marca ---------- */
  --zx-ok:      #12876B;
  --zx-ok-bg:   #E2EFEA;
  --zx-ok-txt:  #0B6350;
  --zx-alerta:      #BA7517;
  --zx-alerta-bg:   #FAEEDA;
  --zx-alerta-txt:  #854F0B;
  --zx-error:      #E24B4A;
  --zx-error-bg:   #FCEBEB;
  --zx-error-txt:  #A32D2D;

  /* ---------- ESCALA DE DATOS ----------
     Anillos, barras, medidores y lineas. Nunca en botones, bordes,
     fondos, pildoras de estado ni marca. El violeta de marca es el
     punto medio: la escala ancla en Zorvix en vez de competirle. */
  --zx-d-0:   #00D2BE;   /* aqua Petronas       0%  */
  --zx-d-26:  #2E9BD8;   /* azul puente        26%  */
  --zx-d-55:  #7B5FC7;   /* violeta de marca   55%  */
  --zx-d-80:  #B15FD8;   /* violeta claro      80%  */
  --zx-d-100: #F26FCB;   /* magenta           100%  */

  /* Barras y medidores de CSS puro. Los SVG usan las paradas sueltas. */
  --zx-escala: linear-gradient(90deg,
    var(--zx-d-0) 0%, var(--zx-d-26) 26%, var(--zx-d-55) 55%,
    var(--zx-d-80) 80%, var(--zx-d-100) 100%);
  --zx-escala-v: linear-gradient(0deg,
    var(--zx-d-0) 0%, var(--zx-d-26) 30%, var(--zx-d-55) 62%,
    var(--zx-d-100) 100%);

  /* ---------- Tipografia ---------- */
  --zx-display: 'Space Grotesk', system-ui, sans-serif;
  --zx-texto:   'Inter', system-ui, sans-serif;
  --zx-mono:    'JetBrains Mono', ui-monospace, monospace;

  --zx-track-marca: 0.24em;
  --zx-track-eyebrow: 0.14em;

  /* ---------- Geometria ---------- */
  --zx-r-control: 8px;
  --zx-r-tarjeta: 12px;
  --zx-r-cristal: 20px;
  --zx-r-widget:  20px;
  --zx-hairline: 0.5px;

  /* ---------- Densidad · comoda por defecto ---------- */
  --zx-alto-control: 40px;
  --zx-alto-fila:    38px;
  --zx-pad-tarjeta:  20px;
  --zx-txt-cuerpo:   14px;
  --zx-txt-dato:     15px;
  --zx-gap:          14px;

  /* ---------- Movimiento ---------- */
  --zx-rapido: .18s;
  --zx-base:   .32s;
  --zx-suave:  cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   REGISTRO CLARO · staff, documentos, impresion
   Es el tema por defecto: el unico que sobrevive impreso.
   ============================================================ */
:root,
[data-tema="claro"] {
  --zx-lienzo:      #EDEBF3;
  --zx-superficie:  #FFFFFF;
  --zx-superficie-2:#F7F6FB;
  --zx-hover:       #F9F7FD;

  --zx-borde:        #DCD8EA;
  --zx-borde-fuerte: #CFC4E8;

  --zx-txt:      #1C1B22;
  --zx-txt-2:    #6E6980;
  --zx-txt-3:    #8B849C;
  --zx-txt-marca:#5B3EAD;

  --zx-acento:       #5B3EAD;
  --zx-acento-tenue: #F1EDFB;
  --zx-sobre-acento: #FFFFFF;

  /* en claro el objeto no emite luz: proyecta sombra de color */
  --zx-glow-boton: 0 1px 2px rgba(91,62,173,.18), 0 4px 12px rgba(91,62,173,.14);
  --zx-glow-boton-hover: 0 2px 4px rgba(91,62,173,.22), 0 8px 22px rgba(91,62,173,.22);
  --zx-glow-icono: drop-shadow(2px 3px 5px rgba(91,62,173,.28));

  --zx-pista:  #EFEDF6;
  --zx-grad-a: #C6B4F0;
  --zx-grad-b: #5B3EAD;

  --zx-reticula: rgba(91,62,173,.05);
}

/* ============================================================
   REGISTRO OSCURO · cliente, login, portada
   Negro de base; el color lo ponen las nubes de luz.
   ============================================================ */
[data-tema="oscuro"] {
  --zx-lienzo:      #05030B;
  --zx-superficie:  rgba(255,255,255,.07);
  --zx-superficie-2:rgba(255,255,255,.04);
  --zx-hover:       rgba(255,255,255,.11);

  --zx-borde:        rgba(224,214,252,.32);
  --zx-borde-fuerte: rgba(240,232,255,.70);

  --zx-txt:      #FFFFFF;
  --zx-txt-2:    rgba(237,228,255,.84);
  --zx-txt-3:    rgba(224,214,252,.72);
  --zx-txt-marca:#E8DEFF;

  --zx-acento:       #FFFFFF;
  --zx-acento-tenue: rgba(255,255,255,.10);
  --zx-sobre-acento: #2A1B55;

  /* Anillo pegado al borde + halo cerrado + halo abierto. El anillo es lo
     que hace que se lea como filo encendido y no como mancha borrosa. */
  --zx-glow-boton: 0 0 0 1px rgba(255,255,255,.50),
                   0 0 18px rgba(198,180,240,.70),
                   0 0 44px rgba(150,116,235,.45);
  --zx-glow-boton-hover: 0 0 0 1px rgba(255,255,255,.85),
                         0 0 26px rgba(224,214,252,.90),
                         0 0 62px rgba(168,140,232,.60);
  --zx-glow-icono: drop-shadow(0 0 10px rgba(198,180,240,.75));

  --zx-pista:  rgba(255,255,255,.13);
  --zx-grad-a: #8E6FE0;
  --zx-grad-b: #F2E6FF;

  --zx-reticula: rgba(255,255,255,.03);
}

/* ============================================================
   DENSIDAD · un atributo, cinco variables. No son temas aparte.
   ============================================================ */
[data-densidad="compacta"] {
  --zx-alto-control: 30px;
  --zx-alto-fila:    33px;
  --zx-pad-tarjeta:  13px;
  --zx-txt-cuerpo:   12.5px;
  --zx-txt-dato:     13px;
  --zx-gap:          10px;
}

/* Se toca con guante, de pie, con prisa. 30px no alcanza. */
[data-densidad="amplia"] {
  --zx-alto-control: 52px;
  --zx-alto-fila:    56px;
  --zx-pad-tarjeta:  18px;
  --zx-txt-cuerpo:   14px;
  --zx-txt-dato:     15px;
  --zx-gap:          14px;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zx-lienzo);
  color: var(--zx-txt);
  font-family: var(--zx-texto);
  font-size: var(--zx-txt-cuerpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.zx-luz { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
          background: var(--zx-lienzo); }

/* ============================================================
   NUBES DE LUZ
   Formas desenfocadas, no degradados radiales. Un degradado radial se ve
   como halo simetrico; una forma con blur se ve como luz cayendo.
   ============================================================ */
.zx-nube { position: absolute; border-radius: 50%; filter: blur(78px); pointer-events: none; }
/* El staff no lleva nubes: el claro es lienzo de trabajo, no portada. */
[data-tema="claro"] .zx-nube { display: none; }

.zx-reticula {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--zx-reticula) .5px, transparent .5px),
    linear-gradient(90deg, var(--zx-reticula) .5px, transparent .5px);
  background-size: 68px 68px;
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
.zx-wordmark {
  font-family: var(--zx-display);
  letter-spacing: var(--zx-track-marca);
  color: var(--zx-txt);
  font-weight: 400;
}
.zx-titulo { font-family: var(--zx-display); font-size: 22px; font-weight: 400; margin: 0; color: var(--zx-txt); }
.zx-eyebrow {
  font-size: 10.5px;
  letter-spacing: var(--zx-track-eyebrow);
  text-transform: uppercase;
  color: var(--zx-txt-3);
}
/* Folios y cifras. La mono alineada en columna permite comparar
   magnitudes sin leer los digitos. */
.zx-dato  { font-family: var(--zx-mono); font-size: var(--zx-txt-dato); }
.zx-folio { font-family: var(--zx-mono); font-size: 11.5px; color: var(--zx-txt-marca); }
.zx-num   { font-family: var(--zx-mono); font-size: 11.5px; text-align: right; }

/* ============================================================
   SUPERFICIES
   ============================================================ */
.zx-tarjeta {
  background: var(--zx-superficie);
  border: var(--zx-hairline) solid var(--zx-borde);
  border-radius: var(--zx-r-tarjeta);
  padding: var(--zx-pad-tarjeta);
}

/* Cristal: deja pasar la luz de las nubes que quedan detras. */
.zx-cristal, .zx-widget {
  position: relative;
  border-radius: var(--zx-r-cristal);
  padding: var(--zx-pad-tarjeta);
  overflow: hidden;
  border: var(--zx-hairline) solid var(--zx-borde);
  transition: all var(--zx-base) var(--zx-suave);
}
.zx-widget { padding: 16px 17px; }
.zx-widget::after { content:''; position:absolute; top:0; left:0; right:0; height:60px; pointer-events:none; }

[data-tema="oscuro"] .zx-cristal,
[data-tema="oscuro"] .zx-widget {
  background: linear-gradient(158deg, rgba(198,180,240,.20) 0%, rgba(124,98,196,.13) 52%, rgba(255,255,255,.04) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 12px 34px rgba(10,4,30,.60);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
[data-tema="oscuro"] .zx-widget::after {
  background: radial-gradient(ellipse 140px 56px at 24% 0%, rgba(240,232,255,.22), transparent 70%);
}
[data-tema="oscuro"] .zx-cristal:hover,
[data-tema="oscuro"] .zx-widget:hover {
  border-color: var(--zx-borde-fuerte);
  background: linear-gradient(158deg, rgba(214,200,250,.30) 0%, rgba(150,120,222,.20) 52%, rgba(255,255,255,.07) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52), 0 0 42px rgba(186,158,246,.42), 0 14px 40px rgba(10,4,30,.65);
}

/* En claro el objeto no emite luz: se eleva y proyecta sombra de color. */
[data-tema="claro"] .zx-cristal,
[data-tema="claro"] .zx-widget {
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(91,62,173,.05), 0 8px 24px rgba(91,62,173,.09);
}
[data-tema="claro"] .zx-widget::after {
  background: radial-gradient(ellipse 180px 90px at 82% -10%, rgba(169,143,224,.16), transparent 68%);
}
[data-tema="claro"] .zx-cristal:hover,
[data-tema="claro"] .zx-widget:hover {
  border-color: var(--zx-violeta-300); transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(91,62,173,.08), 0 12px 30px rgba(91,62,173,.16);
}

/* Sin backdrop-filter en tactil: obliga a recomponer capas en cada scroll. */
@media (hover: none) and (pointer: coarse) {
  [data-tema="oscuro"] .zx-cristal,
  [data-tema="oscuro"] .zx-widget {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(198,180,240,.16);
  }
}

.zx-widget-etq { position:relative; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--zx-txt-3); }
/* El dato es el protagonista; el texto explica, no compite. */
.zx-widget-num { position:relative; font-family: var(--zx-display); font-size:42px; line-height:1;
  color: var(--zx-txt); margin-top:9px; letter-spacing:-.02em; }
.zx-widget-pie { position:relative; font-size:11px; color: var(--zx-txt-3); margin-top:8px; }

.zx-widget:hover .zx-anillo { border-color: var(--zx-borde-fuerte); }
[data-tema="oscuro"] .zx-widget:hover .zx-anillo { box-shadow: 0 0 22px rgba(224,214,252,.7); color:#fff; }

/* ============================================================
   MOSAICO · tarjeta de modulo y de destino
   Vive aqui y no en el index de cada app: si cada app lo redefine,
   a la tercera ya no se parecen.
   ============================================================ */
.zx-mosaico {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--zx-texto);
  background: var(--zx-superficie);
  border: var(--zx-hairline) solid var(--zx-borde);
  border-radius: var(--zx-r-widget);
  padding: 17px;
  transition: all var(--zx-base) var(--zx-suave);
}
[data-tema="oscuro"] .zx-mosaico {
  background: linear-gradient(158deg, rgba(198,180,240,.20) 0%, rgba(124,98,196,.13) 52%, rgba(255,255,255,.04) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 12px 34px rgba(10,4,30,.6);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.zx-mosaico:hover { border-color: var(--zx-borde-fuerte); }
[data-tema="oscuro"] .zx-mosaico:hover {
  background: linear-gradient(158deg, rgba(214,200,250,.30) 0%, rgba(150,120,222,.20) 52%, rgba(255,255,255,.07) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52), 0 0 42px rgba(186,158,246,.42);
}
[data-tema="claro"] .zx-mosaico:hover { box-shadow: 0 6px 22px rgba(91,62,173,.14); transform: translateY(-1px); }
.zx-mosaico:hover .zx-anillo { border-color: var(--zx-borde-fuerte); }
[data-tema="oscuro"] .zx-mosaico:hover .zx-anillo { box-shadow: 0 0 22px rgba(224,214,252,.7); color:#fff; }
.zx-mosaico:focus-visible { outline: 2px solid var(--zx-violeta-300); outline-offset: 3px; }

/* Bloqueado se muestra, atenuado: del lado del staff el usuario sabe que
   existe y a quien pedirle acceso. NUNCA en la fachada de clientes. */
.zx-mosaico[disabled] { opacity: .32; cursor: not-allowed; }
.zx-mosaico[disabled]:hover { border-color: var(--zx-borde); box-shadow: none; transform: none; }
.zx-mosaico-nombre { display:block; font-size: 14.5px; color: var(--zx-txt); margin-top: 13px; position:relative; }
.zx-mosaico-desc   { display:block; font-size: 11.5px; color: var(--zx-txt-3); margin-top: 4px; line-height: 1.45; position:relative; }

/* ============================================================
   CONTROLES
   ============================================================ */
.zx-btn {
  height: var(--zx-alto-control);
  padding: 0 20px;
  border: none;
  border-radius: 11px;
  background: var(--zx-acento);
  color: var(--zx-sobre-acento);
  font-family: var(--zx-texto);
  font-size: 13.5px;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: var(--zx-glow-boton);
  transition: all var(--zx-base) var(--zx-suave);
}
/* Sobre nubes de luz el violeta se pierde; el blanco encendido jala la mirada. */
[data-tema="oscuro"] .zx-btn { background: linear-gradient(180deg, #FFFFFF, #E9DEFF); }
.zx-btn:hover { box-shadow: var(--zx-glow-boton-hover); }
.zx-btn:focus-visible { outline: 2px solid var(--zx-violeta-300); outline-offset: 2px; }

/* Un solo boton brillante por vista. Si dos brillan igual, el glow deja de
   ser jerarquia y alguien cancela cuando queria confirmar. */
.zx-btn-2 {
  height: var(--zx-alto-control);
  padding: 0 20px;
  border: var(--zx-hairline) solid var(--zx-borde);
  border-radius: 11px;
  background: transparent;
  color: var(--zx-txt-2);
  font-family: var(--zx-texto);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--zx-base) var(--zx-suave);
}
[data-tema="oscuro"] .zx-btn-2 { background: rgba(255,255,255,.07); color: #EDE4FF; }
.zx-btn-2:hover { border-color: var(--zx-borde-fuerte); color: var(--zx-txt); }
.zx-btn-2:focus-visible { outline: 2px solid var(--zx-violeta-300); outline-offset: 2px; }

.zx-campo {
  width: 100%;
  height: var(--zx-alto-control);
  padding: 0 13px;
  border-radius: 10px;
  border: var(--zx-hairline) solid var(--zx-borde);
  background: var(--zx-superficie);
  color: var(--zx-txt);
  font-family: var(--zx-texto);
  font-size: 13px;
}
[data-tema="oscuro"] .zx-campo { background: rgba(255,255,255,.08); }
.zx-campo::placeholder { color: var(--zx-txt-3); }
.zx-campo:focus { outline: none; border-color: var(--zx-borde-fuerte); box-shadow: 0 0 0 3px var(--zx-acento-tenue); }

.zx-etiqueta { display:block; font-size: 11.5px; letter-spacing:.06em; color: var(--zx-txt-2); margin-bottom: 7px; }

/* ============================================================
   ICONOS
   El anillo repite la geometria del simbolo. Contenedor cuando el icono
   es un destino que se toca; sin contenedor cuando acompana texto.
   ============================================================ */
.zx-anillo {
  width: 40px; height: 40px; flex-shrink: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--zx-acento-tenue);
  border: var(--zx-hairline) solid var(--zx-borde);
  color: var(--zx-txt-marca);
  transition: all var(--zx-base) var(--zx-suave);
}
[data-tema="oscuro"] .zx-anillo {
  background: rgba(255,255,255,.14);
  border-color: rgba(232,222,255,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 0 18px rgba(198,180,240,.35);
  color: #F4EDFF;
}
[data-tema="claro"] .zx-anillo { color: var(--zx-violeta-700); }

/* La extrusion solo existe de 48px para arriba. Abajo de eso el
   desplazamiento se vuelve borron y estorba. */
.zx-icono-3d { filter: var(--zx-glow-icono); }

/* ============================================================
   PILDORAS DE ESTADO
   ============================================================ */
.zx-pill {
  display: inline-block;
  font-size: 11px; padding: 3px 11px; border-radius: 99px;
  background: var(--zx-acento-tenue); color: var(--zx-txt-marca);
}
.zx-pill.ok     { background: var(--zx-ok-bg);     color: var(--zx-ok-txt); }
.zx-pill.alerta { background: var(--zx-alerta-bg); color: var(--zx-alerta-txt); }
.zx-pill.error  { background: var(--zx-error-bg);  color: var(--zx-error-txt); }
[data-tema="oscuro"] .zx-pill.ok     { background: rgba(150,225,200,.20); color: #B8EED9; }
[data-tema="oscuro"] .zx-pill.alerta { background: rgba(255,231,184,.22); color: #FFEDC8; }
[data-tema="oscuro"] .zx-pill.error  { background: rgba(255,170,170,.22); color: #FFD6D6; }

/* ============================================================
   TABLA · listas que se escanean, no tarjetas que se contemplan
   ============================================================ */
.zx-tabla { width:100%; background: var(--zx-superficie); border: var(--zx-hairline) solid var(--zx-borde); border-radius: var(--zx-r-tarjeta); overflow:hidden; }
.zx-th { display:flex; padding:7px 12px; background: var(--zx-superficie-2); border-bottom: var(--zx-hairline) solid var(--zx-borde); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--zx-txt-3); }
.zx-tr { display:flex; align-items:center; min-height: var(--zx-alto-fila); padding:0 12px; border-bottom: var(--zx-hairline) solid var(--zx-borde); font-size: var(--zx-txt-cuerpo); }
.zx-tr:last-child { border-bottom:none; }
.zx-tr:hover { background: var(--zx-hover); }

/* ============================================================
   TINTES DE ESTADO
   El color del degradado separa listo, en proceso y pendiente antes de
   que el ojo lea una palabra.
   ============================================================ */
[data-tema="oscuro"] .zx-t-ok     { background:linear-gradient(158deg,rgba(150,225,200,.18),rgba(18,135,107,.13) 55%,rgba(255,255,255,.04)); border-color:rgba(150,225,200,.34); }
[data-tema="oscuro"] .zx-t-espera { background:linear-gradient(158deg,rgba(255,231,184,.18),rgba(201,162,74,.12) 55%,rgba(255,255,255,.04)); border-color:rgba(255,231,184,.34); }
[data-tema="oscuro"] .zx-t-mal    { background:linear-gradient(158deg,rgba(255,170,170,.18),rgba(180,70,80,.13) 55%,rgba(255,255,255,.04)); border-color:rgba(255,170,170,.38); }
[data-tema="oscuro"] .zx-t-nada   { background:linear-gradient(158deg,rgba(198,180,240,.10),rgba(124,98,196,.07) 55%,rgba(255,255,255,.02)); border-color:rgba(224,214,252,.20); }

[data-tema="claro"] .zx-t-ok     { background:linear-gradient(158deg,#EFF8F4,#FFFFFF 58%); border-color:#C9E5DA; }
[data-tema="claro"] .zx-t-espera { background:linear-gradient(158deg,#FFF9EF,#FFFFFF 58%); border-color:#F0DFC0; }
[data-tema="claro"] .zx-t-mal    { background:linear-gradient(158deg,#FFF5F5,#FFFFFF 55%); border-color:#F0C9C9; }
[data-tema="claro"] .zx-t-nada   { background:#FFFFFF; }

/* La barra de la tarjeta es una escala de luz en miniatura. */
.barra-estado { background: var(--zx-pista); }
.zx-t-ok     .barra-estado { background:linear-gradient(90deg,#12876B,#7ED9BC); }
.zx-t-espera .barra-estado { background:linear-gradient(90deg,#C9A24A,#FFE7B8); }
.zx-t-mal    .barra-estado { background:linear-gradient(90deg,#B44650,#FFAAAA); }
.zx-t-nada   .barra-estado { background: var(--zx-pista); }

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
.zx-oculto { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}