/* ===========================================================================
   COMERCIAL JyM · sistema visual
   ---------------------------------------------------------------------------
   Pensado para un mostrador: pantalla a un metro de distancia, gente que
   trabaja parada y apurada, y cifras que tienen que leerse de un vistazo.

   Las decisiones y por qué:

   TIPOGRAFÍA. IBM Plex Sans para la interfaz y IBM Plex Mono para todo lo que
   es número, código o importe. Plex Mono tiene cifras de ancho fijo: las
   columnas de pesos quedan alineadas por la coma sin trucos, y un 1 no se
   confunde con un 7 a dos metros. Es la tipografía de un sistema industrial,
   no de una presentación.

   COLOR. La interfaz usa un solo acento (verde petróleo) sobre tinta oscura.
   Los gráficos NO usan el acento de la interfaz: usan su propia paleta de
   datos, validada para daltonismo (ΔE ≥ 8 entre pares vecinos) y con rótulo
   visible en cada marca, porque tres de sus tonos no llegan a 3:1 de
   contraste sobre blanco. El color de la interfaz manda botones; el color de
   los datos manda identidad. No se mezclan.

   MOVIMIENTO. Corto y con sentido: la pantalla entra, la cifra cuenta hasta
   su valor, la fila que tocás responde. Nada que haga esperar. Todo se apaga
   solo si el sistema operativo pide menos movimiento.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ═══════════════════════════  LOS COLORES  ═══════════════════════════════

   La paleta es la de la marca:

     #2190DE  azul principal   botones y acciones
     #1C8ADA  azul secundario  detalles y gráficos
     #1B3269  azul marino      barra lateral
     #142552  azul profundo    encabezados
     #F4F8FB  blanco hielo     fondo
     #C6CED4  gris plata       bordes
     #E8F4FD · #0E659E · #19B6AA · #F2B544   complementarios

   DOS MODOS. Diurno para el mostrador con luz, nocturno para el depósito o
   el turno de noche. Arranca siguiendo lo que pida el sistema operativo y se
   cambia con el botón de la cresta, que lo deja guardado en el equipo.

   Todo lo de abajo está escrito contra estas variables: cambiar de modo no
   mueve una sola regla, solo el valor de los tokens.

   LOS GRÁFICOS NO USAN EL ACENTO DE LA INTERFAZ. Tienen su propia paleta,
   validada para daltonismo con el verificador del oficio (ΔE ≥ 8 entre pares
   vecinos), y **distinta en cada modo**: un color que se lee sobre blanco no
   se lee sobre azul oscuro. No es un volteo automático, son dos juegos
   elegidos y medidos por separado.
   ======================================================================== */

:root{
  color-scheme: light;

  /* ── Tinta y superficies ─────────────────────────────────────────────── */
  --tinta:        #16233f;
  --tinta-media:  #41506e;
  --suave:        #68768f;
  --tenue:        #94a1b5;
  --linea:        #dce4ea;
  --linea-fuerte: #c6ced4;
  --fondo:        #f4f8fb;
  --papel:        #ffffff;
  --papel-2:      #f7fafc;

  /* ── Acento de interfaz ──────────────────────────────────────────────── */
  --acento:        #2190de;
  --acento-fuerte: #0e659e;
  --acento-suave:  #e8f4fd;
  --acento-borde:  #a8d0ee;
  --acento-2:      #1c8ada;   /* secundario: detalles, bordes vivos */
  --acento-3:      #19b6aa;   /* turquesa: confirmaciones y realces */

  /* ── Barra lateral ───────────────────────────────────────────────────── */
  --costado:       #1b3269;
  --costado-vivo:    #58b4ef;   /* el acento sobre el azul marino */
  --costado-tenue:   #7c8cab;
  --costado-linea:   #2a3f68;
  --costado-linea-2: #3b5288;
  --costado-activo:  rgba(88,180,239,.14);
  --costado-2:     #142552;
  --costado-texto: #b9c6de;

  /* ── Estados ─────────────────────────────────────────────────────────── */
  --ok:          #0f7b4f;
  --ok-piso:     #e6f5ec;
  --alerta:      #a35a00;
  --alerta-piso: #fdf2e3;
  --error:       #b4231f;
  --error-piso:  #fdecec;

  /* ── Paleta de datos · DIURNA (validada sobre papel claro) ───────────── */
  --dato-1: #2190de;   /* azul de la marca */
  --dato-2: #d99a1f;   /* ámbar            */
  --dato-3: #19b6aa;   /* turquesa         */
  --dato-4: #c8553d;   /* terracota        */
  --dato-serie: #1c8ada;
  --dato-grilla: #e4ebf2;

  /* ── Forma ───────────────────────────────────────────────────────────── */
  --radio:    10px;
  --radio-ch: 7px;
  --sombra:   0 1px 2px rgba(20,37,82,.06), 0 1px 1px rgba(20,37,82,.04);
  --sombra-2: 0 4px 16px -4px rgba(20,37,82,.14), 0 1px 3px rgba(20,37,82,.07);
  --sombra-3: 0 18px 42px -12px rgba(20,37,82,.3);

  --tipo: "IBM Plex Sans", "Segoe UI", Roboto, system-ui, sans-serif;
  --cifra: "IBM Plex Mono", "Consolas", ui-monospace, monospace;
  --salida: cubic-bezier(.22,.68,.36,1);
}

