/* ==========================================================================
   MAQUETA — no es el sistema. Datos falsos, un solo archivo, para criticar.
   Direccion: INSTRUMENTO, NO DIBUJO. La estacion entra por la forma de leer
   (tablero, LED de estado, barra de pico, cifra de cartel de ruta), no por
   dibujar una manguera.
   ========================================================================== */

/* ---------------------------------------------------------------- tipos */
:root{
  /* Satoshi, la misma de la portada: el sistema tiene una letra y es siempre
     la misma, en la PC de la estacion, en la Mac y en el telefono. Atras
     queda la del aparato, para el rato en que la nuestra todavia no bajo.
     La mono queda para lo que se compara contra un papel: tablas, chips,
     el CUIT. */
  --f-ui:  'Satoshi', -apple-system, BlinkMacSystemFont, "SF Pro Text",
           system-ui, Roboto, "Segoe UI", sans-serif;
  --f-din: 'Satoshi', -apple-system, BlinkMacSystemFont, "SF Pro Display",
           system-ui, Roboto, "Segoe UI", sans-serif;
  --f-num: 'Satoshi', -apple-system, BlinkMacSystemFont, "SF Pro Display",
           system-ui, Roboto, "Segoe UI", sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --din-track: -.015em;
  /* Cuanto se hunde lo que se aprieta. Vive aca arriba para que apagarlo
     con movimiento reducido sea cambiar dos numeros y no cazar clases. */
  --apreton: .96;
  --apreton-tarjeta: .985;

  /* --------------------------------------------- la escala, como la de Apple
     Cada cuerpo viene con SU interlineado: un tamano suelto no es un escalon
     de una escala, es un numero. Y el piso es 13 px — abajo de eso no hay
     informacion, hay ruido: lo de 11 px era la escala de una tabla, y esto se
     lee de parado, de lejos y con el telefono en la mano. */
  --t-pie:    .8125rem;  --lh-pie:    1.35;  /* 13 - el metadato, el pie */
  --t-sub:    .9375rem;  --lh-sub:    1.45;  /* 15 - lo que explica la cifra */
  --t-cuerpo: 1.0625rem; --lh-cuerpo: 1.5;   /* 17 - el texto y el renglon */
  --t-t3:     1.25rem;   --lh-t3:     1.3;   /* 20 - la cifra de un renglon */
  --t-t2:     1.375rem;  --lh-t2:     1.25;  /* 22 - el titulo de un grupo */
  --t-t1:     1.75rem;   --lh-t1:     1.2;   /* 28 */
  --t-tapa:   2.125rem;  --lh-tapa:   1.12;  /* 34 - el titulo de la pantalla */

  /* ------------------------------------------ el material de la maqueta
     Sale de docs/maquetas/sadia-pantalla.html. La sombra es de tres tiros
     —el contacto, la caida corta y la caida larga— que es lo que hace que
     una tarjeta se despegue de la hoja en vez de tener un borde dibujado.
     Las curvas son las de las hojas de iOS: salen rapido y frenan largo. */
  --ios:      cubic-bezier(.32,.72,0,1);
  --ios-out:  cubic-bezier(.25,1,.5,1);
  --resorte:  cubic-bezier(.34,1.4,.64,1);
  --t-rapido: .18s;
  --t-medio-m:.34s;
  --t-lento:  .46s;
  --hover:    rgba(255,255,255,.035);
  --sombra-cd:   0 1px 1px rgba(0,0,0,.28), 0 4px 10px -6px rgba(0,0,0,.5),
                 0 16px 34px -22px rgba(0,0,0,.85);
  --sombra-alta: 0 2px 4px rgba(0,0,0,.3), 0 10px 22px -10px rgba(0,0,0,.6),
                 0 30px 60px -30px rgba(0,0,0,.9);
  --r-tarjeta: 16px;
}

/* --------------------------------------------------------------- oscuro
   La base. Sala de control: el panel es el fondo y el dato es la luz. */
:root{
  color-scheme: dark;
  --fondo:    #0D1114;
  --sup:      #151B1F;   /* una hoja */
  --sup-2:    #1C2429;   /* hundido */
  --sup-3:    #232C32;   /* mas hundido / chips */
  --borde:    #242E34;
  --borde-2:  #334048;
  --tinta:    #E9EEF0;
  --tinta-2:  #A0ADB4;
  /* --tinta-3 es el rotulo de 11 px: sello, unidad, metadato. Va medido
     contra --sup-3, que es el fondo mas claro sobre el que aparece
     (los chips), no contra --sup. Ahi da 4,75:1. */
  --tinta-3:  #8B979E;

  /* El sodio es la luz del techo de playa. REGLA: solo lo que pasa AHORA. */
  --sodio:      #F2AC3E;
  --sodio-hondo:#FFC66B;
  --sodio-piso: rgba(242,172,62,.14);

  /* El verde del sello "en vivo": misma luz que el LED del enlace, para que
     enlace vivo y dato vivo se lean como una sola cosa. Es mas claro que
     --ok porque el sello es letra de 11 px sobre su propio piso. */
  --vivo:      #6FD79E;
  --vivo-piso: rgba(111,215,158,.15);

  --accion:      #2E7F92;
  --accion-viva: #3D9CB2;
  --accion-piso: rgba(46,127,146,.16);
  --sobre-color: #06181D;

  --ok:     #4FA97C;  --ok-piso:    rgba(79,169,124,.15);
  --alerta: #E0A63C;  --alerta-piso:rgba(224,166,60,.14);
  --mal:    #E88267;  --mal-piso:   rgba(220,112,87,.15);

  /* sectores: son DATO, no decoracion. Cada uno siempre el mismo color. */
  --playa:    #F2AC3E;
  --minishop: #E28A62;
  --oficina:  #7FA6C4;

  --s1: 0 1px 0 rgba(255,255,255,.03);
  --s2: 0 1px 2px rgba(0,0,0,.5), 0 12px 28px -18px rgba(0,0,0,.9);
  --filo: inset 0 1px 0 rgba(255,255,255,.045);

  /* El color de SADIA. No es de la marca ni de un sector: es el unico color
     que marca "esto lo OPINA ella", para que una recomendacion no se pueda
     confundir con un numero medido aunque esten uno abajo del otro. */
  --sadia:      #8E7CF0;
  --sadia-piso: rgba(142,124,240,.16);
}

/* ---------------------------------------------------------------- claro
   Mismo esqueleto, otra luz. Papel neutro frio, tinta grafito, y el sodio
   hundido para que siga leyendose sobre blanco. */
[data-tema="claro"]{
  color-scheme: light;
  /* Blanco puro y un gris apenas para agrupar: el de las apps de plata. La
     tarjeta se separa con un borde de un pixel, no con sombra. */
  --fondo:    #FFFFFF;
  --sup:      #FFFFFF;
  --sup-2:    #F4F4F6;
  --sup-3:    #ECECF0;
  --borde:    #E6E6EA;
  --borde-2:  #D9D9DE;
  --tinta:    #0B0B0F;
  --tinta-2:  #5F5F67;
  --tinta-3:  #75757E;

  /* El naranja del SV es el color de la marca. Sobre blanco va un escalon
     mas hondo para que se lea. */
  --sodio:      #C9640C;
  --sodio-hondo:#A8540A;
  --sodio-piso: rgba(246,132,31,.13);

  --vivo:      #1B8A4B;
  --vivo-piso: rgba(27,138,75,.12);

  /* El color de accion es el petroleo del oscuro, un escalon mas hondo
     para que se lea sobre blanco: el naranja quedo solo en el logo
     (21/09/2026, lo eligio Juan). */
  --accion:      #2E7F92;
  --accion-viva: #256B7C;
  --accion-piso: rgba(46,127,146,.12);
  --sobre-color: #FFFFFF;

  /* Verde y rojo solo cuando la plata sube o baja; ambar para lo que hay
     que mirar. */
  --ok:     #1B8A4B;  --ok-piso:    rgba(27,138,75,.12);
  --alerta: #B5731A;  --alerta-piso:rgba(181,115,26,.13);
  --mal:    #D0342C;  --mal-piso:   rgba(208,52,44,.11);

  --playa:    #E0700F;
  --minishop: #8C4F2F;
  --oficina:  #3C5F7C;

  --s1: none;
  /* Dos capas, no una. Con una sola sombra al 4% la tarjeta no se apoya en
     ningun lado: es un rectangulo con un filete, y la pantalla entera se lee
     como una planilla. La de cerca le da el borde y la lejana el peso, que
     es lo que hace que una tarjeta parezca una cosa arriba de la hoja y no
     un dibujo sobre ella. Sigue siendo suave a proposito: esto se aplica a
     TODA tarjeta del sistema, y una sombra que se ve es una sombra que
     cansa. */
  --s2: 0 1px 2px rgba(16,24,32,.055),
        0 6px 16px -10px rgba(16,24,32,.17);
  /* NO puede ser `none`. Todo el sistema escribe `box-shadow:var(--s2),var(--filo)`
     y una lista de sombras con la palabra `none` adentro es CSS invalido: el
     navegador tira la declaracion ENTERA, asi que en tema claro —el que usa el
     dueño— ninguna tarjeta tenia sombra, ni siquiera la de --s2. Por eso la
     pantalla se leia como una sola hoja plana. Una sombra transparente hace lo
     mismo que `none` (no se ve) y deja la lista valida. */
  --filo: 0 0 rgba(0,0,0,0);

  --hover:    rgba(0,0,0,.028);
  --sombra-cd:   0 1px 1px rgba(16,24,32,.05), 0 4px 10px -6px rgba(16,24,32,.12),
                 0 16px 34px -22px rgba(16,24,32,.22);
  --sombra-alta: 0 2px 4px rgba(16,24,32,.07), 0 10px 22px -10px rgba(16,24,32,.16),
                 0 30px 60px -30px rgba(16,24,32,.3);

  /* Sobre blanco el lila claro no se lee: va un escalon mas hondo, igual que
     el sodio. */
  --sadia:      #5B46C8;
  --sadia-piso: rgba(91,70,200,.09);
}

/* --------------------------------------------------------- escala, base */
:root{
  --t-micro:.6875rem; --t-menor:.8125rem; --t-apoyo:.875rem; --t-base:1rem;
  --t-medio:1.125rem; --t-h2:1.375rem; --t-h1:1.75rem;
  --e1:.25rem; --e2:.5rem; --e3:.75rem; --e4:1rem; --e5:1.5rem; --e6:2rem;
  --r1:5px; --r2:8px; --r3:13px;
  --rail-ancho:236px;
}
[data-densidad="compacta"]{ --e3:.5rem; --e4:.75rem; --e5:1rem; --e6:1.25rem; }

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--fondo); color:var(--tinta);
  font:400 var(--t-base)/1.5 var(--f-ui);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.012em;line-height:1.2}
a{color:inherit}
table{border-collapse:collapse;width:100%}

/* Toda cifra tabular, en la letra del texto. La mono queda para las
   tablas: un importe que el dueño compara contra un papel necesita ancho
   fijo o las columnas no quedan a plomo; una cifra en una tarjeta, no. */
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;
     font-feature-settings:"tnum" 1;letter-spacing:-.02em}
table .num,table .cifra,.cinta .tk-m{font-family:var(--f-mono)}

/* ============================================================== chapa */
.top{
  position:sticky;top:0;z-index:40;height:56px;
  display:flex;align-items:center;gap:var(--e4);
  padding:0 var(--e5);background:var(--sup);border-bottom:1px solid var(--borde);
}
.marca{display:flex;align-items:center;gap:9px;font:400 var(--t-base)/1 var(--f-ui);
       text-decoration:none;letter-spacing:-.02em}
.marca svg{width:22px;height:22px;flex:none}
/* La marca SV es apaisada (101 x 72): con el cuadrado de arriba salía
   estirada. Manda el alto y el ancho lo pone el propio dibujo. */
.marca svg.marca-sv, .rail-marca svg.marca-sv{ width:auto; height:20px; }
.marca i{font-style:normal;color:var(--tinta-3);font-weight:400}
.marca b{font-weight:700}
.top-sel{
  margin-left:auto;display:flex;align-items:center;gap:var(--e2);
  background:var(--sup-2);border:1px solid var(--borde);border-radius:var(--r2);
  padding:5px 10px;font-size:var(--t-menor);color:var(--tinta-2);cursor:pointer;
}
.top-sel b{color:var(--tinta);font-weight:600}

/* El estado del enlace vive en la chapa y no en una tarjeta: sin esto un
   cero es indistinguible de una PC apagada, y el dueño llama al pedo. */
.enlace{display:flex;align-items:center;gap:7px;font-size:var(--t-menor);
        color:var(--tinta-2);white-space:nowrap}
.led{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;
     box-shadow:0 0 0 0 var(--ok-piso);animation:latir 2.6s infinite}
.led.mal{background:var(--mal);animation:none}
@keyframes latir{0%{box-shadow:0 0 0 0 var(--ok-piso)}
                 70%{box-shadow:0 0 0 7px transparent}
                 100%{box-shadow:0 0 0 0 transparent}}

/* ============================================================== cinta
   La cinta de tickets en vivo. Va en TODAS las pantallas del dueño y es lo
   único que se mueve solo: la estación respira arriba de todo y después
   vienen los números quietos.

   NO es sticky a propósito. Con la chapa pegada arriba, una cinta pegada
   abajo de ella se come 94 px de un celular antes del primer dato. Se ve al
   entrar, y al scrollear se va.

   El color del punto ES el dato —playa o minimercado, los mismos colores de
   sector que usa el resto del sistema—, no decoración. */
body.con-cinta{--cinta-alto:38px}
.cinta{
  position:relative;overflow:hidden;height:var(--cinta-alto,38px);
  display:flex;align-items:center;
  background:var(--sup-2);border-bottom:1px solid var(--borde);
}
.cinta-sello{
  position:absolute;left:0;top:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:7px;padding:0 14px 0 var(--e5);
  font-size:var(--t-micro);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--vivo);
  background:linear-gradient(90deg,var(--sup-2) 74%,transparent);
}
.cinta-sello::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--vivo);box-shadow:0 0 0 3px var(--vivo-piso);
  animation:respirar 2.4s ease-in-out infinite;
}
@keyframes respirar{0%,100%{opacity:1}50%{opacity:.35}}
/* Sin señal el sello se apaga: una cinta quieta porque la estación no vende
   y una cinta quieta porque la PC está apagada son dos noticias distintas. */
.cinta.sin-senal .cinta-sello{color:var(--tinta-3)}
.cinta.sin-senal .cinta-sello::before{
  background:var(--tinta-3);box-shadow:none;animation:none;
}

.cinta-via{display:flex;align-items:center;white-space:nowrap;
           will-change:transform}
.cinta .tk{display:inline-flex;align-items:baseline;gap:7px;padding:0 18px;
           flex:none}
.cinta .tk::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  align-self:center;background:var(--tk);
}
.cinta .tk.playa{--tk:var(--playa)}
.cinta .tk.mini{--tk:var(--minishop)}
.cinta .tk-p{font-size:var(--t-menor);font-weight:600;letter-spacing:.045em;
             text-transform:uppercase;color:var(--tinta-2)}
.cinta .tk-m{font-family:var(--f-num);font-size:var(--t-menor);font-weight:500;
             color:var(--tinta);font-variant-numeric:tabular-nums}
/* El que recién entró se enciende un segundo: sin eso, una cinta girando en
   vacío y una estación vendiendo se ven exactamente igual. */
.cinta .tk.nuevo .tk-p,.cinta .tk.nuevo .tk-m{color:var(--sodio-hondo)}

/* El aviso de cierre de turno. Se distingue del ticket porque es otra cosa:
   un ticket es una venta, un cierre es un turno que terminó. Da dos vueltas
   y se va. */
.cinta .tk.aviso{
  background:var(--sodio-piso);border-radius:var(--r1);
  padding:3px 14px;margin:0 10px;align-items:center;
}
.cinta .tk.aviso::before{background:var(--sodio)}
.cinta .tk.aviso .tk-p{color:var(--sodio-hondo)}
.cinta .tk-cierre{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sodio-hondo);
}
.cinta .tk-quien{
  font-size:var(--t-micro);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-2);
}
.cinta .tk-quien::before{content:"· "}
.cinta-vacia{padding:0 18px;font-size:var(--t-menor);color:var(--tinta-3)}

/* En el celular el sello se aprieta: está fijo arriba de la cinta, así que
   cada píxel suyo es un píxel menos de ticket pasando. */
@media (max-width:520px){
  .cinta-sello{padding:0 10px 0 var(--e4);letter-spacing:.06em}
  .cinta .tk{padding:0 13px}
  .cinta .tk.aviso{margin:0 7px}
}

/* El que pidió menos movimiento ve la misma información quieta y la puede
   arrastrar con el dedo. cinta.js no arranca la animación en ese caso. */
@media (prefers-reduced-motion:reduce){
  .cinta{overflow-x:auto}
  .cinta-sello::before{animation:none}
}

.cuerpo{display:flex;min-height:calc(100vh - 56px - var(--cinta-alto,0px))}

/* =============================================================== rail */
.rail{
  width:var(--rail-ancho);flex:none;background:var(--sup);border-right:1px solid var(--borde);
  padding:var(--e4) var(--e3);position:sticky;top:56px;height:calc(100vh - 56px);
  overflow:auto;
}
.rail-grupo{margin:var(--e4) 0 var(--e2) 10px;font-size:var(--t-micro);
            letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);font-weight:600}
.rail-grupo:first-child{margin-top:0}
/* lo que es tuyo y no del estacionero va separado de verdad, no sólo rotulado */
.rail-grupo.sep{margin-top:var(--e5);padding-top:var(--e4);
                border-top:1px solid var(--borde)}
.rail a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r2);
  text-decoration:none;color:var(--tinta-2);font-size:var(--t-apoyo);font-weight:500;
}
@media (hover:hover){.rail a:hover{background:var(--sup-2);color:var(--tinta)}}
.rail a.on{background:var(--accion-piso);color:var(--tinta);font-weight:600;
           box-shadow:inset 2px 0 0 var(--accion-viva)}
.rail a span.pt{margin-left:auto;font-size:var(--t-micro);font-family:var(--f-num);
                color:var(--tinta-3)}
.rail a.on span.pt{color:var(--sodio)}

.lienzo{flex:1;min-width:0;padding:var(--e5);max-width:1360px}
.cab{display:flex;align-items:flex-end;gap:var(--e4);margin-bottom:var(--e5);flex-wrap:wrap}
.cab h1{font-size:var(--t-h1)}
.cab p{margin:4px 0 0;color:var(--tinta-2);font-size:var(--t-apoyo);max-width:62ch}

/* ======================================================= EL INSTRUMENTO
   El turno EN CURSO. Es lo primero porque es lo unico sobre lo que todavia
   se puede hacer algo: a un mes no se lo corrige con una llamada. */
.instr{
  background:linear-gradient(180deg,var(--sup) 0%,var(--sup-2) 100%);
  border:1px solid var(--borde-2);border-radius:var(--r3);box-shadow:var(--s2),var(--filo);
  padding:var(--e5);margin-bottom:var(--e4);position:relative;overflow:hidden;
}
.instr::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--sodio),transparent);opacity:.6}
.instr-cab{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;margin-bottom:var(--e4)}
.instr-cab h2{font:600 var(--t-medio)/1 var(--f-din);letter-spacing:var(--din-track)}
.sello{
  font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  padding:4px 8px;border-radius:100px;background:var(--sup-3);color:var(--tinta-3);
}
/* El sello vivo lleva el mismo punto verde que late del LED del enlace: sin
   movimiento, "en vivo" y "sin datos" son dos chips iguales y el dueño no
   sabe si esta mirando la playa o una foto. */
.sello.vivo{background:var(--vivo-piso);color:var(--vivo);
            display:inline-flex;align-items:center;gap:6px}
.sello.vivo::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--vivo);flex:none;animation:latir-vivo 2.6s infinite}
@keyframes latir-vivo{0%{box-shadow:0 0 0 0 var(--vivo-piso);opacity:1}
                      70%{box-shadow:0 0 0 5px transparent;opacity:.55}
                      100%{box-shadow:0 0 0 0 transparent;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .sello.vivo::before{animation:none}
}
/* "no es de ahora": el sello del dato con hora de corte lleva su propio
   borde para que no se confunda con el sello vivo de un vistazo. */
.sello.corte{background:transparent;color:var(--tinta-2);
             box-shadow:inset 0 0 0 1px var(--borde-2)}

.instr-fila{display:flex;gap:var(--e6);align-items:flex-end;flex-wrap:wrap}
.madre{display:flex;align-items:baseline;gap:6px;line-height:.88}
.madre .pe{font:500 1.5rem/1 var(--f-num);color:var(--tinta-3)}
/* La cifra grande va en la condensada: es la letra del cartel de ruta, y de
   ahi salen los numeros de una playa. */
.madre .n{font:700 clamp(3rem,7vw,4.75rem)/.88 var(--f-din);
          letter-spacing:var(--din-track);font-variant-numeric:tabular-nums;
          color:var(--sodio-hondo)}
/* La misma cifra, pero adentro de un bloque de media hoja: la del instrumento
   ahi entra pisando el titulo. Sale de tres style= a mano en minimercado. */
.madre.chica{margin-bottom:var(--e2)}
.madre.chica .n{font-size:2.75rem}
.madre.chica .pe{font-size:1.5rem}

.bajo{margin:var(--e2) 0 0;color:var(--tinta-2);font-size:var(--t-apoyo)}
.bajo b{color:var(--tinta);font-family:var(--f-num);font-weight:500;font-size:.94em}

/* Lo que esta cifra NO cuenta. Va del tamano del renglon de arriba y no en
   letra chica de contrato: es lo unico que explica por que Hoy muestra otro
   numero para el mismo turno, y en letra chica no lo lee nadie. */
.aparte{margin:var(--e3) 0 0;padding-top:var(--e3);
  border-top:1px solid var(--borde);color:var(--tinta-2);
  font-size:var(--t-apoyo);line-height:1.5;max-width:62ch}
.aparte b{color:var(--tinta);font-family:var(--f-num);font-weight:500}
.aparte a{color:var(--accion-viva);font-weight:600}

/* El unico numero comparativo del resumen: contesta "esta flojo hoy?" sin
   obligar a interpretar un total. */
.ritmo{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:100px;
       font-size:var(--t-menor);font-weight:600;margin-bottom:6px}
/* sin esto, [hidden] pierde contra el display de arriba y el primer turno de
   la serie se queda con el comparativo del turno que estaba antes */
.ritmo[hidden]{display:none}
.ritmo em{font-style:normal;font-weight:400;color:var(--tinta-2)}
.ritmo.arriba{background:var(--ok-piso);color:var(--ok)}
.ritmo.abajo{background:var(--mal-piso);color:var(--mal)}

/* La explicacion aparece SOLO cuando el cotejo no da. Un desvio del 4 % sin
   una linea que diga que significa es un numero que el dueño no puede usar. */
.instr-pie{margin:var(--e4) 0 0;padding:var(--e3) var(--e4);border-radius:var(--r2);
           background:var(--alerta-piso);color:var(--tinta);font-size:var(--t-apoyo);
           line-height:1.5;box-shadow:inset 3px 0 0 var(--alerta)}
.instr-pie[hidden]{display:none}
/* Una tickeadora que no bajo NADA es peor que un reporte suelto que falta:
   ahi no hay descarga, hay un equipo trabado. Va en rojo para que no se lea
   como el mismo aviso ambar de siempre. */
.instr-pie.tk-muda{background:var(--mal-piso);box-shadow:inset 3px 0 0 var(--mal)}
.sectores{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:var(--e5);
          background:var(--borde);border:1px solid var(--borde);border-radius:var(--r2);
          overflow:hidden}
.sector{background:var(--sup);padding:var(--e3) var(--e4);border-top:2px solid transparent}
.sector.s-playa{border-top-color:var(--playa)}
.sector.s-mini{border-top-color:var(--minishop)}
.sector.s-ofi{border-top-color:var(--oficina)}
/* variantes del cotejo de tres cifras: la medicion fisica, lo declarado y la
   diferencia entre las dos. La diferencia nace en alerta y recien se pone en
   ok cuando cae adentro del margen. */
.sector.s-fisico{border-top-color:var(--accion-viva)}
.sector.s-dif{border-top-color:var(--alerta)}
.sector.s-dif.ok{border-top-color:var(--ok)}
.sector .v.neg{color:var(--mal)}
.sector .v.men{font-size:var(--t-medio)}
.sector .rot{display:block;font-size:var(--t-micro);letter-spacing:.09em;
             text-transform:uppercase;color:var(--tinta-3);font-weight:600}
.sector .v{display:block;font:600 var(--t-h2)/1.15 var(--f-num);margin-top:5px;
           font-variant-numeric:tabular-nums}
.sector .sub{font-size:var(--t-menor);color:var(--tinta-2)}

/* ---------------------------------------------- del surtidor a la caja
   Los cuatro papeles del mismo cierre en fila, y entre uno y otro lo que
   los separa. El salto vive EN EL MEDIO a proposito: la diferencia no es
   de ninguna de las dos mediciones, es la distancia entre las dos. */
.cadena{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
        align-items:stretch;margin-top:var(--e5);border:1px solid var(--borde);
        border-radius:var(--r2);overflow:hidden;background:var(--sup)}
.cad-e{padding:var(--e3) var(--e4);border-top:2px solid var(--accion-viva)}
.cad-e.sin{border-top-color:var(--borde);background:var(--sup-2)}
.cad-e .rot{display:block;font-size:var(--t-micro);letter-spacing:.09em;
            text-transform:uppercase;color:var(--tinta-3);font-weight:600}
.cad-e .v{display:block;font:600 var(--t-medio)/1.15 var(--f-num);margin-top:5px;
          font-variant-numeric:tabular-nums}
.cad-e .sub{display:block;font-size:var(--t-menor);color:var(--tinta-2)}
.cad-salto{display:flex;flex-direction:column;align-items:center;
           justify-content:center;gap:2px;padding:0 var(--e2);
           background:var(--sup-2);color:var(--alerta);
           border-inline:1px solid var(--borde)}
.cad-salto.ok,.cad-salto.hueco{color:var(--tinta-3)}
.cad-salto .fl{font-size:var(--t-medio);line-height:1;opacity:.45}
.cad-salto .dd{font:600 var(--t-menor)/1 var(--f-num);
               font-variant-numeric:tabular-nums}
.cad-salto .pp{font-size:var(--t-micro);color:var(--tinta-3)}
/* La lectura hereda de .instr-pie, que nace en ambar. Cuando la cadena
   cierra el piso pasa a verde: un cartel ambar que dice que esta todo bien
   se lee como un problema. */
.cad-lee.ok{background:var(--ok-piso);box-shadow:inset 3px 0 0 var(--ok)}
.cad-falta{margin-top:var(--e3);border:1px solid var(--borde);
           border-radius:var(--r2);background:var(--sup-2);
           font-size:var(--t-apoyo)}
.cad-falta summary{padding:var(--e2) var(--e3);cursor:pointer;font-weight:600;
                   color:var(--tinta-2)}
.cad-falta p{margin:0 var(--e3) var(--e3);color:var(--tinta-2);line-height:1.5}
/* La cadena baja en columna y el salto pasa a ser el renglon que separa un
   eslabon del siguiente. El corte es alto —1140 y no 700— porque con el rail
   abierto en 1024 px la hoja queda en 678 y cada eslabon en 160: ahi el
   rotulo se parte en dos renglones y la bajada en cuatro. */
@media (max-width:1140px){
  .cadena{grid-template-columns:1fr}
  .cad-e{border-top:none;border-left:2px solid var(--accion-viva)}
  .cad-e.sin{border-left-color:var(--borde)}
  .cad-salto{flex-direction:row;gap:var(--e2);justify-content:flex-start;
             padding:var(--e1) var(--e4);border-inline:none;
             border-block:1px solid var(--borde)}
  .cad-salto .fl{transform:rotate(90deg)}
}

/* ======================================================== SURTIDORES
   Instrumento, no dibujo: el numero de surtidor es el bulto, el pico es una
   barra de avance y el estado es un LED. Escala a ocho surtidores y entra
   en un celular. */
/* auto-FIT y no auto-fill: con dos islas en movimiento, fill dejaba tres
   columnas fantasma vacias a la derecha; fit las colapsa y las fichas se
   reparten el ancho entero */
.surtidores{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
            gap:var(--e3)}
.surt{
  background:var(--sup);border:1px solid var(--borde);border-radius:var(--r2);
  padding:var(--e3) var(--e4) var(--e4);display:flex;flex-direction:column;gap:10px;
  position:relative;
}
.surt.activo{border-color:var(--sodio);background:
  linear-gradient(180deg,var(--sodio-piso) 0%,transparent 42%),var(--sup)}
.surt.apagado{opacity:.52}
.surt-cab{display:flex;align-items:center;gap:10px}
.surt-n{
  font:700 1.5rem/1 var(--f-din);letter-spacing:var(--din-track);
  width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:var(--r1);
  background:var(--sup-3);color:var(--tinta-2);font-variant-numeric:tabular-nums;
}
.surt.activo .surt-n{background:var(--sodio);color:#111}
.surt-tit{min-width:0}
.surt-tit b{display:block;font-size:var(--t-apoyo);font-weight:600;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.surt-tit span{font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;
               color:var(--tinta-3);font-weight:600}
.surt.activo .surt-tit span{color:var(--sodio)}
.surt-cifras{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e2)}
.surt-lt{font:500 var(--t-medio)/1 var(--f-num);font-variant-numeric:tabular-nums}
.surt-lt em{font-style:normal;font-size:var(--t-menor);color:var(--tinta-3);
            font-family:var(--f-ui)}
.surt-pl{font:600 var(--t-medio)/1 var(--f-num);font-variant-numeric:tabular-nums}
.picos{display:grid;gap:5px}
.pico{display:flex;align-items:center;gap:8px;font-size:var(--t-micro);color:var(--tinta-3)}
.pico b{font-weight:600;width:34px;flex:none;font-family:var(--f-num)}
.pico .barra{flex:1;height:6px;background:var(--sup-3);border-radius:100px;overflow:hidden}
.pico .barra i{display:block;height:100%;background:var(--tinta-3);border-radius:100px;
               transition:width .5s}
.pico.on .barra i{background:var(--sodio)}
.pico .tot{font-family:var(--f-num);font-variant-numeric:tabular-nums;color:var(--tinta-2)}

/* ============================================================== bloques */
.grilla{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--e4);margin-top:var(--e4)}
.c12{grid-column:span 12} .c8{grid-column:span 8} .c7{grid-column:span 7}
.c6{grid-column:span 6} .c5{grid-column:span 5} .c4{grid-column:span 4}
@media (max-width:1080px){.c8,.c7,.c6,.c5,.c4{grid-column:span 12}}

/* El cuadro es una columna: asi el cuerpo llena lo que le sobra y el pie
   —la nota, el enlace, el boton de ver el resto— queda pegado abajo. Sin
   esto, dos cuadros de la misma fila terminan a la misma altura pero con el
   contenido flotando arriba y medio cuadro en blanco debajo. */
.bloque{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r3);
        box-shadow:var(--s1);display:flex;flex-direction:column}
.bloque > .bloque-cuerpo{flex:1;display:flex;flex-direction:column}
/* Lo que va ultimo en el cuerpo se apoya en el piso del cuadro. */
.bloque > .bloque-cuerpo > .nota:last-child,
.bloque > .bloque-cuerpo > .mas:last-child,
.bloque > .bloque-cuerpo > .hoy-ir:last-child{margin-top:auto}
/* El renglon que destapa lo que no entro. Lo pone `alinear cuadros` del
   script comun cuando recorta una tabla para emparejar la fila. */
.mas{display:block;width:100%;margin:var(--e3) 0 0;padding:var(--e2) var(--e3);
  font:inherit;font-size:var(--t-menor);color:var(--tinta-2);cursor:pointer;
  background:none;border:1px dashed var(--borde-2);border-radius:var(--r2);
  text-align:center}
@media (hover:hover){.mas:hover{color:var(--tinta);border-color:var(--borde)}}
/* Mientras el script mide, los cuadros valen lo que mide su contenido. */
.grilla.midiendo{align-items:start}
tr[hidden]{display:none}
.bloque-cab{display:flex;align-items:center;gap:var(--e3);padding:var(--e4) var(--e4) 0}
.bloque-cab h3{font-size:var(--t-medio);flex:1;min-width:0}
.bloque-cuerpo{padding:var(--e3) var(--e4) var(--e4)}
.nota{margin:var(--e3) 0 0;font-size:var(--t-menor);color:var(--tinta-3);line-height:1.5}
/* un link dentro de una nota hereda el gris de la nota y queda indistinguible
   del texto: si es el camino a otra pantalla, tiene que verse */
.nota a{color:var(--accion-viva);font-weight:600;text-underline-offset:2px}

/* El DESPLIEGUE. Nivel 3: existe, no ocupa. El rotulo dice que hay adentro
   y cuanto, para que abrirlo no sea una apuesta. */
.desp{border-top:1px solid var(--borde);margin-top:var(--e3)}
.desp>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:11px 0 0;font-size:var(--t-menor);font-weight:600;color:var(--accion-viva);
}
.desp>summary::-webkit-details-marker{display:none}
.desp>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .2s}
.desp[open]>summary::after{transform:rotate(-135deg) translateY(0)}
.desp>summary em{font-style:normal;font-weight:400;color:var(--tinta-3);margin-left:auto}
.desp-cuerpo{padding-top:var(--e3)}

/* tablas */
/* El padding derecho es EL MISMO que el de `.reja td` a proposito: sin el, el
   titulo ocupaba mas ancho que su celda y en el celular —donde la tabla se
   encoge hasta el ancho del texto— los titulos quedaban pegados uno al otro
   ("TICKEADORAREPORTEQUE ES"). Se parcheo tabla por tabla dos veces antes de
   ponerlo aca; alinear el titulo con su columna es lo correcto en las veinte
   tablas del sistema, no la excepcion de tres. El ultimo lo pierde igual que
   el td, en la regla de abajo. */
.reja th{
  text-align:left;font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-3);font-weight:600;padding:0 10px 7px 0;
  border-bottom:1px solid var(--borde-2);
}
.reja td{padding:9px 10px 9px 0;border-bottom:1px solid var(--borde);font-size:var(--t-apoyo)}
.reja td:last-child,.reja th:last-child{padding-right:0}
.reja tr:last-child td{border-bottom:0}
.reja .n{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;
         white-space:nowrap}
.reja .chico{color:var(--tinta-2);font-size:var(--t-menor)}
.reja .lead{font-weight:500}

/* barra dentro de tabla: la proporcion se lee sin leer el numero */
.prop{position:relative}
.prop i{position:absolute;left:0;bottom:3px;height:3px;background:var(--playa);
        opacity:.55;border-radius:100px}

/* tickets en vivo */
.tk{list-style:none;margin:0;padding:0}
.tk li{display:flex;align-items:baseline;gap:var(--e3);padding:8px 0;
       border-bottom:1px solid var(--borde);font-size:var(--t-apoyo)}
.tk li:last-child{border-bottom:0}
.tk .h{font-family:var(--f-num);font-size:var(--t-menor);color:var(--tinta-3);width:46px;flex:none}
.tk .d{flex:1;min-width:0}
.tk .d b{font-weight:500}
.tk .d small{display:block;font-size:var(--t-micro);color:var(--tinta-3)}
.tk .m{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:500;
       white-space:nowrap}
.tk li::before{content:"";width:3px;align-self:stretch;border-radius:100px;background:var(--playa)}
.tk li.mini::before{background:var(--minishop)}
.tk li.ofi::before{background:var(--oficina)}
.tk li.nuevo{animation:entra .5s}
@keyframes entra{from{background:var(--sodio-piso);opacity:0}to{opacity:1}}

/* avisos: cada uno lleva al dato, o no es un aviso, es un cartel */
.avisos{display:grid;gap:var(--e2)}
.aviso{display:flex;gap:var(--e3);align-items:flex-start;text-decoration:none;
       padding:var(--e3);border-radius:var(--r2);border:1px solid var(--borde);
       background:var(--sup-2)}
@media (hover:hover){.aviso:hover{border-color:var(--borde-2)}}
.aviso .pip{width:3px;align-self:stretch;border-radius:100px;background:var(--tinta-3);flex:none}
.aviso.alerta .pip{background:var(--alerta)} .aviso.mal .pip{background:var(--mal)}
.aviso b{display:block;font-size:var(--t-apoyo);font-weight:600;color:var(--tinta)}
.aviso span{font-size:var(--t-menor);color:var(--tinta-2)}
/* "Te lo conté el 30/08/2026": el aviso sigue siendo el mismo, pero deja de
   sonar como si fuera de hoy. Va mas apagado que el cuerpo a proposito — es
   una aclaracion, no una segunda noticia. */
.aviso .aviso-dicho{display:block;margin-top:4px;color:var(--tinta-3)}
.aviso .ir{margin-left:auto;align-self:center;font-size:var(--t-menor);font-weight:600;
           color:var(--accion-viva);white-space:nowrap}

/* El resto de los avisos, plegado. Dos a la vista alcanzan: cinco carteles
   rojos juntos no se leen enteros, se saltean enteros. Esconderlos no es —el
   renglon dice cuantos quedan y se abren de un toque. */
.avisos-resto{margin-top:var(--e2)}
.avisos-resto summary{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:7px;padding:11px 0;
  font-size:var(--t-menor);font-weight:600;color:var(--tinta-2)}
.avisos-resto summary::-webkit-details-marker{display:none}
@media (hover:hover){.avisos-resto summary:hover{color:var(--tinta)}}
.avisos-resto summary::after{content:"";width:6px;height:6px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}
.avisos-resto[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.avisos-resto .avisos{margin-top:var(--e2)}

/* El Empleado: la unica pantalla que abre hablando.

   Se lee como parrafos y no como tarjetas a proposito. Una grilla obliga a
   barrer con la vista para armar la frase; aca la frase ya esta armada, y lo
   unico que tiene que hacer el dueño es leer de arriba abajo. El ancho se
   corta en 62 caracteres por lo mismo: un renglon que cruza la pantalla
   entera se vuelve a leer dos veces. */
.emp{max-width:62ch}
.emp-saludo{margin:0;font-size:var(--t-h2);font-weight:600;
  letter-spacing:-.015em;color:var(--tinta)}
.emp-reloj{margin:var(--e1) 0 var(--e5);font-size:var(--t-menor);
  color:var(--tinta-3)}

/* Cada renglon es un enlace a la seccion donde vive el dato: el empleado
   cuenta, no reemplaza a la pantalla que lo muestra entero. Sin recuadro ni
   fondo — la barrita al costado alcanza para separarlos, y encajonar cada
   frase devuelve la pantalla al tablero del que se quiso salir. */
.emp-dice{display:block;text-decoration:none;padding:0 0 0 var(--e4);
  margin:0 0 var(--e4);border-left:2px solid var(--borde-2)}
.emp-dice.alerta{border-left-color:var(--alerta)}
.emp-dice.mal{border-left-color:var(--mal)}
.emp-dice .emp-texto{display:block;font-size:var(--t-medio);line-height:1.45;
  color:var(--tinta)}
.emp-dice .emp-detalle{display:block;margin-top:var(--e1);
  font-size:var(--t-menor);color:var(--tinta-3)}
@media (hover:hover){.emp-dice:hover .emp-texto{color:var(--accion-viva)}}

/* "Todo sigue igual" va apagado y sin barrita: es la ausencia de noticias, y
   con el mismo peso que una se leeria como una. */
.emp-calma{margin:0 0 var(--e4);color:var(--tinta-3);
  font-size:var(--t-apoyo)}

.emp-rot{margin:var(--e5) 0 var(--e2);font-size:var(--t-micro);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-3)}
.emp-turnos{display:grid;gap:var(--e2)}
.emp-turno{display:flex;gap:var(--e3);align-items:center;
  text-decoration:none;padding:var(--e3);border-radius:var(--r2);
  border:1px solid var(--borde);background:var(--sup-2)}
@media (hover:hover){.emp-turno:hover{border-color:var(--borde-2)}}
.emp-turno-que{min-width:0}
.emp-turno-que b{display:block;font-size:var(--t-apoyo);font-weight:600;
  color:var(--tinta)}
.emp-turno-que span{font-size:var(--t-menor);color:var(--tinta-3)}
.emp-turno-num{margin-left:auto;text-align:right;white-space:nowrap}
.emp-turno-num .emp-falta{display:block;font-size:var(--t-menor);
  color:var(--mal)}
.emp-turno-num .emp-sobra{display:block;font-size:var(--t-menor);
  color:var(--tinta-3)}
/* Un turno sin arqueo no vale cero: nadie conto la caja. Decir "$ 0" ahi
   seria inventarle a la estacion un turno que no vendio nada. */
.emp-turno-num .emp-sin{font-size:var(--t-menor);color:var(--tinta-3)}

.emp-pie{margin:var(--e6) 0 0;padding-top:var(--e3);
  border-top:1px solid var(--borde);font-size:var(--t-menor);
  color:var(--tinta-3)}
.emp-pie a{margin-left:var(--e2);color:var(--accion-viva);font-weight:600}

/* La campana: los avisos del Resumen, guardados detras de un boton en la
   cabecera. El globito lleva la cuenta y el color del aviso mas grave; el
   panel es el mismo .avisos de siempre, solo que desplegado a demanda. */

/* .cab es un item de un flex (main), y un item de flex se pinta entero de una
   como si fuera su propio contexto: el z-index del panel de abajo no sale de
   aca y el bloque del turno, que viene despues, le pasa por encima. El dueño
   abre la campana y solo ve el titulo. Esta linea sube la cabecera completa,
   que no tiene fondo y no tapa nada. Se queda en 20 a proposito: la barra de
   arriba (40), el rail del celular (30) y la tapa (80) mandan sobre ella. */
.cab{position:relative;z-index:20}
.campana{position:relative;margin-left:auto;flex:none}
.campana summary{list-style:none;cursor:pointer;position:relative;
  width:40px;height:40px;display:grid;place-items:center;border-radius:100px;
  border:1px solid var(--borde);background:var(--sup);color:var(--tinta-2)}
.campana summary::-webkit-details-marker{display:none}
.campana summary:hover,.campana[open] summary{color:var(--tinta);
  border-color:var(--borde-2)}
.campana summary svg{width:19px;height:19px}
.campana-n{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;
  padding:0 5px;border-radius:100px;display:grid;place-items:center;
  font:700 var(--t-micro)/1 var(--f-num);font-variant-numeric:tabular-nums;
  background:var(--tinta-2);color:var(--sup);border:2px solid var(--fondo)}
.campana-n.alerta{background:var(--alerta);color:#111}
.campana-n.mal{background:var(--mal);color:#fff}
.campana-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:50;
  width:min(440px,calc(100vw - 2 * var(--e4)));
  background:var(--sup);border:1px solid var(--borde);border-radius:var(--r3);
  box-shadow:var(--s2);padding:var(--e4)}
.campana-panel h3{font-size:var(--t-medio);margin-bottom:var(--e3)}

/* ausencia declarada: un cero miente, una ausencia no */
.ausente{border:1px dashed var(--borde-2);border-radius:var(--r2);padding:var(--e4);
         color:var(--tinta-2);font-size:var(--t-apoyo);background:var(--sup-2)}
.ausente b{display:block;color:var(--tinta);margin-bottom:3px}

/* LO QUE SADIA PREPARO. Un renglon por cosa: que es, para quien, y los
   botones al lado. Se apila en el celular porque tres botones y un nombre de
   cliente no entran en 375 px sin cortarse. */
.acc{display:flex;align-items:center;gap:var(--e4);flex-wrap:wrap;
  padding:var(--e3) 0;border-bottom:1px solid var(--borde)}
.acc:last-child{border-bottom:0}
.acc-que{flex:1;min-width:12rem}
.acc-que b{display:block;font-size:var(--t-apoyo);color:var(--tinta)}
.acc-que span{display:block;margin-top:2px;font-size:var(--t-menor);
  color:var(--tinta-2)}
.acc-botones{display:flex;gap:var(--e2);flex-wrap:wrap;align-items:center}
.acc-botones form{margin:0}
.acc-ver{margin:0 0 var(--e3);font-size:var(--t-menor)}
.acc-ver summary{cursor:pointer;color:var(--accion);padding:var(--e2) 0}
.acc-texto{margin:var(--e2) 0 0;padding:var(--e3);background:var(--sup-2);
  border-radius:var(--r2);white-space:pre-wrap;font-size:var(--t-menor);
  line-height:1.5;color:var(--tinta-2);overflow-x:auto}
/* El interruptor de cada accion. La casilla y el desplegable en columna, y
   el boton al final: en una fila sola, en el celular quedaban los tres
   apretados y el desplegable sin ancho para leerse. */
.acc-form{display:flex;flex-direction:column;gap:var(--e2);
  margin:var(--e4) 0 0}
.acc-form button{align-self:flex-start}
/* El pedido: la cantidad con su unidad al lado y el boton, en una fila que
   en el celular baja entera abajo del nombre. */
.ped-cant{display:flex;align-items:center;gap:var(--e2)}
.ped .acc-botones button{margin:0}
.ped-cant input{width:6.5rem;text-align:right;font-variant-numeric:tabular-nums}
.ped-uni{font-size:var(--t-menor);color:var(--tinta-2);min-width:1ch}
.acc-que .ped-mandado{color:var(--ok)}
.ped-mandar{margin:var(--e4) 0 0;display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--e2)}

/* tanque */
.tq{display:flex;align-items:center;gap:var(--e3);padding:10px 0;
    border-bottom:1px solid var(--borde)}
.tq:last-child{border-bottom:0}
.tq-rot{width:132px;flex:none;font-size:var(--t-apoyo)}
.tq-rot small{display:block;font-size:var(--t-micro);color:var(--tinta-3)}
.tq-barra{flex:1;height:9px;background:var(--sup-3);border-radius:100px;overflow:hidden}
.tq-barra i{display:block;height:100%;background:var(--accion-viva);border-radius:100px}
.tq-barra i.bajo{background:var(--alerta)}
.tq-barra i.critico{background:var(--mal)}
.tq-n{width:96px;flex:none;text-align:right;font-family:var(--f-num);
      font-variant-numeric:tabular-nums;font-size:var(--t-apoyo)}

/* franjas del mes */
.franja{display:grid;grid-template-columns:120px 1fr 88px 118px;gap:var(--e3);
        align-items:center;padding:11px 0;border-bottom:1px solid var(--borde)}
.franja:last-child{border-bottom:0}
.franja .rot{font-size:var(--t-apoyo);font-weight:500}
.franja .rot em{display:block;font-style:normal;font-size:var(--t-micro);color:var(--tinta-3);
                font-family:var(--f-num)}
.franja .barra{height:8px;background:var(--sup-3);border-radius:100px;overflow:hidden}
.franja .barra i{display:block;height:100%;background:var(--playa);border-radius:100px}
.franja .lt,.franja .pl{text-align:right;font-family:var(--f-num);
                        font-variant-numeric:tabular-nums;font-size:var(--t-apoyo)}
.franja .lt{color:var(--tinta-2);font-size:var(--t-menor)}
.franja .pl{font-weight:600}
@media (max-width:640px){.franja{grid-template-columns:1fr 96px}
                         .franja .barra,.franja .lt{display:none}}

/* kpis del mes: contexto, no decision del momento */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--e3)}
.kpi{background:var(--sup-2);border:1px solid var(--borde);border-radius:var(--r2);
     padding:var(--e4)}
.kpi .rot{font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;
          color:var(--tinta-3);font-weight:600}
.kpi .cif{font:600 var(--t-h2)/1.2 var(--f-num);margin-top:6px;
          font-variant-numeric:tabular-nums}
.kpi .nota{margin-top:5px;font-size:var(--t-menor);color:var(--tinta-2);line-height:1.45}

/* ================================================== ANCLA DE TURNO
   El control propio de las secciones. El turno es la unidad real de la
   estacion: el numero es un correlativo que llega a 90 y se resetea por mes,
   y la franja sale de la hora de cierre. La clave es (fecha, turno), porque
   hay dias con cuatro cierres — un tablero que asuma tres turnos fijos por
   dia miente. */
/* ================================================ SOLAPAS DEL TURNO
   Las tres caras del mismo turno: la playa, el salon y la lista de cierres.
   Eran tres entradas del menu; ahora son un solo lugar, y esto es lo unico
   que dice cual de las tres se esta mirando. */
.solapas{
  display:flex;gap:4px;margin-bottom:var(--e4);overflow-x:auto;
  background:var(--sup-2);border:1px solid var(--borde);
  border-radius:var(--r3);padding:4px;
}
.solapa{
  flex:0 0 auto;white-space:nowrap;text-decoration:none;
  padding:9px 18px;border-radius:var(--r2);color:var(--tinta-2);
  font:600 var(--t-menor)/1.4 var(--f-din);letter-spacing:var(--din-track);
}
@media (hover:hover){.solapa:hover{background:var(--sup-3);color:var(--tinta)}}
.solapa.on{background:var(--sup);color:var(--tinta);box-shadow:var(--s1)}

/* El ancla NO es una tarjeta. Era una caja blanca con borde, sombra, relleno
   y flechas de 40px: ocupaba mas alto que el titulo, se llevaba la mirada y
   empujaba el primer numero para abajo. Ahora es un renglon —las flechitas,
   que turno se esta mirando, y la salida— del alto de una linea de texto.
   Lo que manda en la pantalla es la plata de abajo, no el cartel que dice
   cual turno es. */
.ancla{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--e1) var(--e2);
  margin-bottom:var(--e4);min-width:0;
}
.ancla-b{
  width:26px;height:26px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:var(--sup-2);border:1px solid var(--borde);border-radius:var(--r1);
  color:var(--tinta-2);font-size:.9rem;line-height:1;
}
@media (hover:hover){.ancla-b:hover:not(:disabled){background:var(--sup-3);color:var(--tinta)}}
.ancla-b:disabled{opacity:.35;cursor:not-allowed}
/* El nombre del turno y su ficha van en el MISMO renglon mientras entren, y
   recien se acuestan cuando no: en el celular eran dos lineas siempre.
   `flex:1 1 0` no es capricho: con base `auto` el navegador mide la ficha
   entera ANTES de encogerla, no le entra al lado de las flechas y la manda
   sola a un renglon de abajo. Con base 0 entra siempre al lado, y de paso
   empuja la salida contra el borde derecho. */
.ancla-q{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--e2);
  flex:1 1 0;min-width:0;
}
.ancla-q b{font:600 var(--t-base)/1.35 var(--f-din);white-space:nowrap;
           letter-spacing:var(--din-track)}
.ancla-q span{font-size:var(--t-menor);color:var(--tinta-2);line-height:1.35}
.ancla-q span i{font-style:normal;font-family:var(--f-num)}
/* Adentro del ancla la salida es un enlace pelado: la pastilla de color le
   daba peso de boton principal y no lo es. Fuera del ancla la pastilla sigue
   viva —la usa el panel del salon sin PC—, por eso la regla es solo para el
   hijo directo. */
.ancla-hoy{
  font-size:var(--t-menor);color:var(--accion-viva);font-weight:600;
  text-decoration:none;white-space:nowrap;padding:8px 12px;border-radius:var(--r2);
  background:var(--accion-piso);
}
.ancla > .ancla-hoy{padding:0;background:none;margin-left:var(--e2);
                    white-space:normal}
@media (hover:hover){.ancla > .ancla-hoy:hover{text-decoration:underline}}
/* En el telefono la salida baja sola. Peleando por el mismo renglon le
   robaba el ancho a la ficha y la fecha se partia en cinco pedazos. */
@media (max-width:700px){
  .ancla > .ancla-hoy{flex:1 1 100%;margin-left:34px}
}

/* ==================================================== ARQUEO DEL TURNO
   Los conceptos NO son columnas fijas: cada estacion tiene los suyos, se
   repiten dentro del mismo archivo y traen los typos del VB. Y casi todos
   vienen en cero. Mostrar 25 renglones de los cuales 21 son cero es la
   forma exacta de un administrador de base de datos: van los que se
   movieron, y los ceros abajo, contados. */
.arq{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e3);
     padding:9px 0;border-bottom:1px solid var(--borde);font-size:var(--t-apoyo)}
.arq:last-child{border-bottom:0}
.arq .m{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:500;
        white-space:nowrap}
.arq.cero{color:var(--tinta-3)} .arq.cero .m{font-weight:400}
.arq.suma{border-top:2px solid var(--borde-2);border-bottom:0;margin-top:4px;
          padding-top:11px;font-weight:600}
.arq.suma .m{font-weight:700}
.arq.queda{margin:var(--e2) calc(var(--e3) * -1) 0;padding:12px var(--e3);
           background:var(--sodio-piso);border-radius:var(--r2);border-bottom:0;
           font-weight:600}
.arq.queda .m{font-weight:700;color:var(--sodio-hondo);font-size:var(--t-medio)}
.arq-tipo{font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;
          color:var(--tinta-3);font-weight:600;margin:var(--e4) 0 2px}
.arq-tipo:first-child{margin-top:0}

/* ============================================ RUBRO CON ARTICULOS ADENTRO
   La forma propia del salon. En Playa la unidad es el litro y el producto es
   una lista corta; aca son cinco o seis rubros con decenas de articulos
   adentro, y la pregunta no es cuanto sino QUE. Por eso el rubro es la fila
   y el articulo vive adentro del rubro, no en otra tabla. */
/* .rubro es tambien .desp para heredar el comportamiento de despliegue, y por
   eso tiene que APAGAR a mano lo que .desp le impone: el filete de arriba (ya
   tiene el suyo abajo), el color de link (aca el rotulo es dato, no accion) y
   la flecha del ::after, que en una grilla de 4 columnas se cuela como quinto
   item y aparece una segunda vez debajo del nombre. */
.rubro{border-bottom:1px solid var(--borde);border-top:0;margin-top:0}
.rubro:last-of-type{border-bottom:0}
.rubro>summary{
  list-style:none;cursor:pointer;display:grid;gap:var(--e2) var(--e3);align-items:center;
  grid-template-columns:1fr auto auto 12px;padding:11px 0;color:var(--tinta);
  font-size:var(--t-apoyo);font-weight:500;
}
.rubro>summary::after{content:none}
.rubro>summary::-webkit-details-marker{display:none}
@media (hover:hover){.rubro>summary:hover .rot{color:var(--accion-viva)}}
.rubro .rot{position:relative;min-width:0;overflow:hidden;text-overflow:ellipsis;
            white-space:nowrap;padding-bottom:7px}
/* .7 y no .6: por debajo de eso la barra no llega a 3:1 contra la hoja en el
   tema claro, y una barra que no se ve no es un dato */
.rubro .rot i{position:absolute;left:0;bottom:0;height:3px;background:var(--minishop);
              opacity:.7;border-radius:100px}
.rubro .u{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;
          font-size:var(--t-menor);color:var(--tinta-2);white-space:nowrap}
.rubro .p{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;
          font-weight:600;white-space:nowrap}
.rubro .fl{width:7px;height:7px;justify-self:end;border-right:2px solid var(--tinta-3);
           border-bottom:2px solid var(--tinta-3);transform:rotate(45deg) translateY(-2px);
           transition:transform .2s}
.rubro[open] .fl{transform:rotate(-135deg)}
.rubro-cuerpo{padding:0 0 var(--e4) var(--e4);border-left:2px solid var(--borde-2);
              margin:0 0 var(--e2) 2px;overflow-x:auto}
.rubro-cuerpo .reja td{font-size:var(--t-menor)}
/* Los nombres vienen cortados a 18 caracteres por el sistema de la estacion.
   No se completan a mano: si el encargado busca el articulo en su pantalla,
   tiene que encontrar el mismo texto. */
/* el número de rubro del maestro de la estación: es su identidad, y el
   encargado lo conoce de memoria */
.rnum{font-family:var(--f-num);font-size:var(--t-micro);font-weight:600;
      color:var(--tinta-3);margin-right:3px}
.reja td.art{font-family:var(--f-num);font-size:var(--t-menor)}
.art{font-family:var(--f-num);font-size:var(--t-menor)}

/* ================================================ DIAGNOSTICO DE ESTACION
   Cuando una seccion entera no tiene fuente, la pantalla no se disculpa: dice
   por que, si es algo roto o algo sin configurar, y que hacer. Esconderlo en
   un log es como no tenerlo. */
.diag{border:1px solid var(--alerta);border-radius:var(--r3);overflow:hidden}
.diag-cab{background:var(--alerta-piso);padding:var(--e4);border-bottom:1px solid var(--borde)}
.diag-cab b{display:block;font-size:var(--t-medio);font-weight:600;margin-bottom:4px}
.diag-cab span{font-size:var(--t-apoyo);color:var(--tinta-2);line-height:1.55}
.diag-cuerpo{padding:var(--e4)}
.diag-paso{display:flex;gap:var(--e3);padding:var(--e3) 0;
           border-bottom:1px solid var(--borde);font-size:var(--t-apoyo)}
.diag-paso:last-of-type{border-bottom:0}
.diag-paso .n{width:24px;height:24px;flex:none;display:grid;place-items:center;
              border-radius:50%;background:var(--sup-3);color:var(--tinta-2);
              font:600 var(--t-micro)/1 var(--f-num)}
.diag-paso b{font-weight:600}
.diag-paso p{margin:3px 0 0;color:var(--tinta-2);font-size:var(--t-menor);line-height:1.5}
.ruta{font-family:var(--f-num);font-size:var(--t-menor);background:var(--sup-3);
      padding:2px 6px;border-radius:var(--r1);white-space:nowrap}

/* ============================================== LISTA DE CIERRES
   La única sección donde la unidad NO es un turno sino TODOS: la pregunta es
   "¿cerró cada uno?", y eso no se contesta mirando de a uno. Por eso acá no
   hay ancla con flechas: hay lista y mes. */
.ci{border-bottom:1px solid var(--borde)}
.ci:last-of-type{border-bottom:0}
.ci>summary{
  list-style:none;cursor:pointer;display:grid;gap:var(--e2) var(--e3);align-items:center;
  /* SIETE hijos, siete pistas. Con seis, el chip se caía a una segunda fila
     debajo del número de turno y cada renglón crecía 8 px. */
  grid-template-columns:112px 1fr auto auto 104px auto 12px;padding:11px 0;
  font-size:var(--t-apoyo);color:var(--tinta);
}
.ci>summary::-webkit-details-marker{display:none}
@media (hover:hover){.ci>summary:hover .ci-t{color:var(--accion-viva)}}
.ci-t{font-weight:600;white-space:nowrap}
.ci-t em{font-style:normal;font-weight:400;color:var(--tinta-3);
         font-size:var(--t-menor);margin-left:5px}
.ci-d{color:var(--tinta-2);font-size:var(--t-menor);min-width:0;overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-num)}
.ci-d b{font-family:var(--f-num);font-weight:500;color:var(--tinta)}
/* la franja horaria es el contexto de la hora, no otro dato: retrocede */
.ci-d em{font-style:normal;color:var(--tinta-3);margin-left:5px}
.ci-n{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;
      white-space:nowrap;font-size:var(--t-menor);color:var(--tinta-2);
      min-width:0;overflow:hidden}
.ci-q{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;
      white-space:nowrap;font-weight:600}
.ci-e{justify-self:end}
.ci-fl{width:7px;height:7px;justify-self:end;border-right:2px solid var(--tinta-3);
       border-bottom:2px solid var(--tinta-3);transform:rotate(45deg) translateY(-2px);
       transition:transform .2s}
.ci[open] .ci-fl{transform:rotate(-135deg)}
.ci-cuerpo{padding:0 0 var(--e4) var(--e4);border-left:2px solid var(--borde-2);
           margin:0 0 var(--e2) 2px}

/* El hueco del correlativo. No es una fila más de la lista: es la única cosa
   de esta pantalla que el dueño tiene que resolver hoy. */
.ci-hueco{display:flex;gap:var(--e3);align-items:flex-start;margin:var(--e2) 0;
          padding:var(--e3) var(--e4);border-radius:var(--r2);
          background:var(--mal-piso);box-shadow:inset 3px 0 0 var(--mal)}
.ci-hueco b{display:block;font-size:var(--t-apoyo);font-weight:600}
.ci-hueco span{font-size:var(--t-menor);color:var(--tinta-2);line-height:1.5}

.chip{font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;
      font-weight:600;padding:3px 8px;border-radius:100px;white-space:nowrap;
      background:var(--sup-3);color:var(--tinta-3)}
.chip.ok{background:var(--ok-piso);color:var(--ok)}
.chip.alerta{background:var(--alerta-piso);color:var(--alerta)}
.chip.mal{background:var(--mal-piso);color:var(--mal)}

/* El día, como separador de la lista: sin esto son cuarenta renglones iguales */
/* Sin borde arriba: el .ci de encima ya trae el suyo abajo y las dos líneas
   juntas hacen un filete doble. Separa el aire, que alcanza. */
.ci-dia{display:flex;align-items:baseline;gap:var(--e3);margin:var(--e5) 0 var(--e2)}
.ci-dia:first-child{margin-top:0}
.ci-dia b{font:600 var(--t-apoyo)/1 var(--f-din);letter-spacing:var(--din-track)}
.ci-dia span{font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;
             color:var(--tinta-3);font-weight:600}
.ci-dia em{margin-left:auto;font-style:normal;font-size:var(--t-menor);
           color:var(--tinta-2);font-family:var(--f-num)}

/* 1140 y no 760: entre 1081 y 1108 el bloque vuelve a 8 de 12 columnas y el
   renglón no entra. La medida manda sobre el número redondo. */
@media (max-width:1140px){
  .ci>summary{grid-template-columns:1fr auto auto 12px}
  .ci-d,.ci-n{display:none}
}
@media (max-width:620px){
  .ci>summary{grid-template-columns:1fr auto 12px}
  .ci-e{grid-column:1 / -1;justify-self:start}
}

/* ============================================== CUENTAS CORRIENTES
   La sección más difícil de entender del sistema, y por eso la que más
   trabajo de explicación necesita. El renglón del deudor tiene que contestar
   tres cosas de un vistazo: cuánto debe, hace cuánto que no paga, y para
   dónde va el saldo. */
.deu{border-bottom:1px solid var(--borde)}
.deu:last-of-type{border-bottom:0}
.deu>summary{
  list-style:none;cursor:pointer;display:grid;gap:var(--e2) var(--e3);align-items:center;
  grid-template-columns:1fr 128px 124px 12px;padding:13px 0;
  font-size:var(--t-apoyo);color:var(--tinta);
}
.deu>summary::after{content:none}
.deu>summary::-webkit-details-marker{display:none}
@media (hover:hover){.deu>summary:hover .deu-n{color:var(--accion-viva)}}
.deu-q{min-width:0}
.deu-n{display:block;font-weight:600;white-space:nowrap;overflow:hidden;
       text-overflow:ellipsis}
.deu-b{display:block;height:4px;margin-top:6px;background:var(--sup-3);
       border-radius:100px;overflow:hidden}
.deu-b i{display:block;height:100%;background:var(--accion-viva);border-radius:100px}
.deu-b i.hace{background:var(--mal)}
.deu-s{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;
       font-weight:600;white-space:nowrap}
.deu-s.favor{color:var(--ok)}
.deu-e{justify-self:end;text-align:right}
.deu-e small{display:block;font-size:var(--t-micro);color:var(--tinta-3);margin-top:3px}
.deu-fl{width:7px;height:7px;justify-self:end;border-right:2px solid var(--tinta-3);
        border-bottom:2px solid var(--tinta-3);transform:rotate(45deg) translateY(-2px);
        transition:transform .2s}
.deu[open] .deu-fl{transform:rotate(-135deg)}
.deu-cuerpo{padding:var(--e3) 0 var(--e4) var(--e4);
            border-left:2px solid var(--borde-2);margin:0 0 var(--e2) 2px}

/* La curva del saldo. Un saldo que sólo sube es una foto distinta de uno que
   sube y baja, y eso no se ve en una cifra. */
/* El SVG se estira al ancho del bloque, así que TODO lo que se dibuje tiene
   que aguantar la deformación. Por eso el trazo lleva `non-scaling-stroke` y
   el pago se marca con una línea VERTICAL: un círculo estirado sale óvalo y
   se lee distinto en el escritorio que en el celular. */
.curva{width:100%;height:90px;display:block}
.curva .linea{fill:none;stroke:var(--accion-viva);stroke-width:2;
              stroke-linejoin:round;stroke-linecap:round;
              vector-effect:non-scaling-stroke}
.curva .area{fill:var(--accion-piso);stroke:none}
.curva.favor .linea{stroke:var(--ok)}
.curva.favor .area{fill:var(--ok-piso)}
/* la marca de pago va DEBAJO de la línea del saldo y no encima: encima, verde
   sobre petróleo da 1,1:1 y desaparece */
.curva .pago{stroke:var(--ok);stroke-width:2;vector-effect:non-scaling-stroke;
             opacity:.85}
.curva-pie{display:flex;justify-content:space-between;font-size:var(--t-micro);
           color:var(--tinta-3);font-family:var(--f-num);margin-top:4px}

/* Un movimiento: la patente es lo que hace que el cliente reconozca el suyo */
.mov{display:grid;grid-template-columns:64px 1fr auto;gap:var(--e3);
     align-items:baseline;padding:9px 0;border-bottom:1px solid var(--borde);
     font-size:var(--t-menor)}
.mov:last-child{border-bottom:0}
/* El remito que se puede abrir. Hereda el color a proposito: un renglon de
   plata pintado de celeste y subrayado se lee como otra cosa, no como el
   mismo movimiento que ya estaba ahi. Lo unico que lo delata es el realce al
   pasarle por encima, y en el celular el propio toque. */
a.mov{color:inherit;text-decoration:none;cursor:pointer}
a.mov:hover .q b,a.mov:focus-visible .q b{text-decoration:underline;
      text-underline-offset:2px}
.mov .f{font-family:var(--f-num);color:var(--tinta-3)}
.mov .q b{font-weight:600;font-size:var(--t-apoyo)}
.mov .q .lt{color:var(--tinta-3)}
.mov .i{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;
        font-weight:600;white-space:nowrap;font-size:var(--t-apoyo)}
/* `.mov .q span` le ganaba por especificidad y convertía la chapa en una
   banda de ancho completo: la patente se declara con la misma fuerza */
.mov .q .pat{font-family:var(--f-num);font-size:var(--t-micro);font-weight:600;
     letter-spacing:.06em;padding:2px 6px;border-radius:var(--r1);
     background:var(--sup-3);color:var(--tinta-2);margin-left:6px;
     display:inline-block}

/* El cuadro que explica el modelo. No es relleno: es la mitad de la sección. */
.fuentes{display:grid;gap:var(--e2)}
.fte{display:grid;grid-template-columns:auto 1fr;gap:var(--e3);
     padding:var(--e3);border-radius:var(--r2);background:var(--sup-2);
     border:1px solid var(--borde)}
.fte-n{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
       background:var(--sup-3);color:var(--tinta-2);font:600 var(--t-micro)/1 var(--f-num)}
.fte b{display:block;font-size:var(--t-apoyo);font-weight:600}
.fte span{font-size:var(--t-menor);color:var(--tinta-2);line-height:1.5}
.fte em{font-style:normal;color:var(--tinta-3)}

@media (max-width:820px){
  .deu>summary{grid-template-columns:1fr auto 12px}
  /* la flecha se fija a la fila 1: con colocación automática caía a una
     TERCERA fila, suelta, después del bloque que ocupa todo el ancho */
  .deu-fl{grid-row:1;grid-column:3}
  .deu-e{grid-row:2;grid-column:1 / -1;justify-self:start;text-align:left;
         display:flex;gap:var(--e2);align-items:baseline}
  .deu-e small{margin-top:0}
}

/* ================================================ CUADRE DEL MES
   La cascada: de la manguera hasta dónde está la plata hoy. Es UNA cadena, y
   por eso se dibuja como una cadena y no como cuatro tarjetas sueltas. */
.casc{display:grid;gap:3px;margin-top:var(--e2)}
.casc-f{display:grid;grid-template-columns:14px 1fr auto 96px;gap:var(--e3);
        align-items:center;padding:13px var(--e4);border-radius:var(--r2);
        background:var(--sup-2);border:1px solid var(--borde);font-size:var(--t-apoyo)}
.casc-f .pip{width:4px;height:26px;border-radius:100px;background:var(--tinta-3)}
.casc-f.efec .pip{background:var(--ok)}
.casc-f.tarj .pip{background:var(--oficina)}
.casc-f.cc   .pip{background:var(--mal)}
.casc-f b{font-weight:600;display:block}
.casc-f small{display:block;font-size:var(--t-menor);color:var(--tinta-2);
              margin-top:2px;line-height:1.45}
.casc-f .pc{font-family:var(--f-num);font-variant-numeric:tabular-nums;
            color:var(--tinta-2);font-size:var(--t-menor);white-space:nowrap}
.casc-f .im{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;
            font-weight:600;white-space:nowrap}
.casc-tit{display:flex;align-items:baseline;gap:var(--e3);padding:var(--e3) var(--e4) 0;
          font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;
          color:var(--tinta-3);font-weight:600}
/* la barra apilada: los tres destinos, uno al lado del otro, a escala */
.apil{display:flex;height:14px;border-radius:100px;overflow:hidden;gap:2px;
      margin:var(--e3) 0 var(--e2)}
.apil i{display:block;height:100%}
.apil .efec{background:var(--ok)} .apil .tarj{background:var(--oficina)}
.apil .cc{background:var(--mal)}

/* La escala del desvío: el MARCO que le faltaba a esta pantalla. Un 0,55 %
   sin una regla al lado es un número que nadie sabe si está bien. */
.escala{position:relative;height:10px;border-radius:100px;margin:var(--e5) 0 var(--e2);
        background:linear-gradient(90deg,var(--ok) 0%,var(--ok) 30%,
                   var(--alerta) 45%,var(--alerta) 62%,var(--mal) 78%,var(--mal) 100%)}
.escala .marca{position:absolute;top:-7px;width:3px;height:24px;border-radius:2px;
               background:var(--tinta);box-shadow:0 0 0 2px var(--sup)}
.escala-pie{display:flex;justify-content:space-between;font-size:var(--t-micro);
            color:var(--tinta-3);font-family:var(--f-num)}
.escala-rot{display:flex;justify-content:space-between;font-size:var(--t-menor);
            color:var(--tinta-2);margin-top:var(--e2);gap:var(--e3)}
.escala-rot span{flex:1}
.escala-rot b{display:block;font-weight:600;color:var(--tinta)}

/* Las dos areas del cuadre viven una al lado de la otra y la grilla las
   estira a la misma altura, pero el minimercado llega con dos fuentes y la
   playa con cuatro: sin esto el resumen de la derecha queda a media altura y
   debajo sobra medio bloque vacio. Van los dos al piso, a la misma linea.
   El `align-self` hace falta porque `.grilla` es `align-items:start`: sin eso
   los dos bloques miden lo que mide su contenido y no hay hueco que repartir,
   que es lo que el `margin-top:auto` necesita. */
.cu-area{display:flex;flex-direction:column;align-self:stretch}
.cu-area .bloque-cuerpo{display:flex;flex-direction:column;flex:1}
.cu-area .sectores{margin-top:auto}

/* El bloque que ata el cuadre con la cuenta corriente */
.puente{border:1px solid var(--mal);border-radius:var(--r3);overflow:hidden}
.puente-cab{background:var(--mal-piso);padding:var(--e4) var(--e5)}
.puente-cab b{display:block;font:600 var(--t-h2)/1.25 var(--f-din);
              letter-spacing:var(--din-track);margin-bottom:6px}
.puente-cab span{font-size:var(--t-apoyo);color:var(--tinta-2);line-height:1.55}
.puente-cuerpo{padding:var(--e4) var(--e5) var(--e5)}
.puente-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4);
             margin-bottom:var(--e4)}
.puente-tres div{border-left:2px solid var(--borde-2);padding-left:var(--e3)}
.puente-tres .rot{display:block;font-size:var(--t-micro);letter-spacing:.09em;
                  text-transform:uppercase;color:var(--tinta-3);font-weight:600}
.puente-tres .v{display:block;font:600 var(--t-h2)/1.2 var(--f-num);margin-top:5px;
                font-variant-numeric:tabular-nums}
.puente-tres .v.mal{color:var(--mal)}
.puente-tres small{display:block;font-size:var(--t-menor);color:var(--tinta-2);
                   margin-top:4px;line-height:1.45}
@media (max-width:700px){
  .casc-f{grid-template-columns:14px 1fr auto;gap:var(--e2) var(--e3)}
  .casc-f .im{grid-column:2 / -1;text-align:left}
  .puente-tres{grid-template-columns:1fr}
}

/* ==================================================== IMPUESTOS
   La única pantalla del sistema donde el estado ideal es "no tenés que hacer
   nada". Eso obliga a dos cosas: que el "está hecho" se lea en una palabra, y
   que el "falta algo" sea imposible de no ver. */
.ctrl{border:1px solid var(--borde);border-radius:var(--r2);margin-bottom:var(--e2);
      overflow:hidden}
.ctrl:last-child{margin-bottom:0}
.ctrl.falla{border-color:var(--mal)}
.ctrl-cab{display:flex;align-items:center;gap:var(--e3);padding:var(--e3) var(--e4);
          background:var(--sup-2);border-bottom:1px solid var(--borde)}
.ctrl.falla .ctrl-cab{background:var(--mal-piso)}
.ctrl-cab b{font-size:var(--t-apoyo);font-weight:600}
.ctrl-cab .pv{font-family:var(--f-num);font-size:var(--t-menor);color:var(--tinta-3)}
.ctrl-cab .chip{margin-left:auto}
.rep{display:grid;grid-template-columns:auto 1fr auto;gap:var(--e3);align-items:center;
     padding:11px var(--e4);border-bottom:1px solid var(--borde);font-size:var(--t-apoyo)}
.rep:last-child{border-bottom:0}
.rep .form{font-family:var(--f-num);font-weight:600;font-size:var(--t-menor);
           background:var(--sup-3);padding:3px 7px;border-radius:var(--r1);
           color:var(--tinta-2)}
.rep b{font-weight:500;display:block}
.rep small{display:block;font-size:var(--t-micro);color:var(--tinta-3);margin-top:2px;
           font-family:var(--f-num)}
.rep .est{white-space:nowrap}

/* el histórico: doce cuadraditos, uno por mes. Se lee de un vistazo si la
   estación viene en regla o si esto pasa siempre. */
.meses{display:flex;gap:5px;flex-wrap:wrap;margin-top:var(--e2)}
.mes-c{width:34px;text-align:center}
.mes-c i{display:block;height:26px;border-radius:var(--r1);background:var(--ok)}
.mes-c i.falta{background:var(--mal)}
.mes-c i.nada{background:var(--sup-3)}
.mes-c span{display:block;font-size:var(--t-micro);color:var(--tinta-3);
            font-family:var(--f-num);margin-top:3px}

/* ==================================================== MIS ARCHIVOS
   La caja fuerte. Acá la pantalla tiene UNA acción — bajar la carpeta del mes
   — y todo lo demás está para que el dueño confíe en apretarla. */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;
     border-radius:var(--r2);border:1px solid transparent;cursor:pointer;
     font:600 var(--t-apoyo)/1 var(--f-ui);text-decoration:none;
     background:var(--accion);color:var(--sobre-color)}
@media (hover:hover){.btn:hover{background:var(--accion-viva)}}
.btn.claro{background:var(--sup-3);color:var(--tinta);border-color:var(--borde-2)}
@media (hover:hover){.btn.claro:hover{background:var(--sup-2)}}
.btn.chico{padding:7px 12px;font-size:var(--t-menor)}
.btn:focus-visible{outline:2px solid var(--accion-viva);outline-offset:2px}

.arch{display:grid;grid-template-columns:auto 1fr auto auto;gap:var(--e3);
      align-items:center;padding:12px var(--e4);border-bottom:1px solid var(--borde);
      font-size:var(--t-apoyo)}
.arch:last-child{border-bottom:0}
.arch .tipo{width:34px;height:34px;flex:none;display:grid;place-items:center;
            border-radius:var(--r1);background:var(--sup-3);color:var(--tinta-2);
            font:600 var(--t-micro)/1 var(--f-num)}
.arch.no .tipo{background:var(--mal-piso);color:var(--mal)}
.arch b{font-weight:500;display:block}
.arch .meta{display:block;font-size:var(--t-micro);color:var(--tinta-3);margin-top:3px;
            font-family:var(--f-num);word-break:break-all}
.arch .peso{font-family:var(--f-num);font-variant-numeric:tabular-nums;
            color:var(--tinta-2);font-size:var(--t-menor);white-space:nowrap}

/* la caja del mes: la acción, con lo que hay adentro a la vista */
.bajar{display:flex;align-items:center;gap:var(--e4);flex-wrap:wrap;
       padding:var(--e4) var(--e5);border-radius:var(--r3);
       background:var(--accion-piso);border:1px solid var(--accion-borde, var(--borde-2))}
.bajar-q{flex:1;min-width:200px}
.bajar-q b{display:block;font-size:var(--t-medio);font-weight:600}
.bajar-q span{font-size:var(--t-menor);color:var(--tinta-2);line-height:1.5}
.arbol{font-family:var(--f-num);font-size:var(--t-menor);color:var(--tinta-2);
       line-height:1.7;margin:var(--e3) 0 0;white-space:pre;overflow-x:auto}
.arbol b{color:var(--tinta);font-weight:600}
.arbol i{font-style:normal;color:var(--tinta-3)}

@media (max-width:700px){
  .arch{grid-template-columns:auto 1fr;gap:var(--e2) var(--e3)}
  .arch .peso,.arch .btn{grid-column:2}
}

/* ========================================================= MI PC
   La pantalla que explica a todas las demás: si esto no reporta, cada cero
   del sistema es un cero que no se puede creer. */
.rutina{display:grid;grid-template-columns:auto 1fr auto;gap:var(--e3);
        align-items:center;padding:12px 0;border-bottom:1px solid var(--borde);
        font-size:var(--t-apoyo)}
.rutina:last-child{border-bottom:0}
.rutina .hora{font-family:var(--f-num);font-weight:600;font-size:var(--t-menor);
              background:var(--sup-3);color:var(--tinta-2);padding:4px 8px;
              border-radius:var(--r1);white-space:nowrap}
.rutina b{font-weight:500;display:block}
.rutina small{display:block;font-size:var(--t-menor);color:var(--tinta-3);
              margin-top:2px;line-height:1.45}
.rutina .cuando{font-size:var(--t-micro);color:var(--tinta-3);font-family:var(--f-num);
                white-space:nowrap;text-align:right}

/* las carpetas que mira: una lista de rutas con su estado */
.carp{display:grid;grid-template-columns:auto 1fr auto;gap:var(--e3);
      align-items:center;padding:11px 0;border-bottom:1px solid var(--borde)}
.carp:last-of-type{border-bottom:0}
.carp .led{width:9px;height:9px;animation:none}
.carp .led.gris{background:var(--tinta-3)}
.carp b{display:block;font-size:var(--t-menor);color:var(--tinta-2);font-weight:400}
.carp .ruta{display:inline-block;margin-bottom:3px}

/* el gran semáforo de la señal */
.senal{display:flex;align-items:center;gap:var(--e4)}
.senal-led{width:52px;height:52px;flex:none;border-radius:50%;position:relative;
           background:var(--ok-piso);display:grid;place-items:center}
.senal-led::after{content:"";width:18px;height:18px;border-radius:50%;
                  background:var(--ok);animation:latir 2.6s infinite}
.senal.mal .senal-led{background:var(--mal-piso)}
.senal.mal .senal-led::after{background:var(--mal);animation:none}

/* ========================================================== AYUDA
   Un chat cuyo objetivo NO es conversar: es que la persona resuelva sola y no
   levante el teléfono. Todo lo de acá abajo está para eso — que arranque sin
   saber qué preguntar, que pueda verificar la respuesta, y que cuando el bot
   no sabe, derive con el diagnóstico ya escrito. */
.chat{display:flex;flex-direction:column;gap:var(--e4);min-height:420px}
.msg{display:flex;gap:var(--e3);max-width:92%}
.msg.yo{align-self:flex-end;flex-direction:row-reverse}
.msg-av{width:30px;height:30px;flex:none;border-radius:50%;display:grid;
        place-items:center;background:var(--accion);color:var(--sobre-color);
        font:600 var(--t-micro)/1 var(--f-num)}
.msg.yo .msg-av{background:var(--sup-3);color:var(--tinta-2)}
.msg-q{min-width:0}
.burb{padding:var(--e3) var(--e4);border-radius:var(--r3);background:var(--sup-2);
      border:1px solid var(--borde);font-size:var(--t-apoyo);line-height:1.55}
.msg.yo .burb{background:var(--accion-piso);border-color:var(--accion-borde,var(--borde-2))}
.burb p{margin:0 0 var(--e2)} .burb p:last-child{margin-bottom:0}
.burb b{font-weight:600}
.burb .cif{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:600}
.burb ol{margin:var(--e2) 0 0;padding-left:1.25rem}
.burb ol li{margin-bottom:5px}
.burb .tecla{font-family:var(--f-num);font-size:var(--t-menor);font-weight:600;
             background:var(--sup-3);padding:1px 6px;border-radius:var(--r1);
             border:1px solid var(--borde-2)}
/* De dónde salió la respuesta. Es lo más importante de la pantalla: si el bot
   dice "andá a la opción 4" y se equivoca, la persona pierde veinte minutos y
   termina llamando igual — que es justo lo que queríamos evitar. */
.fuente-chip{display:inline-flex;align-items:center;gap:6px;margin-top:var(--e2);
             font-size:var(--t-micro);letter-spacing:.04em;font-weight:600;
             padding:4px 9px;border-radius:100px;background:var(--sup-3);
             color:var(--tinta-2)}
.fuente-chip.vb{background:var(--sodio-piso);color:var(--sodio)}
.fuente-chip.datos{background:var(--accion-piso);color:var(--accion-viva)}
.fuente-chip.guia{background:var(--ok-piso);color:var(--ok)}
.fuente-chip.derivacion{background:var(--mal-piso);color:var(--mal)}
.sug{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e2)}
.sug button{font:500 var(--t-menor)/1.3 var(--f-ui);text-align:left;cursor:pointer;
            padding:9px 13px;border-radius:100px;border:1px solid var(--borde-2);
            background:var(--sup);color:var(--tinta-2)}
@media (hover:hover){.sug button:hover{border-color:var(--accion-viva);color:var(--tinta)}}
.entrada{display:flex;gap:var(--e2);margin-top:var(--e4);
         border-top:1px solid var(--borde);padding-top:var(--e4)}
.entrada input{flex:1;min-width:0;font:400 var(--t-base)/1.4 var(--f-ui);
               padding:12px var(--e4);border-radius:var(--r2);color:var(--tinta);
               background:var(--sup-2);border:1px solid var(--borde-2)}
.entrada input::placeholder{color:var(--tinta-3)}
.entrada input:focus{outline:2px solid var(--accion-viva);outline-offset:1px}
/* lo que el bot ya sabe de esta estación, sin que nadie escriba nada */
.sabe{display:grid;gap:var(--e2)}
.sabe-i{display:flex;gap:var(--e3);align-items:flex-start;padding:var(--e3);
        border-radius:var(--r2);background:var(--sup-2);border:1px solid var(--borde);
        font-size:var(--t-menor);line-height:1.5}
.sabe-i .pip{width:3px;align-self:stretch;border-radius:100px;background:var(--tinta-3);flex:none}
.sabe-i.mal .pip{background:var(--mal)} .sabe-i.alerta .pip{background:var(--alerta)}
.sabe-i b{display:block;font-size:var(--t-apoyo);font-weight:600;margin-bottom:2px}
.sabe-i span{color:var(--tinta-2)}

/* ============================================ RESUMEN PARA MANDAR
   No es un tablero: es un compositor de documento. Y la mitad del valor está
   en la vista previa — el dueño ve exactamente lo que va a ver su cliente
   antes de mandarlo, que es lo único que le saca el miedo a apretar. */
.opt{display:grid;gap:var(--e2)}
.opt label{display:flex;gap:var(--e3);align-items:flex-start;cursor:pointer;
           padding:var(--e3);border-radius:var(--r2);border:1px solid var(--borde);
           background:var(--sup-2);font-size:var(--t-apoyo)}
@media (hover:hover){.opt label:hover{border-color:var(--borde-2)}}
.opt input{margin:2px 0 0;accent-color:var(--accion-viva);width:17px;height:17px;flex:none}
.opt b{display:block;font-weight:600}
.opt small{display:block;font-size:var(--t-menor);color:var(--tinta-2);
           margin-top:2px;line-height:1.45}
.opt-grupo{margin:var(--e4) 0 var(--e2);font-size:var(--t-micro);letter-spacing:.09em;
           text-transform:uppercase;color:var(--tinta-3);font-weight:600}
.opt-grupo:first-child{margin-top:0}

/* el papel: es lo único del sistema que se ve como una hoja impresa, porque
   es lo único que va a salir del sistema */
.doc{background:#fff;color:#141414;border-radius:var(--r2);padding:var(--e6) var(--e5);
     box-shadow:var(--s2);font-family:var(--f-ui);font-size:13px;line-height:1.5;
     max-width:640px;margin:0 auto}
.doc-cab{display:flex;justify-content:space-between;align-items:flex-start;
         gap:var(--e4);padding-bottom:var(--e3);border-bottom:2px solid #141414}
.doc-cab b{display:block;font:700 17px/1.2 var(--f-din);letter-spacing:.01em}
.doc-cab span{font-size:11px;color:#5a5a5a}
.doc h4{margin:var(--e4) 0 var(--e2);font-size:11px;letter-spacing:.09em;
        text-transform:uppercase;color:#5a5a5a;font-weight:700}
.doc table{width:100%;border-collapse:collapse;font-size:12px}
.doc th{text-align:left;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
        color:#5a5a5a;padding:0 6px 5px 0;border-bottom:1px solid #141414}
.doc td{padding:6px 6px 6px 0;border-bottom:1px solid #e4e4e4}
.doc td.n,.doc th.n{text-align:right;font-family:var(--f-num);white-space:nowrap;
                    padding-right:0}
.doc .pat-doc{font-family:var(--f-num);font-size:10px;font-weight:700;
              background:#eee;padding:1px 5px;border-radius:3px;margin-left:5px}
.doc-tot{display:flex;justify-content:space-between;gap:var(--e4);padding:9px 0;
         font-size:13px;border-bottom:1px solid #e4e4e4}
.doc-tot.final{border-bottom:0;border-top:2px solid #141414;margin-top:4px;
               padding-top:11px;font-weight:700;font-size:15px}
.doc-tot .m{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.doc-pie{margin-top:var(--e5);padding-top:var(--e3);border-top:1px solid #e4e4e4;
         font-size:10px;color:#5a5a5a;line-height:1.5}
.doc-vacio{color:#8a8a8a;font-size:12px;font-style:italic;padding:var(--e3) 0}

.wapp{font-family:var(--f-num);font-size:var(--t-menor);line-height:1.6;
      background:var(--sup-2);border:1px solid var(--borde);border-radius:var(--r2);
      padding:var(--e4);white-space:pre-wrap;color:var(--tinta-2);margin-top:var(--e3)}

/* ========================================================= PANEL ADMIN
   La única pantalla del sistema cuyo usuario es Juan y no un estacionero. La
   pregunta cambia: no es "cómo está mi estación" sino "cómo está mi NEGOCIO y
   qué tengo que hacer hoy". Una tabla de cuentas no contesta eso — hay que
   interpretarla, y con sesenta estaciones no se interpreta nada. */
.hoy{display:grid;gap:var(--e2)}
.hoy-i{display:grid;grid-template-columns:4px auto 1fr auto;gap:var(--e3);
       align-items:center;padding:var(--e3) var(--e4);border-radius:var(--r2);
       background:var(--sup-2);border:1px solid var(--borde);
       text-decoration:none;font-size:var(--t-apoyo)}
@media (hover:hover){.hoy-i:hover{border-color:var(--borde-2)}}
.hoy-i .pip{align-self:stretch;border-radius:100px;background:var(--tinta-3)}
.hoy-i.plata .pip{background:var(--ok)}
.hoy-i.mal .pip{background:var(--mal)}
.hoy-i.alerta .pip{background:var(--alerta)}
.hoy-i .quien{font-family:var(--f-num);font-size:var(--t-menor);font-weight:600;
              color:var(--tinta-2);background:var(--sup-3);padding:3px 8px;
              border-radius:var(--r1);white-space:nowrap}
.hoy-i b{display:block;font-weight:600}
.hoy-i small{display:block;font-size:var(--t-menor);color:var(--tinta-2);
             margin-top:2px;line-height:1.45}
.hoy-i .ir{font-size:var(--t-menor);font-weight:600;color:var(--accion-viva);
           white-space:nowrap}

/* la flota: una fila por estación, con todo su estado de un vistazo */
.flota{width:100%;border-collapse:collapse;font-size:var(--t-apoyo)}
.flota th{text-align:left;font-size:var(--t-micro);letter-spacing:.09em;
          text-transform:uppercase;color:var(--tinta-3);font-weight:600;
          padding:0 var(--e3) 8px 0;border-bottom:1px solid var(--borde-2)}
.flota td{padding:11px var(--e3) 11px 0;border-bottom:1px solid var(--borde);
          vertical-align:middle}
.flota tr:last-child td{border-bottom:0}
.flota .est b{display:block;font-weight:600}
.flota .est small{font-size:var(--t-micro);color:var(--tinta-3);font-family:var(--f-num)}
.flota .n{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;
          white-space:nowrap}
.flota .luces{display:flex;gap:5px}
.luz{width:22px;height:22px;border-radius:var(--r1);display:grid;place-items:center;
     font:600 9px/1 var(--f-num);background:var(--ok-piso);color:var(--ok)}
.luz.mal{background:var(--mal-piso);color:var(--mal)}
.luz.gris{background:var(--sup-3);color:var(--tinta-3)}

/* el embudo comercial: las ~60 estaciones del sistema del padre */
.embudo{display:grid;gap:3px}
.emb{display:grid;grid-template-columns:150px 1fr 54px;gap:var(--e3);
     align-items:center;font-size:var(--t-apoyo)}
.emb .rot{color:var(--tinta-2)}
.emb .barra{height:26px;border-radius:var(--r1);background:var(--sup-3);overflow:hidden}
.emb .barra i{display:block;height:100%;background:var(--accion-viva)}
.emb .barra i.paga{background:var(--ok)}
.emb .barra i.frio{background:var(--tinta-3);opacity:.5}
.emb .n{text-align:right;font-family:var(--f-num);font-weight:600}

/* variantes de sector para el cotejo de tres cifras */
.sector.s-fisico{border-top-color:var(--accion-viva)}
.sector.s-dif{border-top-color:var(--alerta)}
.sector.s-dif.ok{border-top-color:var(--ok)}
.sector .v.neg{color:var(--mal)}
.sector .v.men{font-size:var(--t-medio)}


/* En el celular el rail no desaparece: se acuesta. Esconder la navegacion
   entera detras de una hamburguesa deja el resto del sistema inalcanzable
   justo en el aparato desde donde el dueño lo mira mas. */
@media (max-width:900px){
  .cuerpo{display:block}
  .rail{
    width:auto;height:auto;position:sticky;top:56px;overflow-x:auto;overflow-y:hidden;
    display:flex;gap:6px;padding:var(--e2) var(--e3);
    border-right:0;border-bottom:1px solid var(--borde);scrollbar-width:none;
  }
  .rail::-webkit-scrollbar{display:none}
  .rail-grupo{display:none}
  .rail a{white-space:nowrap;padding:8px 13px;border-radius:100px;
          background:var(--sup-2);min-height:38px}
  .rail a.on{box-shadow:none;background:var(--accion-piso)}
  .rail a span.pt{display:none}
  .lienzo{padding:var(--e4)}
  .sectores{grid-template-columns:1fr}
}
@media (max-width:700px){
  .tq-rot{width:auto;flex:1;min-width:0}
  .tq-barra{display:none}
}
@media (max-width:560px){
  .top{padding:0 var(--e3);gap:var(--e3)}
  .marca .larga{display:none}
  .top-sel{max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* En el celular la chapa tiene lugar para UNA cosa, y es el estado de la
     PC: el nombre de la estacion ya esta en el menu, y una cuenta es una
     sola estacion. Con los dos, los dos salian cortados. */
  .top-sel{display:none}
  .enlace{margin-left:auto;min-width:0}
  .enlace .larga{display:none}
  .instr{padding:var(--e4)}
  .grilla{gap:var(--e3)}
}
/* ==========================================================================
   PUENTE DE TOKENS
   --------------------------------------------------------------------------
   El sistema de diseño de arriba es el de la maqueta y es el que manda. Estos
   son los nombres de token de la hoja anterior, redefinidos COMO ALIAS de los
   nuevos: una pantalla todavía sin convertir sigue leyéndose, y se pinta con
   los colores nuevos sin tocarle una línea.

   Un alias es `var()` y no un valor: los custom properties se resuelven donde
   se usan, así que `--rojo: var(--mal)` sigue solo al tema sin necesitar un
   segundo bloque para el claro.

   Este archivo se borra entero el día que no quede ninguna pantalla vieja.
   ========================================================================== */
:root{
  /* familias */
  --f-texto:  var(--f-ui);
  --f-titulo: var(--f-ui);
  --f-cifra:  var(--f-num);
  --tit-track: -.012em;

  /* escala que la hoja vieja tenía de más */
  --e7: 2.75rem;
  --t-display: clamp(2.2rem, 4.5vw, 3rem);
  --paso: .15s;

  /* semánticos */
  --rojo:           var(--mal);
  --rojo-fondo:     var(--mal-piso);
  --rojo-borde:     var(--mal);
  --ambar:          var(--alerta);
  --ambar-fondo:    var(--alerta-piso);
  --ambar-borde:    var(--alerta);
  --completo:       var(--ok);
  --completo-fondo: var(--ok-piso);
  --completo-borde: var(--ok);
  --falta:          var(--alerta);
  --falta-fondo:    var(--alerta-piso);
  --falta-borde:    var(--alerta);

  /* sectores */
  --mini:       var(--minishop);
  --mini-fondo: color-mix(in srgb, var(--minishop) 12%, transparent);

  /* acción */
  --accion-osc:   var(--accion-viva);
  --accion-tenue: var(--accion-piso);
  --accion-borde: var(--accion);

  /* superficies y líneas */
  --fondo-alto:   var(--sup);
  --fondo-bajo:   var(--fondo);
  --linea-fuerte: var(--borde-2);
  --panel-borde:  var(--borde);
  --tinta-4:      var(--tinta-3);
  --rail-sup:     var(--sup-2);
  --rail-tinta:   var(--tinta-2);
  --rail-tinta-2: var(--tinta-3);

  /* El instrumento dejó de ser la única superficie oscura: ahora TODO el
     sistema tiene tema, así que el grafito es simplemente la hoja. */
  --grafito:      var(--fondo);
  --grafito-2:    var(--sup);
  --grafito-3:    var(--sup-2);
  --grafito-4:    var(--sup-3);
  --sobre-graf:   var(--tinta);
  --sobre-graf-2: var(--tinta-2);
  --sobre-graf-3: var(--sodio-hondo);
  --arcilla-claro: var(--minishop);
  --pino-claro:    var(--ok);
  --acero-claro:   var(--oficina);

  /* sombras */
  --brillo:        var(--filo);
  --sombra-boton:  var(--s1);
  --sombra-flota:  var(--s2);

  /* pisos de apilado. El rail va ARRIBA de la tapa: si queda abajo, en el
     celular el cajon se abre, se ve, y ningun destino se puede tocar —
     la tapa se come el clic y lo unico que pasa es que el menu se cierra. */
  --z-tapa:   80;
  --z-rail:   85;
  --z-banner: 95;
  --z-cartel: 100;
}
/* ==========================================================================
   CHAPA — la barra de arriba, el rail y la cabecera pública
   --------------------------------------------------------------------------
   El sistema de diseño de arriba trae `.top`, `.cuerpo`, `.rail` y `.lienzo`
   pensados para un archivo suelto. Acá se los ajusta al DOM real de
   `base.html`, que tiene tres cosas que la maqueta no tenía: el cajón del
   rail en el celular, el pie de cuenta del rail, y una cabecera distinta
   para las páginas sin sesión.
   ========================================================================== */

body{ min-height:100dvh; }
body.con-rail{ display:flex; flex-direction:column; }

/* En base.html `.lienzo` no es el lienzo: es la columna que contiene el
   contenido Y el pie. El aire lo pone `main`. */
.lienzo{ display:flex; flex-direction:column; min-height:calc(100dvh - 56px);
         max-width:none; padding:0; }
body.sin-rail .lienzo{ min-height:100dvh; }
/* Lo que sobre se reparte a los dos lados y no se amontona contra el borde
   derecho. */
main{ flex:1; width:100%; max-width:1360px; margin-inline:auto;
      padding:var(--e5);
      display:flex; flex-direction:column; align-items:stretch; gap:var(--e4); }
body.sin-rail main{ max-width:1160px; margin:0 auto; }
footer{ width:100%; max-width:780px; margin:0 auto;
        padding:var(--e5) var(--e5) var(--e6); border-top:1px solid var(--borde);
        text-align:center; color:var(--tinta-3); font-size:var(--t-menor);
        line-height:1.65; }

.saltar{ position:absolute; left:var(--e3); top:-3rem; z-index:100;
  background:var(--accion); color:var(--sobre-color);
  padding:var(--e2) var(--e4); border-radius:var(--r2); font-weight:600;
  text-decoration:none; transition:top var(--paso); }
.saltar:focus{ top:var(--e3); color:var(--sobre-color); }

/* --------------------------------------------------------------- la barra */
.top-marca{ display:flex; align-items:center; gap:9px; height:100%;
  padding-right:var(--e4); margin-right:var(--e2);
  border-right:1px solid var(--borde); text-decoration:none;
  font:400 var(--t-base)/1 var(--f-ui); letter-spacing:-.02em;
  color:var(--tinta); }
.top-marca b{ font-weight:700; }
@media (hover:hover){.top-marca:hover{ color:var(--tinta); }}

/* Una cuenta es un CUIT y un CUIT es una estación: el selector de la maqueta
   acá es un rótulo, no un desplegable que no despliega nada. */
.top-sel{ cursor:default; min-width:0; }
.top-sel b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-sel span{ font-size:var(--t-micro); color:var(--tinta-3);
  white-space:nowrap; }

.enlace a{ color:inherit; text-decoration:none; }
@media (hover:hover){.enlace a:hover{ color:var(--tinta); text-decoration:underline; }}
@media (prefers-reduced-motion:reduce){ .led{ animation:none; } }

/* ---------------------------------------------------------------- el rail */
.rail{ display:flex; flex-direction:column; padding:var(--e4) var(--e3) 0; }
.rail-marca{ display:none; align-items:center; justify-content:space-between;
  gap:var(--e2); padding:0 var(--e2) var(--e4); }
.rail-marca a{ display:inline-flex; align-items:center; gap:10px;
  color:var(--tinta); text-decoration:none; font-size:var(--t-medio);
  font-weight:400; letter-spacing:-.02em; }
.rail-marca b{ font-weight:700; }
.rail-cerrar{ display:none; background:none; border:0; color:inherit;
  font-size:1.6rem; line-height:1; padding:0 var(--e2); cursor:pointer; }

.rail-nav{ flex:1; display:flex; flex-direction:column; gap:1px;
  overflow-y:auto; margin:0 calc(var(--e3) * -1); padding:0 var(--e3); }
.rail-nav > .rail-grupo:first-child{ margin-top:0; }

/* Los enlaces del rail van a texto pelado: sin ícono y sin numerito. Las
   teclas 1-9 siguen funcionando (las mapea base.html) y el aviso vive en el
   pie. El cuadradito .rail-num queda solo para el "esc" de Volver. */
.rail-link .ico{ display:none; }
.rail-num{ flex:none; width:20px; height:20px; display:flex;
  align-items:center; justify-content:center; font-family:var(--f-num);
  font-style:normal; font-size:var(--t-micro); font-weight:600;
  color:var(--tinta-3); background:var(--sup-2);
  border:1px solid var(--borde); border-radius:5px; }
.rail-link span{ min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.rail-link.lista{ font-size:var(--t-menor); }
.rail-esc{ margin-top:var(--e2); color:var(--tinta-3); }
.rail-esc .rail-num{ width:auto; padding:0 5px; font-size:.5625rem;
  letter-spacing:.05em; text-transform:lowercase; }

.rail-pie{ margin:var(--e4) calc(var(--e3) * -1) 0; padding:var(--e3) var(--e4);
  border-top:1px solid var(--borde); display:flex; flex-wrap:wrap;
  gap:var(--e1) var(--e4); align-items:baseline; }
.rail-quien{ width:100%; margin:0 0 var(--e1); font-size:var(--t-menor);
  color:var(--tinta-3); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.rail-menor{ color:var(--tinta-2); font-size:var(--t-menor);
  text-decoration:none; font-weight:500; }
@media (hover:hover){.rail-menor:hover{ color:var(--tinta); text-decoration:underline; }}
.rail-teclas{ width:100%; margin:var(--e2) 0 0; font-size:var(--t-micro);
  color:var(--tinta-3); }
.rail-teclas b{ font-family:var(--f-num); font-weight:600;
  color:var(--tinta-3); background:var(--sup-3);
  border:1px solid var(--borde); border-radius:4px; padding:0 4px;
  margin-right:2px; }

/* Dos botones y no un interruptor: con el interruptor hay que leer en qué
   posición está para saber qué va a pasar al tocarlo. */
.tema{ width:100%; display:flex; gap:2px; margin:var(--e2) 0 0; padding:2px;
  background:var(--sup-2); border-radius:var(--r2); }
.tema button{ flex:1; display:flex; align-items:center; justify-content:center;
  gap:6px; margin:0; padding:6px 8px; border:0;
  border-radius:calc(var(--r2) - 2px); background:none; color:var(--tinta-3);
  cursor:pointer; box-shadow:none; font:500 var(--t-menor)/1 var(--f-ui); }
.tema button .ico{ margin-right:0; }
@media (hover:hover){.tema button:hover{ background:none; color:var(--tinta); }}
.tema button[aria-pressed="true"]{ background:var(--sup); color:var(--tinta);
  box-shadow:var(--s1); }
.tema svg{ flex:none; }

/* La hamburguesa vive en la barra y sólo aparece en el celular. */
.topbar-menu{ display:none; flex-direction:column; justify-content:center;
  gap:4px; width:38px; height:38px; padding:0 9px; margin:0 var(--e2) 0 0;
  background:none; border:0; border-radius:var(--r2); cursor:pointer; }
.topbar-menu span{ display:block; height:2px; border-radius:2px;
  background:var(--tinta); }
@media (hover:hover){.topbar-menu:hover{ background:var(--sup-2); }}
.tapa{ position:fixed; inset:0; z-index:var(--z-tapa);
  background:rgba(0,0,0,.55); backdrop-filter:blur(2px); }

/* -------------------------------------------------- la cabecera sin sesión */
.cabecera{ position:sticky; top:0; z-index:40; background:var(--sup);
  border-bottom:1px solid var(--borde); }
.cabecera-caja{ max-width:1160px; margin:0 auto;
  padding:var(--e3) var(--e5); display:flex; align-items:center;
  justify-content:space-between; gap:var(--e4); min-width:0; }
/* La cabecera no se puede desbordar NUNCA: en el celular la barra es angosta
   y el boton de crear cuenta es lo ultimo que puede quedar afuera. Lo que
   cede es la marca (se recorta), no los botones. */
.cabecera .marca{ min-width:0; }
.cabecera .marca span{ overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.cabecera-nav{ display:flex; align-items:center; gap:var(--e1); flex:none; }
.cabecera-nav a{ padding:8px var(--e3); border-radius:var(--r2);
  color:var(--tinta-2); text-decoration:none; font-weight:500;
  font-size:var(--t-apoyo); white-space:nowrap; }
.cabecera-nav .nav-corto{ display:none; }
@media (hover:hover){.cabecera-nav a:hover{ color:var(--tinta); background:var(--sup-3); }}
.cabecera-nav a.on{ color:var(--tinta); font-weight:600; }
.cabecera-nav a.cta{ background:var(--accion); color:var(--sobre-color);
  font-weight:600; padding:9px var(--e4); }
@media (hover:hover){.cabecera-nav a.cta:hover{ background:var(--accion-viva);
  color:var(--sobre-color); }}

/* Banner del modo "ver como cliente". */
.vercomo-banner{ background:var(--accion); color:var(--sobre-color);
  text-align:center; padding:8px 14px; font-size:var(--t-menor);
  font-weight:500; position:sticky; top:0; z-index:var(--z-banner); }
.vercomo-banner a{ color:var(--sobre-color); margin-left:var(--e3);
  font-weight:600; white-space:nowrap; }

/* ------------------------------------------------------ el cajón del móvil
   El rail no se acuesta en una tira horizontal: entra desde la izquierda
   sobre una tapa, que es lo que ya sabe hacer el JS de base.html. */
@media (max-width:900px){
  .cuerpo{ display:block; }
  .topbar-menu{ display:flex; }
  .rail{ position:fixed; top:0; left:0; bottom:0; z-index:var(--z-rail);
    width:min(280px, 84vw); height:100dvh; transform:translateX(-100%);
    transition:transform .2s ease-out; box-shadow:var(--s2);
    border-right:1px solid var(--borde-2); }
  .rail.abierto{ transform:translateX(0); }
  .rail-marca{ display:flex; }
  .rail-cerrar{ display:block; }
  body.rail-abierto{ overflow:hidden; }
  .lienzo{ min-height:calc(100dvh - 56px); }
  main{ padding:var(--e4); }
}
@media (prefers-reduced-motion:reduce){ .rail{ transition:none; } }


/* ==========================================================================
   BASE DEL NAVEGADOR
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; min-height: 100dvh;
  font-family: var(--f-texto); font-size: var(--t-base); line-height: 1.55;
  color: var(--tinta);
  /* el lienzo no es un gris chato: una luz arriba a la izquierda y un
     degrade apenas mas oscuro al pie — papel sobre un escritorio */
  background:
    radial-gradient(1100px 460px at 16% -10%, var(--sup) 0%, transparent 60%),
    linear-gradient(180deg, var(--fondo-alto) 0%, var(--fondo) 42%, var(--fondo-bajo) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--accion); color: var(--sobre-color); }
input, textarea, select { caret-color: var(--accion); }
* { scrollbar-color: var(--borde-2) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--borde-2); border-radius: 999px;
  border: 3px solid var(--fondo); }
@media (hover:hover){*::-webkit-scrollbar-thumb:hover{ background: var(--tinta-4); }}

button, input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: var(--accion); text-underline-offset: .18em;
    text-decoration-thickness: from-font; }
@media (hover:hover){a:hover{ color: var(--accion-viva); }}

/* Un solo anillo de foco para todo el sistema, y solo con teclado. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accion-viva); outline-offset: 2px;
  border-radius: var(--r1);
}
:focus:not(:focus-visible) { outline: 0; }

.saltar { position: absolute; left: var(--e3); top: -3rem; z-index: 100;
  background: var(--accion); color: var(--sobre-color); padding: var(--e2) var(--e4);
  border-radius: var(--r2); font-weight: 600; text-decoration: none;
  transition: top var(--paso); }
.saltar:focus { top: var(--e3); color: var(--sobre-color); }

/* Iconos dibujados (macro ico() en _ico.html). Heredan el color del texto y
   se alinean con el, asi que entran en cualquier boton o titulo sin
   descuadrar la linea. Reemplazan a los emojis, que traian color propio. */
.ico { display: inline-block; vertical-align: -.14em; flex: none; }
button .ico, a .ico, summary .ico { margin-right: .45em; }

/* ==========================================================================


/* ==========================================================================
   TIPOGRAFIA
   ========================================================================== */
h1, h2, h3, h4 { font-family: var(--f-titulo); letter-spacing: var(--tit-track);
  text-wrap: balance; }
h1 { margin: 0 0 var(--e2); font-size: var(--t-h1); font-weight: 600;
  line-height: 1.15; color: var(--tinta); }
h2 { margin: 0 0 var(--e2); font-size: var(--t-h2); font-weight: 600;
  line-height: 1.25; color: var(--tinta); }
h3 { margin: 0 0 var(--e2); font-size: var(--t-medio); font-weight: 600;
  line-height: 1.3; color: var(--tinta); }
p { text-wrap: pretty; }
/* .muted es prosa, no cromo: la bajada de cada seccion se lee de verdad.
   Lo que se achica a 13 son los chips, los botones chicos y los metadatos. */
.muted { color: var(--tinta-2); font-size: var(--t-apoyo); }
.volver { margin: 0; font-size: var(--t-menor); }
.volver a { text-decoration: none; font-weight: 500; }
@media (hover:hover){.volver a:hover{ text-decoration: underline; }}

/* Rotulo de seccion entre hojas. */
.seccion { display: flex; align-items: center; gap: var(--e3);
  width: 100%; margin: var(--e3) 0 0; color: var(--tinta-3);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; }
.seccion::after { content: ""; flex: 1; height: 1px; background: var(--borde); }

/* --------------------------------------------------------------- cifras
   Todo numero que el usuario compara contra un papel (importe, litros, CUIT,
   punto de venta, periodo, serie) va en IBM Plex Mono: la columna queda a
   plomo aunque cambie la cantidad de digitos, y un numero pesa distinto que
   una palabra. Los nombres de archivo y los hashes tambien, pero por otra
   razon: ahi el ancho fijo sirve para leer caracter por caracter.

   La letra distinta sola no alcanza —a 13px casi no se nota—, asi que la
   cifra tambien gana un paso de peso y se queda con la tinta plena mientras
   lo que la rodea (signo, centavos, unidad) retrocede. Se lee el numero
   antes que su envoltorio. */
.mono, td.num, th.num, .res-cuit, .precio-destacado, .lp-ventana-nombre,
table, .sp-num-in, input[type=date], input[type=number], .cifra {
  font-variant-numeric: tabular-nums;
}
.mono, td.num, .res-cuit, .precio-destacado, td.fname, span.fname,
.archivo-detalle, .sp-num-in, .cifra {
  font-family: var(--f-cifra);
}
td.fname, span.fname, .archivo-detalle { font-size: .92em; }

/* El rol unico de cifra. Sirve igual adentro de una celda, de una ficha o de
   una oracion: por eso hereda el tamano en vez de fijarlo. */
.cifra { font-weight: 500; color: var(--tinta); white-space: nowrap;
  letter-spacing: -.01em; }
/* El signo de pesos no es un digito: ocupa lugar en la columna pero no compite
   por la lectura. Los centavos tampoco —nadie los lee, y son tres de cada
   trece glifos de un importe. */
.cifra-sig { color: var(--tinta-3); font-weight: 400; margin-right: .18em; }
.cifra-dec { color: var(--tinta-3); font-weight: 400; }
/* La unidad vuelve a la letra de texto: es una palabra, no un numero.
   Antes esto vivia en .pl-unidad, .pl-unid y .pl-al con tres tamanos
   distintos para el mismo trabajo. */
.cifra-unid { font-family: var(--f-texto); font-weight: 400; font-size: .8em;
  color: var(--tinta-3); margin-left: .3em; letter-spacing: 0; }
.cifra-unid.bloque { display: block; margin: 2px 0 0; font-size: var(--t-micro); }
.cifra.grande .cifra-dec, .cifra.grande .cifra-sig { font-size: .62em; }

/* ==========================================================================


/* ==========================================================================
   CONTROLES Y SUPERFICIES
   ========================================================================== */
label { display: block; margin: var(--e4) 0 var(--e1); font-weight: 500;
  font-size: var(--t-menor); color: var(--tinta-2); }
label.inline { margin: 0; }
label.inline input { width: 280px; margin-top: var(--e1); }

input[type=email], input[type=password], input[type=text], input[type=date],
input[type=search], input[type=number], input[type=tel], input[type=url],
select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--borde);
  border-radius: var(--r2); background: var(--sup); color: var(--tinta);
  font-size: var(--t-base);
  transition: border-color var(--paso), box-shadow var(--paso);
}
select { width: auto; padding-right: var(--e6); cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--tinta-3); }
@media (hover:hover){input:hover, select:hover, textarea:hover{ border-color: var(--borde-2); }}
input:focus, select:focus, textarea:focus { outline: 0;
  border-color: var(--accion);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accion) 22%, transparent); }
input:disabled, select:disabled, textarea:disabled { background: var(--sup-2);
  color: var(--tinta-3); cursor: not-allowed; }

button {
  margin-top: var(--e4); background: var(--accion); color: var(--sobre-color); border: 0;
  border-radius: var(--r2); padding: 10px 20px; font-size: var(--t-base);
  font-weight: 600; cursor: pointer; box-shadow: var(--sombra-boton);
  transition: background var(--paso), transform var(--paso),
              box-shadow var(--paso), color var(--paso);
}
@media (hover:hover){button:hover{ background: var(--accion-viva); }}
/* El boton se HUNDE, no baja un pixel: el mismo gesto que el chip y la
   solapa, para que todo lo que se aprieta conteste igual. */
button:active { transform: scale(var(--apreton)); box-shadow: none; }
button:disabled { background: var(--sup-3); color: var(--tinta-3);
  cursor: not-allowed; transform: none; box-shadow: none; }

button.secondary, button.sp-btn-sec {
  margin-top: 0; padding: 8px 14px; font-size: var(--t-menor);
  background: var(--sup); color: var(--tinta); border: 1px solid var(--borde);
  box-shadow: none;
}
@media (hover:hover){button.secondary:hover, button.sp-btn-sec:hover{ background: var(--sup-2);
  border-color: var(--borde-2); }}
button.sp-btn-sec:disabled { background: var(--sup-2); color: var(--tinta-3);
  border-color: var(--borde); }
button.small { margin: 0; padding: 5px 10px; font-size: var(--t-menor); }
button.small.secondary { padding: 4px 9px; }
button.danger { background: var(--rojo); }
@media (hover:hover){button.danger:hover{ background: color-mix(in srgb, var(--rojo) 85%, #000); }}

/* Todo lo que se pinta solo, es un icono o hace de link no lleva la sombra
   ni el rebote del boton de accion. Va junto aca para no repetirlo abajo. */
button.pw-toggle, button.linklike, button.delbtn, button.mes-carpeta,
button.sp-del, button.sp-zona, button.chat-cerrar, .chat-sugerencias button,
.sp-tabla button, .topbar-menu {
  box-shadow: none;
}
@media (hover:hover){button.pw-toggle:hover, button.linklike:hover, button.delbtn:hover,
button.sp-del:hover, .sp-tabla button:hover{ transform: none; }}

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 42px; }
button.pw-toggle { position: absolute; right: 6px; top: 50%; margin: 0;
  transform: translateY(-50%); padding: 4px 6px; background: none; border: 0;
  line-height: 1; cursor: pointer; color: var(--tinta-3); }
@media (hover:hover){button.pw-toggle:hover{ color: var(--tinta); background: none;
  transform: translateY(-50%); }}

button.linklike { background: none; border: 0; padding: 0; margin: 0;
  font-size: var(--t-menor); font-weight: 500; cursor: pointer;
  color: var(--tinta-2); }
@media (hover:hover){button.linklike:hover{ background: none; color: var(--accion);
  text-decoration: underline; }}
/* La papelera va apagada y se enciende al apoyar el mouse. En rojo fijo eran
   treinta iconos rojos en el historial — leia como si estuviera todo mal. */
button.linklike.danger, button.delbtn { background: none; color: var(--tinta-4); }
@media (hover:hover){button.linklike.danger:hover, button.delbtn:hover{ background: var(--rojo-fondo);
  color: var(--rojo); }}
button.delbtn { font-size: 1.05rem; line-height: 1; padding: 2px 6px; margin: 0;
  border-radius: var(--r1); }

a.btn { display: inline-block; background: var(--accion); color: var(--sobre-color);
  text-decoration: none; border-radius: var(--r2); padding: 11px 22px;
  font-weight: 600; box-shadow: var(--sombra-boton);
  transition: background var(--paso); }
@media (hover:hover){a.btn:hover{ background: var(--accion-viva); color: var(--sobre-color); }}
a.btn.claro { background: var(--sup); color: var(--tinta);
  border: 1px solid var(--borde); }
@media (hover:hover){a.btn.claro:hover{ background: var(--sup-2); color: var(--tinta); }}
a.btn-sec, a.btn-consolidado { display: inline-block; font-size: var(--t-menor);
  font-weight: 500; text-decoration: none; color: var(--tinta);
  border: 1px solid var(--borde); border-radius: var(--r2); padding: 7px 13px;
  white-space: nowrap; background: var(--sup);
  transition: background var(--paso), border-color var(--paso); }
@media (hover:hover){a.btn-sec:hover, a.btn-consolidado:hover{ background: var(--sup-2);
  border-color: var(--borde-2); color: var(--tinta); }}

.toolbar { display: flex; gap: var(--e2); flex-wrap: wrap; }
.export-row { display: flex; gap: var(--e4); align-items: flex-end;
  flex-wrap: wrap; }
.export-row button { margin-top: 0; }
.inline-form { display: flex; gap: var(--e3); align-items: flex-end;
  flex-wrap: wrap; margin: var(--e3) 0 var(--e5); }
.inline-form button { margin-top: 0; }
.actions { white-space: nowrap; }
.actions form { display: inline-block; margin-right: var(--e2); }
.guardar-chk { display: flex; align-items: center; gap: var(--e2);
  margin: var(--e4) 0 0; font-weight: 500; font-size: var(--t-base);
  flex-wrap: wrap; }
.guardar-chk input, .sp-check input, .sp-tabla td.chk input,
.sp-tabla th.chk input { accent-color: var(--accion); }
.guardar-chk input { width: 17px; height: 17px; }
[hidden] { display: none !important; }

/* ==========================================================================
   SUPERFICIES
   Una hoja declara su elevacion UNA vez: borde. La sombra queda reservada
   para lo que flota de verdad.
   ========================================================================== */
/* La ficha del sistema. Filete fino y sombra corta: una hoja apoyada, no
   una tarjeta flotando. La sombra larga hacia arriba de un filete es la
   "tarjeta fantasma" y ensucia una pantalla con ocho bloques. */
.card { background: var(--sup); border: 1px solid var(--borde);
  border-radius: var(--r3); padding: var(--e5); width: 100%;
  box-shadow: var(--s1); }
.card.narrow { max-width: 440px; margin: var(--e6) auto 0; }
.card.center { text-align: center; }
/* El icono que abre una pantalla de resultado (pago listo, cuenta creada). */
.hito { margin: 0 0 var(--e3); color: var(--completo); }
.hito .ico { margin: 0; }
.acciones-centro { display: flex; flex-wrap: wrap; gap: var(--e3);
  justify-content: center; margin: var(--e5) 0 var(--e4); }
.acciones-izq { justify-content: flex-start; }

/* ==========================================================================


/* ==========================================================================
   TABLAS Y ETIQUETAS
   ========================================================================== */
.tablewrap, .sp-tabla-wrap { overflow-x: auto; margin-bottom: var(--e3);
  min-width: 0; }
.sp-tabla-wrap { margin: var(--e5) 0 0; }
.tablewrap-aire { margin-top: var(--e4); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-apoyo); }
table.sp-tabla { table-layout: fixed; }
/* La linea bajo el encabezado es NEGRA: es la unica linea fuerte de la hoja
   y ordena la tabla entera (criterio del diseño blanco). */
th { padding: 0 12px 9px; text-align: left; color: var(--tinta-3);
  font-weight: 600; font-size: var(--t-micro); text-transform: uppercase;
  letter-spacing: .09em; font-family: var(--f-texto);
  border-bottom: 1px solid var(--linea-fuerte); background: transparent;
  white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--borde);
  vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--paso); }
@media (hover:hover){tbody tr:hover{ background: var(--sup-2); }}
@media (hover:hover){/* Alguna tabla vieja mete la fila de encabezado adentro del tbody (el
   navegador lo arma solo cuando falta el <thead>): esa fila no es un dato y
   no se ilumina. */
tbody tr:has(th):hover{ background: transparent; }}
tfoot td { font-weight: 600; color: var(--tinta); background: transparent;
  border-top: 1px solid var(--linea-fuerte); border-bottom: 0; padding-top: 12px; }
/* La columna de datos manda sobre su fila. La mono, a igual px, aparenta menos
   cuerpo que la Archivo: el paso de tamano no agranda, empareja, y el peso es
   lo que hace que el numero se lea antes que la palabra de al lado. */
td.num, th.num { text-align: right; }
td.num { font-size: 1.06em; font-weight: 500; color: var(--tinta);
  letter-spacing: -.01em; }
tfoot td.num, td.num b, td.num strong { font-weight: 600; }
/* El nombre de la fila la identifica; no tiene que pesar mas que el dato que
   se va a comparar contra un papel. La negrita de tabla baja a 600. */
tbody td b, tbody td strong { font-weight: 600; }
/* Columnas de contexto (rubro, fecha del ultimo movimiento, etiquetas): estan
   para ubicar la fila, no para compararse contra un papel. */
td.contexto { color: var(--tinta-2); }
td.chk, th.chk { width: 30px; text-align: center; padding-left: 6px;
  padding-right: 6px; }
td.chk input, th.chk input { width: 16px; height: 16px; margin: 0;
  vertical-align: middle; }
td.del, th.del { width: 34px; text-align: right; padding-left: 0; }
td.fname { max-width: 320px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
tr.error td, .sp-tabla tr.falla td { color: var(--rojo); }
tr.analizando td, .sp-tabla tr.leyendo td { color: var(--tinta-3);
  font-style: italic; }
.sp-tabla tr.apagada td { color: var(--tinta-4); }
.sp-tabla tr.apagada td.num { text-decoration: line-through; }
.sp-tabla td.fname, .sp-tabla .fname { overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sp-tabla span.fname { display: block; }
.sp-det { display: block; font-size: var(--t-micro); color: var(--tinta-3);
  margin-top: 3px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.sp-tabla .sp-del { border: 0; background: transparent; color: var(--tinta-4);
  font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 2px 5px;
  margin: 0; border-radius: var(--r1); }
@media (hover:hover){.sp-tabla .sp-del:hover{ background: var(--rojo-fondo); color: var(--rojo); }}
.sp-num-in { width: 100%; text-align: right; padding: 6px 9px;
  border: 1px solid var(--borde); border-radius: var(--r1);
  font-size: var(--t-menor); background: var(--sup); color: var(--tinta); }
.sp-txt-in { width: 100%; padding: 6px 8px; border: 1px solid var(--borde);
  border-radius: var(--r1); font-size: var(--t-menor); background: var(--sup);
  color: var(--tinta); }
.cli-nombre { width: 150px; min-width: 110px; padding: 5px 8px;
  font-size: var(--t-menor); border: 1px solid var(--borde);
  border-radius: var(--r1); background: var(--sup); color: var(--tinta); }
.celda-fecha { white-space: nowrap; }
.celda-larga { font-size: var(--t-micro); }
.campo-cuit { width: 9.5em; font-size: var(--t-menor); }
.copiable { display: block; margin-top: var(--e2); font-family: var(--f-cifra);
  font-size: var(--t-menor); }
.toolbar-aire { margin-top: var(--e4); }
.toolbar form { margin: 0; display: flex; gap: var(--e1); align-items: center; }
/* Un control dentro de la toolbar acota la accion del boton que tiene al lado
   (que parser reprocesar). Sin esta regla se lleva el width:100% global de
   los formularios y le parte la fila al boton. */
.toolbar select { width: auto; padding: 4px 9px; font-size: var(--t-menor); }
.toolbar label { font-size: var(--t-menor); color: var(--tinta-2);
  white-space: nowrap; }
.subtabla { margin: var(--e5) 0 var(--e2); font-weight: 600;
  font-size: var(--t-menor); color: var(--tinta-2); }
.leyenda-fuente { font-size: var(--t-menor); margin-top: var(--e1); }

/* Columnas ordenables: la flecha se insinua al pasar el mouse y se enciende
   en la que esta ordenando. */
th[data-ordena] { cursor: pointer; user-select: none; position: relative;
  padding-right: 18px; transition: color var(--paso); }
@media (hover:hover){th[data-ordena]:hover{ color: var(--accion); }}
th[data-ordena]::after { content: "\2195"; position: absolute; right: 4px;
  opacity: .35; }
th[data-ordena][data-dir=desc]::after { content: "\2193"; opacity: 1;
  color: var(--accion); }
th[data-ordena][data-dir=asc]::after { content: "\2191"; opacity: 1;
  color: var(--accion); }

.ok { color: var(--tinta); font-weight: 600; }
.bad { color: var(--rojo); font-weight: 600; }
.warn { color: var(--ambar); font-weight: 600; }

/* ==========================================================================
   ETIQUETAS
   ========================================================================== */
.tag, .sp-etq, .pl-etq, .cu-nueva {
  display: inline-block; font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .03em; border-radius: var(--r1); padding: 2px 7px;
  white-space: nowrap; background: var(--sup-3); color: var(--tinta-2);
  border: 1px solid transparent;
}
.sp-etq, .cu-nueva { margin-left: var(--e1); vertical-align: 1px; }
.tag, .sp-etq.azul { background: var(--accion-tenue); color: var(--accion-osc);
  border-color: var(--accion-borde); }
.sp-etq.gris { background: var(--sup-3); color: var(--tinta-2); }
.sp-etq.ambar { background: var(--ambar-fondo); color: var(--ambar);
  border-color: var(--ambar-borde); }
.sp-etq.verde { background: var(--completo-fondo); color: var(--completo);
  border-color: var(--completo-borde); }
.sp-etq.ayuda { cursor: help; }
.cu-nueva { background: var(--falta-fondo); color: var(--falta);
  border-color: var(--falta-borde); }
/* El semáforo del mes fiscal: verde es "lo tenés", ámbar es "falta bajarlo".
   Es el mismo par que usa el historial de archivos, y acá también el color
   ES el dato: con mirarlo sabés si el mes está listo para el contador. */
.im-esta { background: var(--completo-fondo); color: var(--completo);
  border-color: var(--completo-borde); }
.im-falta { background: var(--falta-fondo); color: var(--falta);
  border-color: var(--falta-borde); }

/* Etiqueta de tickeadora: PLAYA (los surtidores) o MINI (el minishop). Viven
   en el mismo CUIT y solo se separan por punto de venta, asi que esta
   etiqueta es lo unico que las distingue de un vistazo. Se separan por PESO
   y no por tono: dos azules palidos se ven iguales. La playa va llena —es la
   que factura el combustible— y el minishop apagado. */
.sp-tk { display: inline-block; font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; border-radius: var(--r1);
  padding: 2px 7px; margin-right: 7px; vertical-align: 1px;
  white-space: nowrap; }
.sp-tk.playa { background: var(--accion); color: var(--sobre-color); }
.sp-tk.mini { background: var(--sup-3); color: var(--tinta-2); }

.anio-nav { display: flex; flex-wrap: wrap; gap: var(--e2);
  margin: var(--e5) 0 var(--e1); }
.anio-chip, .pl-atajo { padding: 7px 14px; border-radius: var(--r2);
  font-size: var(--t-menor); font-weight: 500; text-decoration: none;
  border: 1px solid var(--borde); background: var(--sup); color: var(--tinta);
  white-space: nowrap;
  transition: background var(--paso), border-color var(--paso); }
@media (hover:hover){a.anio-chip:hover, a.pl-atajo:hover{ background: var(--sup-2);
  border-color: var(--borde-2); color: var(--tinta); }}
.anio-chip.sin-archivos { color: var(--tinta-3); }
.anio-chip.actual, .pl-atajo.on { background: var(--tinta); color: var(--sup);
  border-color: var(--tinta); font-weight: 600; }
@media (hover:hover){a.anio-chip.actual:hover, a.pl-atajo.on:hover{ background: var(--tinta);
  color: var(--sup); }}

/* ==========================================================================


/* ==========================================================================
   MENSAJES, ESTADOS Y COMPONENTES sp-
   ========================================================================== */
.alert, .success, .sp-msg, .sp-warn {
  width: 100%; border-radius: var(--r2); padding: 11px 14px;
  font-size: var(--t-menor); line-height: 1.55; white-space: pre-line;
  border: 1px solid var(--borde); background: var(--sup-2);
  color: var(--tinta);
}
.alert, .success { display: flex; align-items: flex-start; gap: var(--e2);
  font-size: var(--t-base); }
.alert .ico, .success .ico { margin: 2px 0 0; }
.alert, .sp-msg.err { background: var(--rojo-fondo);
  border-color: var(--rojo-borde); color: var(--rojo); }
.success, .sp-msg.ok { background: var(--completo-fondo);
  border-color: var(--completo-borde); color: var(--completo); }
.sp-warn { background: var(--ambar-fondo);
  border-color: var(--ambar-borde); color: var(--ambar); }
.sp-msg { margin-top: var(--e4); }
.sp-warn { margin-top: var(--e4); }
.sp-warn-li { display: block; padding-left: 20px; position: relative; }
.sp-warn-li + .sp-warn-li { margin-top: var(--e2); }
.sp-warn-li::before { content: "\26A0"; position: absolute; left: 0; }
.sp-nota, .sp-pie { margin: var(--e3) 0 0; font-size: var(--t-menor);
  color: var(--tinta-2); }

/* Un dato que falta se dice, no se rellena con un cero. */
.pl-nada { color: var(--tinta-4); font-weight: 400; }
.sp-vacio, .vacio { margin: 0; padding: var(--e5) var(--e4); text-align: left;
  color: var(--tinta-2); font-size: var(--t-apoyo);
  background: var(--sup-2);
  border: 1px dashed var(--borde-2); border-radius: var(--r2);
  background: var(--sup-2); }
.vacio h3 { color: var(--tinta); margin-bottom: var(--e1); }
.vacio p { margin: 0 auto; max-width: 46ch; color: var(--tinta-2);
  font-size: var(--t-menor); }
.vacio .btn, .vacio button { margin-top: var(--e4); }

.zona-peligro { margin-top: var(--e6); border: 1px solid var(--borde);
  border-radius: var(--r3); padding: var(--e3) var(--e4);
  background: var(--sup-2); }
.zona-peligro summary { color: var(--tinta-2); font-weight: 500;
  font-size: var(--t-menor); cursor: pointer; }
.zona-peligro[open] summary { color: var(--rojo); margin-bottom: var(--e2); }

.drop, button.sp-zona { display: block; width: 100%; margin: var(--e4) 0;
  padding: var(--e5) var(--e4); text-align: center; cursor: pointer;
  background: var(--accion-tenue); border: 1.5px dashed var(--accion-borde);
  border-radius: var(--r3); color: var(--accion-osc); font-weight: 600;
  transition: background var(--paso), border-color var(--paso); }
button.sp-zona { margin: 0; }
@media (hover:hover){.drop:hover, button.sp-zona:hover{ background: color-mix(in srgb,
  var(--accion) 12%, var(--sup)); border-color: var(--accion); }}
.drop.over, button.sp-zona.over { border-style: solid;
  border-color: var(--accion);
  background: color-mix(in srgb, var(--accion) 18%, var(--sup)); }
button.sp-zona-chica { padding: var(--e3) var(--e4); }
.sp-zona-tit { display: block; font-size: var(--t-base); font-weight: 600;
  color: var(--accion-osc); }
.sp-zona-sub { display: block; margin-top: 2px; font-size: var(--t-menor);
  font-weight: 400; color: var(--tinta-2); }

/* Cartel de descarga (links con data-descarga, ver base.html) */
.descarga-aviso { position: fixed; left: 50%; bottom: var(--e5);
  transform: translateX(-50%); background: var(--tinta); color: var(--sup);
  padding: 11px 18px; border-radius: 999px; display: flex; align-items: center;
  gap: var(--e2); font-size: var(--t-menor); z-index: var(--z-cartel);
  max-width: 92vw; box-shadow: var(--sombra-flota);
  animation: subir .25s cubic-bezier(.2,.7,.3,1) both; }
.descarga-aviso.err { background: var(--rojo); color: var(--sobre-color); }
.descarga-rueda { width: 1em; height: 1em; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes subir { from { opacity: 0; transform: translate(-50%, 10px); }
                   to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* Banner del modo "ver como cliente" del admin. */
.vercomo-banner { grid-column: 1 / -1; background: var(--accion-osc);
  color: var(--sobre-color); text-align: center; padding: 8px 14px;
  font-size: var(--t-menor); font-weight: 500; position: sticky; top: 0;
  z-index: var(--z-banner); }
.vercomo-banner a { color: var(--sobre-color); margin-left: var(--e3); font-weight: 600;
  white-space: nowrap; }

/* ==========================================================================
   COMPONENTES sp-  (el criterio comun de las pantallas de trabajo)
   La pagina se arma siempre igual:
     .sp-head            titulo de la pantalla, sin recuadro
     .card.sp-hoja       una hoja por etapa
       .sp-bloque        un paso adentro de la hoja, separados por una linea
         .sp-cab         numero + titulo + estado
   Los datos se apoyan en la hoja: nada de tarjetas adentro de tarjetas.
   ========================================================================== */
.sp-head { width: 100%; }
.sp-head h1 { margin: 0 0 var(--e2); }
.sp-head p { margin: 0; color: var(--tinta-2); font-size: var(--t-base);
  max-width: 68ch; }

.card.sp-hoja { padding: var(--e2) var(--e5) var(--e5); }
.sp-bloque { padding: var(--e5) 0; border-bottom: 1px solid var(--borde); }
.sp-bloque:last-child { border-bottom: 0; padding-bottom: 0; }
.sp-cab { display: flex; align-items: center; gap: var(--e3);
  padding: var(--e5) 0 var(--e4); }
.sp-bloque > .sp-cab:first-child { padding-top: 0; }
/* El numero del paso arranca apagado (todavia no) y al completarse se PINTA:
   el color entra cuando el paso queda resuelto. */
.sp-num { flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--sup-3); color: var(--tinta-2); font-family: var(--f-cifra);
  font-weight: 600; font-size: var(--t-menor); display: flex;
  align-items: center; justify-content: center;
  transition: background .25s, color .25s; }
.sp-num.listo { background: var(--accion); color: var(--sobre-color); }
.sp-tit { flex: 1 1 auto; min-width: 0; }
.sp-tit h2 { margin: 0; font-size: var(--t-medio); }
.sp-tit p { margin: 2px 0 0; font-size: var(--t-menor); color: var(--tinta-2); }
.sp-chip { flex: none; font-size: var(--t-micro); font-weight: 600;
  padding: 4px 11px; border-radius: 999px; background: var(--sup-3);
  color: var(--tinta-2); white-space: nowrap; transition: background .25s,
  color .25s; }
.sp-chip.listo { background: var(--completo-fondo); color: var(--completo); }

.sp-campos { display: flex; flex-wrap: wrap; gap: var(--e4) var(--e5); }
.sp-campo { flex: 1 1 200px; min-width: 0; max-width: 300px; }
.sp-campo label { display: block; margin: 0 0 var(--e1);
  font-size: var(--t-micro); font-weight: 600; color: var(--tinta-3);
  text-transform: uppercase; letter-spacing: .09em; }
.sp-campo select, .sp-campo input[type=text] { width: 100%; }

.sp-acciones { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e3); margin-top: var(--e4); }
.sp-acciones > .sp-espacio { margin-left: auto; }
button.sp-btn { margin: 0; padding: 10px 20px; }
.sp-check { display: flex; align-items: flex-start; gap: var(--e2); margin: 0;
  font-weight: 500; font-size: var(--t-base); cursor: pointer; }
.sp-check input { flex: none; width: 17px; height: 17px; margin-top: 3px; }
.sp-check .sp-check-nota { display: block; font-weight: 400;
  font-size: var(--t-menor); color: var(--tinta-2); margin-top: 2px; }

/* --------------------------------------------------------------- resultado */
.sp-verd { display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--e1) var(--e3); padding: var(--e1) 0 var(--e5); }
.sp-verd-ico { flex: none; align-self: center; width: 26px; height: 26px;
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: var(--t-menor); font-weight: 700;
  color: var(--sobre-color); }
.sp-verd.sp-ok .sp-verd-ico { background: var(--completo); }
.sp-verd.sp-alerta .sp-verd-ico { background: var(--ambar); }
.sp-verd-tit { font-family: var(--f-titulo); font-size: var(--t-h1);
  font-weight: 600; letter-spacing: var(--tit-track); line-height: 1.18; }
.sp-verd.sp-ok .sp-verd-tit { color: var(--tinta); }
.sp-verd.sp-alerta .sp-verd-tit { color: var(--ambar); }
.sp-verd-sub { margin-left: auto; font-size: var(--t-menor);
  color: var(--tinta-2); }
.sp-dif-cero, .sp-tabla td.sp-dif-cero { color: var(--tinta); font-weight: 600; }
.sp-dif-hay, .sp-tabla td.sp-dif-hay { color: var(--ambar); font-weight: 600; }

.sp-obs { margin-top: var(--e5); padding: var(--e3) var(--e4);
  background: var(--sup-2); border: 1px solid var(--borde);
  border-radius: var(--r3); }
.sp-obs-tit { font-weight: 600; font-size: var(--t-micro);
  margin: 0 0 var(--e2); color: var(--tinta-3); text-transform: uppercase;
  letter-spacing: .09em; }
.sp-obs-lista { margin: 0; padding-left: 1.1rem; font-size: var(--t-menor);
  color: var(--tinta-2); }
.sp-obs-lista li { margin: .3rem 0; }

/* ==========================================================================


/* ==========================================================================
   CUADRE, CUENTAS Y ARCHIVO
   ========================================================================== */
.cq-cotejo { border: 1px solid var(--borde); border-radius: var(--r3);
  padding: var(--e4); margin-top: var(--e3); background: var(--sup); }
.cq-cuadra { border-color: var(--completo-borde); }
.cq-cerca, .cq-difiere { border-color: var(--falta-borde); }
.cq-cab { display: flex; align-items: baseline; gap: var(--e3);
  flex-wrap: wrap; }
.cq-cab b { color: var(--tinta); font-size: var(--t-medio); font-weight: 600; }
.cq-sello { margin-left: auto; font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; padding: 3px 10px;
  border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.cq-sello-cuadra { background: var(--completo-fondo); color: var(--completo);
  border-color: var(--completo-borde); }
.cq-sello-cerca, .cq-sello-difiere { background: var(--falta-fondo);
  color: var(--falta); border-color: var(--falta-borde); }
.cq-sello-falta { background: var(--sup-3); color: var(--tinta-2);
  border-color: var(--borde); }
.cq-expl { margin: var(--e1) 0 0; max-width: 78ch; font-size: var(--t-menor);
  color: var(--tinta-2); }
.cq-cifras { display: grid; gap: var(--e3); margin-top: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.cq-cifras > div { display: flex; flex-direction: column; }
.cq-cifras b { font-family: var(--f-cifra); font-size: var(--t-medio);
  font-weight: 500; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cq-cifras small { color: var(--tinta-3); font-size: var(--t-micro);
  margin-top: 2px; }
.cq-nota { margin: var(--e3) 0 0; padding-top: var(--e3);
  font-size: var(--t-menor); color: var(--tinta-2);
  border-top: 1px solid var(--borde); max-width: 84ch; }

/* ==========================================================================
   CUENTAS DEL MES
   Tabla larga y de lectura lenta: el dueño la abre a fin de mes para cotejar
   contra el contable, asi que gana el orden por sobre el impacto. Las cuentas
   quietas se apagan en vez de esconderse: que no se hayan movido tambien es
   informacion.
   ========================================================================== */
.cu-tabla td { vertical-align: top; }
.cu-id { color: var(--tinta-4); font-family: var(--f-cifra);
  font-size: var(--t-micro); margin-left: var(--e1); }
.cu-quieta td { color: var(--tinta-3); }
.cu-quieta td b { font-weight: 500; }

/* ==========================================================================
   ARCHIVO POR CLIENTE (meses, PEM guardados)
   ========================================================================== */
.res-bloque { margin-bottom: var(--e6); }
.res-bloque:last-of-type { margin-bottom: 0; }
.res-cliente { color: var(--tinta); font-size: var(--t-medio); font-weight: 600;
  font-family: var(--f-titulo); letter-spacing: var(--tit-track); margin: 0; }
.res-cuit { color: var(--tinta-3); font-size: var(--t-menor); font-weight: 400;
  margin-left: var(--e2); }
.consolidado-anio { margin-bottom: var(--e5); }
.consolidado-head { display: flex; align-items: center; gap: var(--e3);
  margin: var(--e4) 0 var(--e2); }
.consolidado-head h3 { margin: 0; }
.anio-titulo { color: var(--tinta); font-size: var(--t-h2); font-weight: 600;
  margin: var(--e6) 0 var(--e3); letter-spacing: var(--tit-track);
  border-bottom: 1px solid var(--borde); padding-bottom: var(--e2); }
.grilla-meses { display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.mes { border: 1px solid var(--borde); border-radius: var(--r3);
  padding: var(--e3); background: var(--sup); min-height: 66px; }
.mes.vacio { background: var(--sup-2); border-style: dashed; }
.mes.vacio .mes-nombre { color: var(--tinta-4); }
.mes-nombre { font-weight: 600; font-size: var(--t-micro); color: var(--tinta-2);
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: var(--e2);
  padding-bottom: var(--e2); border-bottom: 1px solid var(--borde); }
button.mes-carpeta { display: block; width: 100%; margin: var(--e2) 0 0;
  padding: 6px 8px; border: 1px dashed var(--accion-borde);
  border-radius: var(--r2); background: var(--accion-tenue);
  color: var(--accion-osc); font-size: var(--t-micro); font-weight: 600;
  cursor: pointer; }
@media (hover:hover){button.mes-carpeta:hover{ background: var(--accion); color: var(--sobre-color);
  border-color: var(--accion); }}
.archivo-item { border-top: 1px solid var(--borde); padding: var(--e2) 0 var(--e1); }
.archivo-item:first-of-type { border-top: 0; }
.archivo-tipo { font-weight: 600; font-size: var(--t-menor); }
/* el F8012 no suma junto a la cinta: se ve, pero apagado */
.archivo-tipo.dup-a { color: var(--tinta-3); font-weight: 400; }
.archivo-tipo.dup-a::after { content: "no suma"; margin-left: var(--e2);
  padding: 1px 6px; border-radius: var(--r1); background: var(--sup-3);
  color: var(--tinta-3); font-size: var(--t-micro); font-weight: 600;
  vertical-align: 1px; }
.archivo-detalle { font-size: var(--t-micro); color: var(--tinta-3); }
.archivo-acciones { display: flex; gap: var(--e3); align-items: center;
  margin-top: var(--e1); }
/* Estos links se repiten en CADA archivo de CADA mes: en el azul vivo son
   cuarenta manchas de color por pantalla y el acento deja de significar
   nada. En reposo van del color del texto y se encienden al apoyar. */
.archivo-acciones a { color: var(--tinta-2); text-decoration: none;
  font-size: var(--t-menor); font-weight: 500; }
@media (hover:hover){.archivo-acciones a:hover{ color: var(--accion); text-decoration: underline; }}
.archivo-acciones form { display: inline; margin: 0; }

/* ==========================================================================


/* ==========================================================================
   PORTADA Y MOVIMIENTO
   ========================================================================== */
/* Misma chapa que el instrumento: una hoja con el filo de sodio arriba. Antes
   era una banda de color de marca, y la marca dejó de ser un color el día que
   el sistema entero pasó a tener tema. */
.hero { position: relative; overflow: hidden; width: 100%;
  border-radius: var(--r3); padding: var(--e7) var(--e6);
  background: linear-gradient(180deg, var(--sup) 0%, var(--sup-2) 100%);
  border: 1px solid var(--borde-2); box-shadow: var(--s2), var(--filo); }
.hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--sodio), transparent);
  opacity: .6; }
.hero h1 { font-family: var(--f-din); letter-spacing: var(--din-track);
  font-size: var(--t-display); margin: 0 0 var(--e3); font-weight: 700; }
.hero p { color: var(--tinta-2);
  font-size: var(--t-medio); max-width: 66ch; margin: 0 0 var(--e5); }
.hero .acciones { display: flex; gap: var(--e3); flex-wrap: wrap; }
.mosaicos { display: grid; width: 100%; gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mosaico { background: var(--sup); border: 1px solid var(--borde);
  border-radius: var(--r3); padding: var(--e5);
  transition: border-color var(--paso), background var(--paso); }
@media (hover:hover){.mosaico:hover{ border-color: var(--borde-2); background: var(--sup-2); }}
.mosaico .icono { color: var(--accion); }
.mosaico h2 { font-size: var(--t-medio); margin: var(--e3) 0 var(--e1); }
.mosaico p { margin: 0; font-size: var(--t-menor); color: var(--tinta-2); }
.mosaico .num { display: inline-flex; width: 34px; height: 34px;
  border-radius: 50%; background: var(--sup-3); color: var(--tinta);
  align-items: center; justify-content: center; font-weight: 600;
  font-family: var(--f-cifra); }
.precio-destacado { font-size: var(--t-display); color: var(--tinta);
  font-weight: 600; margin-right: var(--e2); letter-spacing: -.03em; }
.lista-precio { margin: var(--e3) 0 var(--e1); padding-left: 20px; }
.lista-precio li { margin-bottom: var(--e2); }

/* ==========================================================================
   MOVIMIENTO
   Un solo momento: las hojas entran escalonadas al cargar y despues la
   pantalla se queda quieta para trabajar. 'both' y no 'forwards': si la
   animacion no llega a correr, el elemento queda visible igual.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  main > * { animation: entrar .42s cubic-bezier(.16,.84,.32,1) both; }
  main > *:nth-child(2) { animation-delay: .04s; }
  main > *:nth-child(3) { animation-delay: .08s; }
  main > *:nth-child(4) { animation-delay: .12s; }
  main > *:nth-child(5) { animation-delay: .16s; }
  main > *:nth-child(n+6) { animation-delay: .2s; }
  @keyframes entrar {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ==========================================================================


/* ==========================================================================
   AJUSTES DEL SISTEMA REAL
   Lo que la maqueta no tenía porque era un archivo suelto: el ancla como
   enlaces (no botones), el ticker que pinta JavaScript, y las tablas
   genéricas de las pantallas que todavía no se convirtieron.
   ========================================================================== */

/* El ancla navega con <a>, así que el extremo de la serie no es :disabled */
.ancla-b.an-off{ opacity:.35; cursor:default; }
a.ancla-b{ text-decoration:none; }

/* Ticker de tickets. Los nombres de clase los escribe vivo_ticker.js, que es
   el mismo para /resumen y /playa: se los viste, no se los renombra. */
.tk{ list-style:none; margin:0; padding:0; }
.tk-fila{ display:grid; grid-template-columns:3.4em minmax(0,1fr) auto;
  gap:var(--e2); align-items:baseline; padding:8px 0;
  border-bottom:1px solid var(--borde);
  transition:transform .35s cubic-bezier(.16,.9,.24,1), opacity .35s; }
.tk-fila:last-child{ border-bottom:0; }
.tk-entra{ transform:translateY(-6px); opacity:0; }
.tk-hora{ font-family:var(--f-num); font-size:var(--t-menor);
  color:var(--tinta-3); }
.tk-desc{ min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:var(--t-apoyo); }
.tk-desc b{ font-weight:500; }
.tk-cc{ display:block; font-size:var(--t-micro); color:var(--tinta-3);
  overflow:hidden; text-overflow:ellipsis; }
.tk-monto{ font-family:var(--f-num); font-variant-numeric:tabular-nums;
  font-weight:500; white-space:nowrap; }
.tk-fila.tk-mini .tk-desc b, .tk-fila.tk-mini .tk-cc{ color:var(--minishop); }
.tk-fila.tk-oficina .tk-desc b{ color:var(--oficina); }
.tk-sin{ color:var(--tinta-3); padding:8px 0; font-size:var(--t-apoyo); }
/* Aclara de que turno son los tickets de abajo. No es un ticket: no lleva
   reja ni color de lugar, y queda separada de la lista. */
.tk-antes{ color:var(--tinta-2); padding:0 0 8px; font-size:var(--t-apoyo);
  border-bottom:1px solid var(--borde); margin-bottom:6px; }
@media (prefers-reduced-motion:reduce){ .tk-fila{ transition:none; } }

/* Un importe que acaba de subir se enciende un segundo. Es el único destello
   del sistema, y por eso significa algo. */
.vv-subio{ animation:vv-destello 1.1s ease-out; }
@keyframes vv-destello{ 0%{ color:var(--sodio); } 100%{ color:inherit; } }
@media (prefers-reduced-motion:reduce){ .vv-subio{ animation:none; } }

/* Un dato que falta se dice, no se rellena con un cero. */
.pl-nada{ color:var(--tinta-3); font-weight:400; }

/* Una celda de tabla sin dato no se deja en blanco: se apaga y se dice. */
.reja td.vacia, table.reja .vacia{ color:var(--tinta-3); }

/* Una tabla marcada .apilable no se desliza en el celular: cada fila pasa a
   ser una ficha etiqueta/valor. Las celdas necesitan data-th. */
@media (max-width: 560px) {
  .sp-tabla.apilable { min-width: 0; display: block; font-size: var(--t-base); }
  .sp-tabla.apilable thead { display: none; }
  .sp-tabla.apilable tbody, .sp-tabla.apilable tfoot,
  .sp-tabla.apilable tr, .sp-tabla.apilable td { display: block; width: auto; }
  .sp-tabla.apilable tr { padding: var(--e3) 0;
    border-bottom: 1px solid var(--borde); }
  .sp-tabla.apilable tfoot tr { border-bottom: 0;
    border-top: 1px solid var(--borde-2); }
  .sp-tabla.apilable td { position: relative; text-align: right;
    padding: 4px 0 4px 42%; border: 0; }
  .sp-tabla.apilable td::before { content: attr(data-th); position: absolute;
    left: 0; top: 5px; text-align: left; font-size: var(--t-micro);
    font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tinta-3); }
  .sp-tabla.apilable td:first-child { padding: 0 0 var(--e2); text-align: left;
    font-size: var(--t-base); font-weight: 600; color: var(--tinta); }
  .sp-tabla.apilable tfoot td { padding-top: var(--e1); }
}


/* Imprimir: la unica pantalla que se imprime es el resumen de cuenta, y lo que
   se imprime es el documento —no la pantalla que lo rodea—. "Guardar como PDF"
   del navegador ES el PDF: sin libreria nueva, y lo que sale en papel es
   exactamente lo que el dueno vio en la vista previa.

   Se apaga por `visibility` y no por `display`: el documento cuelga de siete
   contenedores y esconder cualquiera de ellos se lo lleva puesto. Asi no hay
   que saber la forma del arbol. */
@media print {
  body * { visibility: hidden; }
  .doc, .doc * { visibility: visible; }
  .doc { position: absolute; inset: 0 auto auto 0; width: 100%;
    box-shadow: none; border-radius: 0; padding: 0; }
}


/* ==========================================================================
   DENSIDAD Y PROFUNDIDAD                              (spec 2026-08-14)
   --------------------------------------------------------------------------
   Ultima capa del archivo a proposito: redefine tokens que se declararon
   arriba. Un `:root` posterior gana, asi que aca se corrigen las sombras sin
   tocar el bloque de la maqueta ni el del tema claro.

   Trae tambien los dos componentes que la auditoria de densidad necesita en
   las siete pantallas del dueño:
     .faltan  — las ausencias de una pantalla, consolidadas en un renglon
     .porque  — la procedencia de un bloque, plegada y callada
   ========================================================================== */

/* ----------------------------------------------------------- profundidad
   Las sombras de arriba no existian: `--s1` era `0 1px 0 rgba(255,255,255,.03)`,
   o sea un pelo blanco DEBAJO del elemento — invisible, y encima del lado que
   no va. Sin sombra, ocho bloques quedan pegados al fondo y la pantalla se lee
   como una sola masa.

   Tres alturas y ni una mas: hoja apoyada (s1), hoja levantada (s2), y lo que
   flota de verdad (s3). En oscuro la altura la carga el filo interno de arriba
   —una sombra negra sobre fondo negro no se ve—; en claro la carga la sombra. */
:root{
  --s1: 0 1px 2px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.045);
  --s2: 0 2px 6px rgba(0,0,0,.34), 0 14px 32px -18px rgba(0,0,0,.85),
        inset 0 1px 0 rgba(255,255,255,.055);
  --s3: 0 6px 14px rgba(0,0,0,.40), 0 28px 60px -20px rgba(0,0,0,.9),
        inset 0 1px 0 rgba(255,255,255,.07);
  /* El filo de un chip: lo que separa "impreso" de "pegado". */
  --filo-chip: inset 0 0 0 1px rgba(255,255,255,.055);
  /* Superficie translucida para lo que se superpone al contenido. */
  --sup-vidrio: color-mix(in srgb, var(--sup) 78%, transparent);
}
[data-tema="claro"]{
  --s1: 0 1px 2px rgba(20,25,23,.07), 0 1px 1px rgba(20,25,23,.04);
  --s2: 0 2px 5px rgba(20,25,23,.08), 0 14px 30px -18px rgba(20,25,23,.30);
  --s3: 0 6px 14px rgba(20,25,23,.10), 0 26px 56px -20px rgba(20,25,23,.38);
  --filo-chip: inset 0 0 0 1px rgba(20,25,23,.06);
  --sup-vidrio: color-mix(in srgb, var(--sup) 80%, transparent);
}

/* El instrumento del turno en curso es lo unico que flota de verdad. */
.instr{ box-shadow: var(--s3); }
.chip, .sello{ box-shadow: var(--filo-chip); }

/* ------------------------------------------------------------------ blur
   Solo donde hay superposicion REAL. La barra de arriba es sticky y el
   contenido le pasa por abajo: ahi el blur dice "hay dos planos". El rail en
   escritorio es una columna al lado —nada le pasa por abajo— asi que no lleva;
   en el celular es un cajon sobre la pagina y ahi si.

   Con @supports porque el navegador que no lo tiene se queda con la superficie
   opaca de arriba, que es legible igual. Sin la guarda, quedaria translucido
   sin blur: texto sobre texto. */
@supports (backdrop-filter: blur(4px)) {
  .top, .cabecera{
    background: var(--sup-vidrio);
    backdrop-filter: blur(14px) saturate(1.6);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
  }
  @media (max-width:900px){
    .rail{
      background: var(--sup-vidrio);
      backdrop-filter: blur(18px) saturate(1.6);
      -webkit-backdrop-filter: blur(18px) saturate(1.6);
    }
  }
}
.tapa{ backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* =========================================================== .faltan
   Las ausencias de una pantalla, en UN renglon.

   El metodo (12/08 §2) manda declarar la ausencia: un cero miente, una
   ausencia no. Pero cinco tarjetas vacias no son cinco ausencias, son una — y
   en Playa ocupaban pantalla y media para decir cuatro veces "no llego".

   Cerrada son 48 px. El turno que SI trae todo no la ve nunca.

   OJO: aca entra solo lo que no habilita ningun acto (procedencia del dato).
   Un faltante accionable —"faltan 6 cierres", "el tanque alcanza 2 dias"— sube
   a Avisos y NO se pliega (metodo §3). */
.faltan{ border:1px dashed var(--borde-2); border-radius:var(--r3);
  background:var(--sup-2); margin-top:var(--e2); }
.faltan>summary{ list-style:none; cursor:pointer; display:flex;
  align-items:center; gap:var(--e3); padding:var(--e3) var(--e4);
  font-size:var(--t-apoyo); color:var(--tinta-2); }
.faltan>summary::-webkit-details-marker{ display:none; }
@media (hover:hover){.faltan>summary:hover{ color:var(--tinta); }}
.faltan-fl{ width:8px; height:8px; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .2s; }
.faltan[open] .faltan-fl{ transform:rotate(-135deg); }
.faltan>summary b{ font-weight:600; color:var(--tinta); }
.faltan-q{ margin-left:auto; font-size:var(--t-menor); color:var(--tinta-3); }
.faltan-cuerpo{ padding:0 var(--e4) var(--e4); }
.faltan-i{ display:grid; grid-template-columns:1fr auto; gap:2px var(--e3);
  padding:var(--e3) 0; border-top:1px solid var(--borde); }
.faltan-i b{ font-size:var(--t-apoyo); font-weight:600; }
.faltan-i span{ grid-column:1 / -1; font-size:var(--t-menor);
  color:var(--tinta-2); line-height:1.5; }
.faltan-i .chip{ align-self:start; }

/* =========================================================== .porque
   La procedencia de un bloque, plegada.

   Son ~95 parrafos que hoy estan abiertos debajo de cada cifra. El que entra
   por primera vez los necesita; el que entra todos los dias ya los sabe y le
   estan tapando el dato.

   El rotulo es SIEMPRE el mismo y esta repetido a proposito: asi se vuelve un
   habito y no un descubrimiento. El que aprendio a abrirlo en Playa ya sabe
   abrirlo en Cuentas.

   Callada a proposito: no lleva el color de accion como `.desp`. Un desplegable
   de DATO (los ceros del arqueo, los cupones) tiene que pesar mas que uno de
   explicacion, o compiten y gana el que no importa. La flecha va adelante,
   como en un arbol de carpetas: es donde el ojo la busca. */
.porque{ border-top:1px solid var(--borde); margin-top:var(--e3); }
/* --tinta-2 y no --tinta-3: el rotulo es de 13 px, asi que le corresponde
   4,5:1 y no el 3:1 de un sello de 11. Con --tinta-3 sobre el degrade del
   fondo daba 4,71 en el tema claro — pasa, pero sin margen y sobre una
   superficie que cambia de tono a lo largo de la pagina. Con --tinta-2 da
   6,4 en claro y 6,8 en oscuro, y sigue leyendose como secundario. */
.porque>summary{ list-style:none; cursor:pointer; display:flex;
  align-items:center; gap:8px; padding:10px 0 0; font-size:var(--t-menor);
  font-weight:500; color:var(--tinta-2); }
.porque>summary::-webkit-details-marker{ display:none; }
@media (hover:hover){.porque>summary:hover{ color:var(--accion-viva); }}
.porque>summary::before{ content:""; width:6px; height:6px; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); transition:transform .2s; }
.porque[open]>summary::before{ transform:rotate(45deg); }
.porque-cuerpo{ padding-top:var(--e3); font-size:var(--t-menor);
  color:var(--tinta-2); line-height:1.55; }
.porque-cuerpo > :first-child{ margin-top:0; }
.porque-cuerpo p{ margin:0 0 var(--e2); }
.porque-cuerpo p:last-child{ margin-bottom:0; }
/* Una tabla de procedencia adentro se lee mas chica: es nivel 3. */
.porque-cuerpo .reja td{ font-size:var(--t-menor); }

/* El .porque de PIE DE PAGINA no vive adentro de una hoja: es hijo directo de
   una celda de la grilla y cae sobre el fondo. Sin esto queda un renglon suelto
   pegado al borde, que se lee como algo que se rompio y no como un cierre de
   pantalla. Se le da la caja de una hoja, sin el peso de una. */
.grilla > .c12 > .porque{
  margin-top:0; border-top:0; border:1px solid var(--borde);
  border-radius:var(--r3); background:var(--sup);
  padding:0 var(--e4) 2px; box-shadow:var(--s1);
}
.grilla > .c12 > .porque > summary{ padding:var(--e3) 0; }
.grilla > .c12 > .porque[open] > summary{ border-bottom:1px solid var(--borde); }
.grilla > .c12 > .porque .porque-cuerpo{ padding:var(--e3) 0 var(--e4); }

/* Un renglon de estado que reemplaza a un bloque vacio entero. Ni tarjeta ni
   parrafo: una linea, con el aire de una. */
.quieto{ margin:0; padding:var(--e3) 0; color:var(--tinta-2);
  font-size:var(--t-apoyo); }
.quieto b{ color:var(--tinta); font-weight:600; }

@media (prefers-reduced-motion:reduce){
  .faltan-fl, .porque>summary::before{ transition:none; }
}

/* Dedo, no mouse. Medidos en un telefono de 375, los rotulos de despliegue
   daban 30 px de alto: el metodo pide 44 (§6) y con 30 se falla el toque y se
   abre el de al lado. No se agranda en escritorio —serian 70 px de aire de
   regalo por pantalla, justo lo que veniamos a sacar—, asi que va por el tipo
   de puntero y no por el ancho: una tablet con mouse no lo necesita. */
@media (pointer: coarse){
  .porque>summary, .desp>summary, .faltan>summary{
    min-height:44px; align-items:center;
  }
  .porque>summary{ padding-top:0; padding-bottom:0; }
  .desp>summary{ padding-top:0; padding-bottom:0; }
  /* Los renglones que ADEMAS son fila de datos (un rubro, un cierre, un
     deudor) ya traen su propio alto por el contenido; sólo se les asegura
     el piso. */
  .rubro>summary, .ci>summary, .deu>summary{ min-height:44px; }
}


/* ==========================================================================
   LEGIBILIDAD DE TABLA                                (Juan, 14/08/2026)
   --------------------------------------------------------------------------
   "Tiene mucho numero y letra juntas y todo gris." Tres cosas distintas:
   un bug de layout, la falta de guia para el ojo, y la falta de jerarquia
   entre columnas.
   ========================================================================== */

/* ------------------------------------------------- el titulo aplastado
   BUG: en los bloques con buscador el <h3> medía CERO de ancho y su texto de
   47 px se desbordaba y pintaba encima del sello. Se veia "Cuentas
   corrientes" con el chip escrito por arriba.

   Causa: la regla base `input[type=search]{width:100%}` es correcta para un
   formulario, pero adentro de un flex se traduce en una base de 500 px que se
   come toda la fila. El h3 tenia `flex:1 1 0%` — o sea, se deja aplastar hasta
   cero — y el sello, `flex:0 1 auto`, tambien encogia.

   Arreglo: el titulo NO encoge nunca (`flex:1 0 auto`), el sello tampoco, y el
   buscador pasa a ser un item con base propia que puede encoger y, si no
   entra, bajar a la fila de abajo. */
.bloque-cab{ flex-wrap:wrap; row-gap:var(--e2); }
.bloque-cab h3{ flex:1 0 auto; min-width:0; }
.bloque-cab > .sello, .bloque-cab > .chip{ flex:0 0 auto; }
.bloque-cab input[type=search]{
  flex:1 1 200px; width:auto; min-width:0; margin-left:auto;
}

/* --------------------------------------------------------------- cebra
   Solo en las tablas ANCHAS, que son las que tienen encabezado. Las listas de
   dos columnas (Te deben, Tanques, los pares dato/valor) no la necesitan: ahi
   el ojo no tiene que cruzar 700 px sin agarradera.

   El tinte es del tema, no un gris fijo, asi que sigue al claro y al oscuro. */
.reja:has(thead) tbody tr:nth-child(even),
.flota tbody tr:nth-child(even){ background:var(--sup-2); }
@media (hover:hover){.reja:has(thead) tbody tr:hover,
.flota tbody tr:hover{ background:var(--sup-3); }}
/* Con cebra, el filete de cada fila pasa a ser ruido: sobra una de las dos. */
.reja:has(thead) tbody td{ border-bottom:0; }
.reja:has(thead) tbody tr:last-child td{ border-bottom:0; }
/* SIN encabezado pegajoso: adentro de .tablewrap (overflow-x) el sticky se
   mide contra el envoltorio y no contra la ventana, y el top:56px lo dejaba
   flotando ARRIBA de la primera fila con una banda vacia en su lugar. Las
   tablas del dueño tienen 7-24 filas: no lo necesitan. */

/* ------------------------------------------- jerarquia entre columnas
   Una fila de siete cifras del mismo peso no tiene respuesta: hay que leerlas
   todas para encontrar la que importa. Las del medio son el CAMINO (saldo al
   empezar, cargo, pago, movimiento) y la ultima es el RESULTADO.
   El camino retrocede una tinta; el resultado se queda con la plena, gana un
   paso de peso y un filete que lo separa como columna aparte. */
.reja td.camino, .reja td.camino .cifra{ color:var(--tinta-2); }
.reja th.camino{ color:var(--tinta-3); }
.reja td.cierre, .reja th.cierre{
  border-left:1px solid var(--borde-2); padding-left:var(--e4);
}
.reja td.cierre .cifra{ font-weight:600; color:var(--tinta); }
.reja tfoot td.cierre{ border-left:1px solid var(--borde-2); }

/* Una fila sin nada que decir (saldo cero, sin movimiento) se apaga en vez de
   competir con las que si tienen algo. */
.reja tbody tr.quieta td, .reja tbody tr.quieta .cifra{ color:var(--tinta-3); }

/* ================================================ TURNO POR TURNO
   Los rotulos "entró" y "salió" estaban escritos en CADA renglon: con treinta
   cierres son sesenta palabras repetidas metidas entre las cifras, y es
   justamente lo que hacia el amasijo. Ahora van UNA vez, arriba, y para que un
   encabezado pueda alinearse con las filas la grilla dejo de tener columnas
   `auto` y pasa a medidas fijas. */
.ci-cab{
  display:grid; gap:var(--e2) var(--e3); align-items:end;
  /* las pistas las pone la regla de abajo, junto con las del renglón: las dos
     tienen que cambiar a la vez o el rótulo queda corrido de su columna */
  /* el MISMO padding lateral que .ci>summary, que lo lleva para que la cebra
     no arranque pegada al borde: sin esto el encabezado queda 8 px corrido a
     la izquierda de sus propias columnas */
  padding:0 var(--e2) 7px; margin-top:var(--e2);
  border-bottom:1px solid var(--borde-2);
  font-size:var(--t-micro); letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinta-3); font-weight:600;
}
/* SIETE columnas: es la grilla del historial de IVA, que usa el mismo .ci con
   sus dos .ci-n (neto e IVA). La lista de turnos tiene SEIS y va acotada a
   .ci-turnos: le sacamos «entró» y «salió» —dos cifras casi iguales que nadie
   restaba con el ojo— y pusimos lo vendido. */
.ci>summary{ grid-template-columns:112px 1fr 120px 120px 116px auto 12px; }
/* El encabezado lleva las MISMAS clases que el renglón (.ci-d, .ci-v, .ci-q)
   en vez de contar hijos: así una columna que se esconde en el celular se
   esconde arriba y abajo con la misma regla. */
.ci-cab .ci-v, .ci-cab .ci-q{ text-align:right; }
.ci-cab, .ci-turnos .ci>summary{
  grid-template-columns:112px 1fr 130px 120px auto 12px; }
.ci-v{ text-align:right; white-space:nowrap; min-width:0; overflow:hidden; }
.ci .ci-v{ font-family:var(--f-num); font-variant-numeric:tabular-nums;
  color:var(--tinta-2); }
/* La cebra tambien acá: son treinta renglones de siete campos. */
.ci:nth-of-type(even)>summary{ background:var(--sup-2); }
.ci>summary{ padding-left:var(--e2); padding-right:var(--e2);
  border-radius:var(--r1); }
@media (hover:hover){.ci>summary:hover{ background:var(--sup-3); }}
/* Lo que entró y lo que salió es el CAMINO; lo que quedó es la RESPUESTA. */
.ci-n{ color:var(--tinta-3); }
/* Va dentro de .ci y no suelto: el encabezado usa las mismas clases que el
   renglón, y sin acotarlo el rótulo «SIN CONTAR» salía más grande que
   «TURNO» y «VENDIÓ», que son sus vecinos. */
.ci .ci-q{ font-size:var(--t-medio); }
.ci-t em{ text-transform:none; letter-spacing:0; }

/* Estas van DESPUÉS de las declaraciones de arriba a propósito: sin ese orden
   la regla sin media query le gana a la del ancho chico, y el renglón se
   queda con las pistas de escritorio en una pantalla que no las tiene. */
@media (max-width:1140px){
  .ci-cab, .ci-turnos .ci>summary{ grid-template-columns:1fr 130px 120px auto 12px; }
  .ci-d{ display:none; }
}
@media (max-width:620px){
  .ci-cab{ display:none; }
  /* En el celular queda lo que se compara: el turno y lo que vendió. La
     diferencia sin caja contada no es un faltante, así que no se gana un
     lugar en 375 px. */
  .ci-turnos .ci>summary{ grid-template-columns:1fr auto 12px; }
  .ci-turnos .ci-q{ display:none; }
}

/* ================================================== CABECERA FUNDIDA
   El titulo, su bajada y la barra del mes/turno eran TRES bloques apilados
   (y en dos pantallas, cuatro: habia un formulario "Mes/Ver" que repetia lo
   que las flechas ya hacen). El primer dato arrancaba a ~460px del techo.
   Ahora son una banda: titulo a la izquierda, barra a la derecha, y el mes
   de la barra es el selector. */
/* El titulo y la barra del mes son UN encabezado, no dos bloques: con los
   16 px de siempre entre medio quedaban separados y empujaban la cifra otro
   renglon para abajo. */
.cab{ align-items:center; margin-bottom:var(--e4); row-gap:var(--e2); }
.cab > div:first-child{ flex:1 1 260px; min-width:0; }
/* El ancla YA NO comparte renglon con el titulo. Al lado quedaba apretada
   contra el borde y se partia en tres lineas —una pantalla la ponia a la
   derecha, otra abajo, otra en dos renglones—: eso era lo que descuadraba.
   Abajo del titulo, a lo ancho y alineada con todo lo demas, entra siempre
   en UNA linea y se ve igual en las nueve pantallas que la usan. Cuesta 26px
   de alto; la caja que reemplaza costaba noventa. */
.cab .ancla{ margin:0; flex:1 1 100%; min-width:0; }

/* El rotulo del mes ES el selector: mismo cuerpo que el <b> al que
   reemplaza, mas la flechita que avisa que se puede tocar. El boton "Ver"
   solo se ve sin JavaScript (base.html lo esconde). */
.ancla-mes{ position:relative; display:flex; align-items:center; gap:var(--e2); }
.ancla-mes select{
  appearance:none; -webkit-appearance:none; background:transparent; border:0;
  font:600 var(--t-base)/1.35 var(--f-din); letter-spacing:var(--din-track);
  color:var(--tinta); padding:0 16px 0 0; cursor:pointer; max-width:100%;
}
.ancla-mes::after{
  content:'\25BE'; position:absolute; right:2px; top:50%;
  transform:translateY(-50%); font-size:.7rem; color:var(--accion-viva);
  pointer-events:none;
}
@media (hover:hover){.ancla-mes select:hover{ color:var(--accion-viva); }}
.ancla-mes select:focus-visible{
  outline:2px solid var(--accion-viva); outline-offset:2px;
  border-radius:var(--r1);
}
.ancla-mes button{ margin:0; }

/* ================================================ CUADRE
   El area del mes se cierra con DOS sectores (el numero y cuanto se separan
   las fuentes entre si), no con los tres del cotejo de a pares. */
.sectores.dos{ grid-template-columns:repeat(2,1fr); }
/* En el celular no entran dos importes de nueve cifras uno al lado del otro:
   la columna se parte al medio y las dos quedan de distinto ancho. */
@media (max-width:820px){ .sectores.dos{ grid-template-columns:1fr; } }

/* El archivo del que sale una fuente va debajo de su nombre, no al lado: al
   lado empuja la cifra fuera de su columna en la pantalla del celular. */
.reja td .chico.bl{ display:block; margin-top:3px; font-weight:400; }

/* El aviso de "este mes no terminó" va pegado al ancla del mes, que es lo que
   lo explica, y antes de la primera cifra: leerlo despues no sirve. */
.cu-corre{ margin-top:var(--e4); }

/* Las dos listas del ticker, una arriba de la otra y no lado a lado: el
   bloque mide 451 px y en dos columnas cada renglón queda con 74 px para el
   producto — "PHILIP MORRIS SELE" entra cortado y "$ 152.000" no entra. */
.tk-dos{ display:grid; gap:var(--e5); }
.tk-dos > div + div{ border-top:1px solid var(--borde); padding-top:var(--e4); }
.tk-rot{ margin:0 0 var(--e2); font-size:var(--t-menor); font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--tinta-3);
  display:flex; align-items:center; gap:var(--e2); }
/* El mismo punto de color que separa los lugares en el resto de la pantalla:
   el rótulo solo no alcanza cuando las dos listas son iguales de lejos. */
.tk-rot::before{ content:""; width:3px; height:.9em; border-radius:100px;
  background:var(--playa); }
.tk-rot.mi::before{ background:var(--minishop); }

/* ============================================================ Control
   El panel del admin. Una sola lista: la PC que se rompio sube arriba y
   viene abierta con su arreglo; la sana queda en una linea con la hora
   cruda de su latido. Esa hora es lo unico que separa "no hay problemas"
   de "el detector esta roto", que es de donde salio el semaforo verde
   sobre dos estaciones en cero. */
.ctl-t { display: flex; gap: var(--e3); align-items: flex-start;
         padding: var(--e3); border-radius: var(--r2);
         border: 1px solid var(--borde); background: var(--sup-2);
         margin-bottom: var(--e2); }
.ctl-t .pip { width: 3px; align-self: stretch; border-radius: 100px;
              background: var(--tinta-3); flex: none; }
.ctl-n1 .pip { background: var(--mal); }
.ctl-n2 .pip { background: var(--alerta); }
.ctl-n3 .pip, .ctl-n4 .pip { background: var(--tinta-3); }
.ctl-t-dice { min-width: 0; flex: 1; }
.ctl-t-dice b { font-size: var(--t-apoyo); font-weight: 600;
                color: var(--tinta); }
.ctl-t-dice > span { font-size: var(--t-menor); color: var(--tinta-2); }
/* Quien se rompio, que oficio hacia y cuanto apura, en un solo renglon que
   envuelve. Los tres datos juntos son la frase que antes habia que armar
   mentalmente con el color de un puntito y el nombre de una PC. */
.ctl-t-quien { display: flex; align-items: center; flex-wrap: wrap;
               gap: var(--e1) var(--e2); margin-bottom: 2px; }
.ctl-oficio { font-size: var(--t-menor); color: var(--tinta-3); }
/* El AnyDesk se ve como el boton que es: casi todas las recetas empiezan
   mandando a entrar por ahi, asi que es la primera cosa que se aprieta. */
.ctl-anydesk { display: inline-block; padding: 5px 10px; border-radius: var(--r2);
               border: 1px solid var(--borde-2); background: var(--sup);
               font-size: var(--t-menor); font-weight: 600;
               font-family: var(--f-num); color: var(--accion-viva);
               white-space: nowrap; text-decoration: none; }
@media (hover:hover){.ctl-anydesk:hover{ background: var(--sup-2); border-color: var(--accion-viva); }}
/* El sello de lo urgente. `.sello` a secas es gris y no se distingue del de
   al lado, que es justamente lo que hay que distinguir de un vistazo. */
.sello.urge { background: var(--mal-piso); color: var(--mal); }
/* La receta se lee como se escribio: los renglones son los pasos. */
.ctl-receta { margin: var(--e2) 0 0; font-size: var(--t-menor);
              color: var(--tinta-2); line-height: 1.55; white-space: pre-line;
              padding-left: var(--e3);
              border-left: 2px solid var(--borde-2); }
.ctl-t-hacer { display: flex; flex-direction: column; gap: var(--e1);
               align-items: flex-end; flex: none; }
.ctl-ir { font-size: var(--t-menor); font-weight: 600;
          color: var(--accion-viva); white-space: nowrap;
          text-decoration: none; }

.ctl-pc { display: flex; align-items: center; gap: var(--e2);
          padding: 6px var(--e3); flex-wrap: wrap; }
.ctl-pc b { font-size: var(--t-apoyo); font-weight: 600; }
.ctl-led { width: 7px; height: 7px; border-radius: 50%; flex: none;
           background: var(--ok); }
.ctl-pc-fuera .ctl-led { background: var(--tinta-3); }
.ctl-dato { font-family: var(--f-num); font-size: var(--t-menor);
            color: var(--tinta-3); }
/* Los botones de orden al final de la fila. Envuelve porque son hasta tres
   formularios mas un chip por orden pendiente: sin `wrap` la fila de una PC
   con ordenes encima se estira a lo ancho y empuja el bloque fuera de la
   pantalla. */
.fe-acciones { margin-left: auto; display: flex; align-items: center;
               gap: var(--e2); flex-wrap: wrap; }
/* opciones.txt y el log de una PC: texto crudo que llega con renglones de
   cualquier largo. Sin el corte, una linea del log estira el bloque entero y
   la pagina se va de ancho en el celular. */
.fe-pre { margin: var(--e3) 0 0; padding: var(--e3); border-radius: var(--r2);
          background: var(--sup-2); color: var(--tinta-2);
          font-family: var(--f-num); font-size: var(--t-menor);
          line-height: 1.5; overflow-x: auto; white-space: pre-wrap;
          word-break: break-word; }
.fe-log { max-height: 60vh; overflow-y: auto; }

/* El panel se leia en una sola columna de tarjetas anchisimas: el texto
   moria a un tercio del ancho y el resto era aire. Puestas de a dos, la
   flota entra de un vistazo sin achicar ni una letra. */
.ctl-lista { display: grid; gap: var(--e2); align-items: start;
             grid-template-columns:
               repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.ctl-lista .ctl-t { margin: 0; height: 100%; padding: var(--e2) var(--e3); }
/* Las PCs sanas son una linea cada una: no necesitan el aire de una tarjeta,
   solo el renglon. */
.ctl-pcs { display: flex; flex-direction: column;
           margin-top: var(--e2); padding-top: var(--e2);
           border-top: 1px solid var(--borde); }
.ctl-pcs .ctl-pc { padding: 3px 0; flex-wrap: nowrap; }
/* Las carpetas que ve la PC son cuatro rutas pegadas: con `nowrap` heredado
   de `.ruta` la fila se iba de la pantalla. Se corta con puntos suspensivos
   y la ruta entera queda en el `title`. */
.ctl-pcs .ruta { flex: 0 1 auto; min-width: 0;
                 overflow: hidden; text-overflow: ellipsis; }
.ctl-est .bloque-cab { padding-top: var(--e3); }
.ctl-est .bloque-cuerpo { padding: var(--e2) var(--e3) var(--e3); }
/* El titulo con su cuenta al lado, no con media pantalla de por medio. */
.cab-ctl { margin-top: calc(-1 * var(--e2)); margin-bottom: var(--e3); }
.cab-ctl h1 .sello { vertical-align: middle;
                     position: relative; top: -2px; margin-left: var(--e2); }
.cab-ctl p { max-width: 100ch; }
#ctl-flota { margin-top: 0; }
/* El pie de Estaciones explica un ausente: la cuenta que todavia no tiene
   estacion. Sin esto, una cuenta que no aparece se lee como una que se perdio. */
.ctl-pie { margin-top: var(--e4); }
/* Renombrar viene plegado: es un formulario por estacion y abierto tapa lo
   que hay que mirar. */
.renom { flex: none; }
/* El summary se viste de boton chico secundario: en una barra de botones,
   un texto suelto no se lee como algo que se pueda apretar. */
.renom > summary { list-style: none; cursor: pointer; display: inline-block;
                   padding: 4px 9px; border-radius: var(--r2);
                   border: 1px solid var(--borde); background: var(--sup);
                   font-size: var(--t-menor); color: var(--tinta-2); }
.renom > summary::-webkit-details-marker { display: none; }
@media (hover:hover){.renom > summary:hover{ background: var(--sup-2);
                         border-color: var(--borde-2); color: var(--tinta); }}
.renom[open] > summary { color: var(--tinta); }
.renom[open] { flex: 1 1 100%; }
.renom form { margin-top: var(--e2); }
.renom input[type=text],
.renom input[type=email] { width: min(100%, 20rem); }
.renom .nota { margin-top: var(--e1); }

@media (max-width: 700px) {
  .ctl-t { flex-wrap: wrap; }
  .ctl-t-hacer { align-items: flex-start; width: 100%; }
  .ctl-pcs .ctl-pc { flex-wrap: wrap; }
  .ctl-pcs .ruta { white-space: normal; word-break: break-all; }
}

/* ------------------------------------------------------------------- app
   Los tres carteles de la PWA. Ninguno tapa contenido: el de datos
   guardados empuja la pagina hacia abajo (es una advertencia, tiene que
   verse antes que los numeros), y los otros dos flotan abajo. */
.pem-guardado{
  background:var(--alerta-piso); color:var(--tinta);
  padding:.55rem var(--e4); font-size:var(--t-menor); text-align:center;
  border-bottom:1px solid var(--alerta);
}
.pem-aviso, .pem-instalar{
  /* Centrado con los dos bordes puestos y margen automatico, NO con
     `left:50%`. Con `left` puesto y `right` en auto, el ancho disponible de un
     fixed es lo que queda del viewport a la derecha del left: media pantalla.
     En el escritorio media pantalla sobra y no se notaba; en un celular de
     375 px la tarjeta se encogia a 227, el parrafo quedaba en 48 px —"Tenelo
     como app en la pantalla de inicio" en siete renglones de una palabra— y
     encima se iba 40 px afuera de la pantalla. */
  position:fixed; left:var(--e4); right:var(--e4); margin-inline:auto;
  width:fit-content;
  bottom:calc(var(--e4) + env(safe-area-inset-bottom));
  z-index:60; display:flex; align-items:center; gap:var(--e3);
  max-width:min(30rem, calc(100vw - 2rem));
  padding:.7rem .9rem; border-radius:var(--r2);
  background:var(--sup-2); color:var(--tinta);
  border:1px solid var(--borde-2); box-shadow:var(--s2);
  font:400 var(--t-apoyo)/1.4 var(--f-ui);
}
.pem-instalar p{ margin:0; flex:1; }
/* 44 px es el blanco de toque minimo del dedo; los botones .btn del sistema
   miden menos porque estan pensados para el mouse del escritorio. */
.pem-aviso button, .pem-instalar-si{
  flex:none; min-height:44px; padding:0 .9rem; border:0;
  border-radius:var(--r2); background:var(--accion);
  color:var(--sobre-color); font:600 var(--t-apoyo)/1 var(--f-ui);
  cursor:pointer;
}
@media (hover:hover){.pem-aviso button:hover, .pem-instalar-si:hover{ background:var(--accion-viva); }}
.pem-instalar-no{
  flex:none; min-width:44px; min-height:44px; border:0; background:none;
  color:var(--tinta-2); font-size:1.3rem; line-height:1; cursor:pointer;
}
.pem-aviso button:focus-visible, .pem-instalar-si:focus-visible,
.pem-instalar-no:focus-visible{ outline:2px solid var(--accion-viva); outline-offset:2px; }
/* Donde hay barra de abajo la tarjeta tiene que subirse: si no, le tapa los
   cinco destinos. Va por el ancho y no por `display-mode: standalone` porque
   la barra tambien esta en el navegador, antes de instalar nada. */
@media (max-width:900px), (display-mode: standalone){
  .pem-aviso, .pem-instalar{ bottom:calc(4.6rem + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------- barra de abajo
   Se llama barra-app y no barra porque `.barra` ya es la barrita de progreso
   de los picos, las franjas y el embudo: un `.barra{display:none}` global las
   apagaba a las tres.
   Sólo en el celular. En el escritorio manda el rail: son quince secciones
   y no cinco. */
.barra-app{ display:none; }

@media (max-width:900px){
  .barra-app{
    display:grid; grid-template-columns:repeat(5, 1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--sup); border-top:1px solid var(--borde);
    /* El 50 va por debajo de --z-tapa (80): con el cajón abierto la barra
       tiene que quedar tapada como el resto de la página, no flotando.
       Y el padding es la franja del gesto del iPhone: sin eso la barra queda
       DEBAJO de la rayita y la mitad de los toques no llegan. */
    padding-bottom:env(safe-area-inset-bottom);
  }
  .barra-app-item{
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:2px;
    min-height:56px; padding:var(--e1) 2px;
    /* El margin:0 no es de adorno: el sistema le pone `margin-top:var(--e4)`
       a todo <button> suelto, y sin esto el "Más" cae 16 px por debajo de
       los otros cuatro y estira la barra entera. */
    margin:0; background:none; border:0; cursor:pointer;
    color:var(--tinta-2); text-decoration:none;
    font:500 var(--t-micro)/1.1 var(--f-ui); text-align:center;
    -webkit-tap-highlight-color:transparent;
  }
  .barra-app-item span{
    max-width:100%; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap;
  }
  .barra-app-item.on{ color:var(--accion-viva); font-weight:600;
    box-shadow:inset 0 2px 0 var(--accion-viva); background:var(--accion-piso); }
  .barra-app-item:focus-visible{ outline:2px solid var(--accion-viva);
    outline-offset:-2px; }

  /* Que la barra no tape la última fila de ninguna tabla. */
  body.con-rail .lienzo{
    padding-bottom:calc(56px + env(safe-area-inset-bottom) + var(--e4));
  }
}
/* ------------------------------------------------------- guardar el mes
   El bloque del Resumen que baja el mes al celular. No flota como los otros
   tres carteles de la PWA: éste no interrumpe, se lee cuando se llega. */
.pem-mes{
  margin:var(--e5) 0 0; padding:var(--e4);
  border:1px solid var(--borde); border-radius:var(--r3);
  background:var(--sup-2);
}
.pem-mes p{ margin:0 0 var(--e3); color:var(--tinta-2);
  font:400 var(--t-apoyo)/1.4 var(--f-ui); }
/* Mismo blanco de toque que los otros botones de la PWA: 44 px es el dedo,
   los .btn del sistema están pensados para el mouse. */
.pem-mes button{
  margin:0; min-height:44px; padding:0 .9rem; border:0;
  border-radius:var(--r2); background:var(--accion);
  color:var(--sobre-color); font:600 var(--t-apoyo)/1 var(--f-ui);
  cursor:pointer;
}
@media (hover:hover){.pem-mes button:hover{ background:var(--accion-viva); }}
.pem-mes button:focus-visible{ outline:2px solid var(--accion-viva);
  outline-offset:2px; }
.pem-mes button[disabled]{ opacity:.55; cursor:default; }
/* Anidado y no suelto: `.pem-mes p` pesa más que una clase sola y le
   pisaba el margen. */
.pem-mes .pem-mes-estado{ margin:var(--e3) 0 0; font-size:var(--t-menor);
  color:var(--tinta-2); }

/* ====================================================== ganancia por rubro
   El margen es el único número del módulo operativo que puede no venir de un
   archivo: o lo calculó el sistema de gestión con el costo real, o lo dijo el
   dueño. La diferencia se ve en el renglón —no en una nota al pie— porque de
   eso depende si el importe de al lado es una medición o un estimado. */
.ga-sel{ display:inline-block; margin-left:6px; padding:1px 6px;
  border-radius:999px; background:var(--sup-2); color:var(--tinta-2);
  font:600 var(--t-micro)/1.6 var(--f-ui); letter-spacing:.04em;
  vertical-align:middle; }
.ga-vb{ background:var(--ok-piso); color:var(--ok); }
.ga-dueno{ background:var(--sup-2); color:var(--tinta-2); }
/* El de los camiones es el unico margen del combustible que sale de
   una factura, asi que se marca con la luz de playa y no con el
   verde de lo que calculo el VB. */
.ga-camion{ background:var(--sodio-piso); color:var(--sodio-hondo); }
/* El rubro sin porcentaje vendió igual: se atenúa para que no compita con los
   que sí suman, pero no se esconde — su venta es la que falta en el total. */
.ga-falta td{ color:var(--tinta-3); }

/* La barrita de "de cada $1.000" crece desde la DERECHA, pegada al numero que
   mide: en una columna alineada a la derecha, una barra que arranca del borde
   izquierdo parece pertenecer a la celda de al lado. Se mide contra el rubro
   que mas deja de la estacion, no contra $1.000: con escala absoluta serian
   doce barras cortas y ninguna comparacion. */
.ga-tabla .prop i{ left:auto; right:0; background:var(--accion-viva); opacity:.4; }
/* El combustible es un renglon mas de la misma tabla —tenia tarjeta propia y
   encabezado propio para mostrar UN renglon—, pero se marca: son ocho de cada
   diez pesos que factura la estacion y deja centavos por litro. */
.ga-tabla tr.ga-comb td{ background:var(--sup-2); }
.ga-casi{ display:inline-block; margin-left:8px; font-size:var(--t-micro);
          color:var(--tinta-3); font-weight:400; }
.ga-falta .rnum{ opacity:.6; }

/* El cero explicado. Un dueño que entra y no ve ganancia no viene a leer
   cuatro pasos: se le dice qué falta, se le dice en una línea cómo se
   contesta, y el botón. */
.ga-vacio{ max-width:56ch; }
.ga-vacio > b{ display:block; font-size:var(--t-medio); font-weight:600;
  margin-bottom:var(--e2); }
.ga-vacio p{ margin:0 0 var(--e3); color:var(--tinta-2); line-height:1.6; }
.ga-vacio-pie{ font-size:var(--t-menor); }

/* El formulario de carga. La pregunta NO es el margen sobre la venta —ese es
   el número que el sistema guarda, no el que el dueño tiene en la cabeza—:
   se le piden sus dos precios, o cuánto le carga arriba, y la traducción
   aparece al lado mientras escribe. Las dos formas son columnas de la misma
   tabla y sólo se ve la del modo elegido. */
.mg-elige{ margin-bottom:var(--e4); }
.mg-elige-tit{ display:block; margin-bottom:var(--e2); color:var(--tinta-2);
  font:600 var(--t-menor)/1.4 var(--f-ui); }
.mg-tabs{ display:flex; flex-wrap:wrap; gap:var(--e2); }
.mg-tab{ flex:1 1 16rem; text-align:left; cursor:pointer;
  padding:var(--e3); border:1px solid var(--borde-2); border-radius:var(--r2);
  background:var(--sup); color:var(--tinta); }
.mg-tab b{ display:block; font:600 var(--t-apoyo)/1.35 var(--f-ui); }
.mg-tab small{ display:block; margin-top:2px; color:var(--tinta-2);
  font-size:var(--t-micro); }
.mg-tab.activo{ border-color:var(--accion-viva); background:var(--accion-piso); }
.mg-tab.activo b{ color:var(--accion-viva); }

.mg-tabla-wrap[data-modo="b"] .mg-col-a{ display:none; }
.mg-tabla-wrap[data-modo="a"] .mg-col-b{ display:none; }
.mg-par{ display:inline-flex; align-items:center; gap:6px; }
.mg-flecha{ color:var(--tinta-3); }
.mg-pct{ color:var(--tinta-2); font:600 var(--t-menor)/1 var(--f-num); }

/* La traducción en vivo: es lo único que el dueño lee de esta tabla, así que
   pesa más que los campos que la producen. */
.mg-res{ font:700 var(--t-apoyo)/1 var(--f-num); color:var(--tinta-3);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.mg-res.mg-ok{ color:var(--ok); }
.mg-res.mg-mal{ color:var(--alerta); }
/* El que puso el sistema de gestión: es un número cargado y de verdad, no un
   hueco, pero tiene que verse distinto del que escribió el dueño. */
.mg-res.mg-delvb{ color:var(--ok); font-weight:500; }

.mg-tabla td{ vertical-align:middle; }
.mg-comb td{ background:var(--sup-2); }
.mg-campo{ display:inline-flex; align-items:center; gap:2px;
  padding:0 8px; border:1px solid var(--borde-2); border-radius:var(--r2);
  background:var(--sup); color:var(--tinta-2);
  font:400 var(--t-menor)/1 var(--f-num); }
.mg-campo:focus-within{ border-color:var(--accion-viva);
  outline:2px solid var(--accion-viva); outline-offset:1px; }
input.mg-input{ width:4.5rem; min-height:38px; padding:0; border:0;
  background:transparent; color:var(--tinta); text-align:right;
  font:600 var(--t-apoyo)/1 var(--f-num); font-variant-numeric:tabular-nums; }
@media (hover:hover){input.mg-input:hover{ border:0; }}
input.mg-input:focus{ outline:none; box-shadow:none; }

/* El acuse de "quedó guardado" reusa el cartel de ausencia, que es el bloque
   que ya sabe ponerse arriba de todo sin empujar la grilla. */
.ausente.ok{ border-style:solid; border-color:var(--ok);
  background:var(--ok-piso); color:var(--tinta); }
.ausente.ok b{ color:var(--ok); }

/* En el teléfono la carga deja de ser una tabla. Con tres columnas el campo
   quedaba a 490 px del borde —fuera de la pantalla— y había que arrastrar la
   tabla de costado para llegar al único lugar donde se escribe. Apilado, el
   rubro va arriba y el campo abajo, ancho como para el dedo. */
@media (max-width:640px){
  .mg-tabla, .mg-tabla tbody, .mg-tabla tr, .mg-tabla td{ display:block; }
  .mg-tabla thead{ display:none; }
  .mg-tabla tr{ padding:var(--e3) 0; border-bottom:1px solid var(--borde); }
  .mg-tabla tr:last-child{ border-bottom:0; }
  .mg-tabla td{ padding:0; border:0; }
  .mg-tabla td.n{ text-align:left; color:var(--tinta-2);
    font-size:var(--t-menor); margin-top:2px; }
  .mg-tabla td.cierre{ display:flex; justify-content:space-between;
    align-items:baseline; gap:var(--e2); margin-top:var(--e2); }
  /* sin encabezados, cada número necesita decir de qué es */
  .mg-tabla td.mg-col-venta::before{ content:"Vendió "; }
  .mg-tabla td.mg-col-b::before{ content:"Lo compro a… y lo vendo a…"; }
  .mg-tabla td.mg-col-a::before{ content:"Le cargo arriba del costo"; }
  .mg-tabla td.cierre::before{ content:"De cada $1.000 me quedan"; }
  .mg-tabla td.mg-col-b::before, .mg-tabla td.mg-col-a::before{
    display:block; margin:var(--e2) 0 4px; }
  .mg-tabla td.cierre::before{ margin:0; }
  .mg-tabla td.mg-col-venta::before, .mg-tabla td.mg-col-b::before,
  .mg-tabla td.mg-col-a::before, .mg-tabla td.cierre::before{
    color:var(--tinta-3); font:600 var(--t-micro)/1.4 var(--f-ui); }
  .mg-tabla .mg-campo{ width:100%; justify-content:flex-end; }
  .mg-tabla .mg-par{ display:flex; width:100%; }
  .mg-tabla input.mg-input{ width:100%; min-height:44px; }
  /* sin la tabla adentro, el contenedor con scroll no tiene nada que hacer */
  .mg-tabla-wrap{ overflow-x:visible; }
}


/* ============================================================== la demo
   La chapa de arriba y las dos paredes del recorrido. Prefijo propio y
   nada de selectores de elemento: esto se carga en TODAS las pantallas y
   una regla suelta pisaría cualquier template. */
.demo-banner{ display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:var(--e2) var(--e3);
  background:var(--accion); color:var(--sobre-color);
  padding:7px var(--e4); font-size:var(--t-menor); font-weight:500;
  position:sticky; top:0; z-index:var(--z-banner); }
.demo-chapa{ background:var(--sobre-color); color:var(--accion);
  border-radius:var(--r1); padding:1px 7px; font-size:var(--t-micro);
  font-weight:700; letter-spacing:.08em; }
.demo-texto{ color:inherit; }
.demo-pedir{ color:var(--sobre-color); font-weight:600; white-space:nowrap;
  border:1px solid currentColor; border-radius:var(--r1);
  padding:3px var(--e3); text-decoration:none; }
@media (hover:hover){.demo-pedir:hover{ background:var(--sobre-color); color:var(--accion); }}

/* Las dos paredes: el botón que no hace nada y la sección que quedó afuera.
   Son pantallas de venta, no errores, y por eso respiran como la portada. */
.demo-pared{ max-width:38rem; margin:var(--e6) auto; text-align:center;
  background:var(--sup); border:1px solid var(--borde);
  border-radius:var(--r3); padding:var(--e6) var(--e5); }
.demo-pared-ico{ color:var(--accion); margin:0 0 var(--e3); }
.demo-pared h1{ font-size:1.35rem; margin:0 0 var(--e3); }
.demo-pared-bajada{ color:var(--tinta-2); margin:0 auto var(--e5);
  max-width:30rem; line-height:1.55; }
.demo-pared-botones{ display:flex; gap:var(--e3); justify-content:center;
  flex-wrap:wrap; margin:0; }

@media (max-width:640px){
  .demo-banner .larga{ display:none; }
  .demo-pared{ margin:var(--e4) 0; padding:var(--e5) var(--e4); }
  .demo-pared-botones .btn{ width:100%; }
}

/* El formulario del final del recorrido. Ancho cómodo y campos altos: se
   completa desde el celular, parado en la playa. */
.demo-form{ display:flex; flex-direction:column; gap:var(--e5);
  max-width:24rem; margin:0 auto var(--e4); text-align:left; }
/* El label del sistema trae márgenes propios (16 arriba, 4 abajo). Sumados
   al gap dejaban los renglones desparejos: 36 entre los campos y 20 antes
   del sí/no. Acá el espacio lo pone el gap y nada más. */
.demo-form label{ margin:0; }
/* Sólo los hijos directos: las etiquetas de adentro del sí/no son labels
   también, y con el selector suelto heredaban la columna y terminaban con el
   redondel arriba del texto. */
.demo-form > label{ display:flex; flex-direction:column; gap:var(--e1);
  font-size:var(--t-menor); font-weight:600; color:var(--tinta-2); }
.demo-form input[type=text], .demo-form input[type=tel]{ width:100%;
  min-height:44px; font-size:var(--t-base); }
/* El sí/no. Sin recuadro propio —quedaba como una caja aparte, más pesada
   que los campos— y en fila: la etiqueta arriba, igual que los demás, y las
   dos opciones como dos botones del mismo alto que un campo. */
.demo-form-grupo{ display:flex; flex-direction:column; gap:var(--e1); }
.demo-form-tit{ font-size:var(--t-menor); font-weight:600;
  color:var(--tinta-2); }
.demo-form-ops{ display:flex; gap:var(--e2); }
.demo-form-op{ flex:1; display:flex; flex-direction:row; align-items:center;
  justify-content:center; gap:var(--e2); min-height:44px;
  font-size:var(--t-base);
  border:1px solid var(--borde); border-radius:var(--r2);
  background:var(--sup); color:var(--tinta); font-weight:500;
  cursor:pointer; transition:border-color var(--paso), box-shadow var(--paso); }
@media (hover:hover){.demo-form-op:hover{ border-color:var(--borde-2); }}
.demo-form-op:has(input:checked){ border-color:var(--accion);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accion) 22%, transparent); }
.demo-form-op input{ width:auto; min-height:0; margin:0; accent-color:var(--accion); }
.demo-form .btn{ width:100%; justify-content:center; min-height:46px; }

/* ------------------------------------------- la cabecera publica, angosta
   Va al final del archivo a proposito: pisa a las reglas base de .cabecera,
   que estan mas arriba y tienen la misma fuerza. */
@media (max-width:560px){
  /* De los tres, en el celular entran dos. Se va Contacto y el ingreso se
     acorta a "Ingresar". Lo que no se saca nunca es el ingreso: un cliente
     que ya paga entra por ahi desde el telefono. */
  .cabecera-caja{padding:var(--e3) var(--e4);gap:var(--e2)}
  .cabecera-nav .nav-2do{display:none}
  .cabecera-nav .nav-largo{display:none}
  .cabecera-nav .nav-corto{display:inline}
  .cabecera-nav a{padding:8px 10px}
  .cabecera-nav a.cta{padding:9px 14px}
}
/* Abajo de 400 px la palabra SVSISTEMAS al lado del dibujo ya no entra junto
   con los dos botones: queda el dibujo, que es la marca igual y sigue siendo
   el enlace a la portada. */
@media (max-width:400px){
  .cabecera .marca span{display:none}
}


/* ==========================================================================
   HOY — la pantalla que abre el dueno
   Una sola columna angosta y cinco bloques, en vez de una grilla de diez.
   TODO va prefijado `hoy-`: `.bloque`, `.cifra`, `.chip`, `.hero`, `.fila`,
   `.ir` y `.nota` ya existen y son globales, y pisarlas rompe otras pantallas.
   ========================================================================== */
.hoy{max-width:44rem}
.hoy-fecha{color:var(--tinta-2);font-size:var(--t-apoyo);
  text-transform:lowercase}

.hoy-b{background:var(--sup);border:1px solid var(--borde);
  border-radius:var(--r3);box-shadow:var(--s2),var(--filo);
  padding:var(--e4) 1.15rem;margin-bottom:.85rem;display:block}

/* Toda la letra de esta pantalla subio un escalon el 27/08/2026. Estaba
   armada con la escala de una tabla —11 px para lo que explica el numero— y
   Hoy no es una tabla: es la pantalla que el dueno mira de parado, de lejos y
   con el celular en la mano. Nada de aca abajo baja de 13 px, y lo que
   explica una cifra va en 14. */
.hoy-rot{font-size:var(--t-menor);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-2)}

/* Una PC muda deja los numeros de abajo viejos sin que se note. */
/* Va en gris y no en ambar. El ambar de esta pantalla significa "mira esto de
   tu negocio", y esto no habla del negocio: habla de los numeros de abajo, que
   pueden estar atrasados. Pintados los dos igual, y uno arriba del otro, el
   dueño abria la pantalla con dos alarmas del mismo color y ninguna jerarquia.
   El texto se queda en tinta plena: sobre --sup-2 tiene todo el contraste. */
.hoy-viejo{background:var(--sup-2);border:1px solid var(--borde);
  border-radius:var(--r2);padding:var(--e3) var(--e4);margin-bottom:.85rem;
  font-size:var(--t-sub);line-height:var(--lh-sub);color:var(--tinta);
  display:flex;align-items:baseline;gap:var(--e2);flex-wrap:wrap}
.hoy-viejo .sello{flex:none}
.hoy-viejo[hidden]{display:none}
.hoy-viejo a{color:var(--accion-viva);font-weight:600}

/* -------------------------------------------------- los numeros del dia
   Los tres arriba y en una sola fila: lo que quedo, lo que vendio y lo que le
   deben. Antes el primero era un cartel de ancho entero con un tercio en
   blanco al lado y el tercero una tira fina abajo, que se lee como un pie de
   pagina.

   Sigue habiendo UN solo numero grande —si hubiera tres no habria ninguno—,
   pero los otros dos dejaron de estar degradados: mismo alto de tarjeta,
   mismo rotulo, misma comparacion al pie. */
.hoy-cifras{display:grid;gap:.85rem;margin-bottom:.85rem;
  grid-template-columns:1fr}
.hoy-k{display:flex;flex-direction:column;gap:.15rem;margin-bottom:0;
  text-decoration:none;color:inherit;container-type:inline-size}
.hoy-k-jefe{border-color:var(--borde-2);
  background:radial-gradient(120% 120% at 0% 0%,var(--sodio-piso),
    transparent 62%),var(--sup)}
/* La tarjeta que pide los margenes no lleva cifra: sin el fondo dorado seria
   la unica de las tres sin nada adentro, y con el parece que tiene un numero
   escondido. Va apagada y con el llamado bien visible. */
.hoy-k-pide{background:var(--sup);border-color:var(--borde)}
@media (hover:hover){.hoy-k-ir:hover{border-color:var(--borde-2)}}
/* Las dos cifras de al lado: mismo aire y misma familia que la grande, un
   escalon mas abajo. No se achican por cantidad de digitos porque nunca
   llegan al tamano en el que eso hace falta. */
.hoy-k-cifra{font-family:var(--f-din);font-weight:700;
  font-size:clamp(1.85rem,6vw,2.5rem);line-height:1;
  letter-spacing:var(--din-track);margin:.25rem 0 .55rem}
.hoy-k-cifra .cifra{font-variant-numeric:tabular-nums}
.hoy-k-cifra .cifra-sig{font:500 .42em/1 var(--f-num);color:var(--tinta-3)}
/* El pie es lo ultimo de la tarjeta y las tres tienen que cortar a la misma
   altura, tengan una linea de texto o dos. */
.hoy-k .hoy-pie{margin-top:auto}
.hoy-k-ir .hoy-fle{margin-left:auto}

.hoy-hero-cab{display:flex;align-items:center;gap:var(--e2);
  margin-bottom:.15rem}
.hoy-chip{font-size:var(--t-micro);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:.16rem .42rem;border-radius:4px;
  background:var(--sup-3);color:var(--tinta-3)}
/* La cifra se achica sola cuando el numero es largo. A tamano pleno
   "$12.278.186" mide 350 px adentro de una tarjeta de 309: no se cortaba
   sola, empujaba la pagina entera de costado y en el celular quedaba todo
   corrido y comido por el borde derecho.
   `--car` lo pone el molde y es lo unico que el CSS no puede medir: cuantos
   caracteres tiene el numero. Cada uno ocupa .59 em (van en tabular, digito
   y punto miden igual) y el signo suma .32, medido en la Barlow Condensed;
   .6 y .35 son los mismos numeros con una pizca de aire. Los 72 px son el
   marco —el borde de la pagina y el de la tarjeta— que no es de la cifra.
   El 15vw manda mientras el numero entra: asi la pantalla no cambia de
   tamano de letra respecto de siempre, solo cede cuando no da. */
/* La cifra de Hoy es la MISMA cifra que la de todas las otras pantallas: el
   peso, el alto, el interletrado y el dorado salen de `.madre .n`. Venia en
   600 contra 700, tope 4.4rem contra 4.75, otro interletrado y en tinta plena
   en vez del dorado: al lado de cualquier otra pantalla se leia como un
   numero de segunda, y Hoy es la primera que abre el dueno. Lo unico propio
   que conserva es el achique por cantidad de digitos, que es lo que evita que
   se salga de la tarjeta en el celular. */
/* Se medía contra 100vw —el ancho de la PANTALLA— y no contra el de su propia
   tarjeta. En el celular las dos cosas coinciden y andaba; en la compu,
   adentro de la columna angosta de la izquierda, la formula creia tener los
   1.200 px de lado a lado, elegia el cuerpo mas grande y a "$ 17.596.147" le
   comia los ultimos digitos: el dueño abria su pantalla y el numero del dia
   estaba cortado. `cqi` mide contra la caja que la contiene, que es lo unico
   que importa. */
.hoy-cifra{font-family:var(--f-din);font-weight:590;
  font-size:clamp(1.6rem,calc(100cqi/(var(--car,7)*.62 + .42)),3.15rem);
  line-height:1.02;letter-spacing:-.022em;
  color:var(--sodio-hondo);margin:.25rem 0 .55rem}
.hoy-cifra .cifra{font-variant-numeric:tabular-nums}
.hoy-cifra .cifra-sig{font:500 .34em/1 var(--f-num);color:var(--tinta-3)}
/* Y el rotulo de arriba es el mismo <h2> del instrumento, no un cartelito en
   versalitas: era la otra mitad de por que Hoy parecia otra aplicacion. */
.hoy-hero-cab .hoy-rot{font:600 var(--t-medio)/1 var(--f-din);
  letter-spacing:var(--din-track);text-transform:none;color:var(--tinta)}
.hoy-pie{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:baseline;
  font-size:var(--t-sub);line-height:var(--lh-sub);color:var(--tinta-2);
  border-top:1px solid var(--borde);padding-top:.7rem}
.hoy-pie b{font-family:var(--f-num);font-weight:500;color:var(--tinta)}
.hoy-pie b .cifra-sig{font-size:.85em}
.hoy-chica{font-size:var(--t-apoyo);color:var(--tinta-2);line-height:1.55;
  margin:.6rem 0 0;padding-top:.6rem;border-top:1px solid var(--borde)}
.hoy-chica b{color:var(--tinta-2)}

/* --------------------------------------------------------------- titulos */
.hoy-b h2{font-size:var(--t-medio);font-weight:600;letter-spacing:.01em;
  display:flex;align-items:baseline;gap:.55rem;margin:0 0 .9rem}
.hoy-b h2 .hoy-rot{margin-left:auto;text-align:right}

/* ----------------------------------------------------------- los turnos */
.hoy-turno{display:grid;grid-template-columns:1fr auto;gap:.15rem .6rem;
  padding:.68rem 0;border-top:1px solid var(--borde);align-items:baseline}
.hoy-turno:first-of-type{border-top:0;padding-top:0}
.hoy-t-nom{font-size:var(--t-base);font-weight:600;letter-spacing:.01em}
.hoy-t-hora{font-size:var(--t-menor);color:var(--tinta-2);letter-spacing:.03em;
  font-weight:400}
.hoy-t-gan{font-family:var(--f-num);font-weight:500;font-size:var(--t-medio);
  text-align:right;font-variant-numeric:tabular-nums}
.hoy-t-ven{grid-column:2;font-size:var(--t-apoyo);color:var(--tinta-2);
  text-align:right;font-family:var(--f-num)}
.hoy-t-barra{grid-column:1/-1;height:4px;border-radius:2px;
  background:var(--sup-3);margin-top:.5rem;overflow:hidden}
.hoy-t-barra i{display:block;height:100%;border-radius:2px;
  background:var(--accion-viva)}
/* El turno abierto se pinta con el sodio, que en todo el sistema significa
   una sola cosa: esto esta pasando ahora. La barra rayada dice que corre. */
.hoy-turno.vivo .hoy-t-nom{color:var(--sodio-hondo)}
.hoy-turno.vivo .hoy-t-barra i{opacity:.5;
  background:repeating-linear-gradient(90deg,var(--sodio) 0 5px,
    transparent 5px 10px)}
/* El turno abierto lleva plata de verdad —lo que va vendido hasta recien— y
   por eso se lee como cifra y no como cartel. El sodio dice que se esta
   moviendo, que es lo unico que lo separa de los de arriba. */
.hoy-turno.vivo .hoy-t-gan{color:var(--sodio-hondo)}
.hoy-pe{color:var(--tinta-3);font-weight:400;margin-right:.18em;
  font-size:.82em}
.hoy-turno.vivo .hoy-t-ven b{color:var(--tinta-2);font-weight:500}
/* El importe que sube destella un segundo: es el unico destello del sistema
   y por eso vale, el ojo vuelve solo al numero que cambio. */
.hoy-t-gan .vv-subio{background:var(--sodio-piso);border-radius:3px;
  transition:background .5s ease}
/* Como viene el turno contra el mismo de la semana pasada. Es el UNICO
   renglon de la pantalla que compara, y va chico y al pie del turno abierto:
   el dueno viene por cuanto gano, no por un porcentaje. */
.hoy-t-ritmo{grid-column:1/-1;font-size:var(--t-apoyo);color:var(--tinta-2);
  margin-top:.35rem;display:flex;gap:.4rem;align-items:baseline;
  flex-wrap:wrap}
.hoy-t-ritmo[hidden]{display:none}
.hoy-t-ritmo span{font-weight:700;letter-spacing:.02em}
.hoy-t-ritmo em{font-style:normal}
.hoy-t-ritmo.arriba span{color:var(--ok)}
.hoy-t-ritmo.abajo span{color:var(--mal)}

.hoy-viva{font-size:var(--t-micro);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--sodio-hondo);background:var(--sodio-piso);
  padding:.1rem .38rem;border-radius:4px;margin-left:.4rem}

.hoy-fle{color:var(--accion-viva);font-size:1.1rem;flex:none;line-height:1}

/* ---------------------------------------------------------- contra que
   La pastilla que acompania a cada cifra. Va en verde cuando el numero subio
   y en rojo cuando bajo, MENOS en la deuda: ahi que suba es la mala noticia,
   asi que la pantalla manda el color al reves desde el molde. */
.hoy-vs{display:inline-flex;align-items:center;gap:.28em;flex:none;
  padding:.12rem .45rem;border-radius:100px;font-size:var(--t-menor);
  font-weight:700;letter-spacing:.02em;white-space:nowrap}
.hoy-vs.sube{background:var(--ok-piso);color:var(--ok)}
.hoy-vs.baja{background:var(--mal-piso);color:var(--mal)}

/* -------------------------------------------------- el "de donde sale"
   Era un parrafo de cien pixeles adentro de la tarjeta, todos los dias, para
   una pregunta que se hace una sola vez. Ahora vive detras del signo. */
.hoy-q{position:relative;margin-left:auto;flex:none}
.hoy-q summary{list-style:none;cursor:pointer;width:20px;height:20px;
  border-radius:50%;border:1px solid var(--borde-2);background:var(--sup-2);
  color:var(--tinta-3);font-size:var(--t-menor);font-weight:700;
  display:flex;align-items:center;justify-content:center}
.hoy-q summary::-webkit-details-marker{display:none}
.hoy-q summary:hover,.hoy-q[open] summary{color:var(--tinta);
  border-color:var(--tinta-3)}
.hoy-q p{position:absolute;z-index:5;top:calc(100% + .4rem);right:0;
  width:min(21rem,72vw);margin:0;padding:var(--e3);text-align:left;
  background:var(--sup-2);border:1px solid var(--borde-2);
  border-radius:var(--r2);box-shadow:var(--s2);
  font:400 var(--t-apoyo)/1.5 var(--f-ui);color:var(--tinta-2);
  letter-spacing:normal;text-transform:none}

/* La pastilla de estado de un renglon: para cuanto alcanza un tanque. Las
   varas son las MISMAS de la campana, o el renglon y el aviso dirian cosas
   distintas del mismo tanque. */
.hoy-tag{display:inline-block;padding:.12rem .45rem;border-radius:var(--r1);
  font-size:var(--t-menor);font-weight:600;letter-spacing:.02em;
  white-space:nowrap;background:var(--sup-3);color:var(--tinta-2)}
.hoy-tag.ok{background:var(--ok-piso);color:var(--ok)}
.hoy-tag.alerta{background:var(--alerta-piso);color:var(--alerta)}
.hoy-tag.mal{background:var(--mal-piso);color:var(--mal)}

/* ---------------------------------------------------------- los tanques
   Dos renglones por tanque y no cinco. Antes la grilla tenia cuatro filas
   —nombre, litros, cuanto alcanza, a que ritmo— con la mitad izquierda vacia
   en tres de ellas, y los cuatro tanques se comian media pantalla. */
.hoy-fila{display:grid;grid-template-columns:1fr auto;gap:.1rem .6rem;
  padding:.6rem 0;border-top:1px solid var(--borde);align-items:baseline}
.hoy-fila:first-of-type{border-top:0;padding-top:0}
.hoy-f-nom{font-size:var(--t-base);font-weight:600;letter-spacing:.015em;
  display:flex;align-items:center;gap:.45rem;min-width:0}
.hoy-f-sub{font-size:var(--t-apoyo);color:var(--tinta-2);letter-spacing:.03em}
.hoy-f-plata{font-family:var(--f-num);font-weight:500;font-size:var(--t-base);
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hoy-f-lt{grid-column:2;text-align:right}
/* Un tanque que no llega al camion es lo unico que la pantalla pinta de
   color: no opina, dice cuantos dias quedan y deja decidir al dueno. La
   barra son esos dias sobre quince, no los litros que salieron —esos ya
   estan escritos al lado, en numeros—. */
.hoy-f-barra{grid-column:1/-1;height:3px;border-radius:2px;
  background:var(--sup-3);margin-top:.45rem;overflow:hidden}
.hoy-f-barra i{display:block;height:100%;border-radius:2px;
  background:var(--tinta-3)}
.hoy-f-barra i.ok{background:var(--ok)}
.hoy-f-barra i.alerta{background:var(--alerta)}
.hoy-f-barra i.mal{background:var(--mal)}
.hoy-tq{font-family:var(--f-num);font-size:var(--t-micro);font-weight:700;
  min-width:21px;height:21px;padding:0 5px;border-radius:5px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sup-3);color:var(--tinta-2)}

/* ----------------------------------------------------------------- mes
   El mes es OTRO periodo, asi que va en su propia banda de ancho entero y no
   colgando de una de las dos columnas del dia. Cuatro celdas del mismo peso,
   separadas por un filo, donde antes habia una cifra sola con medio bloque
   en blanco al lado. */
.hoy-mes{display:grid;gap:var(--e4) 0;grid-template-columns:1fr}
.hoy-mes-cel{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.hoy-mes-cifra{font-family:var(--f-din);font-weight:700;font-size:1.9rem;
  line-height:1.05;letter-spacing:var(--din-track)}
.hoy-mes-cifra .cifra{font-variant-numeric:tabular-nums}
.hoy-mes-cifra .cifra-sig{font:500 .44em/1 var(--f-num);color:var(--tinta-3)}
.hoy-mes-sub{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .45rem;
  font-size:var(--t-apoyo);color:var(--tinta-2)}
.hoy-mes-sub b{font-family:var(--f-num);font-weight:500;color:var(--tinta)}
/* La celda de los dias lleva barra en vez de segundo renglon de texto: es lo
   unico de la banda que se lee mejor en dibujo que en numero. */
.hoy-mes-cel .hoy-f-barra{margin-top:.5rem;width:100%}

@media (min-width:700px){
  .hoy-mes{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
  .hoy-mes-cel{padding:0 var(--e5);border-left:1px solid var(--borde)}
  .hoy-mes-cel:first-child{padding-left:0;border-left:0}
  .hoy-mes-cel:last-child{padding-right:0}
}

/* ------------------------------------------------------------- el paso */
.hoy-ir{display:block;margin-top:.85rem;padding-top:.7rem;
  border-top:1px solid var(--borde);font-size:var(--t-base);font-weight:600;
  color:var(--accion-viva);text-decoration:none;letter-spacing:.01em}
.hoy-ir::after{content:" \2192"}

@media (max-width:520px){
  .hoy-b{padding:var(--e4) var(--e4)}
}

/* --------------------------------------------------- la pantalla ancha
   En el monitor de la oficina la columna sola dejaba media pantalla vacía y
   empujaba los tanques abajo del pliegue.

   Es una GRILLA y no dos columnas de texto (`columns:2`). Con las columnas de
   texto el navegador repartía los bloques por alto y no había forma de decir
   cuál iba de cada lado: la izquierda terminaba 160 px antes que la derecha y
   quedaba un hueco al pie. Acá el orden del molde es el orden de la pantalla
   —los tres números arriba de ancho entero, los turnos y los tanques uno al
   lado del otro, el mes abajo cruzado— y en el celular cae solo en una tira,
   en ese mismo orden. */
.hoy-tablero{display:grid;grid-template-columns:1fr}

@media (min-width:760px){
  .hoy-cifras{grid-template-columns:1fr 1fr}
  .hoy-cifras>.hoy-k-jefe{grid-column:1/-1}
}

@media (min-width:1140px){
  .hoy{max-width:78rem}
  .hoy-tablero{grid-template-columns:1fr 1fr;column-gap:.85rem}
  /* Los tres números y el mes cruzan las dos columnas; los turnos y los
     tanques caen solos, uno de cada lado, por el orden del molde. */
  .hoy-cifras,.hoy-mes-b{grid-column:1/-1}
  /* La cifra grande se lleva más ancho que las otras dos: es el único número
     de la pantalla y en un tercio exacto dejaba de ser lo primero que se ve. */
  .hoy-cifras{grid-template-columns:1.35fr 1fr 1fr}
  .hoy-cifras>.hoy-k-jefe{grid-column:auto}
}

/* --------------------------------------------------------------- el salon
   La pantalla del salon reusa la fila de tres cifras de Hoy tal cual: la
   misma plata tiene que verse igual en las dos o son dos idiomas. Por eso
   .hoy-cifras, .hoy-k, .hoy-vs, .hoy-q y .hoy-tag ya NO son de Hoy sino
   piezas compartidas — el nombre quedo del lugar donde nacieron.
   Lo propio de aca es la gondola. */
.sa-cifras{margin-bottom:var(--e4)}

/* Las dos tarjetas terminan donde termina su contenido y no estiradas a la
   mas alta: la gondola trae quince renglones y los rubros once, y emparejarlas
   dejaba 134 px de caja vacia abajo de la tabla corta.

   Desde el 03/09/2026 los cuadros de una fila SI terminan a la misma altura:
   el script comun le recorta al mas largo lo que no entra y lo deja atras de
   un boton, asi que ya no hay marco vacio que evitar. */

/* Los dos numeros de la gondola: lo quieto y el total. Van al lado y no uno
   abajo del otro porque lo que importa es el COCIENTE — $2,3 M solo no dice
   nada, $2,3 M de $42 M si. */
.sa-dorm{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--borde);border:1px solid var(--borde);
  border-radius:var(--r2);overflow:hidden;margin-bottom:.75rem}
.sa-dorm-n{background:var(--sup);padding:var(--e3) var(--e4)}
.sa-dorm-n .rot{display:block;font-size:var(--t-micro);letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinta-3)}
.sa-dorm-n .v{display:block;font:700 var(--t-h2)/1.15 var(--f-din);
  letter-spacing:var(--din-track);margin-top:5px}
.sa-dorm-n .v.mal{color:var(--mal)}
.sa-dorm-n .sub{font-size:var(--t-menor);color:var(--tinta-2)}

/* Cuanta de la plata de la gondola esta quieta. Es la unica barra de la
   pantalla y mide una parte de un todo, asi que el 100 % es la gondola
   entera y no el mejor renglon. */
.sa-barra{height:8px;border-radius:99px;background:var(--sup-3);
  overflow:hidden}
.sa-barra i{display:block;height:100%;background:var(--mal);border-radius:99px}
.sa-barra-pie{margin:.4rem 0 .95rem}

.sa-tabla td.lead{max-width:22ch;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.sa-rub{font-size:var(--t-menor);color:var(--tinta-3)}
/* El "de cada $1.000" viaja abajo de la plata y no en su propia columna: es
   la explicacion de la cifra que tiene encima, no un dato aparte. */
.sa-mil{display:block;font-size:var(--t-micro);color:var(--tinta-3);
  font-family:var(--f-num)}

.sa-sub{display:none}

@media (max-width:720px){
  .sa-dorm{grid-template-columns:1fr}
  .sa-tabla td.lead{max-width:none;white-space:normal}
}

/* A 375 px las cinco columnas de la gondola miden 435 y la tarjeta 310: se
   llegaba a la plata parada arrastrando la tabla de costado, y esa es la
   columna por la que se entra. El rubro y las unidades se pliegan abajo del
   nombre, que es donde igual se los lee. */
@media (max-width:560px){
  .sa-gond th:nth-child(2),.sa-gond td:nth-child(2),
  .sa-gond th:nth-child(3),.sa-gond td:nth-child(3){display:none}
  .sa-gond .sa-sub{display:block;font-size:var(--t-micro);color:var(--tinta-3);
    font-weight:400;margin-top:2px}
  /* Y el aire entre columnas se achica: la tabla de rubros se pasaba por diez
     pixeles y sacaba una barra de scroll para nada. */
  .sa-tabla td,.sa-tabla th{padding-right:5px}
}

/* ------------------------------------------------------ turnos y cuentas
   Las dos ultimas pantallas que faltaban del criterio: fila de cifras arriba
   y nada dicho dos veces. Reusan .hoy-cifras / .hoy-k / .hoy-vs igual que el
   salon; lo de aca es solo lo que cada una tiene de propio.

   Medido a 1440x900 antes de tocarlas: Turnos eran 3.539 px de alto con 917
   de tarjeta vacia —tres tarjetas estiradas por la mas alta de al lado— y
   nueve "de donde sale este numero"; Cuentas eran 4.149 px con los mismos 18
   clientes listados TRES veces. */
/* Cuatro y no tres: Hoy tiene tres numeros y estas dos tienen cuatro. Sin
   esto la cuarta tarjeta caia sola en un renglon propio de ancho entero, que
   es justo el cartel gigante con media fila vacia que veniamos a sacar. */
.pl-cifras,.cu-cifras,.ga-cifras{margin-bottom:var(--e4)}
@media (min-width:760px){
  .pl-cifras,.cu-cifras,.ga-cifras{grid-template-columns:1fr 1fr}
  /* La grande deja de cruzar las dos columnas: con cuatro tarjetas eso deja
     tres abajo en dos columnas y una descolgada. Asi caen dos y dos. */
  .pl-cifras>.hoy-k-jefe,.cu-cifras>.hoy-k-jefe,
  .ga-cifras>.hoy-k-jefe{grid-column:auto}
}
@media (min-width:1140px){
  /* El `minmax(0,...)` no es adorno: sin el, la tarjeta grande se queda con
     el ancho de su contenido —462 px de 1.146— y las otras tres se reparten
     213 cada una. Con el, el 1,3 contra 1 se cumple de verdad. */
  .pl-cifras,.cu-cifras,.ga-cifras{
    grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}
}

/* La cifra se mide contra SU TARJETA y no contra la pantalla. Las medidas de
   Hoy estaban calculadas para tres tarjetas anchas: con cuatro, "$20.359.447"
   pedia 468 px adentro de una caja de 297 y se cortaba en "20.359." — un
   numero cortado no es un numero mas chico, es un numero equivocado.
   El primer `font-size` es el que queda si el navegador no entiende `cqi`. */
.pl-cifras .hoy-cifra,.cu-cifras .hoy-cifra,
.ga-cifras .hoy-cifra{font-size:clamp(1.4rem,3.2vw,2.9rem)}
.pl-cifras .hoy-k-cifra,.cu-cifras .hoy-k-cifra,
.ga-cifras .hoy-k-cifra{font-size:clamp(1.1rem,2.1vw,1.9rem)}
@supports (container-type:inline-size){
  .pl-cifras>.hoy-k,.cu-cifras>.hoy-k,
  .ga-cifras>.hoy-k{container-type:inline-size}
  /* `--car` lo pone el molde: cuantos caracteres tiene el numero. */
  .pl-cifras .hoy-cifra,.cu-cifras .hoy-cifra,
  .ga-cifras .hoy-cifra{
    font-size:clamp(1.4rem,calc(88cqi/(var(--car,9)*.56)),2.9rem)}
  .pl-cifras .hoy-k-cifra,.cu-cifras .hoy-k-cifra,
  .ga-cifras .hoy-k-cifra{
    font-size:clamp(1.1rem,16cqi,1.9rem)}
}
/* La cadena deja de colgar del numero grande y pasa a tener titulo propio:
   antes el instrumento de la pantalla no decia como se llamaba. */
.pl-cadena{margin-top:0}
/* Estas tres estiraban a lo que medía su contenido por lo mismo que el
   salon, y por lo mismo dejaron de hacerlo: el recorte empareja la fila. */
/* Los medios de pago viven adentro del arqueo y no en una tarjeta aparte:
   son los mismos renglones que su lado "salio". */
.arq-medios{margin-top:2px}
/* Entró a la izquierda, con qué te pagaron a la derecha: dos listas cortas
   una al lado de la otra en vez de una torre. En el celular vuelven a apilarse. */
.arq-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e3) var(--e5)}
.arq-lado{min-width:0}
.arq-lado .arq-tipo:first-child{margin-top:0}
@media (max-width:640px){.arq-dos{grid-template-columns:1fr}}

/* El control de existencias es la tabla del VB copiada, asi que tiene sus ocho
   columnas y no entran en el ancho de la tarjeta. El producto NO corta: con
   "EURO DIESEL" y "ECOLOGY FULL" partidos en dos lineas las filas quedaban de
   40 y 61 px alternadas, y una tabla que se compara renglon por renglon contra
   una pantalla ajena tiene que leerse de un tiron. Lo que no entra scrollea
   adentro del .tablewrap, que es para lo que esta. */
.pl-vb td,.pl-vb th{white-space:nowrap}
.pl-vb .prop{max-width:none}
/* El TOTALES que declara el papel del VB. Va separado de los renglones y con
   mas peso: leido como un producto mas, de un vistazo se suma dos veces. */
.pl-vb tfoot td,.mm-vb-tabla tfoot td{border-top:1px solid var(--borde);
  padding-top:11px;font-weight:600;color:var(--tinta)}

/* El mismo papel del VB en el salon, pero con 294 renglones en vez de cuatro:
   la lista entera va plegada. El <details> es el de "de donde sale este
   numero" —mismo chevron, misma mecanica ya verificada— y solo se le sube el
   peso al rotulo, porque aca no es una nota al pie sino el contenido. */
.mm-vb>summary{font-size:var(--t-base);font-weight:600;color:var(--tinta)}
.mm-vb .porque-cuerpo{color:var(--tinta)}
.mm-vb-tabla td,.mm-vb-tabla th{white-space:nowrap}
.mm-vb-tabla .prop{max-width:none}
.mm-vb-tabla .rnum{color:var(--tinta-3);font-weight:500;margin-right:6px}

/* La tabla de la manguera gano una columna al fusionarse con los tanques y en
   309 px de ancho util pedia 357: en el celular el $/lt baja abajo del nombre
   del producto y la columna se va. */
.pl-sub,.ga-sub{display:none}
@media (max-width:560px){
  .pl-mang th:nth-child(3),.pl-mang td:nth-child(3){display:none}
  .pl-mang .pl-sub{display:block;font:400 var(--t-micro)/1.4 var(--f-num);
    color:var(--tinta-3);font-weight:400}
  .pl-mang td,.pl-mang th{padding-right:5px}
  /* Lo mismo en "rubro por rubro": lo vendido baja abajo del nombre y quedan
     las dos columnas que contestan la pregunta —cuanto deja por cada $1.000 y
     cuanto te quedo—. Con las cuatro la tabla pedia 436 px en 309. */
  .ga-tabla th:nth-child(2),.ga-tabla td:nth-child(2){display:none}
  .ga-tabla .ga-sub{display:block;font:400 var(--t-micro)/1.4 var(--f-ui);
    color:var(--tinta-3);font-weight:400}
  .ga-tabla td,.ga-tabla th{padding-right:5px}
  /* "De cada $1.000" en una sola linea son 112 px de encabezado para una
     columna de cuatro caracteres. En el celular el titulo puede cortar; el
     `th.n` no es capricho, `.reja .n` trae el nowrap y le gana a `.ga-tabla
     th` por especificidad. Los numeros de las CELDAS siguen sin cortarse. */
  .ga-tabla th.n{white-space:normal}
}

/* Que parte de la deuda es de este cliente. La barra de .deu-b ya existia y
   media hace cuanto que no paga, que es LO MISMO que dice el chip de la
   derecha en numero; ahora mide el reparto —lo que era una tarjeta entera al
   lado con los mismos 18 nombres— y conserva el rojo para el que no paga.

   El porcentaje va AL LADO del nombre y no abajo: en su propio renglon el
   cliente pasaba de 54 a 77 px y por dieciocho son 414 px de pantalla para
   dieciocho numeros de cuatro caracteres. */
.deu-cab{display:flex;align-items:baseline;gap:.45rem;min-width:0}
.deu-cab .deu-n{min-width:0}
.deu-pct{flex:none;font:500 var(--t-micro)/1 var(--f-num);color:var(--tinta-3);
  font-variant-numeric:tabular-nums}

/* El movimiento del mes de UNA cuenta, adentro de su renglon abierto. Era una
   tabla de siete columnas al pie de la pantalla con los mismos clientes por
   tercera vez. */
.cu-mov{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--borde);border:1px solid var(--borde);
  border-radius:var(--r2);overflow:hidden;margin-bottom:var(--e3)}
.cu-mov>div{background:var(--sup-2);padding:var(--e2) var(--e3)}
.cu-mov .r{display:block;font-size:var(--t-micro);letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinta-3)}
.cu-mov .v{display:block;font:600 var(--t-apoyo)/1.3 var(--f-num);
  font-variant-numeric:tabular-nums;margin-top:3px}
.cu-mov .v.cierra{color:var(--tinta)}
/* El chip global viene `nowrap` y adentro de una celda de 143 px la fecha se
   sale por el costado: acá sí puede cortar en dos renglones. */
.cu-mov .chip{margin-top:4px;font-size:var(--t-micro);white-space:normal}
@media (max-width:640px){
  /* Cuatro celdas de plata en 310 px son 77 px cada una y un importe no se
     parte al medio: van de a dos. */
  .cu-mov{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ------------------------------------------------------- el cierre del dia
   Una hoja que contesta UNA pregunta. Todo lo de aca esta al servicio de que
   el veredicto se lea de parado y a un metro: es lo unico que el encargado
   necesita saber a las seis de la manana. */

/* El boton en Hoy. Ancho entero y con la explicacion adentro: un boton solo
   con dos palabras obliga a entrar para saber que hay del otro lado. */
.cd-boton{display:flex;align-items:center;gap:var(--e4);margin-bottom:var(--e4);
  padding:var(--e4);background:var(--sup);border:1px solid var(--borde);
  border-left:3px solid var(--accion-viva);border-radius:var(--r2);
  box-shadow:var(--s1);color:inherit;text-decoration:none}
@media (hover:hover){.cd-boton:hover{border-color:var(--borde-2);border-left-color:var(--accion-viva);
  background:var(--sup-2)}}
.cd-b-ico{flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;
  border-radius:var(--r2);background:var(--accion-piso);color:var(--accion-viva)}
.cd-b-ico svg{width:1.35rem;height:1.35rem}
.cd-b-txt{min-width:0;flex:1}
.cd-b-txt b{display:block;font-family:var(--f-din);font-size:var(--t-medio);
  letter-spacing:var(--din-track)}
.cd-b-txt span{display:block;font-size:var(--t-menor);color:var(--tinta-2)}
.cd-b-ir{flex:none;font-size:var(--t-menor);color:var(--accion-viva);
  font-weight:600}
@media (max-width:560px){
  /* "Abrir" al lado del texto le come 60 px al renglon de la explicacion, que
     es la parte que decide si vale la pena entrar. La flecha del borde ya dice
     que se puede tocar. */
  .cd-b-ir{display:none}
  .cd-boton{gap:var(--e3);padding:var(--e3)}
}

/* El veredicto. Es el titular de la pantalla, asi que no es una tarjeta mas:
   va sin grilla, de ancho entero y con la barra de color del lado izquierdo,
   que es de donde se lee. */
.cd-vered{margin-bottom:var(--e4);padding:var(--e4);background:var(--sup);
  border:1px solid var(--borde);border-left:3px solid var(--ok);
  border-radius:var(--r2);box-shadow:var(--s1)}
.cd-vered.mirar{border-left-color:var(--alerta)}
.cd-v-cab{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e3)}
.cd-v-cab h2{margin:0;font-family:var(--f-din);font-size:var(--t-h1);
  letter-spacing:var(--din-track);line-height:1.1}
.cd-v-pip{flex:none;width:.6rem;height:.6rem;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 4px var(--ok-piso)}
.cd-vered.mirar .cd-v-pip{background:var(--alerta);
  box-shadow:0 0 0 4px var(--alerta-piso)}
.cd-v-tag{margin-left:auto;font:500 var(--t-menor)/1 var(--f-num);
  font-variant-numeric:tabular-nums;color:var(--tinta-2)}
.cd-v-pie{margin:var(--e3) 0 0;font-size:var(--t-apoyo);color:var(--tinta-2)}
.cd-v-lista{margin:var(--e3) 0 0;padding:0;list-style:none;display:grid;
  gap:1px;background:var(--borde);border:1px solid var(--borde);
  border-radius:var(--r2);overflow:hidden}
.cd-v-lista a{display:block;padding:var(--e2) var(--e3);background:var(--sup-2);
  color:var(--tinta);text-decoration:none;font-size:var(--t-apoyo)}
@media (hover:hover){.cd-v-lista a:hover{background:var(--sup-3)}}
.cd-v-lista b{font-family:var(--f-din);letter-spacing:var(--din-track);
  margin-right:.4rem;color:var(--alerta)}
/* Lo que falta se pliega: no es un hallazgo, es una medicion que no llego, y
   desplegado le gana en tamano al veredicto que vino a leer. */
.cd-falta{margin-top:var(--e3)}
.cd-falta summary{cursor:pointer;font-size:var(--t-menor);color:var(--tinta-3);
  list-style:none}
.cd-falta summary::-webkit-details-marker{display:none}
.cd-falta summary::before{content:"+";margin-right:.4rem;font-family:var(--f-num)}
.cd-falta[open] summary::before{content:"-"}
.cd-falta[open] summary{color:var(--tinta-2)}
.cd-falta p{margin:var(--e2) 0 0;font-size:var(--t-menor);color:var(--tinta-2)}

/* Cuatro cifras, igual que Turnos y Cuentas: la misma fila en las tres o son
   tres idiomas. */
.cd-cifras{margin-bottom:var(--e4)}
@media (min-width:760px){
  .cd-cifras{grid-template-columns:1fr 1fr}
  .cd-cifras>.hoy-k-jefe{grid-column:auto}
}
@media (min-width:1140px){
  .cd-cifras{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}
}
.cd-cifras .hoy-cifra{font-size:clamp(1.4rem,3.2vw,2.9rem)}
@supports (container-type:inline-size){
  .cd-cifras>.hoy-k{container-type:inline-size}
  .cd-cifras .hoy-cifra{
    font-size:clamp(1.4rem,calc(88cqi/(var(--car,9) * .56)),2.9rem)}
  .cd-cifras .hoy-k-cifra{font-size:clamp(1.1rem,16cqi,1.9rem)}
}


/* La cadena de media hoja va apilada: los cuatro eslabones en fila piden 1.096
   px y aca tienen 540. Apilada, el salto sigue estando ENTRE los dos que
   separa, que es lo unico que no se puede perder. */
.cd-cadena{grid-template-columns:1fr}
.cd-cadena .cad-e{border-top-width:2px}
.cd-cadena .cad-salto{flex-direction:row;gap:var(--e2);padding:var(--e1) var(--e3);
  border-inline:0;border-block:1px solid var(--borde);justify-content:flex-start}
.cd-cadena .cad-salto .fl{transform:rotate(90deg)}

/* Con que te pagaron: la barra va detras del rotulo y no en su propia columna,
   que en media hoja le sacaria el ancho al nombre del medio de pago. */
.cd-barra{display:block;height:2px;margin-top:4px;border-radius:2px;
  background:var(--borde-2);max-width:100%}
.cd-efe .cd-barra{background:var(--sodio)}
.arq .m em{display:block;font:400 var(--t-micro)/1 var(--f-num);
  color:var(--tinta-3);margin-top:3px}

.cd-cc{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--borde);
  border:1px solid var(--borde);border-radius:var(--r2);overflow:hidden;
  margin-bottom:var(--e3)}
.cd-cc>div{background:var(--sup-2);padding:var(--e2) var(--e3)}
.cd-cc b{display:block;font:600 var(--t-medio)/1.2 var(--f-num);
  font-variant-numeric:tabular-nums;margin-top:3px}
.cd-cc>div>span:last-child{display:block;font-size:var(--t-micro);
  color:var(--tinta-3)}

/* Un faltante y un cargo del dia se pintan; una sobra y un pago, no. Lo que se
   pinta es lo que le saca plata al dueno. */
.cd-mal{color:var(--mal)}
.cd-bien{color:var(--tinta-2)}

.cd-sub{display:none}
@media (max-width:560px){
  /* Cuatro columnas de plata son 400 px en 309 de ancho util. Se van las dos
     del medio: lo que entro baja abajo del nombre del turno y "vendio" queda,
     porque es la que se compara turno contra turno. */
  .cd-turnos th:nth-child(3),.cd-turnos td:nth-child(3),
  .cd-turnos th:nth-child(4),.cd-turnos td:nth-child(4){display:none}
  .cd-turnos .cd-sub{display:block;font:400 var(--t-micro)/1.4 var(--f-num);
    color:var(--tinta-3)}
  .cd-turnos td,.cd-turnos th{padding-right:5px}
  .cd-v-cab h2{font-size:var(--t-h2)}
  .cd-v-tag{margin-left:0;width:100%}
}

/* ------------------------------------------------------------ los camiones
   La carga de una descarga es un formulario que se repite —el pendiente, el
   corregido y el de a mano son el mismo— y en el celular tiene que entrar en
   una sola columna sin que el dueño tenga que apuntar a un campo de 40 px.
   Los campos van en una reja que se reparte sola: la fecha y el tanque son
   angostos, los dos números son los que mandan. */
.cam-ficha{background:var(--sup-2);border:1px solid var(--borde);
  border-radius:10px;padding:var(--e4);margin-bottom:.7rem}
.cam-ficha:last-child{margin-bottom:0}
.cam-tit{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  margin-bottom:.6rem}
.cam-tit b{font-family:var(--f-din);font-size:1.05rem;letter-spacing:var(--din-track)}
.cam-sel,.cam-entro{font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;padding:.16rem .42rem;border-radius:5px;
  background:var(--sup-3);color:var(--tinta-3)}
.cam-entro{background:var(--sodio-piso);color:var(--sodio-hondo)}
.cam-campos{display:grid;gap:.55rem;
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
/* El `label` global de arriba trae margen propio y le gana a las reglas de
   acá si no se lo apaga: apila mal los campos y desnivela los renglones. */
.cam-campo{display:flex;flex-direction:column;gap:.2rem;margin:0}
.cam-campo>span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--tinta-3)}
.cam-campo input,.cam-campo select{width:100%;min-width:0;
  font-family:var(--f-num);font-size:.95rem;padding:.45rem .55rem;
  background:var(--fondo);color:var(--tinta);border:1px solid var(--borde-2);
  border-radius:7px}
.cam-campo input:focus,.cam-campo select:focus{outline:2px solid var(--accion-viva);
  outline-offset:1px}
.cam-delvb,.cam-ayuda{font-size:11px;color:var(--tinta-3);line-height:1.2}
.cam-pesos{display:flex;align-items:center;gap:.25rem;color:var(--tinta-3)}
.cam-pie{margin-top:.7rem}
.cam-nro{display:block;font-size:11px;color:var(--tinta-3);
  font-family:var(--f-num)}
.cam-pct{display:block;font-size:11px;color:var(--tinta-3)}
.cam-sin-imp{font-size:11px;color:var(--tinta-3)}
.cam-mal{color:var(--sodio-hondo)}
.cam-bien{color:var(--tinta-2)}
.cam-editar summary{cursor:pointer;font-size:13px;color:var(--tinta-2);
  list-style:none;padding:.42rem .6rem;border:1px solid var(--borde-2);
  border-radius:7px;display:block}
.cam-editar summary::before{content:"›";display:inline-block;
  margin-right:.45rem;color:var(--tinta-3)}
.cam-editar[open] summary::before{transform:rotate(90deg)}
.cam-editar summary::-webkit-details-marker{display:none}
.cam-editar[open] summary{color:var(--tinta)}
.cam-corregir{margin-top:.9rem;border-top:1px solid var(--borde);
  padding-top:.7rem}
.cam-corregir>.nota{margin-top:0}
.cam-editar+.cam-editar{margin-top:.3rem}
.cam-editar>.cam-ficha{margin-top:.5rem}
.cam-borrar{margin-top:.4rem;text-align:right}
/* La libreta del asistente en Mis datos. Un renglon por nota con su boton de
   borrar al costado: la nota es una frase corta y partirla en tarjetas la
   convertiria en una grilla de nada. */
/* ============================ MI SISTEMA ==================================
   Que partes del sistema le estan funcionando a la estacion. La lista es un
   renglon por casillero y no una grilla de tarjetas: son quince, y quince
   tarjetas obligan a barrer la pantalla en zigzag para contar cuantas estan
   prendidas. En renglon, la columna de luces se lee de un saque. */
.sis-marca{display:flex;flex-direction:column;gap:.7rem;
  padding:var(--e4) 0 var(--e5)}
.sis-cuenta{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.sis-cuenta .cifra{font-family:var(--f-din);font-size:2.4rem;line-height:1;
  color:var(--tinta-2)}
.sis-cuenta .cifra b{font-weight:500;color:var(--tinta)}
.sis-cuenta-r{font-family:var(--f-ui);font-size:var(--t-apoyo);
  color:var(--tinta-2)}
/* Una marca por casillero, del ancho que le toque. No es una barra de
   progreso continua a proposito: son quince cosas sueltas, no un avance. */
.sis-barra{display:flex;align-items:center;gap:3px;height:6px}
/* La marca apagada va en --tinta-3 y no en un gris de superficie: medido en
   tema oscuro, --sup-3 y --borde-2 dan 1,2 y 1,6 contra la hoja y la marca
   desaparece — que es justo lo que esta pantalla tiene que dejar ver. Y la
   prendida ademas es mas gruesa: separadas solo por color, verde y gris se
   parecen bastante para el que no distingue bien los colores. */
.sis-barra i{flex:1;height:3px;border-radius:3px;background:var(--tinta-3)}
.sis-barra i.on{height:6px;background:var(--ok)}

.sis-grupo{padding:var(--e4) 0 var(--e2)}
.sis-grupo h2{font-size:var(--t-medio);margin:0}
.sis-grupo .nota{margin:.2rem 0 0}

.sis-lista{border:1px solid var(--borde);border-radius:var(--r2);
  background:var(--sup);box-shadow:var(--s1);overflow:hidden}
.sis-item{display:flex;align-items:flex-start;gap:.8rem;
  padding:var(--e3) var(--e4);border-top:1px solid var(--borde)}
.sis-item:first-child{border-top:0}
.sis-texto{flex:1;min-width:0}
.sis-item h3{font-size:var(--t-base);margin:0}
.sis-estado{font-family:var(--f-ui);font-size:var(--t-apoyo);
  color:var(--tinta-2);margin:.15rem 0 0}
.sis-item .nota{margin:.3rem 0 0}
.sis-item .btn{flex:none;align-self:center}
/* El camino para prender algo va en su propio renglon y con un filo al
   costado: es una instruccion para ejecutar, no mas explicacion. */
.sis-donde{font-family:var(--f-ui);font-size:var(--t-menor);
  color:var(--tinta-2);margin:.45rem 0 0;padding:.35rem 0 .35rem .6rem;
  border-left:2px solid var(--borde-2);line-height:1.5}
.sis-donde b{color:var(--tinta);font-weight:600}
/* La luz apagada NO se pinta de rojo: que a una estacion le falte prender
   algo no es una falla suya, y el rojo la manda a apagar un incendio que no
   existe. */
.sis-luz{flex:none;width:9px;height:9px;border-radius:50%;margin-top:.42rem;
  background:var(--ok)}
/* Apagada es un aro vacio y no un circulo gris: el hueco se distingue del
   lleno aunque el color no llegue, y no depende de ver bien un gris. */
.sis-off .sis-luz{background:none;box-shadow:inset 0 0 0 1.5px var(--tinta-3)}
.sis-off h3, .sis-off .sis-estado{color:var(--tinta-2)}

.notas-bot{list-style:none;margin:.6rem 0 0;padding:0}
.notas-bot li{display:flex;gap:.8rem;align-items:center;
  justify-content:space-between;padding:.55rem 0;
  border-top:1px solid var(--borde)}
.notas-bot li:first-child{border-top:0}
.notas-bot form{margin:0;flex:none}
.cam-hero{display:flex;flex-direction:column;gap:.15rem;
  padding:0 0 .8rem;margin-bottom:.6rem;border-bottom:1px solid var(--borde)}
.cam-hero-cifra{font-family:var(--f-din);font-size:2.3rem;line-height:1;
  color:var(--sodio-hondo)}
.cam-hero-pie{font-size:12px;color:var(--tinta-3)}

@media (max-width:520px){
  /* minmax(0,...) y no 1fr solo: el campo de fecha trae un ancho minimo
     propio y sin esto se lleva media reja, dejando los dos numeros —que son
     el dato— en la mitad angosta. */
  .cam-campos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cam-campo.cam-remito{grid-column:1 / -1}
}

/* ============================================================= empleados ==
   Dos pantallas: el equipo del mes y la ficha de una persona. Casi todo se
   apoya en lo que ya existe (instr, sectores, bloque, reja); aca vive solo lo
   propio: el renglon con barra del ranking, la ficha de datos y la serie
   mensual. */

/* La celda que abre la ficha. Es un link que ocupa toda la celda y no solo el
   nombre: la fila entera es tocable, que es como se usa en el celular. */
.emp-q{display:flex;flex-direction:column;gap:2px;color:inherit;
  text-decoration:none}
@media (hover:hover){.emp-q:hover b{color:var(--accion-viva)}}
.emp-cargar{font-size:var(--t-micro);color:var(--accion-viva)}
.emp-tabla .prop i{left:auto;right:0;background:var(--playa);opacity:.45}

/* El renglon del ranking: puesto, quien, barra y numero. Es una tabla que no
   necesita cabecera —la columna se explica sola— y en el celular la barra se
   estira sin romper nada, que es lo que una <table> no hace. */
.emp-fila{display:grid;grid-template-columns:auto minmax(9rem,1fr) 1fr auto;
  align-items:center;gap:.8rem;padding:.6rem 0;
  border-top:1px solid var(--borde);color:inherit;text-decoration:none}
.emp-fila:first-of-type{border-top:0}
@media (hover:hover){a.emp-fila:hover{background:var(--sup-2)}}
.emp-fila-plana{grid-template-columns:minmax(8rem,1fr) 1fr auto}
.emp-pos{font-family:var(--f-din);font-size:1.1rem;color:var(--tinta-3);
  width:1.6rem;text-align:right}
.emp-fila:first-of-type .emp-pos{color:var(--sodio)}
.emp-nom{display:flex;flex-direction:column;gap:1px;min-width:0}
.emp-nom small{color:var(--tinta-3);font-size:var(--t-micro)}
.emp-barra{height:6px;border-radius:3px;background:var(--sup-3);overflow:hidden}
.emp-barra i{display:block;height:100%;background:var(--minishop);
  border-radius:3px}
.emp-fila-plana .emp-barra i{background:var(--playa)}
.emp-val{font-family:var(--f-din);white-space:nowrap}

/* Como ubicarlo: tres datos, uno abajo del otro y con aire. Antes eran seis
   renglones de dos columnas, y tres de ellos —nombre, legajo y funcion— ya
   estaban en el titulo de la pantalla: la tarjeta gastaba la mitad en decir
   tres veces lo mismo y el telefono, que es a lo que se entra, terminaba en
   letra chica. El rotulo va ARRIBA del dato y no al costado: leido de arriba
   abajo, el dato queda alineado con el margen y se lee de un golpe. */
.emp-datos{display:flex;flex-direction:column}
.emp-dato{display:flex;flex-direction:column;gap:1px;padding:.55rem 0;
  border-top:1px solid var(--borde)}
.emp-dato:first-child{border-top:0;padding-top:0}
.emp-dato-r{color:var(--tinta-3);font-size:var(--t-micro);
  text-transform:uppercase;letter-spacing:.08em}
.emp-dato-v{font-size:1.05rem;line-height:1.3}
.emp-dato-v small{display:block;color:var(--tinta-2);font-size:var(--t-menor)}
a.emp-dato-v{color:var(--accion-viva);text-decoration:none}
@media (hover:hover){a.emp-dato-v:hover{text-decoration:underline}}

/* El sueldo: la cifra manda y el campo queda al costado. Se entra a mirarlo
   muchas mas veces que a cambiarlo. */
.emp-sueldo{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.8rem;margin:0 0 .8rem}
.emp-sueldo-cifra{font-family:var(--f-din);font-size:2.1rem;line-height:1;
  color:var(--sodio-hondo)}
.emp-sueldo-vacio{font-family:var(--f-ui);font-size:var(--t-apoyo);
  color:var(--tinta-3)}
.emp-sueldo-form{display:flex;align-items:center;gap:.5rem;margin:0}
input.emp-sueldo-input{width:7.5rem}

/* Como le cierra la caja. La cifra va en el tamano del sueldo: son los dos
   numeros de la ficha que hablan de plata de la persona, no de la estacion. */
.emp-caja{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.emp-caja .cifra{font-family:var(--f-din);font-size:2.1rem;line-height:1}
/* Solo el faltante se pinta. Que sobre no es una alarma: es plata de mas en
   el buzon, y pintarla igual que la que falta haria leer las dos como un
   problema. */
.emp-caja-falta{color:var(--mal)}
.emp-caja-r{font-family:var(--f-ui);font-size:var(--t-apoyo);color:var(--tinta-2)}
.emp-caja-sin{font-family:var(--f-ui);font-size:var(--t-apoyo);
  color:var(--tinta-2);margin:0 0 .5rem}

/* La historia del sueldo, en una linea de meses. */
.emp-sueldos{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}
.emp-sueldo-mes{display:flex;flex-direction:column;gap:1px;
  padding:.4rem .7rem;border-radius:var(--r2);background:var(--sup-2)}
.emp-sueldo-mes.on{background:var(--sodio-piso)}
.emp-sueldo-mes-r{font-size:var(--t-micro);color:var(--tinta-3)}
.emp-sueldo-mes-v{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.emp-mes-on td{color:var(--sodio-hondo)}

/* Como viene el ano: una barra por mes. Alto fijo del riel para que los meses
   flojos no achiquen la fila entera. */
.emp-serie{display:flex;align-items:flex-end;gap:.5rem;overflow-x:auto;
  padding-bottom:.2rem}
.emp-mes{flex:1 1 3.2rem;min-width:3.2rem;display:flex;flex-direction:column;
  align-items:center;gap:.25rem}
.emp-mes-v{font-size:var(--t-micro);color:var(--tinta-3);white-space:nowrap}
.emp-mes-b{width:100%;height:88px;background:var(--sup-2);border-radius:4px;
  display:flex;align-items:flex-end;overflow:hidden}
.emp-mes-b i{display:block;width:100%;background:var(--playa);opacity:.55;
  border-radius:4px}
.emp-mes.on .emp-mes-b i{opacity:1}
.emp-mes.on .emp-mes-v{color:var(--tinta)}
.emp-mes-r{font-size:var(--t-micro);color:var(--tinta-2)}
.emp-mes-d{font-size:var(--t-micro);color:var(--tinta-3)}

.migas{margin:0 0 2px}
.migas a{color:var(--tinta-3);text-decoration:none;font-size:var(--t-micro)}
@media (hover:hover){.migas a:hover{color:var(--accion-viva)}}

@media (max-width:520px){
  /* En el celular la barra del ranking se va: el nombre y el numero son el
     dato, y con cuatro columnas el nombre queda en dos letras. */
  .emp-fila{grid-template-columns:auto 1fr auto;gap:.6rem}
  .emp-fila-plana{grid-template-columns:1fr auto}
  .emp-barra{display:none}
  .emp-sueldo{justify-content:flex-start}
  /* Ocho columnas en 375 px son 690 px de tabla y el dueno la lee de
     costado. Se queda con las cuatro que contestan la pregunta —quien,
     cuanto vendio, cuanto de mostrador y cuanto cobra— y el resto vive en la
     ficha, que esta a un toque. */
  .emp-col2{display:none}
  /* Un importe no se parte al medio, asi que cada columna de plata pide sus
     100 px y en 310 px de ancho util entran tres. La que se va es la del
     mostrador: abajo tiene su propio bloque, con el ranking entero. */
  .emp-col3{display:none}
  .emp-tabla td,.emp-tabla th{padding-right:7px}
}

/* La tarjeta del Empleado: a pantalla completa, sin rail ni cinta. Es lo
   unico en pantalla a proposito —el empleado que te para en la puerta— y se
   cierra con la cruz de arriba a la derecha, que es donde cualquiera la
   busca. El ancho sigue siendo el de un parrafo (.emp), no el de un tablero:
   una frase que cruza la pantalla entera se lee dos veces. */
body.sola .lienzo{min-height:100dvh;padding:0}
body.sola main{max-width:none;padding:0}
.tarj{max-width:62ch;margin:0 auto;padding:var(--e4) var(--e4) var(--e6)}
/* En una pantalla ancha la tarjeta se ve como tarjeta: una hoja sobre el
   fondo. En el celular es la pantalla entera, sin marco: ahi el marco solo
   roba ancho. */
@media (min-width:700px){
  .tarj{max-width:calc(62ch + 2 * var(--e6));margin:var(--e6) auto;
    padding:var(--e5) var(--e6) var(--e6);background:var(--sup);
    border:1px solid var(--borde);border-radius:var(--r3);
    box-shadow:var(--s2),var(--filo)}
}
.tarj-cab{display:flex;align-items:center;gap:var(--e3);
  margin:0 0 var(--e5);min-height:44px}
.tarj-quien{font-size:var(--t-micro);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-3)}
/* 44 px: el dedo, no el mouse. La cruz es la unica salida y en el celular
   no puede fallar. */
/* Arriba a la derecha DE LA PANTALLA, y fija: es la unica salida, se busca
   ahi sin pensar, y en una tarjeta larga tiene que seguir a mano sin volver
   a subir. */
.tarj-x{position:fixed;top:var(--e4);right:var(--e4);z-index:5;
  width:44px;height:44px;display:grid;
  place-items:center;border-radius:999px;border:1px solid var(--borde-2);
  background:var(--sup);color:var(--tinta-2);text-decoration:none;
  font-size:1.125rem;line-height:1}
.tarj-x:hover,.tarj-x:focus-visible{border-color:var(--accion);
  color:var(--accion-viva)}
.emp-ir{display:block;margin-top:var(--e1);font-size:var(--t-menor);
  font-weight:600;color:var(--accion-viva)}
.emp-dice.hecho{border-left-color:var(--ok)}
.emp-mas{display:block;text-decoration:none;color:var(--tinta-2)}
@media (hover:hover){.emp-mas:hover{color:var(--accion-viva)}}
.emp-turno-que .emp-contra{display:block;font-size:var(--t-menor);
  color:var(--tinta-3)}
/* La linea del Empleado en Hoy, cuando no tuvo nada que valiera una
   tarjeta. Apagada como .emp-calma: es la ausencia de noticias. */
.emp-linea{margin:0 0 var(--e4);color:var(--tinta-3);
  font-size:var(--t-apoyo)}
.emp-linea a{margin-left:var(--e2);color:var(--accion-viva);font-weight:600}

/* Las cuentas corrientes adentro de la tarjeta. Cada nombre es un link a su
   ficha, asi que la fila se toca entera; el importe queda a la derecha para
   que la columna de plata se lea de un vistazo. */
.emp-cc{display:grid;gap:1px;margin-top:var(--e2);border-radius:var(--r2);
  overflow:hidden;background:var(--borde)}
.emp-cc-rot{padding:var(--e2) var(--e3);background:var(--sup-2);
  font-size:var(--t-micro);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-3)}
.emp-cc-uno{display:flex;gap:var(--e3);align-items:baseline;
  text-decoration:none;padding:var(--e3);background:var(--sup-2)}
@media (hover:hover){.emp-cc-uno:hover{background:var(--sup-3)}}
.emp-cc-quien{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:var(--t-apoyo);color:var(--tinta)}
.emp-cc-cuanto{margin-left:auto;white-space:nowrap;font-size:var(--t-apoyo);
  font-weight:600;color:var(--tinta)}


/* ================================================ lo que te sale el mes
   Dos casilleros y la respuesta al lado. El formulario es angosto a
   propósito: son dos números, no una planilla. */
.gf-form{display:grid;gap:var(--e4);max-width:42ch}
.gf-campo{display:block}
.gf-rot{display:block;margin-bottom:var(--e2);font-size:var(--t-apoyo);
  font-weight:600;color:var(--tinta)}
.gf-campo input{width:100%;font:600 var(--t-medio)/1.2 var(--f-num)}
.gf-pie{display:block;margin-top:5px;font-size:var(--t-menor);
  color:var(--tinta-2);line-height:1.45}
.gf-acciones{display:flex;gap:var(--e3);align-items:center;flex-wrap:wrap}
.gf-total{font-size:var(--t-apoyo);color:var(--tinta-2)}
.gf-arrastre{margin:var(--e3) 0 0;font-size:var(--t-menor);
  color:var(--tinta-2);line-height:1.5}
.gf-cuenta{margin-top:var(--e4)}
.gf-queda td{border-top:2px solid var(--borde);font-size:var(--t-medio)}
.gf-nota{margin:var(--e3) 0 0;font-size:var(--t-menor);color:var(--tinta-2);
  line-height:1.5}
.ga-sin{color:var(--tinta-3)}

/* ======================================================= Hoy, en blanco
   La portada armada como una app de plata (04/09/2026): una frase, UN
   numero grande, playa y salon, y listas de un renglon y un numero. Las
   reglas viejas de .hoy-k y .hoy-cifras siguen arriba porque el cierre del
   dia las usa. */
/* La columna se planta en el ancho de la pantalla y no en el del cuadro mas
   ancho que tenga adentro: sin esto una tabla o la tira de turnos estiraban la
   pantalla ENTERA y el telefono quedaba corriendose de costado. */
.hoy{max-width:44rem;grid-template-columns:minmax(0,1fr)}
.hoy-grupo,.hoy-cols,.hoy-lista,.hoy-arriba{min-width:0}
.hoy-cab{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--e3);margin:0 0 var(--e3)}
.hoy-cab h1{font:700 var(--t-tapa)/var(--lh-tapa) var(--f-din);
  letter-spacing:-.022em}
/* En Hoy toda cifra va en la letra del texto, no en la de maquina: es la
   pantalla que se mira de lejos y con el celular en la mano. */
.hoy .num,.hoy .cifra{font-family:var(--f-din)}
.hoy-cab h1 small{display:block;font:400 var(--t-sub)/var(--lh-sub) var(--f-ui);
  color:var(--tinta-2);letter-spacing:0;margin-top:.3rem;text-transform:lowercase}
.hoy-acciones{display:flex;align-items:center;gap:.15rem;flex:none;margin-top:.2rem}
.hoy-acciones .campana{margin-left:0}
.hoy-ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  margin:0;padding:0;border:0;background:none;color:var(--tinta);cursor:pointer}
.hoy-ico svg{width:22px;height:22px}
.hoy-ico:hover,.hoy-ico:active{background:var(--sup-2)}
.hoy-ico:focus-visible{outline:2px solid var(--accion);outline-offset:2px}
/* Tapar la plata: se difumina, no se borra. */
.tapado .cifra,.tapado .hoy-tile-n,.tapado .hoy-ren-v,.tapado .hoy-t-gan{
  filter:blur(9px);pointer-events:none}
.hoy-frase{margin:0 0 var(--e3);padding:.8rem 1rem;border-radius:var(--r3);
  background:var(--alerta-piso);color:var(--tinta);font-size:var(--t-sub);
  line-height:var(--lh-sub);display:block}
.hoy-frase a{color:inherit;text-decoration:none}
.hoy-frase b{color:var(--alerta);font-weight:600}
.hoy-frase.grave b{color:var(--mal)}
.hoy-frase.calma{background:var(--sup-2);color:var(--tinta-2)}
.hoy-frase.calma a{color:var(--accion-viva);font-weight:600}
.hoy-frase.hoy-viejo{border:0;box-shadow:none}
.hoy-frase.hoy-viejo a{color:var(--accion-viva);font-weight:600}

.hoy-hero{padding:var(--e4) 0 var(--e2);container-type:inline-size}
.hoy-hero .hoy-rot{font:400 var(--t-cuerpo)/var(--lh-cuerpo) var(--f-ui);
  letter-spacing:0;text-transform:none;color:var(--tinta-2)}
.hoy-hero .hoy-cifra{color:var(--tinta);margin:.3rem 0 .6rem}
.hoy-hero .hoy-pie{border-top:0;padding-top:0}
.hoy-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 var(--e3)}
.hoy-tile{display:flex;flex-direction:column;gap:.15rem;min-width:0;
  background:var(--sup);border:1px solid var(--borde);
  border-radius:var(--r-tarjeta);box-shadow:var(--sombra-cd),var(--filo);
  padding:var(--e4);text-decoration:none;color:inherit;
  transition:transform var(--t-rapido) var(--ios-out),
             box-shadow var(--t-rapido) var(--ios-out),
             border-color var(--t-rapido) var(--ios-out)}
@media (hover:hover){a.hoy-tile:hover{transform:translateY(-1px);
  box-shadow:var(--sombra-alta),var(--filo);border-color:var(--borde-2)}}
.hoy-tile .hoy-rot{font:400 var(--t-sub)/var(--lh-sub) var(--f-ui);
  letter-spacing:0;text-transform:none;color:var(--tinta-2)}
.hoy-tile .hoy-rot em{font-style:normal;font-size:var(--t-pie);font-weight:500;
  letter-spacing:0;color:var(--tinta-3);margin-left:.35rem}
.hoy-tile-n{font:590 clamp(1.3rem,5.2vw,1.5rem)/1.15 var(--f-din);
  letter-spacing:var(--din-track);font-variant-numeric:tabular-nums}
.hoy-tile-n .cifra-sig{font-size:.65em;font-weight:500;color:var(--tinta-3)}
.hoy-tile-s{font-size:var(--t-pie);line-height:var(--lh-pie);color:var(--tinta-3);
  display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.hoy-tile-s b{font-weight:600;color:var(--tinta-2)}
.hoy-tiles:has(> :nth-child(3)) > :nth-child(3){grid-column:1/-1}
/* Y cuando hay UNA sola —la estacion sin salon propio ve solo "te quedo"—
   ocupa el ancho entero en vez de quedarse en la mitad izquierda con un hueco
   del mismo tamaño al lado. En su propia regla por lo mismo que la de arriba:
   sin :has() se lleva puesto todo lo que comparta la lista. */
.hoy-tiles:not(:has(> :nth-child(2))){grid-template-columns:1fr}

.hoy-grupo{margin:2rem 0 0}
.hoy-grupo header{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--e3);padding:0 .25rem var(--e3)}
.hoy-grupo h2{font:560 1.32rem/1.25 var(--f-din);letter-spacing:-.012em}
.hoy-grupo header a{font-size:var(--t-pie);font-weight:520;
  color:var(--accion-viva);text-decoration:none;white-space:nowrap}
/* No es una lista: son tarjetas sueltas con aire entre ellas. Una lista de
   veinte renglones pegados por una rayita de 1 px se lee como un extracto
   bancario, y agrandarle la letra solo la hace mas pesada. Lo que separa una
   cosa de la otra es el espacio. */
.hoy-lista{display:flex;flex-direction:column;gap:10px;
  background:none;border-radius:0;overflow:visible}
.hoy-ren{display:flex;align-items:center;gap:var(--e3);width:100%;
  padding:var(--e4);position:relative;text-decoration:none;
  color:inherit;margin:0;font:inherit;text-align:left;
  background:var(--sup);border:1px solid var(--borde);
  border-radius:var(--r-tarjeta);box-shadow:var(--sombra-cd),var(--filo);
  transition:transform var(--t-rapido) var(--ios-out),
             box-shadow var(--t-rapido) var(--ios-out),
             border-color var(--t-rapido) var(--ios-out)}
/* La rayita divisoria ya no hace falta: la separacion la hace el hueco. */
.hoy-ren + .hoy-ren::before{content:none}
@media (hover:hover){a.hoy-ren:hover{transform:translateY(-1px);
  box-shadow:var(--sombra-alta),var(--filo);border-color:var(--borde-2)}}
a.hoy-ren:active{transform:scale(var(--apreton-tarjeta));
  box-shadow:var(--sombra-cd),var(--filo)}
.hoy-ren-l{flex:1;min-width:0}
.hoy-ren-l b{display:block;font-weight:530;font-size:.98rem;
  letter-spacing:-.004em;margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hoy-ren-l small{display:block;font-size:var(--t-pie);color:var(--tinta-2);
  margin-top:0;line-height:1.5;font-weight:400}
.hoy-ren-l small b{display:inline;font-size:inherit;font-weight:600}
.hoy-ren-v{font:530 var(--t-cuerpo)/1.15 var(--f-din);letter-spacing:-.008em;
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.hoy-ren-v .cifra-sig{font-size:.7em;font-weight:500;color:var(--tinta-3)}
.hoy-ren-v.alerta{color:var(--alerta)}
.hoy-ren-v.mal{color:var(--mal)}
.hoy-ren-v.accion{font:600 var(--t-sub)/1 var(--f-ui);color:var(--accion-viva)}
.hoy-chev{width:8px;height:14px;flex:none;color:var(--tinta-3)}
.hoy-ren.plano{cursor:default}
.hoy-ren.vivo .hoy-ren-l b{color:var(--sodio-hondo)}
.hoy-ren.vivo .hoy-t-gan{color:var(--sodio-hondo);
  font:590 var(--t-cuerpo)/1.15 var(--f-din)}
.hoy-ren .hoy-t-ritmo{margin-top:.25rem;font-size:var(--t-pie)}
.hoy-tq{font:500 var(--t-pie)/1 var(--f-ui);color:var(--tinta-3);
  letter-spacing:0;margin-left:.35rem}
.hoy-pie-lista{font-size:var(--t-pie);line-height:var(--lh-pie);
  color:var(--tinta-3);margin:.6rem .3rem 0}
.hoy-nota{margin-top:var(--e5)}
.hoy-grupo header .hoy-sello{font-size:var(--t-menor);color:var(--tinta-3);
  white-space:nowrap}
.hoy-avisos{margin:var(--e3) 0 0}

/* Entran de abajo, escalonadas. Es de la maqueta y no es adorno: el ojo
   recorre la pantalla en el orden en que las cosas aparecen, y ese orden es
   el que importa. Con movimiento reducido no entra nada, aparece y listo. */
.hoy-arriba,.hoy-cols > *,.hoy-col > *{
  animation:hoy-entra var(--t-lento) var(--ios) both}
.hoy-cols > :nth-child(2),.hoy-col > :nth-child(2){animation-delay:.035s}
.hoy-cols > :nth-child(3),.hoy-col > :nth-child(3){animation-delay:.07s}
.hoy-cols > :nth-child(4),.hoy-col > :nth-child(4){animation-delay:.1s}
@keyframes hoy-entra{
  from{opacity:0;transform:translate3d(0,14px,0) scale(.985)}
  to  {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .hoy-arriba,.hoy-cols > *,.hoy-col > *{animation:none}
}

/* Un renglon que se abre en el lugar. Es el mismo renglon de la lista: la
   diferencia es que en vez de llevarte a otra pantalla despliega abajo lo que
   antes ocupaba media hoja siempre. */
/* El renglon que se despliega es la MISMA tarjeta: la caja la lleva el
   <details> y el summary de adentro queda al ras, sin borde ni sombra
   propios, o serian dos tarjetas una adentro de la otra. */
.hoy-d{display:block;background:var(--sup);border:1px solid var(--borde);
  border-radius:var(--r-tarjeta);box-shadow:var(--sombra-cd),var(--filo);
  overflow:hidden}
.hoy-d > summary.hoy-ren,.hoy-lista > .hoy-d > summary{
  background:none;border:0;border-radius:0;box-shadow:none}
.hoy-d > summary{list-style:none;cursor:pointer;display:flex}
.hoy-d > summary::-webkit-details-marker{display:none}
@media (hover:hover){.hoy-d > summary:hover{background:var(--hover);
  transform:none;box-shadow:none}}
.hoy-d > summary:focus-visible{outline:2px solid var(--accion);outline-offset:-2px}
.hoy-chev{transition:transform .18s}
.hoy-d[open] > summary .hoy-chev{transform:rotate(90deg)}
.hoy-d-cuerpo{padding:.2rem 1rem 1rem}
.hoy-d-cuerpo > :first-child{margin-top:0}
.hoy-d-cuerpo .nota{margin:.7rem 0 0}
/* Cuando lo que se despliega son mas renglones, van al ras: la sangria del
   cuerpo los dejaba corridos contra los de arriba. */
.hoy-d-lista{padding:0}
.hoy-d-lista .hoy-ren{padding-left:1.6rem}
/* La raya divisoria la ponia `.hoy-ren + .hoy-ren`, que no ve a los renglones
   que viven adentro de un <details>. */
/* Las rayitas divisorias entre renglones desplegables se van por lo mismo
   que las otras: ahora lo que separa es el hueco de 10 px. */
.hoy-lista > .hoy-d + .hoy-ren::before,
.hoy-lista > .hoy-d + .hoy-d > summary::before,
.hoy-lista > .hoy-ren + .hoy-d > summary::before{content:none}

/* La pantalla del turno. Las flechas para caminar turno a turno son botones
   del tamaño de un dedo, no dos cositas al costado de una barra. */
.pl-fl{font:400 1.6rem/1 var(--f-ui);text-decoration:none;padding-bottom:.15rem}
.pl-fl.off{color:var(--tinta-3);opacity:.35}
.pl-nada{color:var(--tinta-3)}
/* El titulo plegado en la chapa: aparece cuando el grande se fue arriba. */
.top-mini{display:none;font-weight:600;font-size:var(--t-base);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
body.titulo-plegado .top-mini{display:block;flex:1;
  animation:asomar .2s ease-out}
@keyframes asomar{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (min-width:900px){
  /* Hoy llena la mesa: con 64rem quedaba una franja muerta a la derecha en
     cualquier monitor de escritorio. */
  /* La maqueta planta el contenido en 1.080 px. Con 80rem (1.280) las
     tarjetas quedaban tiras larguisimas con el numero perdido a la derecha. */
  .hoy{max-width:1080px}
  .hoy-cab h1{font-size:2.25rem}
  /* El numero grande y las tarjetas van TODOS en una fila. Apiladas a la
     derecha, las tarjetas se estiraban en rectangulos largos con aire al
     final y el numero grande quedaba con media tarjeta vacia abajo: el
     hueco era la diferencia de alturas entre las dos columnas. */
  /* El reparto 1,15/2 es para cuando al lado hay DOS o TRES tarjetas (playa,
     salon, lo que quedo). Con una sola —la estacion sin salon propio— esa
     unica tarjeta se quedaba con dos tercios de la fila y la mitad vacia,
     mientras el numero del dia, que es el protagonista, entraba justo en el
     tercio angosto de la izquierda. Con una sola tarjeta van mitad y mitad. */
  .hoy-arriba{display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e4);
    align-items:stretch;margin:var(--e4) 0 0}
  /* En su propia regla: un navegador sin :has() tira la regla entera donde
     aparece, y ahi se llevaria puesto el reparto de arriba. */
  .hoy-arriba:has(.hoy-tiles > :nth-child(2)){
    grid-template-columns:minmax(0,1.15fr) minmax(0,2fr)}
  .hoy-hero{background:var(--sup);border:1px solid var(--borde);
    border-radius:var(--r-tarjeta);box-shadow:var(--sombra-cd),var(--filo);
    padding:var(--e5);
    display:flex;flex-direction:column;justify-content:space-between}
  .hoy-tiles{grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);margin:0;gap:var(--e4)}
  .hoy-tiles:has(> :nth-child(3)) > :nth-child(3){grid-column:auto}
  /* Lo que sobra de alto se reparte entre los tres renglones de la tarjeta en
     vez de amontonarse abajo. */
  .hoy-tile{justify-content:space-between;gap:.4rem}
  /* Las listas se acomodan como ladrillos, no en dos columnas de filas
     emparejadas: emparejadas, a la mas corta de cada fila le quedaba abajo un
     hueco del tamaño de la diferencia. */
  .hoy-cols{columns:2;column-gap:var(--e5)}
  .hoy-cols > .hoy-grupo{break-inside:avoid;margin:0 0 2rem}
  /* Con el reparto hecho a mano (columnas.js) son dos columnas de verdad, y
     los bloques van al mazo mas corto en vez de respetar el orden: es lo que
     deja las dos patas terminando a la misma altura. */
  .hoy-cols.col-js{columns:auto;display:grid;grid-template-columns:1fr 1fr;
    gap:0 var(--e4);align-items:start}
  .hoy-col{min-width:0}
  .hoy-col > .hoy-grupo{margin:0 0 2rem}
}

/* ==================================================== moverse como app
   La barra de abajo flota como una pildora y se achica al scrollear para
   abajo; entre pantallas hay un fundido en vez del parpadeo blanco. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
@media (max-width:900px){
  .barra-app{
    left:18px;right:18px;bottom:max(12px,env(safe-area-inset-bottom));
    border:1px solid var(--borde);border-radius:31px;
    background:color-mix(in srgb,var(--sup) 92%,transparent);
    backdrop-filter:saturate(180%) blur(18px);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    box-shadow:0 10px 30px -12px rgba(11,11,15,.35);
    padding:0 4px;height:62px;
    transition:transform .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1);
  }
  .barra-app.chica{height:48px;transform:scale(.94) translateY(6px)}
  .barra-app.chica .barra-app-item span{opacity:0;height:0}
  .barra-app-item{min-height:0;height:100%;border-radius:20px;gap:3px}
  .barra-app-item span{transition:opacity .2s;height:13px;overflow:hidden}
  .barra-app-item.on{color:var(--accion-viva);box-shadow:none;
    background:var(--accion-piso);margin:6px 2px}
  .barra-app-item:active{transform:scale(.94)}
  body.con-rail .lienzo{
    padding-bottom:calc(74px + env(safe-area-inset-bottom) + var(--e4));
  }
}
@media (prefers-reduced-motion:reduce){
  .barra-app{transition:none}
}

/* ==================================================== LA PUERTA (fase 1)
   El Empleado contandote el dia, en el idioma de iOS. Se define aca, en UNA
   pantalla, para reusarlo despues en las que sobrevivan a la poda: lista
   agrupada sobre un piso mas oscuro que la tarjeta, el separador arrancando
   donde arranca el texto, chrome translucido con el contenido pasando por
   debajo, y respuesta al APRETAR y no al soltar.

   El piso y la tarjeta son dos tokens propios porque en el tema claro
   `--fondo` y `--sup` son los dos blancos: sin un piso mas gris, la lista
   agrupada se pierde y quedan renglones flotando. */
.pu{--pu-piso:var(--fondo); --pu-tarj:var(--sup);
    background:var(--pu-piso);min-height:100dvh;
    display:flex;flex-direction:column}
[data-tema="claro"] .pu{--pu-piso:var(--sup-2)}

.pu-nav{position:sticky;top:0;z-index:9;display:flex;align-items:center;
  gap:var(--e2);height:52px;padding:0 var(--e4);
  background:color-mix(in srgb, var(--pu-piso) 78%, transparent);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%)}
/* Un degrade en vez de un filete: el contenido se desvanece contra la barra
   en lugar de cortarse contra una linea dura. */
.pu-nav::after{content:'';position:absolute;left:0;right:0;top:100%;height:14px;
  background:linear-gradient(color-mix(in srgb, var(--pu-piso) 78%, transparent),
                             transparent);pointer-events:none}
.pu-sv{font-weight:800;font-size:.8125rem;letter-spacing:.06em;
  color:var(--sodio)}
.pu-est{flex:1;min-width:0;font-size:.8125rem;font-weight:500;
  color:var(--tinta-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pu-led{width:7px;height:7px;border-radius:99px;background:var(--vivo);
  box-shadow:0 0 0 3px var(--vivo-piso);flex:none}

/* El colchon de abajo tiene que superar a la barra de hablar ENTERA —los
   atajos, la caja y el area segura del iPhone: unos 147 px en un telefono—
   porque es fija y el contenido le pasa por debajo. Con 7rem las dos puertas
   quedaban tapadas 35 px y no habia scroll que las descubriera. */
.pu-hoja{flex:1;width:100%;max-width:36rem;margin:0 auto;
  padding:var(--e3) var(--e4) calc(11rem + env(safe-area-inset-bottom))}

.pu-sello{margin:var(--e4) 0 var(--e1);font-size:.75rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-3)}
/* Tracking negativo porque es grande: a este tamano las letras se leen
   demasiado separadas si se deja el de un parrafo. */
.pu-gigante{margin:0;font-family:var(--f-num);font-size:clamp(2.4rem,9vw,3.2rem);
  font-weight:700;letter-spacing:-.035em;line-height:1.02;
  font-variant-numeric:tabular-nums}
.pu-titular{margin:var(--e2) 0 0;font-size:1.35rem;font-weight:700;
  letter-spacing:-.02em;line-height:1.2}
.pu-pie{margin:var(--e2) 0 var(--e4);color:var(--tinta-2);font-size:.9375rem}
.pu-pie b{font-weight:600}
.pu-sube{color:var(--ok)} .pu-baja{color:var(--mal)}

.pu-mitades{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:var(--e2);margin:0 0 var(--e5)}
.pu-mitades div{background:var(--pu-tarj);border-radius:14px;
  padding:var(--e3) var(--e4);min-width:0}
.pu-mitades i{font-style:normal;display:block;font-size:.75rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-3)}
.pu-mitades b{display:block;margin-top:2px;font-size:1.05rem;font-weight:600;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.pu-rot{margin:var(--e5) 0 var(--e2);padding-left:var(--e4);font-size:.75rem;
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinta-3)}
.pu-grupo{background:var(--pu-tarj);border-radius:14px;overflow:hidden}
.pu-ren{display:flex;align-items:center;gap:var(--e3);
  padding:var(--e3) var(--e4);text-decoration:none;color:inherit;
  position:relative}
.pu-ren:active{background:var(--sup-2)}
/* El separador arranca donde arranca el texto, no de borde a borde. */
.pu-ren + .pu-ren::before{content:'';position:absolute;top:0;left:var(--e4);
  right:0;height:1px;background:var(--borde)}
/* ESTO ESTA MAL, al lado del renglon. Va afuera del enlace y no adentro: un
   boton dentro de un <a> no es HTML valido y el toque se lo comeria el
   enlace. Por eso el renglon que se puede corregir viaja envuelto en
   `.pu-fila`, que se queda con el separador. Apagado a proposito: es un
   gesto para el que ya vio un error, no una pregunta en cada renglon. */
.pu-fila{display:flex;align-items:center;position:relative}
.pu-fila .pu-ren{flex:1;min-width:0}
.pu-fila + .pu-fila::before{content:'';position:absolute;top:0;
  left:var(--e4);right:0;height:1px;background:var(--borde)}
.pu-mal{flex:none;background:none;border:0;cursor:pointer;
  padding:var(--e3) var(--e4) var(--e3) var(--e2);
  font-size:.75rem;color:var(--tinta-3);white-space:nowrap}
.pu-mal:disabled{cursor:default;color:var(--ok)}
.pu-pedir{color:var(--accion);font-weight:600;text-decoration:none}
.pu-txt{flex:1;min-width:0;font-size:.9375rem;line-height:1.4}
.pu-txt b{font-weight:600}
.pu-txt span{display:block;margin-top:1px;font-size:.8125rem;
  color:var(--tinta-2)}
.pu-num{font-size:.9375rem;font-weight:600;white-space:nowrap;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pu-sin{font-weight:500;font-size:.8125rem;color:var(--tinta-3)}
/* El chevron de iOS, dibujado con dos filetes: sin imagen que bajar y
   creciendo con la letra si el dueno agranda el texto del telefono. */
.pu-chev{flex:none;width:9px;height:9px;margin-right:2px;
  border:2px solid var(--tinta-3);border-left:0;border-bottom:0;
  transform:rotate(45deg);opacity:.6}
.pu-pip{width:8px;height:8px;border-radius:99px;flex:none;
  background:var(--tinta-3)}
.pu-pip.alerta{background:var(--alerta)} .pu-pip.mal{background:var(--mal)}
.pu-plano .pu-txt{color:var(--tinta-2);font-size:.8125rem}
.pu-calma{margin:var(--e4) 0 0;color:var(--tinta-2);font-size:.9375rem}
.pu-nota{margin:var(--e5) 0 0;color:var(--tinta-3);font-size:.8125rem;
  line-height:1.5}


/* LAS DOS PUERTAS. Al pie de la puerta, y no arriba: primero SADIA cuenta el
   dia y recien despues se elige a donde bajar. Son dos y no un menu de ocho:
   Vender —que se vende, a quien y a que precio— y Administrar —los turnos,
   las cuentas, la gente, el mes y los papeles—. Abajo hay una sola cabeza.
   `auto-fit` con minimo en rem las deja lado a lado hasta en un telefono de
   375 px y las apila sola si el texto crece. */
.pu-puertas{display:grid;gap:var(--e2);margin:var(--e5) 0 0;
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
.pu-puerta{display:block;background:var(--pu-tarj);border-radius:14px;
  padding:var(--e4);text-decoration:none;color:inherit}
.pu-puerta:active{background:var(--sup-2)}
.pu-puerta b{display:block;font-size:1rem;font-weight:700;color:var(--tinta)}
.pu-puerta span{display:block;margin-top:3px;font-size:.8125rem;
  line-height:1.4;color:var(--tinta-2)}

/* La barra de hablar: fija abajo, translucida, el contenido pasa por debajo.
   El padding de abajo suma el area segura del iPhone para que la caja no
   quede debajo de la barrita del gesto. */
.pu-hablar{position:fixed;left:0;right:0;bottom:0;z-index:9;
  padding:var(--e2) var(--e3) calc(var(--e4) + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--pu-piso) 80%, transparent);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%)}
.pu-hablar::before{content:'';position:absolute;left:0;right:0;bottom:100%;
  height:16px;pointer-events:none;
  background:linear-gradient(transparent,
                             color-mix(in srgb, var(--pu-piso) 80%, transparent))}
.pu-hablar > *{max-width:36rem;margin-left:auto;margin-right:auto}
.pu-sug{display:flex;gap:var(--e2);overflow-x:auto;margin-bottom:var(--e2);
  padding:0 var(--e1) var(--e1);scrollbar-width:none}
.pu-sug::-webkit-scrollbar{height:0}
.pu-sug button{white-space:nowrap;border:1px solid var(--borde);
  background:var(--pu-tarj);color:var(--accion);border-radius:999px;
  padding:var(--e2) var(--e3);font:500 .8125rem/1.3 var(--f-ui);cursor:pointer;
  transition:transform .12s ease-out}
.pu-sug button:active{transform:scale(.95)}
.pu-caja{display:flex;gap:var(--e2);align-items:center;
  background:var(--pu-tarj);border:1px solid var(--borde);border-radius:999px;
  padding:5px 5px 5px var(--e4)}
.pu-caja input{flex:1;min-width:0;background:none;border:0;color:var(--tinta);
  font:400 .9375rem/1.4 var(--f-ui);outline:none}
.pu-caja input::placeholder{color:var(--tinta-3)}
.pu-caja button{flex:none;width:33px;height:33px;border:0;border-radius:99px;
  background:var(--accion);color:var(--sobre-color);font-size:1rem;
  font-weight:700;line-height:1;cursor:pointer;
  transition:transform .12s ease-out}
.pu-caja button:active{transform:scale(.9)}

/* En la puerta el chat ocupa el ancho: es la mitad de para que se entra, no
   un globito en una esquina. */
body.puerta #chat-panel{left:0;right:0;bottom:0;top:auto;width:auto;
  max-width:none;max-height:88dvh;border-radius:22px 22px 0 0}

@media (prefers-reduced-transparency: reduce){
  .pu-nav,.pu-hablar{background:var(--pu-piso);backdrop-filter:none;
    -webkit-backdrop-filter:none}
  .pu-nav::after,.pu-hablar::before{display:none}
}
@media (prefers-reduced-motion: reduce){
  .pu-sug button,.pu-caja button{transition:none}
}

/* El microfono de la puerta. Va sin fondo: el boton lleno es el de enviar, y
   dos botones llenos uno al lado del otro no dicen cual es el que manda. */
.pu-caja .pu-voz{width:33px;height:33px;display:inline-flex;
  align-items:center;justify-content:center;padding:0;
  background:transparent;color:var(--tinta-3)}
.pu-caja .pu-voz.escuchando{background:var(--mal);color:var(--sobre-color);
  animation:pu-late 1.4s infinite ease-in-out}
@keyframes pu-late{50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){
  .pu-caja .pu-voz.escuchando{animation:none}
}

/* ============================================= LA PUERTA EN LA COMPUTADORA

   En el telefono la puerta es una hoja sola con la barra de hablar abajo: ahi
   funciona y no se toca nada. En una pantalla grande sobraba la mitad del
   vidrio, y lo que sobraba era justo lo que el dueno mas usa —hablar—, metido
   en un globito de 400 px. En la computadora la puerta se parte de verdad: el
   reporte a la izquierda y LA CONVERSACION plantada a la derecha, abierta de
   arriba abajo, como el chat que el dueno ya usa todos los dias.

   Dos escalones a proposito y no uno. A los 1000 px entra el chat al costado
   pero el reporte sigue en una sola columna: partirlo en dos cuando a cada
   lado le quedan 18 rem deja renglones de cuatro palabras, que se lee peor
   que una columna ancha. Recien a los 1360 px, cuando cada mitad respira, el
   reporte se parte. */
@media (min-width:1000px){
  /* El ancho del muelle lo lleva el body: lo usan el panel y el hueco que le
     deja la hoja, y si se escriben por separado se separan al primer ajuste y
     uno le tapa el reporte al otro. */
  body.con-sadia{--pu-muelle:clamp(22rem,26vw,27rem)}
  body.con-sadia .pu{padding-right:var(--pu-muelle)}
  /* Sin la barra fija abajo, el colchon del pie no tiene nada que esquivar. */
  body.con-sadia .pu-hoja{max-width:44rem;
    padding-bottom:calc(var(--e6) + env(safe-area-inset-bottom))}
  /* La barra de hablar se va: la caja del panel es la misma conversacion, y
     dos cajas para lo mismo en la misma pantalla es una de mas. */
  body.con-sadia .pu-hablar{display:none}

  /* El chat deja de ser un globito. El `[hidden]` se pisa a proposito: asi la
     conversacion esta abierta antes de que corra un solo script, y si chat.js
     tarda o no llega, la pantalla igual se ve entera. */
  body.con-sadia #chat-panel,
  body.con-sadia #chat-panel[hidden]{
    display:flex;position:fixed;top:0;right:0;bottom:0;left:auto;
    width:var(--pu-muelle);max-width:none;height:auto;max-height:none;
    border:0;border-left:1px solid var(--borde);border-radius:0;box-shadow:none}
  /* No hay cruz: aca el chat no se cierra, es la mitad de para que se entra. */
  body.con-sadia .chat-cerrar{display:none}
}

@media (min-width:1360px){
  body.puerta .pu-hoja{max-width:58rem}
  /* La cima se queda del ancho de UNA columna aunque la hoja se ensanche. El
     numero grande no necesita mas, y estirar la tarjeta de Playa a lo ancho
     de la pantalla deja una cifra chiquita flotando en un cajon vacio. El
     renglon que la explica tampoco quiere 110 caracteres de largo. */
  .pu-cima{max-width:34rem}
  .pu-nota{max-width:34rem}
  /* Por defecto el cuerpo se queda del ancho de la cima. Se parte en dos
     RECIEN cuando hay al menos dos secciones (`.pu-sec ~ .pu-sec`): un dia
     tranquilo trae una sola, y con `columns` puesto siempre esa unica lista
     quedaba angosta en la izquierda con media pantalla vacia al lado. El
     navegador que no entienda `:has` se queda con la columna unica, que es
     exactamente lo que se ve en el telefono. */
  .pu-cuerpo{max-width:34rem}
  /* El alto lo equilibra el navegador solo. Cada seccion viaja entera: el
     rotulo no puede quedar en una columna con su lista en la otra. */
  .pu-cuerpo:has(.pu-sec ~ .pu-sec){max-width:none;columns:2;
    column-gap:var(--e5)}
  /* El aire pasa a ser el margen de abajo de cada seccion y no el de arriba
     del rotulo: un margen arriba se pierde o se respeta segun donde caiga el
     corte de columna, y la de la derecha nace corrida. */
  .pu-cuerpo .pu-rot{margin-top:0}
  .pu-sec{margin:0 0 var(--e5);break-inside:avoid;-webkit-column-break-inside:avoid}
}

/* ================================================== VENDER: el catalogo
   La gondola como lista de publicaciones de un panel de vendedor. La forma
   sale de mirar Mercado Libre, Amazon y Shopify: buscador y filtros arriba,
   una fila por producto con su numero al lado, y al abrir una fila su ficha
   con un numero grande, la variacion contra el periodo anterior y UNA linea
   en el tiempo. */

/* la barra de trabajo: buscar y filtrar */
.vd-barra{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center;
      padding:0 0 var(--e3);border-bottom:1px solid var(--borde);
      margin-bottom:var(--e3)}
.vd-buscar{flex:1 1 260px;display:flex;align-items:center;gap:var(--e2);
      background:var(--sup-2);border:1px solid var(--borde);
      border-radius:var(--r2);padding:6px 6px 6px 12px;margin:0}
.vd-buscar label{font-size:var(--t-apoyo);color:var(--tinta-3);margin:0;
      font-weight:400}
.vd-buscar input{flex:1;min-width:0;background:none;border:0;
      color:var(--tinta);font:inherit;font-size:var(--t-apoyo);outline:none}
.vd-filtros{display:flex;flex-wrap:wrap;gap:6px}
.vd-filtro{background:var(--sup-2);border:1px solid var(--borde);
      border-radius:999px;padding:6px 12px;font-size:var(--t-menor);
      color:var(--tinta-2);white-space:nowrap;text-decoration:none}
@media (hover:hover){.vd-filtro:hover{border-color:var(--borde-2)}}
.vd-filtro b{color:var(--tinta-3);font-weight:600;margin-left:5px}
.vd-filtro.on{background:var(--accion-piso);border-color:var(--accion);
      color:var(--accion-viva);font-weight:600}
.vd-filtro.on b{color:var(--accion-viva)}

/* la fila del catalogo. El renglon entero es el enlace que abre la ficha:
   un blanco de 30 px de alto es mas facil de acertar con el pulgar que un
   boton de 30 px de ancho al final de la fila. */
.reja .vd-prod{display:flex;flex-direction:column;gap:3px;min-width:0;
      align-items:flex-start;text-decoration:none;color:inherit}
.reja .vd-prod b{font-weight:600}
@media (hover:hover){.reja .vd-prod:hover b{color:var(--accion-viva)}}
.reja .vd-prod .art{font-size:var(--t-micro);color:var(--tinta-3);
      font-family:var(--f-mono)}
/* Pausado: apagado, no borrado. Se sigue leyendo porque el duenio tiene que
   poder encontrarlo para volver a prenderlo. */
.reja tr.vd-pausado td{opacity:.55}
.reja tr.vd-pausado .vd-prod b{text-decoration:line-through}

/* en cuantos dias se acaba */
.vd-dias{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.vd-dias-b{width:46px;height:5px;border-radius:3px;background:var(--sup-3);
      overflow:hidden;flex:none}
.vd-dias-b i{display:block;height:100%;background:var(--ok)}
.vd-dias-b i.bajo{background:var(--alerta)}
.vd-dias-b i.critico{background:var(--mal)}

/* La ficha: un panel propio ARRIBA de la tabla, no una fila adentro.
   Adentro quedaba atrapada en el scroll horizontal de la tabla y en un
   telefono el grafico y el formulario se leian de costado. */
.vd-ficha{background:var(--sup-2);border:1px solid var(--borde);
      border-top:2px solid var(--accion);border-radius:var(--r2);
      margin-bottom:var(--e4)}
.vd-ficha-cab{display:flex;align-items:flex-start;gap:var(--e3);
      justify-content:space-between;padding:var(--e3) var(--e4);
      border-bottom:1px solid var(--borde)}
.vd-ficha-in{padding:var(--e4);display:grid;gap:var(--e5);
      grid-template-columns:minmax(0,1fr) minmax(280px,340px)}
/* La fila abierta se marca en la lista para no perderle el lugar. */
.reja tr.vd-abierta td{background:var(--accion-piso)}
.vd-arriba{margin-top:0}
.vd-ficha h4{margin:0 0 var(--e2);font-size:var(--t-menor);letter-spacing:.09em;
      text-transform:uppercase;color:var(--tinta-3);font-weight:600}

/* el numero grande + la variacion, la formula de los paneles de vendedor */
.vd-cif{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap}
.vd-cif .n{font:600 var(--t-h1)/1 var(--f-num);
      font-variant-numeric:tabular-nums;letter-spacing:var(--din-track)}
.vd-cif .u{font-size:var(--t-apoyo);color:var(--tinta-2)}
.vd-cif .ritmo{margin-bottom:0}
.vd-sub{margin:6px 0 0;font-size:var(--t-menor);color:var(--tinta-2)}

/* la linea. El eje NO arranca en cero a proposito: ocho semanas de 542 a 668
   arrancando en cero se ven todas iguales. Lo que sostiene la lectura es la
   punteada del promedio anterior y los numeros escritos. */
.vd-graf{width:100%;height:auto;display:block;margin-top:var(--e4)}
.vd-graf .area{fill:var(--accion-piso)}
.vd-graf .linea{fill:none;stroke:var(--accion);stroke-width:2;
      stroke-linejoin:round;stroke-linecap:round;
      vector-effect:non-scaling-stroke}
.vd-graf .linea.antes{stroke:var(--borde-2)}
/* La muestra del pie comparte la regla con la raya del dibujo a proposito:
   si la muestra se dibujara distinto de la linea que explica, explicaria
   otra cosa. */
.vd-graf .guia,
.vd-muestra line{stroke:var(--borde-2);stroke-width:1;stroke-dasharray:4 4;
      vector-effect:non-scaling-stroke}
.vd-graf .corte{stroke:var(--borde-2);stroke-width:1;
      vector-effect:non-scaling-stroke}
.vd-graf .pt{fill:var(--accion)}
.vd-graf .pt.antes{fill:var(--borde-2)}
.vd-graf text{font-family:var(--f-num);fill:var(--tinta-3);font-size:11px}
.vd-graf text.rot{font-size:10px;letter-spacing:.08em;font-weight:600}
.vd-graf text.dato{fill:var(--tinta);font-weight:600;font-size:12px}

/* lo que escribe el duenio */
.vd-campo{margin-bottom:var(--e3)}
.vd-campo label{display:block;font-size:var(--t-menor);color:var(--tinta-2);
      margin-bottom:4px;font-weight:400}
.vd-campo input{width:100%;background:var(--sup);border:1px solid var(--borde-2);
      border-radius:var(--r2);padding:8px 10px;color:var(--tinta);
      font:inherit;font-size:var(--t-apoyo)}
.vd-marcas{display:flex;flex-wrap:wrap;gap:6px;margin:var(--e2) 0 var(--e4)}
.vd-marca{display:inline-flex;align-items:center;cursor:pointer;margin:0}
/* El radio se esconde pero NO con display:none: asi se sigue pudiendo llegar
   con el teclado, y el foco se ve en el chip. */
.vd-marca input{position:absolute;opacity:0;width:0;height:0}
.vd-marca .chip{opacity:.5;border:1px solid transparent}
.vd-marca input:checked + .chip{opacity:1;border-color:currentColor;
      font-weight:600}
.vd-marca input:focus-visible + .chip{outline:2px solid var(--accion-viva);
      outline-offset:2px}
.vd-ficha-pie{display:flex;gap:var(--e2);flex-wrap:wrap;align-items:center;
      margin-bottom:var(--e2)}

@media (max-width:1080px){
  .vd-ficha-in{grid-template-columns:1fr}
}

/* El rotulo de la raya punteada va DEBAJO del dibujo, con su muestra al
   lado. Adentro se pisaba con el ultimo valor cada vez que la ultima semana
   caia cerca del promedio, y no se leia ninguno de los dos. */
.vd-pie{display:flex;align-items:center;gap:8px;margin-top:6px}
.vd-muestra{width:24px;height:6px;flex:none;overflow:visible}

/* La sugerencia de SADIA adentro del reporte de la puerta.
   Lo que SADIA OPINA no se ve NUNCA igual que lo que el sistema MIDIO: piso
   lila y firmado por ella. Es la regla de por vida del rediseño, y es lo
   unico que separa un hecho de una recomendacion cuando los dos estan en la
   misma pantalla, uno abajo del otro. */
.pu-sadia{background:var(--sadia-piso);border:1px solid var(--sadia);
        border-radius:var(--r-grupo, 14px);padding:var(--e3) var(--e4);
        margin-top:var(--e2)}
.pu-sadia b{color:var(--sadia);font-size:var(--t-micro);letter-spacing:.08em;
          text-transform:uppercase;display:block;margin-bottom:4px}
.pu-sadia p{margin:0;font-size:var(--t-apoyo);line-height:1.5;
          color:var(--tinta)}

/* ========================================================== TACTO / APRETON
   Apple, "Designing Fluid Interfaces": antes que la animacion esta la
   RESPUESTA. En el telefono no existe el hover, asi que hasta aca el sistema
   se quedaba mudo entre que el dueno tocaba y que cargaba la pantalla
   siguiente: medio segundo sin ninguna senal de que el toque entro. La
   contestacion va en el APRETON, no en el soltar.

   Va por ROL y no por lista de clases. En el sistema hay 510 cosas que se
   tocan —262 enlaces, 133 botones, 58 desplegables, 57 etiquetas— y la mitad
   no tiene clase propia: una lista se queda vieja el dia que alguien suma una
   pantalla. Asi contesta todo, lo de hoy y lo que venga.

   Tres formas segun QUE se toca, porque escalar una fila de punta a punta
   deja la letra borrosa y encender el fondo de un enlace de texto no se ve:
     - el enlace de texto se APAGA (es lo que hace el telefono con un boton
       de texto),
     - lo angosto con caja (boton, chip, solapa) se HUNDE,
     - la tarjeta y la fila de lista se ILUMINAN.
   Nada de esto usa :where() a proposito: tiene que ganarle al hover cuando
   hay mouse, y para eso necesita el mismo peso que la regla de hover.
   ========================================================================= */

/* El recuadro gris que dibuja solo el celular encima de lo que se toca pelea
   con el nuestro. Y manipulation le saca el cuarto de segundo que el
   navegador espera por las dudas de que sea un doble toque para agrandar:
   eso es latencia pura en el camino del dedo. */
a,button,summary,label,[role=button],input[type=submit],input[type=button]{
  -webkit-tap-highlight-color:transparent; touch-action:manipulation }

/* PISO: todo lo que se toca contesta, tenga clase o no. */
a:active,summary:active,label[for]:active{ opacity:.6 }
label:has(input):active{ opacity:.6 }   /* aparte: si :has no existe, que se
                                           caiga esta sola y no la de arriba */
[role=button]:active,input[type=submit]:active,
input[type=button]:active{ transform:scale(var(--apreton)) }

/* 1. Lo angosto con caja se hunde en vez de apagarse. */
.btn:active,a.btn:active,a.btn-sec:active,a.btn-consolidado:active,
.solapa:active,.ancla-b:not(:disabled):active,.ancla-hoy:active,
a.anio-chip:active,a.pl-atajo:active,.vd-filtro:active,.mas:active,
.tarj-x:active,.emp-mas:active,.hoy-k-ir:active,.top-marca:active,
.topbar-menu:active,.rail-menor:active,.cabecera-nav a:active,
.ctl-anydesk:active,.pem-instalar-si:active,.mg-tab:active,.bajar-mes:active,
.bajar-anio:active,.btn-bajar-mes:active,.emp-cargar:active,.cta:active,
.lp-btn:active,.lp-btn-lleno:active,.lp-btn-fantasma:active,.ar-link:active,
.chat-cerrar:active,.chat-voz:active,.ctl-ir:active,.pu-plano:active,
.vd-marca:active,.pl-fl:active,.rail-cerrar:active,.rail-esc:active,
.saltar:active{ transform:scale(var(--apreton)); opacity:1 }

/* 2. La tarjeta se hunde apenas y se enciende. */
.aviso:active,.emp-turno:active,.hoy-i:active,.mosaico:active,
.cd-boton:active,.emp-cc-uno:active,.demo-pedir:active,.demo-form-op:active,
.drop:active,.sp-zona:active,.sp-zona-chica:active,.cam-campo:active,
.gf-campo:active,.emp-dice:active,.emp-calma:active{
  transform:scale(var(--apreton-tarjeta)); background:var(--sup-3); opacity:1 }

/* 3. La fila de lista solo se enciende. */
a.emp-fila:active,a.hoy-tile:active,a.hoy-ren:active,.rail a:active,
.migas a:active,.volver a:active,.archivo-acciones a:active,
.cd-v-lista a:active,.opt label:active,.rubro>summary:active,
.ci>summary:active,.deu>summary:active,.faltan>summary:active,
.porque>summary:active,.renom>summary:active,.hoy-d>summary:active,
.hoy-q summary:active,.campana summary:active,.rail-link:active,
.mes-carpeta:active,.emp-q:active,.mov:active,.desp>summary:active,
.cad-falta summary:active,.acc-ver summary:active,
.avisos-resto summary:active{ background:var(--sup-3); opacity:1 }

/* El apreton entra de golpe (eso es la respuesta) y afloja al soltar. Va con
   :where() para que lo que ya tenia su propia transicion se quede con la
   suya: esto es el piso, no una orden. */
:where(a,button,summary,label,[role=button]){
  transition:transform .18s ease-out, background .18s ease-out, opacity .18s ease-out }
/* Y esta es la mitad que importa. Al APRETAR la duracion es CERO. Con una
   transicion pareja el hundido tardaba una decima de segundo en llegar, y un
   toque corto —que es como se toca de verdad— se soltaba antes de que se
   viera nada: el sistema contestaba tarde, que para Apple es lo mismo que no
   contestar. Entra de golpe y AFLOJA despacio. Medido: sin esto, un toque
   normal dejaba el hundido en 1,00 (o sea, invisible). */
:where(a,button,summary,label,[role=button]):active{ transition-duration:0s }

/* Con movimiento reducido el apreton sigue contestando: se apaga el hundido,
   no la senal. Apple: menos movimiento no es menos respuesta. Una sola linea
   porque el hundido es una variable y no una lista de clases: el dia que
   alguien agregue un boton nuevo, esto lo cubre solo. */
@media (prefers-reduced-motion:reduce){
  :root{ --apreton:1; --apreton-tarjeta:1 }
}

/* =================================================== MENOS VIDRIO / MAS FILO
   Apple pide responder a TRES pedidos del sistema, no a uno. El de movimiento
   ya estaba en toda la hoja; faltaban los otros dos, y el vidrio de la chapa
   de arriba, de la columna y de la barra del celular no los escuchaba: solo
   los escuchaba la demo publica.

   Sin transparencia: la superficie se vuelve solida. El blur deja de ser
   decoracion y pasa a ser un problema de lectura para quien lo apago.
   Mas contraste: ademas del fondo solido, el borde se planta. */
@media (prefers-reduced-transparency: reduce){
  .top,.cabecera,.rail,.barra-app{
    background:var(--sup);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
}
@media (prefers-contrast: more){
  .top,.cabecera,.rail,.barra-app,.pu-nav,.pu-hablar{
    background:var(--sup);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    border-color:var(--tinta-2);
  }
  /* El rotulo de 11 px es lo primero que se pierde: sube a tinta plena. */
  .rot,.hoy-rot,.pu-sadia b{color:var(--tinta)}
  /* Un borde de un pixel apenas insinuado deja de alcanzar para separar. */
  .bloque,.tarjeta,.mosaico,.aviso,.hoy-i,.emp-turno,.cd-boton{
    border-color:var(--borde-2)
  }
}

/* ===================================================== EL BLANCO DEL DEDO
   Apple: un blanco que se toca con el dedo no baja de 44 px. Medido en un
   telefono de 375 sobre las 31 pantallas del sistema, habia ocho controles
   por debajo, y los dos peores son de los que mas se usan: la X que cierra
   el menu (34 x 26) y las tres rayas que lo abren (38 x 38). Errar el toque
   en el boton de cerrar es de las cosas que mas hacen sentir barata una app.

   Va con (pointer:coarse) a proposito: con un mouse un renglon de 38 px esta
   perfecto y agrandarlo estiraria el sistema entero sin que nadie lo pida.
   Esto es para el dedo, y solo para el dedo.
   ======================================================================== */
@media (pointer:coarse){
  /* Los que ya son caja centrada: crecen y el contenido queda en el medio.
     Un <button> centra su contenido solo, asi que no hace falta tocarle el
     display —y no hay que tocarlo: el display de estos dos lo maneja la
     media query del celular y pisarlo aca haria aparecer la X en una tablet
     ancha, donde el menu no es un cajon. */
  button,.rail a,.tema button,.btn,a.btn,.reja .vd-prod,
  .ancla-b,.ancla-hoy,.emp-q,.mov{ min-height:44px }
  /* La X de cerrar el menu SI puede engordar: esta sola en la cabecera del
     cajon. Las tres rayas NO: cada pixel que se toman se lo sacan al titulo
     de la chapa, que ya venia corto —medido, le robaba 6 de 34—. A ese se le
     da la zona sensible sin tocarle el dibujo. */
  .rail-cerrar{ width:44px; height:44px; padding:0; margin-right:-9px }
  .topbar-menu,.hoy-ico{ position:relative }
  .topbar-menu::after,.hoy-ico::after{ content:''; position:absolute;
    left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%) }

  /* El chip no es caja centrada: se lo vuelve caja, si no crecer le tira el
     texto contra el techo. */
  .vd-filtro,.solapa,a.anio-chip,a.pl-atajo,.mg-tab{
    display:inline-flex; align-items:center; min-height:44px }

  /* Estos van en un renglon con 16 px de hueco al lado: se agranda SOLO la
     zona sensible y el dibujo queda igual. Es lo que hace Apple cuando el
     boton no puede crecer sin desarmar la fila. */
  .rail-menor{ position:relative }
  .rail-menor::after{ content:''; position:absolute; left:-6px; right:-6px;
    top:50%; height:44px; transform:translateY(-50%) }
}

/* ======================================================= LOS BORDES BLANDOS
   Apple: al llegar al final de algo que se desliza, la pagina de atras NO se
   tiene que empezar a mover. Sin esto, el dueno terminaba de bajar el menu
   lateral o el chat y el envion le seguia corriendo la pantalla de abajo:
   suelta el dedo y no sabe donde quedo. overscroll-behavior corta esa cadena
   y de paso apaga el "tirar para recargar" adentro de un panel. */
.rail,.chat-cuerpo,.chat-panel,.campana-panel,.pu-hoja,.tabla-scroll,
.reja-scroll{ overscroll-behavior:contain }

/* ========================================== EL GLOBO NACE DE SU BOTON
   Apple: si algo se abre desde un boton, tiene que salir DE ese boton. El
   panel de avisos aparecia de la nada, entero y de golpe, arriba a la
   derecha: no se leia de donde venia. Ahora crece desde la campana —que esta
   justo en esa esquina— asi que el ojo entiende solo que ese panel es de ese
   boton. Y sale por el mismo camino por el que entro. */
.campana-panel{ transform-origin:top right;
  animation:campana-abre .22s cubic-bezier(.2,.8,.2,1) both }
@keyframes campana-abre{
  from{ opacity:0; transform:scale(.92) translateY(-4px) }
  to  { opacity:1; transform:none }
}
@media (prefers-reduced-motion:reduce){
  .campana-panel{ animation:aparecer .15s ease-out both }
}

/* ============================================== LA LETRA CHICA, RESPIRADA
   Apple: el espaciado entre letras es propio de cada tamano, nunca uno solo
   para todos. La letra grande quiere ir apretada —ya lo estaba, con
   --din-track— pero la chica quiere lo contrario y eso faltaba: 11 px con
   espaciado cero se empasta. Son 700 rotulos y cifras chicas en el sistema.
   Un pelo de aire y se leen; no se mueve ningun ancho porque son numeros de
   ancho fijo y rotulos cortos. */
.art,.cifra,.rnum,.ga-sub,.sa-mil,.sa-sub,.rail-teclas,.deu-pct,.cam-nro,
.cifra-sig,.cifra-unid,.cd-sub,.ga-casi,.pp,.sp-chip,.chat-nota,.hoy-rot em{
  letter-spacing:.012em }

/* ------- segunda vuelta del blanco del dedo: los que no pueden engordar
   Un titulo con su enlace al costado, el "?" de 20 px, el rotulo de la PC:
   agrandarles el dibujo desarma el renglon donde viven. Asi que se agranda
   SOLO la zona sensible y la pantalla queda exactamente igual. Es la receta
   de Apple: el blanco del dedo y el dibujo no tienen por que medir lo mismo.
   Cuidado: acá NO se puede usar ::after en cualquier desplegable —medio
   sistema lo usa para dibujar la flechita— por eso el "?" va nombrado y no
   todos los summary. */
@media (pointer:coarse){
  .campana summary{ width:44px; height:44px }
  .ancla-b{ min-width:44px }

  .hoy-grupo > header > a,.enlace a,.sello,.ctl-ir,.linklike,
  .hoy-q > summary,.cd-falta > summary,.renom > summary{ position:relative }
  .hoy-grupo > header > a::after,.enlace a::after,.sello::after,
  .ctl-ir::after,.linklike::after,.hoy-q > summary::after,
  .cd-falta > summary::after,.renom > summary::after{
    content:''; position:absolute; left:50%; top:50%;
    width:max(100%,44px); height:44px; transform:translate(-50%,-50%) }
}

/* ------- y la parte publica, que es la primera que toca un cliente nuevo
   La pantalla de entrar tenia cuatro controles cortos: la marca de arriba a
   la izquierda (28 x 20), los dos del menu (38 y 40 de alto) y el ojo que
   muestra la contrasena (35 de ancho). Al ojo se le puede agrandar el dibujo
   porque esta solo adentro del campo; a los otros tres no, asi que crece la
   zona sensible. A los del menu se les estira SOLO el alto: estan a 4 px uno
   del otro y agrandarlos a lo ancho haria que cada uno le robe el toque al
   de al lado. */
@media (pointer:coarse){
  .pw-toggle{ min-width:44px }
  .marca,.cabecera-nav a,.cabecera-nav a.cta{ position:relative }
  .marca::after{ content:''; position:absolute; left:50%; top:50%;
    width:max(100%,44px); height:44px; transform:translate(-50%,-50%) }
  .cabecera-nav a::after{ content:''; position:absolute; left:0; right:0;
    top:50%; height:44px; transform:translateY(-50%) }
}

/* ------- y el boton que mas importa de todo el sistema
   "Quiero esto en mi estacion" es el unico boton de la demostracion que
   convierte a un curioso en un cliente, y en el telefono medía 28 px de
   alto: el mas chico de toda la parte publica. No se le toca el display
   —vive centrado adentro de la cinta de arriba y cambiarselo lo corre— asi
   que crece por relleno, que es lo unico que lo agranda sin moverlo. */
@media (pointer:coarse){
  .demo-pedir{ padding-block:11px }
}

/* ============================ LA CHAPA DE ARRIBA NO CORTA: SE DESVANECE
   El contenido que se iba para arriba terminaba contra un filete de un
   pixel: se CORTA, y se ve el corte. Debajo de una chapa de vidrio Apple no
   pone una linea, pone un desvanecido, y el contenido se apaga contra la
   barra en vez de chocarla. La demo publica ya lo hacia bien (.pu-nav) y el
   sistema no; ahora es lo mismo de los dos lados.

   Va adentro de @supports porque el filete tiene que VOLVER en el navegador
   que no sabe hacer vidrio: ahi la barra es opaca y sin linea no se separa
   de nada. El color del desvanecido es el de la barra, no el de la hoja: si
   no, se ve un escalon justo abajo del vidrio. */
@supports (backdrop-filter: blur(4px)){
  .top,.cabecera{ border-bottom-color:transparent }
  .top::after,.cabecera::after{
    content:''; position:absolute; left:0; right:0; top:100%; height:14px;
    pointer-events:none;
    background:linear-gradient(var(--sup-vidrio), transparent) }
}

/* ------- y en la chapa manda el titulo, no el estado de la PC
   Con el titulo plegado, "Turno 82" entraba en 28 px —o sea, "T…"— porque el
   renglon del estado de la PC no cede nunca y se quedaba con todo el ancho.
   Un titulo cortado en una letra no contesta "donde estoy", que es para lo
   unico que ese titulo existe. Ahora el que no cede es el titulo y el estado
   se corta: el punto de color, que es lo que de verdad se mira, no se corta
   nunca porque no encoge. */
.top .enlace{ min-width:0 }
.top .enlace > a,.top .enlace > span{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
body.titulo-plegado .top-mini{ flex:1 0 auto; max-width:60% }
/* Y el boton de las tres rayas no encoge por nadie: al darle lugar al
   titulo se habia achicado a 34 px, mas chico que antes de todo esto. */
.topbar-menu,.top-marca{ flex:none }

/* ------------------------------------------------------ pie y paginas legales */
.pie-legal .pie-links{ display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--e2) var(--e4); margin-bottom:var(--e3); }
.pie-legal .pie-links a{ color:var(--tinta-2); font-weight:600;
  text-decoration:none; }
.pie-legal .pie-links a:hover{ color:var(--accion-viva); text-decoration:underline; }
.pie-legal p{ margin:0 0 var(--e2); }
.pie-legal .pie-leyenda{ font-size:11px; line-height:1.5; max-width:62ch;
  margin:var(--e3) auto 0; }
.legal-miga{ margin:0 0 var(--e2); font-size:var(--t-menor); }
.legal-miga a{ color:var(--tinta-3); text-decoration:none; }
.legal-miga a:hover{ color:var(--accion-viva); }
.legal-lista{ list-style:none; margin:0; padding:0; }
.legal-lista li{ display:flex; flex-direction:column; gap:2px;
  padding:var(--e3) 0; border-bottom:1px solid var(--borde); }
.legal-lista li:last-child{ border-bottom:0; }
.legal-lista .nota{ margin:0; }
.legal-tabla{ width:100%; border-collapse:collapse; font-size:var(--t-menor);
  display:block; overflow-x:auto; }
.legal-tabla th, .legal-tabla td{ text-align:left; vertical-align:top;
  padding:var(--e2) var(--e3); border-bottom:1px solid var(--borde); }
.legal-tabla th{ color:var(--tinta-2); font-weight:600; white-space:nowrap; }
@media (max-width:600px){
  .legal-tabla, .legal-tabla tbody, .legal-tabla tr, .legal-tabla td{
    display:block; width:100%; }
  .legal-tabla thead{ display:none; }
  .legal-tabla tr{ padding:var(--e3) 0; border-bottom:1px solid var(--borde); }
  .legal-tabla tr:last-child{ border-bottom:0; }
  .legal-tabla td{ border:0; padding:2px 0; }
  .legal-tabla td::before{ content:attr(data-titulo); display:block;
    color:var(--tinta-3); font-size:11px; font-weight:600;
    text-transform:uppercase; letter-spacing:.04em; margin-top:var(--e2); }
  .legal-tabla td:first-child::before{ margin-top:0; }
}
label.reg-acepto{ display:flex; align-items:flex-start; gap:var(--e2);
  font-weight:400; line-height:1.5; }
label.reg-acepto input{ width:auto; flex:none; margin:4px 0 0; }

/* ------------------------------------------- el cartel de aceptar terminos */
.legal-cartel{ display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--e3) var(--e4); margin:0 0 var(--e5); padding:var(--e3) var(--e4);
  border:1px solid var(--borde); border-left:3px solid var(--accion);
  border-radius:var(--r2); background:var(--sup-2); font-size:var(--t-menor);
  line-height:1.5; }
.legal-cartel p{ margin:0; flex:1 1 320px; color:var(--tinta-2); }
.legal-cartel p b{ color:var(--tinta); }
.legal-cartel form{ display:flex; align-items:center; gap:var(--e3);
  margin:0; flex:none; }
.legal-cartel-leer{ color:var(--accion-viva); font-weight:600; }
.legal-cartel button{ margin:0; }
.legal-aceptar{ margin:var(--e4) 0 var(--e2); }
.sd-cuerpo .legal-cartel{ margin:var(--e3) 32px; }
@media (max-width:700px){ .sd-cuerpo .legal-cartel{ margin:var(--e3) 16px; } }