/* ── MODO NOCTURNO ───────────────────────────────────────────────────────
   Se aplica cuando el equipo está en oscuro y el usuario no pidió diurno a
   mano, o cuando lo pidió expresamente. Son los mismos nombres de token con
   otros valores: ninguna regla de más abajo se entera. */

@media (prefers-color-scheme: dark){
  :root:not([data-tema="dia"]){ color-scheme: dark; }
}

:root[data-tema="noche"]{ color-scheme: dark; }

@media (prefers-color-scheme: dark){
  :root:not([data-tema="dia"]){
    --tinta:        #e6edf6;
    --tinta-media:  #b3c0d4;
    --suave:        #8795ae;
    --tenue:        #6b7a94;
    --linea:        #22304d;
    --linea-fuerte: #30405f;
    --fondo:        #0b1428;
    --papel:        #101c33;
    --papel-2:      #16233f;

    --acento:        #3b9fe8;
    --acento-fuerte: #5bb0ec;
    --acento-suave:  #16294a;
    --acento-borde:  #27456e;
    --acento-2:      #4aa6e4;
    --acento-3:      #2cc3b6;

    --costado:       #0a1326;
  --costado-vivo:    #58b4ef;
  --costado-tenue:   #6f7f9e;
  --costado-linea:   #22325a;
  --costado-linea-2: #32446f;
  --costado-activo:  rgba(88,180,239,.16);
    --costado-vivo:    #58b4ef;
    --costado-tenue:   #6f7f9e;
    --costado-linea:   #22325a;
    --costado-linea-2: #32446f;
    --costado-activo:  rgba(88,180,239,.16);
    --costado-2:     #142552;
    --costado-texto: #a9b8d2;

    --ok:          #3fbd84;
    --ok-piso:     #102b22;
    --alerta:      #e0a443;
    --alerta-piso: #2e2314;
    --error:       #ef7a74;
    --error-piso:  #30191a;

    /* Paleta de datos NOCTURNA: medida contra el fondo oscuro, no volteada. */
    --dato-1: #2190de;
    --dato-2: #b8840f;
    --dato-3: #0f9a90;
    --dato-4: #c8553d;
    --dato-serie: #3b9fe8;
    --dato-grilla: #1d2b47;

    --sombra:   0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3);
    --sombra-2: 0 4px 16px -4px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35);
    --sombra-3: 0 18px 42px -12px rgba(0,0,0,.6);
  }
}

:root[data-tema="noche"]{
  --tinta:        #e6edf6;
  --tinta-media:  #b3c0d4;
  --suave:        #8795ae;
  --tenue:        #6b7a94;
  --linea:        #22304d;
  --linea-fuerte: #30405f;
  --fondo:        #0b1428;
  --papel:        #101c33;
  --papel-2:      #16233f;

  --acento:        #3b9fe8;
  --acento-fuerte: #5bb0ec;
  --acento-suave:  #16294a;
  --acento-borde:  #27456e;
  --acento-2:      #4aa6e4;
  --acento-3:      #2cc3b6;

  --costado:       #0a1326;
  --costado-2:     #142552;
  --costado-texto: #a9b8d2;

  --ok:          #3fbd84;
  --ok-piso:     #102b22;
  --alerta:      #e0a443;
  --alerta-piso: #2e2314;
  --error:       #ef7a74;
  --error-piso:  #30191a;

  --dato-1: #2190de;
  --dato-2: #b8840f;
  --dato-3: #0f9a90;
  --dato-4: #c8553d;
  --dato-serie: #3b9fe8;
  --dato-grilla: #1d2b47;

  --sombra:   0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3);
  --sombra-2: 0 4px 16px -4px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35);
  --sombra-3: 0 18px 42px -12px rgba(0,0,0,.6);
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--tipo);
  font-size:14px;
  line-height:1.45;
  color:var(--tinta);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--acento-fuerte); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ═══════════════════════════════  ARMAZÓN  ═══════════════════════════════ */

.armazon{ display:flex; min-height:100vh; }

/* ── Barra lateral ─────────────────────────────────────────────────────── */
.costado{
  width:236px; flex:0 0 236px;
  background:var(--costado);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  z-index:30;
}

.costado .marca{
  padding:18px 18px 15px;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:block; text-decoration:none;
}
.costado .marca:hover{ text-decoration:none; }
.costado .marca .nombre{
  color:#fff; font-weight:700; font-size:15.5px; letter-spacing:.055em; line-height:1.2;
}
.costado .marca .nombre em{ color:var(--costado-vivo); font-style:normal; }
.costado .marca .bajada{
  color:var(--costado-tenue); font-size:10px; text-transform:uppercase; letter-spacing:.14em;
  margin-top:5px; font-weight:500;
}

/* ═══════════════════════  ÁRBOL DEL MENÚ  ════════════════════════════════
   Cada sección se despliega. La que contiene la pantalla abierta arranca
   abierta; el resto plegadas, para que la lista no sea un muro de opciones.
   ======================================================================== */

.arbol{ padding:10px 8px 14px; overflow-y:auto; flex:1; }

/* Scrollbar discreta: en una lista larga, la del sistema parte el diseño. */
.arbol{ scrollbar-width:thin; scrollbar-color:var(--costado-linea) transparent; }
.arbol::-webkit-scrollbar{ width:7px; }
.arbol::-webkit-scrollbar-thumb{ background:var(--costado-linea); border-radius:4px; }
.arbol::-webkit-scrollbar-track{ background:transparent; }

/* ── La fila de una sección ───────────────────────────────────────────── */
.rama{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:none; cursor:pointer; text-align:left;
  color:var(--costado-texto); font-family:var(--tipo);
  font-size:13.5px; font-weight:500;
  padding:9px 10px; border-radius:var(--radio-ch);
  position:relative;
  transition:background .15s var(--salida), color .15s var(--salida);
}
.rama svg:first-child{ width:17px; height:17px; flex:0 0 17px; opacity:.72; }
.rama .rotulo{ flex:1; min-width:0; }
.rama:hover{ background:rgba(255,255,255,.06); color:#fff; text-decoration:none; }
.rama:hover svg:first-child{ opacity:1; }

/* La flecha gira al abrir: es la única pista de que esto se despliega. */
.rama .flecha{
  width:14px; height:14px; flex:0 0 14px; opacity:.45;
  transition:transform .22s var(--salida), opacity .15s;
}
.seccion.abierta > .rama .flecha{ transform:rotate(90deg); opacity:.8; }
.seccion.abierta > .rama{ color:#fff; }
.seccion.abierta > .rama svg:first-child{ opacity:1; color:var(--costado-vivo); }

/* Una sección sin hijos (Inicio) es un enlace común. */
.rama.sola{ text-decoration:none; }
.rama.sola.on{ background:var(--costado-2); color:#fff; font-weight:600; }
.rama.sola.on svg{ opacity:1; color:var(--costado-vivo); }
.rama.sola.on::before{
  content:""; position:absolute; left:-8px; top:7px; bottom:7px; width:3px;
  background:var(--costado-vivo); border-radius:0 3px 3px 0;
  animation:marca-activa .26s var(--salida);
}
@keyframes marca-activa{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

/* ── Las opciones de adentro ──────────────────────────────────────────── */
.hojas{
  display:grid; grid-template-rows:0fr;
  /* Plegada no debe recibir el tabulador: si no, el foco se va a enlaces
     que nadie ve. visibility cambia recien al terminar la animacion. */
  visibility:hidden;
  transition:grid-template-rows .24s var(--salida), visibility .24s;
}
/* Tiene que ser UN solo hijo: grid-template-rows:0fr mide la primera fila
   nada mas, y con los enlaces sueltos las demas quedaban en alto automatico,
   asi que la seccion se veia abierta por mas que dijera 0fr. */
.hojas > .interior{ overflow:hidden; }
.seccion.abierta > .hojas{ grid-template-rows:1fr; visibility:visible; }

/* El truco de grid 0fr→1fr anima la altura sin saber cuánto mide. Con
   max-height habría que adivinar un número y siempre se queda corto. */
.hojas{ position:relative; }
.hojas::before{
  content:""; position:absolute; left:19px; top:2px; bottom:6px; width:1px;
  background:rgba(255,255,255,.1);
}

.hojas a{
  display:flex; align-items:center; gap:9px;
  color:var(--costado-texto); font-size:12.8px; text-decoration:none;
  padding:7px 10px 7px 30px; border-radius:6px; margin:1px 0;
  position:relative;
  transition:color .13s, background .13s;
}
.hojas a:hover{ background:rgba(255,255,255,.05); color:#fff; text-decoration:none; }
.hojas a .rotulo{ flex:1; min-width:0; white-space:nowrap;
                  overflow:hidden; text-overflow:ellipsis; }

/* El punto marca la opción abierta sin necesidad de pintar toda la fila. */
.hojas a .punto{
  position:absolute; left:16px; width:7px; height:7px; border-radius:50%;
  border:1.5px solid var(--costado-linea-2); background:var(--costado);
  transition:background .15s, border-color .15s, transform .15s var(--salida);
}
.hojas a.on{ color:#fff; font-weight:600; background:var(--costado-activo); }
.hojas a.on .punto{ background:var(--costado-vivo); border-color:var(--costado-vivo); transform:scale(1.15); }

.hojas kbd{
  font-family:var(--cifra); font-size:9.5px; color:var(--costado-tenue);
  border:1px solid var(--costado-linea); border-radius:4px; padding:1px 5px;
  flex:0 0 auto;
}
.hojas a:hover kbd{ color:var(--costado-texto); border-color:var(--costado-linea-2); }

/* ── Las insignias: números del negocio, no adorno ────────────────────── */
.insignia{
  flex:0 0 auto; min-width:19px; text-align:center;
  font-family:var(--cifra); font-size:10.5px; font-weight:600;
  padding:1px 6px; border-radius:20px;
  background:rgba(255,255,255,.1); color:#c3d2dc;
}
.insignia.alerta{ background:rgba(214,158,46,.2); color:#f0c478; }
.insignia.error{ background:rgba(232,107,107,.2); color:#f0a0a0; }

/* ── El pie de la barra: quién está trabajando ────────────────────────── */
.costado .zocalo{
  padding:12px 14px; border-top:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
}
.costado .zocalo .inicial{
  width:31px; height:31px; flex:0 0 31px; border-radius:50%;
  background:linear-gradient(145deg, var(--acento-fuerte), var(--acento));
  color:#fff; font-weight:600; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.costado .zocalo .quien{ flex:1; min-width:0; line-height:1.3; }
.costado .zocalo .quien b{
  color:#fff; font-size:12.5px; font-weight:600; display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.costado .zocalo .quien span{
  color:var(--costado-tenue); font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
}
.costado .zocalo .salir{
  color:var(--costado-tenue); display:flex; padding:6px; border-radius:6px; flex:0 0 auto;
  transition:color .16s, background .16s;
}
/* Sin medida propia, un SVG se estira hasta llenar lo que lo contiene. */
.costado .zocalo .salir svg{ width:17px; height:17px; display:block; }
.costado .zocalo .salir:hover{ color:#fff; background:rgba(255,255,255,.08); }

/* ── Cuerpo ────────────────────────────────────────────────────────────── */
.cuerpo{ flex:1; min-width:0; display:flex; flex-direction:column; }

.cresta{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--linea);
  padding:0 24px; height:56px;
  display:flex; align-items:center; gap:16px;
  position:sticky; top:0; z-index:20;
}
.cresta .migas{ display:flex; align-items:center; gap:8px; min-width:0; }
.cresta .donde{ font-size:14.5px; font-weight:600; letter-spacing:-.005em;
                white-space:nowrap; }
.cresta .rama-miga{ color:var(--tenue); font-size:13px; white-space:nowrap; }
.cresta .sep{ color:var(--linea-fuerte); font-size:13px; }
.cresta .relleno{ flex:1; }
.cresta .reloj{
  font-family:var(--cifra); font-size:12.5px; color:var(--suave);
  font-variant-numeric:tabular-nums;
}
.cresta .atajo{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--linea-fuerte); background:var(--papel);
  padding:6px 11px; border-radius:var(--radio-ch);
  font-size:12.5px; font-weight:500; color:var(--tinta-media);
  transition:border-color .16s, box-shadow .16s, transform .12s;
}
.cresta .atajo:hover{ border-color:var(--acento-borde); color:var(--acento-fuerte);
  text-decoration:none; box-shadow:var(--sombra); }
.cresta .atajo:active{ transform:translateY(1px); }
.cresta .atajo kbd{
  font-family:var(--cifra); font-size:10.5px; background:var(--papel-2);
  border:1px solid var(--linea); border-bottom-width:2px; border-radius:4px;
  padding:1px 5px; color:var(--suave);
}

.hoja{ padding:22px 24px 72px; max-width:1560px; width:100%; }

/* La pantalla entra de abajo, una sola vez y rápido. */
.hoja > *{ animation:entrar .34s var(--salida) backwards; }
.hoja > *:nth-child(1){ animation-delay:0ms; }
.hoja > *:nth-child(2){ animation-delay:40ms; }
.hoja > *:nth-child(3){ animation-delay:80ms; }
.hoja > *:nth-child(4){ animation-delay:120ms; }
.hoja > *:nth-child(5){ animation-delay:150ms; }
.hoja > *:nth-child(n+6){ animation-delay:170ms; }
@keyframes entrar{
  from{ opacity:0; transform:translateY(9px); }
  to{ opacity:1; transform:none; }
}

/* ═══════════════════════════════  TÍTULOS  ═══════════════════════════════ */

.titulo{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:14px; margin:0 0 18px;
}
.titulo h1{
  font-size:24px; margin:0; font-weight:600; letter-spacing:-.022em;
  line-height:1.15;
}
.titulo p{ margin:5px 0 0; color:var(--suave); font-size:13px; max-width:78ch; }

/* ═══════════════════════════════  TARJETAS  ══════════════════════════════ */

.tarjeta{
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:18px;
  margin-bottom:16px;
  box-shadow:var(--sombra);
}
.tarjeta > h2{
  font-size:10.5px; margin:0 0 14px; font-weight:600;
  text-transform:uppercase; letter-spacing:.13em; color:var(--suave);
  display:flex; align-items:center; gap:8px;
}
.tarjeta > h2::after{
  content:""; flex:1; height:1px; background:var(--linea);
}

/* ═══════════════════════  FICHAS DE CIFRA (KPI)  ═════════════════════════ */

.fichas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:12px; margin-bottom:16px;
}
.ficha{
  background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio); padding:15px 17px;
  box-shadow:var(--sombra);
  position:relative; overflow:hidden;
  transition:transform .18s var(--salida), box-shadow .18s var(--salida);
}
.ficha::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--acento);
}
.ficha:hover{ transform:translateY(-2px); box-shadow:var(--sombra-2); }
.ficha .rotulo{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--suave); font-weight:600;
}
.ficha .cifra{
  font-family:var(--cifra); font-size:25px; font-weight:600; margin-top:7px;
  font-variant-numeric:tabular-nums; letter-spacing:-.025em; line-height:1.1;
}
.ficha .pie{ font-size:12px; color:var(--tenue); margin-top:3px; }
.ficha.alerta::before{ background:var(--alerta); }
.ficha.error::before{ background:var(--error); }
.ficha.ok::before{ background:var(--ok); }
a.ficha{ color:inherit; text-decoration:none; }
a.ficha:hover{ text-decoration:none; border-color:var(--acento-borde); }

/* La cifra protagonista de una pantalla. */
.ficha.grande{ grid-column:span 2; }
.ficha.grande .cifra{ font-size:38px; }

/* ═══════════════════════════════  TABLAS  ════════════════════════════════ */

.envoltorio{
  overflow-x:auto; border:1px solid var(--linea);
  border-radius:var(--radio); background:var(--papel);
  box-shadow:var(--sombra);
}
.tarjeta .envoltorio{ box-shadow:none; }

.tabla{ width:100%; border-collapse:collapse; }
.tabla thead th{
  background:var(--papel-2);
  border-bottom:1px solid var(--linea-fuerte);
  text-align:left; padding:9px 12px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.11em;
  color:var(--suave); white-space:nowrap;
  position:sticky; top:0; z-index:2;
}
.tabla tbody td{
  padding:9px 12px; border-bottom:1px solid var(--linea);
  vertical-align:middle;
}
.tabla tbody tr:last-child td{ border-bottom:none; }
.tabla tbody tr{ transition:background .13s; }
.tabla tbody tr:hover{ background:var(--acento-suave); }
.tabla .num{
  text-align:right; white-space:nowrap;
  font-family:var(--cifra); font-variant-numeric:tabular-nums; font-size:13px;
}
.tabla .cen{ text-align:center; }
.tabla code{ font-family:var(--cifra); font-size:12px; color:var(--tinta-media); }

.vacio{ text-align:center; color:var(--suave); padding:46px 18px; font-size:13.5px; }
.menudo{ color:var(--tenue); font-size:11.5px; margin-top:2px; font-family:var(--cifra); }

/* ════════════════════════════  CONTROLES  ════════════════════════════════ */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--acento); color:#fff; border:1px solid var(--acento-fuerte);
  padding:8px 15px; border-radius:var(--radio-ch);
  font-family:var(--tipo); font-size:13.5px; font-weight:600;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  box-shadow:0 1px 2px rgba(10,99,91,.22);
  transition:background .15s, transform .1s var(--salida), box-shadow .15s;
}
.btn:hover{ background:var(--acento-fuerte); color:#fff; text-decoration:none;
  box-shadow:0 2px 8px -1px rgba(10,99,91,.3); }
.btn:active{ transform:translateY(1px); box-shadow:none; }
.btn:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }

.btn.gris{
  background:var(--papel); color:var(--tinta-media); border-color:var(--linea-fuerte);
  box-shadow:var(--sombra); font-weight:500;
}
.btn.gris:hover{ background:var(--papel-2); color:var(--tinta);
  border-color:var(--linea-fuerte); box-shadow:var(--sombra-2); }

.btn.peligro{ background:var(--error); border-color:#8e1b18;
  box-shadow:0 1px 2px rgba(180,35,31,.22); }
.btn.peligro:hover{ background:#8e1b18; }

.btn.chico{ padding:4px 10px; font-size:12px; border-radius:6px; box-shadow:none; }

label{
  display:block; font-size:11.5px; font-weight:600; color:var(--tinta-media);
  margin-bottom:4px; letter-spacing:.012em;
}
input[type=text],input[type=number],input[type=date],input[type=password],
input[type=file],select,textarea{
  width:100%; padding:8px 10px;
  border:1px solid var(--linea-fuerte); border-radius:var(--radio-ch);
  font-family:var(--tipo); font-size:13.5px; background:var(--papel); color:var(--tinta);
  transition:border-color .15s, box-shadow .15s;
}
input[type=number],input[type=date]{ font-family:var(--cifra); }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--acento);
  box-shadow:0 0 0 3px var(--acento-suave);
}
input::placeholder{ color:var(--tenue); }

.campos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:13px; }
.campos .ancho{ grid-column:1/-1; }
.acciones{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:16px; }
.filtros{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:13px 15px; box-shadow:var(--sombra);
}
.filtros > div{ min-width:142px; }

/* ════════════════════════════  MARBETES  ═════════════════════════════════ */

.marbete{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 9px; border-radius:20px;
  font-size:11px; font-weight:600; letter-spacing:.015em;
  background:var(--papel-2); color:var(--tinta-media);
  border:1px solid var(--linea-fuerte);
  font-family:var(--tipo);
}
.marbete.ok{ background:var(--ok-piso); color:var(--ok); border-color:#b6e2c8; }
.marbete.alerta{ background:var(--alerta-piso); color:var(--alerta); border-color:#f2d7ab; }
.marbete.error{ background:var(--error-piso); color:var(--error); border-color:#f3c0bf; }

/* ════════════════════════════  AVISOS  ═══════════════════════════════════ */

/* Entra desde arriba a la derecha, se queda y se va solo. */
.avisero{
  position:fixed; top:14px; right:18px; z-index:90;
  display:flex; flex-direction:column; gap:9px; max-width:min(440px, calc(100vw - 36px));
}
.aviso{
  padding:12px 15px; border-radius:var(--radio); font-size:13.5px;
  border:1px solid; background:var(--papel); box-shadow:var(--sombra-3);
  display:flex; gap:10px; align-items:flex-start;
  animation:aviso-entra .3s var(--salida);
}
.aviso.ok{ border-color:#b6e2c8; background:var(--ok-piso); color:#0b5c3b; }
.aviso.error{ border-color:#f3c0bf; background:var(--error-piso); color:#8e1b18; }
.aviso svg{ width:17px; height:17px; flex:0 0 17px; margin-top:1px; }
.aviso .cerrar{
  background:none; border:none; cursor:pointer; color:inherit; opacity:.55;
  padding:0 0 0 6px; font-size:17px; line-height:1; font-family:var(--tipo);
}
.aviso .cerrar:hover{ opacity:1; }
.aviso.yendose{ animation:aviso-sale .26s var(--salida) forwards; }
@keyframes aviso-entra{
  from{ opacity:0; transform:translateX(26px) scale(.97); }
  to{ opacity:1; transform:none; }
}
@keyframes aviso-sale{
  to{ opacity:0; transform:translateX(26px) scale(.97); }
}

/* ══════════════════  LÍNEAS DE DOCUMENTO Y BUSCADOR  ═════════════════════ */

.buscador{ position:relative; }
.buscador input{ font-size:15px; padding:11px 13px; }
.sugerencias{
  display:none; position:absolute; z-index:40; left:0; right:0; top:100%;
  margin-top:5px; background:var(--papel);
  border:1px solid var(--linea-fuerte); border-radius:var(--radio);
  box-shadow:var(--sombra-3); max-height:330px; overflow:auto;
  animation:entrar .18s var(--salida);
}
.sugerencia{
  display:block; width:100%; text-align:left; background:none; border:none;
  border-bottom:1px solid var(--linea); padding:10px 13px; cursor:pointer;
  font-family:var(--tipo); font-size:13.5px; color:var(--tinta);
}
.sugerencia:last-child{ border-bottom:none; }
.sugerencia:hover{ background:var(--acento-suave); }
.sugerencia b{ display:block; font-weight:600; }
.sugerencia span{ color:var(--suave); font-size:11.5px; font-family:var(--cifra); }

.tabla input.malo{ border-color:var(--error); background:var(--error-piso); }
.tabla td input[type=number]{ width:94px; text-align:right; }
.tabla td select{ min-width:132px; }

.cierre{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  flex-wrap:wrap; border-top:1px solid var(--linea-fuerte);
  padding-top:15px; margin-top:6px;
}
/* La cifra total de un documento. Suelta, no dentro de .cierre: también la
   usa la barra fija de la pantalla de venta. */
.granTotal{
  font-family:var(--cifra); font-size:31px; font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em; line-height:1.05;
}
.aviso-linea{ color:var(--error); font-size:12.5px; min-height:17px; margin-top:6px; }

/* ════════════════════════════  GRÁFICOS  ═════════════════════════════════ */

.grafico{ width:100%; display:block; overflow:visible; }
.grafico text{ font-family:var(--tipo); fill:var(--suave); }
.grafico .eje{ font-size:10px; letter-spacing:.02em; }
.grafico .valor{ font-family:var(--cifra); font-size:10px; fill:var(--tinta-media);
  font-weight:500; }
.grafico .grilla{ stroke:var(--dato-grilla); stroke-width:1; }
.grafico .base{ stroke:var(--linea-fuerte); stroke-width:1; }

/* Las barras crecen desde su propia base al cargar la pantalla.
   transform-box:fill-box es obligatorio: sin eso, en SVG el origen de la
   transformación se mide contra el viewBox entero y las barras se estiran
   desde el piso del gráfico en vez de desde su base. */
.grafico .barra{
  transform-box:fill-box; transform-origin:bottom;
  animation:crecer .5s var(--salida) backwards;
}
@keyframes crecer{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.grafico .barra rect{ transition:opacity .13s; }

/* Red de seguridad: pasada la animación, el gráfico se fija en su estado
   final. Si por lo que sea la animación quedó a mitad de camino (pasa al
   capturar la pantalla, y puede pasar en una máquina muy cargada), las
   barras igual terminan con su altura real. Un gráfico mal dibujado miente,
   y un gráfico que miente es peor que no tener gráfico. */
.grafico.listo .barra, .grafico.listo .tira{ animation:none !important; transform:none !important; }
.grafico g.barra:hover rect{ opacity:.78; }

/* ── El botón de diurno / nocturno ───────────────────────────────────────
   Un solo botón con los dos íconos encima; se muestra el del modo al que se
   va a pasar, no el del actual. Es lo que espera la gente: el botón dice
   adónde te lleva. */
.cresta .tema{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 34px;
  background:none; border:1px solid var(--linea); border-radius:var(--radio-ch);
  color:var(--suave); cursor:pointer; position:relative;
  transition:color .15s, border-color .15s, background .15s;
}
.cresta .tema:hover{ color:var(--acento); border-color:var(--acento-borde);
                     background:var(--acento-suave); }
.cresta .tema svg{ width:17px; height:17px; position:absolute;
                   transition:opacity .2s var(--salida), transform .3s var(--salida); }
.cresta .tema .sol{ opacity:0; transform:rotate(-70deg) scale(.6); }
.cresta .tema .luna{ opacity:1; transform:rotate(0) scale(1); }
.cresta .tema.de-noche .sol{ opacity:1; transform:rotate(0) scale(1); }
.cresta .tema.de-noche .luna{ opacity:0; transform:rotate(70deg) scale(.6); }

@media (max-width:560px){ .cresta .tema{ display:none; } }

/* ═══════════════════════  TABLERO DE INICIO  ═════════════════════════════
   Dos columnas en escritorio, una sola en pantalla angosta. La proporcion
   1.6/1 es para el par "evolucion + composicion": el grafico de barras
   necesita el ancho, la lista de al lado no.
   ======================================================================== */

.rejilla-tablero{
  display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:16px;
}
.rejilla-tablero.pareja{ grid-template-columns:1fr 1fr; }

@media (max-width:1000px){
  .rejilla-tablero, .rejilla-tablero.pareja{ grid-template-columns:1fr; }
}

/* El titulo que separa un bloque del siguiente. No es un <h2> de tarjeta:
   ordena la pantalla en "hoy / el mes / saldos" para que no sea un muro de
   numeros sin jerarquia. */
.franja{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.11em; color:var(--tenue);
  margin:26px 0 12px; padding-bottom:7px;
  border-bottom:1px solid var(--linea);
}
.franja small{
  font-size:11px; font-weight:400; text-transform:none; letter-spacing:0;
  color:var(--suave);
}

/* La linea que explica que esta mirando uno. Un grafico sin esto obliga a
   adivinar sobre que periodo esta calculado. */
.bajada{
  color:var(--tenue); font-size:11.5px; line-height:1.5;
  margin:-4px 0 14px; max-width:62ch;
}

/* ── El grafico de lineas ─────────────────────────────────────────────────
   La linea se dibuja de izquierda a derecha al entrar. El trazo discontinuo
   de la serie de referencia no es adorno: distingue el periodo anterior sin
   depender del color, que es lo unico que ve alguien con daltonismo. */
.grafico .linea{
  stroke-dashoffset:0;
  animation:trazar .9s var(--salida) backwards;
}
@keyframes trazar{
  from{ clip-path:inset(0 100% 0 0); }
  to{   clip-path:inset(0 0 0 0); }
}
.grafico.listo .linea{ animation:none !important; clip-path:none !important; }
.grafico .rotulo-serie{ font-size:10.5px; font-weight:600; }
.grafico g[data-globo]:hover rect{ fill:var(--acento-suave); }

.grafico .tira{ transform-box:fill-box; transform-origin:left;
  animation:crecer-ancho .5s var(--salida) backwards; }
@keyframes crecer-ancho{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.leyenda{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; }
.leyenda span{ display:inline-flex; align-items:center; gap:6px; font-size:12px;
  color:var(--tinta-media); }
.leyenda i{ width:10px; height:10px; border-radius:2px; display:inline-block; }

/* Medidor de un valor contra su objetivo. */
.medidor{ height:7px; background:var(--papel-2); border:1px solid var(--linea);
  border-radius:4px; overflow:hidden; margin-top:9px; }
.medidor i{ display:block; height:100%; background:var(--acento);
  animation:crecer-ancho .6s var(--salida) backwards; transform-origin:left; }
.medidor i.alerta{ background:var(--alerta); }
.medidor i.error{ background:var(--error); }

/* ══════════════════════════════  MÓVIL  ══════════════════════════════════ */

.hamburguesa{
  display:none; background:var(--papel); border:1px solid var(--linea-fuerte);
  color:var(--tinta); border-radius:var(--radio-ch); padding:7px 11px;
  font-family:var(--tipo); font-size:13px; font-weight:600; cursor:pointer;
}

@media (max-width:1000px){
  .costado{
    position:fixed; left:0; top:0; bottom:0; height:100vh;
    transform:translateX(-100%); transition:transform .24s var(--salida);
    box-shadow:var(--sombra-3);
  }
  .costado.abierto{ transform:none; }
  .hamburguesa{ display:inline-flex; }
  .cresta{ padding:0 15px; }
  .hoja{ padding:16px 15px 64px; }
  .ficha.grande{ grid-column:span 1; }
  .velo{
    position:fixed; inset:0; background:rgba(16,23,31,.45); z-index:25;
    animation:entrar .2s var(--salida);
  }
}

@media (max-width:620px){
  .titulo h1{ font-size:20px; }
  .ficha .cifra{ font-size:22px; }
  .cresta .reloj, .cresta .rama-miga, .cresta .sep{ display:none; }
  .avisero{ left:12px; right:12px; max-width:none; }
}

@media print{
  .costado, .cresta, .acciones, .filtros, .avisero{ display:none !important; }
  body{ background:#fff; }
  .hoja{ padding:0; max-width:none; }
  .tarjeta, .envoltorio{ box-shadow:none; border-color:#bbb; }
  .hoja > *{ animation:none; }
}

/* Si el sistema operativo pide menos movimiento, no hay movimiento. */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}