/* PRODUCTOS LEÓN — Ensigna LLC · 30/09/2026
   ═══════════════════════════════════════════════════════════════════════════
   La identidad es la de ENSIGNA, sin excepciones: el morado, el degradé
   rosa → morado → naranja, Figtree y el emblema de burbujas. La vara es la
   interfaz de iCamba y hay que superarla: más profundidad, vidrio de verdad,
   íconos 3D y foto de producto.
   Ningún emoji: todos los íconos chicos son SVG propios; los grandes son
   renders 3D hechos con Higgsfield en los colores de la casa.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Marca Ensigna (valores exactos de colores.js) ── */
  --mor: #8B2FD6;
  --mor-osc: #6D1FB0;
  --mor-claro: #F3E9FD;
  --rosa: #ff2d95;
  --morado: #a12fd6;
  --naranja: #ff8a3d;
  --lila: #a98bfb;
  --grad: linear-gradient(135deg, #ff2d95 0%, #a12fd6 55%, #ff8a3d 100%);
  --grad-suave: linear-gradient(135deg, #a12fd6 0%, #8B2FD6 60%, #6D1FB0 100%);

  /* La familia "noche": las superficies oscuras de la marca */
  --noche: #2b0f4d;
  --noche-2: #1b0a33;
  --noche-3: #12061f;

  --fondo: #f4f0fb;
  --tinta: #241b3d;
  /* Los grises del sistema, un punto más vivos: el gris lavado hacía ver todo
     apagado al lado del morado de la marca. */
  --suave: #6e648f;
  --borde: #e7dff7;
  --blanco: #fff;

  /* Los colores de estado, en su versión viva. Los apagados se perdían contra
     el fondo lila y el sistema parecía desteñido. */
  --ok: #0bab76;
  --ojo: #f97316;
  --mal: #e8192c;

  --r: 12px;
  --r-g: 18px;
  --r-xg: 22px;

  /* Sombras en capas: dan profundidad de verdad, no una mancha gris */
  --s1: 0 1px 2px rgba(40, 20, 80, .05), 0 2px 8px -4px rgba(40, 20, 80, .10);
  --s2: 0 1px 2px rgba(40, 20, 80, .06), 0 10px 26px -14px rgba(40, 20, 80, .35);
  --s3: 0 2px 4px rgba(40, 20, 80, .07), 0 24px 50px -22px rgba(64, 24, 120, .5);
  --s-mor: 0 10px 28px -12px rgba(139, 47, 214, .55);
  /* La sombra profunda de las piezas oscuras en 3D */
  --s-3d: 0 2px 5px rgba(12, 4, 26, .35), 0 18px 34px -16px rgba(12, 4, 26, .75),
          0 42px 72px -38px rgba(80, 28, 150, .9);
}

* { box-sizing: border-box; }

/* Tamaño por defecto de TODOS los íconos: un <svg> suelto sin medidas se dibuja
   a 300×150 y rompe la pantalla (ya pasó). */
svg { width: 18px; height: 18px; flex: none; }
/* OJO: la regla de arriba le gana al width="100%" de un gráfico, porque el CSS
   siempre le gana a los atributos de presentación. Ya aplastó el gráfico a 30 px
   DOS VECES. La solución definitiva son dos candados juntos:
     1) todo gráfico vive dentro de un <div class="viz">, y `.viz svg` le devuelve
        el tamaño (especificidad 0,1,1 contra 0,0,1 de la regla global);
     2) además, las funciones de dibujo escriben el tamaño en el ESTILO INLINE del
        <svg>, que le gana a cualquier hoja de estilo.
   Con los dos, aunque alguien borre esta regla, el gráfico no se aplasta nunca
   más. Si mañana se agrega un gráfico, va dentro de un <div class="viz">. Punto. */
.viz svg { width: auto; height: auto; flex: none; display: block; overflow: visible; }
.emblema { width: auto; height: auto; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  color: var(--tinta);
  font-family: Figtree, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* El fondo no es un gris plano: son halos de la marca muy diluidos. */
body {
  background:
    radial-gradient(900px 500px at 12% -5%, rgba(161, 47, 214, .14), transparent 60%),
    radial-gradient(700px 450px at 95% 8%, rgba(255, 45, 149, .10), transparent 60%),
    radial-gradient(600px 400px at 60% 100%, rgba(255, 138, 61, .07), transparent 62%),
    var(--fondo);
  background-attachment: fixed;
}

button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.025em; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ═══ EL EMBLEMA ════════════════════════════════════════════════════════════
   El logo de la agencia, en vector (marca/emblema.svg copiado como <symbol>).
   Nítido a 20 px y a 200 px, y se puede mover en 3D. */
.marca-ens { display: flex; align-items: center; gap: 11px; }
/* A menos de 34 px las burbujas chicas se juntan y se ve como ruido: 40 es el
   piso en el que todavía se lee el emblema. */
.marca-ens .emblema { width: 40px; height: 33px; }
.marca-ens .palabra {
  font-weight: 900; font-size: 15px; letter-spacing: .13em; line-height: 1;
  color: #fff;
}
.marca-ens .palabra small {
  display: block; font-weight: 800; font-size: 8.5px; letter-spacing: .1em;
  opacity: .55; margin-top: 3px;
}

/* ═══ BOTONES ═══════════════════════════════════════════════════════════════
   Con canto: una línea más oscura abajo que se hunde al apretarlo. Es lo que
   hace que se sienta un botón y no un rectángulo de color. */
.boton {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border: 0; border-radius: var(--r);
  background: var(--mor); color: #fff; font-weight: 800; cursor: pointer;
  letter-spacing: -.01em;
  box-shadow: var(--s-mor), inset 0 1px 0 rgba(255, 255, 255, .25),
              inset 0 -2px 0 rgba(0, 0, 0, .22);
  transition: transform .14s cubic-bezier(.3, 1.4, .5, 1), box-shadow .14s ease, filter .14s ease;
}
/* El brillo que cruza el botón al pasar por encima */
.boton::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  left: -60%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  transition: left .5s cubic-bezier(.2, .9, .3, 1);
}
.boton:hover::after { left: 120%; }
.boton:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(139, 47, 214, .7),
              inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .22);
}
.boton:active {
  transform: translateY(1px);
  box-shadow: var(--s1), inset 0 2px 5px rgba(0, 0, 0, .3);
}
.boton[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; filter: grayscale(.4); }
.boton[disabled]::after { display: none; }

/* El botón principal lleva el degradé de la marca */
.boton.marca { background: var(--grad); background-size: 170% 100%; background-position: 0% 50%; }
.boton.marca:hover { background-position: 100% 50%; }
.boton.ancho { width: 100%; padding: 14px; font-size: 15.5px; }
.boton.suave {
  background: var(--mor-claro); color: var(--mor-osc);
  box-shadow: inset 0 -2px 0 rgba(109, 31, 176, .12);
}
.boton.suave:hover { background: #e9d9fb; box-shadow: var(--s1), inset 0 -2px 0 rgba(109, 31, 176, .12); }
.boton.fantasma {
  background: var(--blanco); color: var(--tinta);
  border: 1.5px solid var(--borde);
  box-shadow: var(--s1), inset 0 -2px 0 rgba(40, 20, 80, .05);
}
.boton.fantasma:hover { border-color: var(--mor); color: var(--mor-osc); }
.boton.chico { padding: 8px 14px; font-size: 13px; border-radius: 10px; }

/* ═══ ENTRADA ═══════════════════════════════════════════════════════════════ */
#entrada {
  position: fixed; inset: 0; z-index: 50;
  display: grid; grid-template-columns: 1.05fr .95fr;
  background: var(--noche-2);
  overflow: hidden;
}

/* Lado izquierdo: la foto del rubro con el tinte de la marca encima */
.entrada-foto {
  position: relative;
  background: var(--noche-2) url("marca/entrada.jpg") center/cover no-repeat;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 48px;
}
.entrada-foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(27, 10, 51, .92) 0%, rgba(27, 10, 51, .55) 45%, rgba(27, 10, 51, .25) 100%),
    linear-gradient(0deg, rgba(27, 10, 51, .9) 0%, transparent 55%);
}
.entrada-foto > * { position: relative; z-index: 1; }
.entrada-foto h2 {
  color: #fff; font-size: 34px; line-height: 1.12; max-width: 12em; margin-bottom: 12px;
}
.entrada-foto p { color: rgba(255, 255, 255, .72); font-size: 15.5px; max-width: 26em; margin: 0; }
.entrada-marcas { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.entrada-marcas span {
  display: inline-flex; align-items: center; gap: 7px;
  color: rgba(255, 255, 255, .82); font-size: 12.5px; font-weight: 700;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14);
  padding: 7px 13px; border-radius: 999px; backdrop-filter: blur(6px);
}
.entrada-marcas svg { width: 15px; height: 15px; color: var(--naranja); }

/* Lado derecho: el formulario, sobre el morado de la casa */
.entrada-form {
  position: relative;
  display: grid; place-items: center; padding: 40px 28px;
  background:
    radial-gradient(800px 500px at 70% 0%, rgba(161, 47, 214, .3), transparent 62%),
    var(--noche);
  perspective: 900px;
}
/* La franja del degradé de la marca, al borde */
.entrada-form::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad);
}

.caja-entrada { width: min(370px, 100%); text-align: center; }

/* El emblema en una medalla de vidrio que flota. El 3D acá es una promesa:
   si la entrada se siente cara, lo que viene después también. */
.medalla {
  position: relative;
  width: 112px; height: 112px; margin: 0 auto 22px;
  display: grid; place-items: center; border-radius: 30px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .2), rgba(161, 47, 214, .16) 55%,
              rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px);
  box-shadow: 0 26px 52px -20px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .35),
              0 0 60px -14px rgba(161, 47, 214, .8);
  transform-style: preserve-3d;
  animation: flotar 7s ease-in-out infinite;
}
/* El reflejo de arriba, como el de un vidrio de verdad */
.medalla::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 4px; height: 38%;
  border-radius: 24px 24px 60% 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent);
  pointer-events: none;
}
.medalla .emblema {
  width: 78px; height: 64px;
  transform: translateZ(28px);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6));
}
@keyframes flotar {
  0%, 100% { transform: rotateX(8deg) rotateY(-9deg) translateY(0); }
  50%      { transform: rotateX(4deg) rotateY(9deg) translateY(-7px); }
}

.caja-entrada h1 { color: #fff; font-size: 27px; margin-bottom: 3px; }
.caja-entrada .sub {
  color: rgba(255, 255, 255, .55); font-size: 13.5px; margin-bottom: 26px;
}
.caja-entrada .sub b {
  display: block; color: var(--naranja); font-size: 11.5px; font-weight: 800;
  letter-spacing: .16em; margin-top: 6px;
}

.campo { text-align: left; margin-bottom: 13px; }
.campo label {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 6px;
}
.campo input, .campo select {
  width: 100%; padding: 13px 15px;
  border: 1.5px solid rgba(255, 255, 255, .14); border-radius: var(--r);
  background: rgba(255, 255, 255, .06); color: #fff; outline: none;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.campo input::placeholder { color: rgba(255, 255, 255, .3); }
.campo input:focus {
  border-color: var(--morado); background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 4px rgba(161, 47, 214, .22), inset 0 2px 5px rgba(0, 0, 0, .18);
}

/* Debajo del botón: lo que hace distinto a este sistema, en dos renglones. */
.pie-entrada {
  display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.pie-entrada span {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255, 255, 255, .45); font-size: 11.5px; font-weight: 700;
}
.pie-entrada svg { width: 13px; height: 13px; color: var(--lila); }

.aviso-error {
  background: rgba(220, 38, 38, .14); color: #ffb4b4;
  border: 1px solid rgba(220, 38, 38, .35);
  padding: 10px 13px; border-radius: var(--r); font-size: 13.5px;
  margin-bottom: 14px; text-align: left;
}

/* ═══ ARMAZÓN ═══════════════════════════════════════════════════════════════ */
#app { display: none; min-height: 100vh; }
#app.visible { display: block; }

.barra {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(180deg, #38145a 0%, var(--noche) 100%);
  color: #fff;
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px; height: 64px;
  box-shadow: 0 10px 30px -18px rgba(20, 6, 40, .9);
}
.barra::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--grad);
}
.barra .negocio {
  padding-left: 15px; margin-left: 3px; border-left: 1px solid rgba(255, 255, 255, .16);
  font-weight: 800; font-size: 15.5px; line-height: 1.2;
}
.barra .negocio small {
  display: block; font-weight: 700; font-size: 11px; opacity: .5; margin-top: 2px;
}
.barra .relleno { flex: 1; }

/* La campana y su bolita. El número sale de la base: productos por reponer,
   lotes por vencer y envíos sin recibir. Si no hay nada, no hay bolita. */
.campana {
  position: relative; display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 11px; color: #fff; cursor: pointer;
  transition: background .14s ease, transform .14s ease;
}
.campana:hover { background: rgba(255, 255, 255, .2); transform: translateY(-1px); }
.campana svg { width: 19px; height: 19px; }
.campana .bolita {
  position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 999px;
  background: var(--grad); background-size: 140%;
  font-size: 11px; font-weight: 800; line-height: 19px; text-align: center;
  box-shadow: 0 3px 10px -2px rgba(255, 45, 149, .9), 0 0 0 2px var(--noche);
}
.campana .bolita[hidden] { display: none; }

/* Quién sos: la inicial en un círculo con el degradé de la casa. Nada de fotos
   subidas — en una demo la foto siempre queda vieja o falsa. */
.barra .quien {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 12px; padding: 5px 12px 5px 5px; cursor: pointer; color: #fff;
  text-align: left; transition: background .14s ease;
}
.barra .quien:hover { background: rgba(255, 255, 255, .17); }
.barra .quien .foto {
  width: 32px; height: 32px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--grad); background-size: 150%;
  font-weight: 900; font-size: 14px; letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 10px -4px rgba(255, 45, 149, .8);
}
.barra .quien .datos { font-size: 12px; line-height: 1.25; }
.barra .quien b { display: block; font-size: 13.5px; }
.barra .quien .datos span { opacity: .6; }
.barra .salir {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14);
  color: #fff; padding: 9px 14px; border-radius: 10px; cursor: pointer; font-size: 13px;
  font-weight: 700; transition: background .14s ease;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}
.barra .salir:hover { background: rgba(255, 255, 255, .2); }

.menu {
  display: flex; gap: 3px; padding: 12px 16px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;   /* el arrastre con inercia que espera el dedo */
  border-bottom: 1px solid var(--borde);
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(8px);
  position: sticky; top: 64px; z-index: 19;
}
.menu::-webkit-scrollbar { display: none; }
.menu button {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: transparent; border: 0; cursor: pointer;
  color: var(--suave); font-weight: 800; font-size: 13.5px;
  padding: 10px 15px; border-radius: 10px;
  transition: color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease;
}
.menu button:hover { color: var(--mor-osc); background: var(--mor-claro); }
.menu button.activo {
  color: #fff; background: var(--grad-suave);
  box-shadow: var(--s-mor), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.menu svg { width: 17px; height: 17px; }

main { padding: 22px 20px 40px; max-width: 1320px; margin: 0 auto; }
.pantalla { display: none; animation: aparece .28s ease; }
.pantalla.activa { display: block; }
@keyframes aparece { from { opacity: 0; transform: translateY(8px); } }

.titulo-pantalla { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.titulo-pantalla h2 { font-size: 24px; }
.titulo-pantalla .relleno { flex: 1; }
/* Los select del sistema no quedan con la pinta cruda del navegador.
   La cabecera3d también entra acá: si no, el select de la tienda sale gris de
   Windows en el medio de todo lo demás (pasó). */
.titulo-pantalla select, .titulo-pantalla input,
.cabecera3d select, .cabecera3d input, .buscador select {
  padding: 10px 14px; border: 1.5px solid var(--borde); border-radius: var(--r);
  background: var(--blanco); box-shadow: var(--s1); font-weight: 700; color: var(--tinta);
  outline: none; cursor: pointer;
}
.titulo-pantalla select:focus, .titulo-pantalla input:focus,
.cabecera3d select:focus, .cabecera3d input:focus {
  border-color: var(--mor); box-shadow: 0 0 0 4px rgba(139, 47, 214, .13);
}
.titulo-pantalla input, .cabecera3d input { cursor: text; font-weight: 400; }

/* ═══ FRANJA DE BIENVENIDA ══════════════════════════════════════════════════ */
.hero {
  position: relative; overflow: hidden;
  background: var(--grad-suave);
  border-radius: var(--r-xg); padding: 26px 28px;
  color: #fff; margin-bottom: 20px;
  box-shadow: var(--s3), inset 0 1px 0 rgba(255, 255, 255, .2);
  /* Dos columnas: los números a la izquierda, el gráfico a la derecha con ancho
     PROPIO. Antes el gráfico iba dentro del flex de las cifras y se aplastaba a
     30 px: se veía como una rayita. */
  display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: center;
}
/* Halos de la marca adentro, para que no sea un bloque plano */
.hero::before {
  content: ""; position: absolute; top: -60%; right: -8%; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255, 138, 61, .5), transparent 65%);
}
.hero::after {
  content: ""; position: absolute; bottom: -70%; left: 18%; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(255, 45, 149, .42), transparent 65%);
}
.hero > * { position: relative; z-index: 1; }
.hero .saludo { font-size: 13px; font-weight: 700; opacity: .8; letter-spacing: .02em; }
.hero h2 { font-size: 30px; margin: 2px 0 3px; }
.hero .fecha { font-size: 13px; opacity: .72; }
.hero-cifras { display: flex; align-items: flex-start; gap: 36px; margin-top: 22px; flex-wrap: wrap; }
.hero-cifra .r { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.hero-cifra .v {
  font-size: 32px; font-weight: 800; letter-spacing: -.035em; line-height: 1.15;
  text-shadow: 0 2px 10px rgba(30, 6, 60, .35);
}

.hero-der {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r); padding: 14px 16px 10px; backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.hero-der .r {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  opacity: .8; margin-bottom: 10px;
}
.hero-pie {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-size: 11.5px; font-weight: 700; opacity: .72;
}

.delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .18);
}
.delta svg { width: 13px; height: 13px; }
.delta.baja { background: rgba(0, 0, 0, .2); }

/* ═══ LOS MÓDULOS — la pantalla principal ═══════════════════════════════════
   Cada uno es una tarjeta oscura con su ícono 3D flotando por encima. El 3D no
   es adorno: el ícono sale de la tarjeta (translateZ) y la tarjeta se inclina
   hacia donde está el dedo, así se entiende que es algo para tocar. */
.rotulo-seccion {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--suave); margin: 0 2px 12px;
}
.rotulo-seccion::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--borde), transparent);
}

.modulos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  perspective: 1200px; margin-bottom: 24px;
}
.modulo {
  position: relative; overflow: hidden;
  border: 0; cursor: pointer; text-align: left; color: #fff;
  border-radius: var(--r-xg); padding: 20px 20px 18px;
  background: linear-gradient(158deg, #3d1766 0%, var(--noche-2) 58%, var(--noche-3) 100%);
  box-shadow: var(--s-3d), inset 0 1px 0 rgba(255, 255, 255, .1);
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px;
  min-height: 152px;
  transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.2, .9, .3, 1), box-shadow .25s ease;
}
/* El brillo que sigue al dedo: es lo que hace que parezca vidrio y no cartón */
.modulo::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              rgba(255, 255, 255, .17), transparent 58%);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.modulo:hover::before, .modulo:focus-visible::before { opacity: 1; }
/* La franja del degradé abajo, que se completa al pasar */
.modulo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--grad);
  transform: scaleX(.22); transform-origin: left;
  transition: transform .4s cubic-bezier(.2, .9, .3, 1);
}
.modulo:hover::after, .modulo:focus-visible::after { transform: scaleX(1); }
.modulo:focus-visible { outline: 2px solid var(--lila); outline-offset: 3px; }
.modulo:active { transform: scale(.985) !important; }

.modulo .txt { position: relative; transform: translateZ(24px); }
.modulo .nom { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.modulo .que { font-size: 12.5px; color: rgba(255, 255, 255, .58); margin-top: 3px; line-height: 1.35; }
.modulo .dato {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .9);
}
.modulo .dato.ojo { background: rgba(255, 138, 61, .22); border-color: rgba(255, 138, 61, .45); color: #ffd0ab; }
.modulo .dato.mal { background: rgba(220, 38, 38, .22); border-color: rgba(220, 38, 38, .45); color: #ffbcbc; }
.modulo .dato svg { width: 13px; height: 13px; }

.modulo .ico3d {
  width: 88px; height: 88px; flex: none; display: block;
  transform: translateZ(52px);
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .6));
  transition: transform .25s cubic-bezier(.2, .9, .3, 1);
}
/* OJO: el ícono crece y se inclina al pasar por encima, así que necesita AIRE.
   Sin este margen la tarjeta lo recorta por arriba y por el costado — se veía
   el carrito y el camión cortados. El `overflow:hidden` de la tarjeta (que hace
   falta para la franja de abajo) no perdona. */
.modulo { padding-right: 26px; }
.modulo .ico3d { margin: 10px 4px 6px 0; }
.modulo:hover .ico3d { transform: translateZ(70px) scale(1.05) rotate(-3deg); }

/* ═══ TARJETAS ══════════════════════════════════════════════════════════════ */
.tarjeta {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--r-g); padding: 18px; box-shadow: var(--s1);
}
.tarjeta h3 { font-size: 16.5px; display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.tarjeta h3 svg { width: 17px; height: 17px; color: var(--mor); }

.grilla { display: grid; gap: 16px; }
/* Sin esto, un hijo ancho (un gráfico, una tabla) estira su celda y se lleva
   puesta la pantalla del teléfono: en una grilla el mínimo de una celda es el
   ancho de su contenido, no cero. Es el mismo bug que ya apareció en iCamba. */
.grilla > * { min-width: 0; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }

.numeron { position: relative; overflow: hidden; }
/* Un hilito del degradé arriba: marca sin gritar */
.numeron::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad); opacity: .85;
}
.numeron .rotulo {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 800; color: var(--suave); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 9px;
}
.numeron .rotulo svg { width: 15px; height: 15px; color: var(--mor); }
.numeron .valor { font-size: 27px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.numeron .pie { font-size: 12.5px; color: var(--suave); margin-top: 4px; }

/* ═══ TABLAS ════════════════════════════════════════════════════════════════ */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--suave); font-weight: 800; padding: 9px 11px;
  border-bottom: 2px solid var(--borde);
}
td { padding: 11px; border-bottom: 1px solid #f5f2fb; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: #fbf9ff; }
.tabla-envuelta { overflow-x: auto; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
}
/* Los chips, con el color vivo de verdad: el fondo pastel y la letra fuerte.
   Antes el fondo era casi blanco y no se veía de lejos en una reunión. */
.chip.ok { background: #d2f7e7; color: #077d55; }
.chip.ojo { background: #ffe8cf; color: #c2410c; }
.chip.mal { background: #ffdfe1; color: #be0f20; }
.chip.mor { background: #efddff; color: var(--mor-osc); }
.chip.gris { background: #eae5f5; color: var(--suave); }

.vacio { text-align: center; color: var(--suave); padding: 30px 12px; font-size: 14px; }
.vacio svg { width: 34px; height: 34px; opacity: .3; display: block; margin: 0 auto 10px; }

/* ═══ VENDER ════════════════════════════════════════════════════════════════ */
.venta-grilla { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
/* El mismo bug que ya apareció en `.grilla` y en iCamba, y que acá se había
   pasado por alto: en una grilla el mínimo de una celda NO es cero, es el ancho
   de su contenido. Como adentro va el buscador, la celda se plantaba en 353 px
   dentro de un teléfono de 360 y toda la página se corría 7 px de costado. */
.venta-grilla > * { min-width: 0; }
.buscador { display: flex; gap: 9px; margin-bottom: 14px; }
.buscador input, .buscador select { min-width: 0; }
.buscador input, .buscador select {
  padding: 12px 15px; border: 1.5px solid var(--borde); border-radius: var(--r);
  background: var(--blanco); outline: none; box-shadow: var(--s1);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.buscador input { flex: 1; }
.buscador input:focus, .buscador select:focus {
  border-color: var(--mor); box-shadow: 0 0 0 4px rgba(139, 47, 214, .13);
}

.productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 12px; }
.producto {
  position: relative; overflow: hidden;
  background: var(--blanco); border: 1.5px solid var(--borde); border-radius: var(--r-g);
  padding: 0 0 12px; cursor: pointer; text-align: left;
  box-shadow: var(--s1);
  transition: border-color .16s ease, transform .16s cubic-bezier(.3, 1.4, .5, 1), box-shadow .16s ease;
}
.producto:hover { border-color: var(--mor); transform: translateY(-4px); box-shadow: var(--s2); }
.producto:active { transform: translateY(-1px); }
.producto .foto {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  background: linear-gradient(160deg, #faf7ff, var(--mor-claro));
  border-bottom: 1px solid var(--borde);
}
.producto .txt { padding: 10px 12px 0; }
/* Dos renglones fijos: si no, las tarjetas quedan de alturas distintas y la
   grilla se ve desprolija. */
.producto .nom {
  font-weight: 700; font-size: 13.5px; line-height: 1.25; margin-bottom: 6px;
  min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.producto .precio { font-weight: 800; font-size: 15.5px; color: var(--mor-osc); letter-spacing: -.02em; }
.producto .stock { font-size: 11.5px; color: var(--suave); margin-top: 2px; }
.producto.sin-stock { opacity: .4; cursor: not-allowed; }
.producto.sin-stock:hover { transform: none; border-color: var(--borde); }
/* Al agregarlo, un destello del degradé de la marca */
.producto.puesto::after {
  content: ""; position: absolute; inset: 0; background: var(--grad); opacity: .28;
  animation: destello .5s ease forwards;
}
@keyframes destello { to { opacity: 0; } }

.carrito { position: sticky; top: 132px; }
.carrito .renglon {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #f5f2fb;
  animation: aparece .2s ease;
}
.carrito .renglon .nom { flex: 1; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.carrito .cantidad { display: flex; align-items: center; gap: 4px; }
.carrito .cantidad button {
  width: 26px; height: 26px; border: 1.5px solid var(--borde); background: var(--blanco);
  border-radius: 8px; cursor: pointer; font-weight: 800; color: var(--mor); line-height: 1;
  transition: background .12s ease, border-color .12s ease;
}
.carrito .cantidad button:hover { background: var(--mor-claro); border-color: var(--mor); }
.carrito .cantidad span { min-width: 24px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

.totales { margin-top: 14px; padding-top: 14px; border-top: 2px dashed var(--borde); }
.totales .fila { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; }
.totales .fila.impuesto { color: var(--suave); font-size: 13px; }
.totales .fila.total {
  font-size: 15px; font-weight: 800; padding-top: 11px; margin-top: 7px;
  border-top: 1px solid var(--borde); align-items: baseline;
}
.totales .fila.total span:last-child { font-size: 25px; letter-spacing: -.035em; color: var(--mor-osc); }

.factura-si {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  background: linear-gradient(135deg, var(--mor-claro), #fdf0ff);
  border: 1.5px solid #e6d5f8; border-radius: var(--r); margin-bottom: 14px;
}
.factura-si img { width: 34px; height: 34px; flex: none; }
.factura-si input { width: 18px; height: 18px; accent-color: var(--mor); cursor: pointer; }
.factura-si label { font-size: 13.5px; font-weight: 800; color: var(--mor-osc); cursor: pointer; }
.factura-si small { display: block; font-weight: 700; color: var(--mor); opacity: .85; font-size: 11.5px; }

/* ═══ CATEGORÍAS ════════════════════════════════════════════════════════════ */
.categorias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.categoria {
  display: flex; align-items: center; gap: 13px; text-align: left;
  background: var(--blanco); border: 1.5px solid var(--borde); border-radius: var(--r-g);
  padding: 12px 14px; cursor: pointer; box-shadow: var(--s1);
  transition: border-color .16s ease, transform .16s cubic-bezier(.3, 1.4, .5, 1), box-shadow .16s ease;
}
.categoria:hover { border-color: var(--mor); transform: translateY(-3px); box-shadow: var(--s2); }
.categoria.elegida {
  border-color: var(--mor);
  background: linear-gradient(135deg, var(--mor-claro), #fff);
  box-shadow: var(--s-mor);
}
.categoria img {
  width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none;
  background: var(--mor-claro); box-shadow: var(--s1);
}
.categoria b { display: block; font-size: 15px; }
.categoria small { color: var(--suave); font-size: 12px; }

/* ═══ ENCABEZADO DE PANTALLA CON ÍCONO 3D ═══════════════════════════════════ */
.cabecera3d {
  display: flex; align-items: center; gap: 16px; margin-bottom: 18px;
  /* Que envuelva: con el buscador y el botón «Producto nuevo» al lado, en el
     teléfono se salía 80 px de la pantalla. */
  flex-wrap: wrap;
}
.cabecera3d img {
  width: 62px; height: 62px; flex: none;
  filter: drop-shadow(0 10px 16px rgba(80, 28, 150, .3));
}
.cabecera3d h2 { font-size: 24px; }
.cabecera3d p { margin: 3px 0 0; color: var(--suave); font-size: 13.5px; max-width: 58ch; }
.cabecera3d .relleno { flex: 1; }

/* ═══ FORMULARIOS ═══════════════════════════════════════════════════════════
   Cada campo lleva abajo un renglón que explica para qué es. Sin eso, «precio
   mínimo» no le dice nada a alguien que nunca usó un sistema, y termina
   llamando por teléfono para cargar una crema. */
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.campo-f { display: flex; flex-direction: column; min-width: 0; }
.campo-f.ancho { grid-column: 1 / -1; }
.campo-f label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--suave); margin-bottom: 5px;
}
.campo-f input, .campo-f select {
  padding: 11px 13px; border: 1.5px solid var(--borde); border-radius: var(--r);
  background: var(--blanco); color: var(--tinta); outline: none; font-weight: 600;
  box-shadow: var(--s1);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.campo-f input:focus, .campo-f select:focus {
  border-color: var(--mor); box-shadow: 0 0 0 4px rgba(139, 47, 214, .13);
}
.campo-f small { font-size: 11.5px; color: var(--suave); margin-top: 4px; line-height: 1.3; }
.campo-f .marca-check {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 13px; border: 1.5px solid var(--borde); border-radius: var(--r);
  background: var(--blanco); font-weight: 700; box-shadow: var(--s1);
}
.campo-f .marca-check input { width: 18px; height: 18px; accent-color: var(--mor); flex: none;
  padding: 0; box-shadow: none; }

.separador-f {
  grid-column: 1 / -1; margin-top: 8px; padding-top: 12px;
  border-top: 1px solid var(--borde);
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mor-osc);
}
.separador-f small { font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--suave); }

/* La ganancia calculada en vivo mientras escribe el precio. Es lo que más le
   importa al comerciante y lo que hace que el formulario se sienta vivo. */
.ganancia-f:empty { display: none; }
.ganancia-f {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; border-radius: var(--r); font-size: 13.5px; font-weight: 700;
  background: #e3f6ee; color: #0b7d57;
}
.ganancia-f svg { color: var(--ok); }
.ganancia-f.mal { background: #fdecec; color: var(--mal); }
.ganancia-f.mal svg { color: var(--mal); }

/* En el inventario, el renglón que se puede tocar para corregirlo */
tr.editable { cursor: pointer; }
tr.editable:hover { background: var(--mor-claro); }

/* ── Cargar renglones (compras y traslados) ────────────────────────────────── */
.agregar-renglon { display: flex; gap: 9px; margin-bottom: 12px; }
.agregar-renglon input {
  flex: 1; min-width: 0; padding: 11px 14px;
  border: 1.5px solid var(--borde); border-radius: var(--r);
  background: var(--blanco); outline: none; box-shadow: var(--s1);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.agregar-renglon input:focus {
  border-color: var(--mor); box-shadow: 0 0 0 4px rgba(139, 47, 214, .13);
}

/* Los campitos que van DENTRO de una tabla. Angostos a propósito: si son anchos,
   la tabla se desborda en el teléfono. */
input.mini {
  width: 74px; padding: 7px 9px; text-align: right;
  border: 1.5px solid var(--borde); border-radius: 9px;
  background: var(--blanco); outline: none; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
input.mini.ancho { width: 118px; text-align: left; font-weight: 400; }
input.mini:focus { border-color: var(--mor); box-shadow: 0 0 0 3px rgba(139, 47, 214, .13); }

.quitar {
  width: 26px; height: 26px; border: 0; border-radius: 8px; cursor: pointer;
  background: #fdecec; color: var(--mal); font-weight: 800; font-size: 16px; line-height: 1;
  transition: background .12s ease;
}
.quitar:hover { background: #fbd7d7; }

.falta { font-size: 11.5px; font-weight: 800; color: var(--mal); margin-top: 3px; }

.pie-accion {
  display: flex; justify-content: flex-end; align-items: center; gap: 16px;
  margin-top: 16px; flex-wrap: wrap;
}
.pie-accion > div { display: flex; align-items: center; gap: 14px; font-size: 14.5px; font-weight: 700; }
.pie-accion b { color: var(--mor-osc); font-size: 20px; letter-spacing: -.03em; }

/* ═══ PESTAÑAS (Administración) ═════════════════════════════════════════════ */
.pestanas {
  display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap;
  border-bottom: 2px solid var(--borde); padding-bottom: 0;
}
.pestana {
  background: transparent; border: 0; cursor: pointer;
  color: var(--suave); font-weight: 800; font-size: 14px;
  padding: 11px 16px; border-radius: 10px 10px 0 0;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.pestana:hover { color: var(--mor-osc); background: var(--mor-claro); }
.pestana.activa { color: var(--mor-osc); border-bottom-color: var(--mor); background: var(--mor-claro); }

/* La clave que se muestra UNA sola vez */
.clave-nueva { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.clave-nueva > div {
  background: var(--noche); color: #fff; border-radius: var(--r); padding: 13px 15px;
  border-left: 3px solid var(--naranja);
}
.clave-nueva small {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .12em;
  opacity: .55; margin-bottom: 5px;
}
.clave-nueva b { font-family: Consolas, Menlo, monospace; font-size: 17px; letter-spacing: .04em; }

/* ═══ LOS AVISOS DE LA CAMPANA ══════════════════════════════════════════════ */
.avisos-lista { display: flex; flex-direction: column; gap: 9px; }
.aviso-fila {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--blanco); border: 1.5px solid var(--borde); border-left: 3px solid var(--mor);
  border-radius: var(--r); padding: 12px 14px; cursor: pointer;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.aviso-fila:hover { transform: translateX(3px); box-shadow: var(--s1); border-color: var(--mor); }
.aviso-fila.ojo { border-left-color: var(--ojo); }
.aviso-fila.ojo svg { color: var(--ojo); }
.aviso-fila svg { color: var(--mor); flex: none; }
.aviso-fila span { flex: 1; min-width: 0; }
.aviso-fila b { display: block; font-size: 14px; }
.aviso-fila small { color: var(--suave); font-size: 12.5px; line-height: 1.35; }
.aviso-fila .flechita { flex: none; color: var(--suave); font-size: 20px; font-weight: 700; }

/* ═══ LA TIRA DEL RECORRIDO ═════════════════════════════════════════════════
   Almacén → en camino → tienda. Se entiende mirando, sin leer: es lo que más
   cuesta explicar con palabras en una reunión. */
.recorrido {
  display: flex; align-items: center; gap: 4px; margin-bottom: 16px;
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--r-g); padding: 16px 18px; box-shadow: var(--s1);
}
.recorrido .paso { flex: 1; text-align: center; }
.recorrido .paso img {
  width: 60px; height: 60px; display: block; margin: 0 auto 8px;
  filter: drop-shadow(0 8px 14px rgba(80, 28, 150, .28));
}
.recorrido .paso b { display: block; font-size: 13.5px; }
.recorrido .paso small { color: var(--suave); font-size: 12px; }
.recorrido .flecha { flex: none; color: var(--mor); opacity: .55; }
.recorrido .flecha svg { width: 22px; height: 22px; }

/* ═══ COMPROBANTE ═══════════════════════════════════════════════════════════ */
.fondo-modal {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(20, 8, 40, .6); backdrop-filter: blur(5px);
  display: grid; place-items: center; padding: 20px;
  animation: aparece .2s ease;
}
.modal {
  background: #fff; border-radius: 20px; width: min(420px, 94vw);
  max-height: 90vh; overflow: auto; box-shadow: 0 40px 90px -25px rgba(0, 0, 0, .65);
  animation: sube .28s cubic-bezier(.3, 1.3, .5, 1);
}
@keyframes sube { from { opacity: 0; transform: translateY(20px) scale(.97); } }
.modal .tapa {
  background: var(--grad-suave); color: #fff; padding: 16px 22px;
  display: flex; align-items: center; gap: 10px; font-weight: 800;
}
.modal .cuerpo { padding: 18px 22px; }
.modal .pie { padding: 0 22px 22px; display: flex; gap: 10px; }

.comprobante { font-family: "Consolas", "Menlo", monospace; font-size: 12.5px; }
.comprobante .centro { text-align: center; }
.comprobante hr { border: 0; border-top: 1px dashed #cdc5dd; margin: 10px 0; }
.comprobante .ren { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; }
.comprobante .gordo { font-weight: 700; }

@media print {
  body > *:not(.fondo-modal) { display: none !important; }
  .fondo-modal { position: static; background: none; padding: 0; backdrop-filter: none; }
  .modal { box-shadow: none; width: auto; max-height: none; animation: none; }
  .modal .tapa, .modal .pie { display: none; }
}

/* ═══ COBRAR: EFECTIVO O QR ═════════════════════════════════════════════════
   Dos botones del mismo tamaño, nunca uno «principal» y el otro escondido: en
   el mostrador las dos formas de cobrar se usan igual de seguido. */
.cobrar-con { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cobrar-con .boton {
  flex-direction: column; gap: 4px; min-height: 64px; padding: 12px 10px;
  justify-content: center; line-height: 1.15;
}
.cobrar-con .boton svg { width: 22px; height: 22px; }
.cobrar-con .boton small { display: block; font-weight: 800; font-size: 15px; opacity: .92; }
.cobrar-con .boton span { display: block; font-size: 12.5px; font-weight: 700; }
.boton.qr {
  background: var(--noche); color: #fff; border: 1px solid var(--noche);
  box-shadow: 0 10px 24px -14px rgba(27, 10, 51, .9);
}
.boton.qr:hover:not(:disabled) { background: var(--noche-2); border-color: var(--noche-2); }

/* El QR que se le muestra al cliente. Grande de verdad: a menos de 200 px los
   teléfonos viejos no lo enganchan. */
.qr-cobro { text-align: center; }
.qr-paso { margin: 0 0 14px; color: var(--suave); font-size: 13.5px; }
.qr-marco {
  display: inline-block; padding: 14px; background: #fff; border-radius: var(--r-g);
  border: 1px solid var(--borde); box-shadow: var(--s1);
}
.qr-marco img {
  display: block; width: min(260px, 62vw); height: auto; image-rendering: crisp-edges;
}
.qr-monto { margin-top: 14px; font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
.qr-quien { color: var(--suave); font-size: 13px; margin-top: 2px; }
.qr-ojo {
  display: flex; align-items: flex-start; gap: 8px; text-align: left;
  margin: 16px 0 0; padding: 11px 13px; border-radius: var(--r);
  background: #fff6ed; border: 1px solid #ffd9b8; color: #7a3c06; font-size: 12.5px;
}
.qr-ojo svg { width: 17px; height: 17px; flex: none; color: var(--ojo); margin-top: 1px; }

/* El recordatorio en la pantalla de Caja. */
.nota-qr {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px;
  padding: 13px 15px; border-radius: var(--r-g);
  background: var(--mor-claro); border: 1px solid #e2cdf6; color: #4b1a78; font-size: 13.5px;
}
.nota-qr svg { width: 19px; height: 19px; flex: none; color: var(--mor); margin-top: 1px; }

/* Cargar el QR, en Administración. */
.ayuda-modal { margin: 0 0 16px; color: var(--suave); font-size: 13.5px; line-height: 1.55; }
.qr-subir { margin-top: 4px; }
.qr-vista {
  margin-top: 12px; padding: 14px; text-align: center;
  border: 1px dashed var(--borde); border-radius: var(--r-g); background: var(--fondo);
}
.qr-vista img {
  width: min(200px, 54vw); height: auto; border-radius: 10px; background: #fff;
  padding: 8px; box-shadow: var(--s1);
}
.qr-pie {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12.5px; color: var(--suave);
}

/* ═══ AVISOS (nunca el alert del navegador) ═════════════════════════════════ */
#avisos {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.aviso {
  display: flex; align-items: center; gap: 10px;
  background: var(--noche); color: #fff;
  padding: 13px 17px; border-radius: var(--r);
  font-size: 13.5px; font-weight: 700; max-width: 350px;
  box-shadow: 0 20px 45px -18px rgba(0, 0, 0, .8);
  border-left: 3px solid var(--naranja);
  animation: entra-aviso .26s cubic-bezier(.3, 1.4, .5, 1);
}
.aviso svg { color: var(--naranja); }
.aviso.mal { border-left-color: var(--mal); }
.aviso.mal svg { color: #ff8a8a; }
.aviso.yendose { opacity: 0; transform: translateX(14px); transition: opacity .4s ease, transform .4s ease; }
@keyframes entra-aviso { from { opacity: 0; transform: translateX(20px); } }

/* ═══ BARRAS DE REPORTES ════════════════════════════════════════════════════ */
.barra-dato { height: 10px; background: #f0ebfa; border-radius: 6px; overflow: hidden; }
.barra-dato > div {
  height: 100%; background: var(--grad); border-radius: 6px;
  animation: crece .6s cubic-bezier(.2, .9, .3, 1);
}
@keyframes crece { from { width: 0 !important; } }

/* ═══ CHICO ═════════════════════════════════════════════════════════════════ */
@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; gap: 20px; }
  .modulos { grid-template-columns: repeat(2, 1fr); }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3, .g2 { grid-template-columns: 1fr; }
  .venta-grilla { grid-template-columns: 1fr; }
  .carrito { position: static; }
  .categorias { grid-template-columns: repeat(2, 1fr); }
  #entrada { grid-template-columns: 1fr; }
  .entrada-foto { display: none; }
  /* Acá el menú ya no entra entero: entran tres de las nueve pantallas y el
     resto queda de costado. El degradado del borde derecho es la única señal de
     que sigue; sin él la gente cree que el sistema tiene tres pantallas. */
  .menu {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
}
@media (max-width: 560px) {
  main { padding: 16px 14px 34px; }
  .modulos { grid-template-columns: 1fr; gap: 12px; }
  .modulo { min-height: 128px; padding: 16px; }
  .modulo .ico3d { width: 72px; height: 72px; }
  .g4 { grid-template-columns: 1fr; }
  .categorias { grid-template-columns: 1fr; }
  /* En el teléfono la barra tiene que entrar en un renglón: se va el rótulo
     chico de ENSIGNA y el subtítulo del negocio. */
  .barra { padding: 0 14px; gap: 10px; }
  .barra .quien { display: none; }
  .marca-ens .palabra { display: none; }
  .barra .negocio { font-size: 15px; padding-left: 12px; }
  .barra .negocio small { display: none; }
  .hero { padding: 20px; }
  .hero h2 { font-size: 23px; }
  .hero-cifras { gap: 20px; }
  .productos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .cabecera3d img { width: 48px; height: 48px; }
  /* En el teléfono el buscador y el botón van abajo, uno al lado del otro,
     ocupando el ancho: al costado del título no entran. */
  .cabecera3d .relleno { display: none; }
  .cabecera3d > input, .cabecera3d > select { flex: 1; min-width: 0; margin-left: 0 !important; }
  .cabecera3d > .boton { margin-left: 0 !important; }
  /* En el teléfono el recorrido va en columna: de lado no entra y se desborda. */
  .recorrido { flex-direction: column; gap: 10px; padding: 16px; }
  .recorrido .flecha svg { transform: rotate(90deg); }
  /* Los formularios a una sola columna: dos campos por renglón no entran. */
  .formulario { grid-template-columns: 1fr; }

  /* ── El dedo no es un mouse ────────────────────────────────────────────────
     Medido con Chrome a 360 px: había botones de 31 px de alto. Abajo de 44 se
     falla el toque y se termina apretando el de al lado. En una caja, eso es
     una venta mal cobrada. */
  .boton { min-height: 46px; padding: 12px 18px; }
  .boton.chico { min-height: 42px; padding: 10px 16px; font-size: 13.5px; }
  .barra .salir { min-height: 42px; padding: 10px 16px; }
  .campana { width: 44px; height: 44px; }
  .menu button { min-height: 44px; padding: 11px 15px; }
  .carrito .cantidad button { width: 38px; height: 38px; font-size: 17px; }
  .pestana { min-height: 44px; }

  /* ── Que iOS no haga zoom solo ─────────────────────────────────────────────
     Si un campo tiene letra de menos de 16 px, Safari agranda la página sola al
     tocarlo y después el usuario se queda con la pantalla corrida. Estaban en
     15 px: el buscador de Vender, el de Inventario y los selectores de local. */
  input, select, textarea, .buscador input, .buscador select { font-size: 16px; }

  /* ── Las tablas se vuelven fichas ──────────────────────────────────────────
     Siete columnas no entran en 360 px: o se lee con lupa o se arrastra de
     costado sin saber qué columna es cuál. Cada fila pasa a ser una ficha con
     «rótulo: valor», una debajo de otra.

     Solo las que llevan `con-rotulos`, que es la clase que `rotularTablas()` en
     app.js le pone a las que tienen encabezado del que copiar. Las que no lo
     tienen se quedan como tabla: darlas vuelta sin rótulo deja una columna de
     números sueltos sin decir qué es cada uno. */
  .tabla-envuelta { overflow-x: visible; }
  table.con-rotulos thead { display: none; }
  table.con-rotulos, table.con-rotulos tbody, table.con-rotulos tr, table.con-rotulos td {
    display: block; width: auto;
  }
  table.con-rotulos tr {
    border: 1.5px solid var(--borde); border-radius: var(--r);
    margin-bottom: 10px; background: var(--blanco); overflow: hidden;
  }
  table.con-rotulos tr:hover { background: var(--blanco); }
  table.con-rotulos td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px 13px; border-bottom: 1px solid #f5f2fb; text-align: right;
  }
  table.con-rotulos tr td:last-child { border-bottom: 0; }
  /* Una celda vacía en la tabla no se ve; dada vuelta queda un renglón que dice
     «REFERENCIA» y nada al lado. Esas no se muestran. */
  table.con-rotulos td:empty { display: none; }
  table.con-rotulos td::before {
    content: attr(data-rotulo); flex: none; max-width: 46%;
    text-align: left; color: var(--suave);
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  }
  /* La celda del botón no lleva rótulo: que el botón ocupe el ancho. */
  table.con-rotulos td:not([data-rotulo]) { justify-content: stretch; }
  table.con-rotulos td:not([data-rotulo]) .boton { width: 100%; }
  table.con-rotulos td.num { text-align: right; }

  /* Lugar abajo para que la barra de cobro no tape el final de la página. */
  main { padding-bottom: 104px; }
}

/* ═══ COBRAR DESDE EL TELÉFONO ══════════════════════════════════════════════
   Barra pegada abajo. Aparece sola cuando hay algo en el carrito y solo en
   pantalla chica: en la computadora el carrito ya está al costado. */
#cobroPegado { display: none; }
@media (max-width: 1050px) {
  #cobroPegado:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px);
    border-top: 1px solid var(--borde);
    box-shadow: 0 -10px 30px -18px rgba(40, 20, 80, .55);
    animation: sube-cobro .22s cubic-bezier(.3, 1.3, .5, 1);
  }
  #cobroPegado .cp-ver {
    flex: 1; min-width: 0; text-align: left; background: none; border: 0;
    cursor: pointer; padding: 2px 4px; color: var(--tinta); line-height: 1.15;
  }
  #cobroPegado .cp-ver small { display: block; font-size: 11.5px; color: var(--suave); font-weight: 700; }
  #cobroPegado .cp-ver b { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
  #cobroPegado .boton { min-height: 48px; padding: 12px 15px; font-size: 13.5px; flex: none; }
  #cobroPegado .boton svg { width: 17px; height: 17px; }
  main { padding-bottom: 96px; }
}
@keyframes sube-cobro { from { transform: translateY(100%); } }

/* ═══ GRÁFICOS ══════════════════════════════════════════════════════════════
   Todos dibujados a mano en SVG desde app.js: ni una librería, igual que el
   resto del sistema. Acá va sólo la caja, la punta que sigue al dedo, la
   leyenda y la tabla de respaldo. Los colores de las series están en JS (VIZ),
   porque el dibujo los necesita como valor, no como variable CSS. */
.viz { position: relative; }
.viz svg:focus-visible { outline: 2px solid var(--lila); outline-offset: 3px; border-radius: 8px; }

/* El dibujo entra de izquierda a derecha. Se hace con clip-path y no con ancho
   ni escala: así el trazo no se deforma mientras entra, y si la persona pidió
   menos movimiento, la regla del final lo apaga y el gráfico queda COMPLETO
   (el estado final es el de base; la animación sólo lo tapa al principio). */
.viz-plot { animation: viz-revelar .65s cubic-bezier(.2, .9, .3, 1); }
@keyframes viz-revelar { from { clip-path: inset(0 100% 0 0); } }

/* La tarjeta de un gráfico: título, una línea que explica qué se está mirando,
   el dibujo, y abajo los números en tabla. */
.viz-tarjeta {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--r-g); padding: 18px; box-shadow: var(--s1);
  min-width: 0; overflow: hidden;   /* el gráfico no empuja la tarjeta */
}
.viz-tarjeta h3 { font-size: 16.5px; display: flex; align-items: center; gap: 9px; }
.viz-tarjeta h3 svg { width: 17px; height: 17px; color: var(--mor); }
.viz-sub { margin: 5px 0 14px; color: var(--suave); font-size: 13px; line-height: 1.4; max-width: 62ch; }
.viz-nota { margin: 10px 0 0; color: var(--suave); font-size: 11.5px; }

/* La punta: el valor manda y el rótulo acompaña (al revés que la leyenda,
   porque acá la persona ya sabe qué mira y lo que quiere es el número). */
.viz-punta {
  position: absolute; z-index: 6; pointer-events: none;
  transform: translate(-50%, -100%);
  background: var(--noche); color: #fff;
  padding: 9px 12px; border-radius: 10px; font-size: 12px; line-height: 1.45;
  box-shadow: 0 18px 38px -16px rgba(12, 4, 26, .8);
  border-left: 3px solid var(--naranja); white-space: nowrap;
}
.viz-punta[hidden] { display: none; }
.viz-punta .q {
  opacity: .62; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 3px;
}
.viz-punta div { display: flex; align-items: center; gap: 7px; }
.viz-punta b { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.viz-punta span { opacity: .72; }
.viz-punta i { width: 9px; height: 9px; border-radius: 2px; flex: none; }

/* Leyenda: SIEMPRE que hay dos series o más. Es el canal de identidad que no
   depende de que la persona distinga los colores. */
.viz-leyenda {
  display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 14px;
  font-size: 12.5px; font-weight: 700; color: var(--suave);
}
.viz-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.viz-leyenda i { width: 11px; height: 11px; border-radius: 3px; flex: none; display: block; }

/* La tabla de respaldo. La punta ENRIQUECE, nunca es el único camino al número:
   quien no puede o no quiere pasar el mouse abre esto y lee todo. */
/* La tabla de respaldo puede tener 6 columnas: en el teléfono se arrastra de
   costado, no estira la pantalla. */
.viz-tabla { margin-top: 14px; border-top: 1px solid var(--borde); padding-top: 10px; overflow-x: auto; }
.viz-tabla summary {
  cursor: pointer; font-size: 12.5px; font-weight: 800;
  color: var(--mor-osc); list-style: none; padding: 4px 0;
}
.viz-tabla summary::-webkit-details-marker { display: none; }
.viz-tabla summary:hover { color: var(--mor); }
.viz-tabla table { margin-top: 8px; font-size: 13px; }
.viz-tabla th, .viz-tabla td { padding: 7px 9px; }

/* ═══ AYUDA DIDÁCTICA ═══════════════════════════════════════════════════════
   Un renglón corto al lado de cada número, en criollo. UNO SOLO: dos renglones
   de explicación por número y nadie lee ninguno. */
.ayuda { font-size: 12px; line-height: 1.4; color: var(--suave); margin-top: 6px; max-width: 36ch; }
.hero .ayuda { color: rgba(255, 255, 255, .78); }
.hero-cifras { align-items: stretch; }
.hero-cifra { max-width: 24em; }

/* La cuenta del día: cobraste → menos el impuesto → menos la mercadería → te
   quedó. Es LO QUE MÁS SE CONFUNDE, así que va con barra y con números. */
.cuenta .tit {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; opacity: .8; margin-bottom: 12px;
}
.cuenta .ren {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 5px 0; font-size: 13px;
}
.cuenta .ren b { font-weight: 800; font-variant-numeric: tabular-nums; }
.cuenta .ren.resta { opacity: .78; }
.cuenta .ren.queda {
  margin-top: 7px; padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .22); font-size: 14px;
}
.cuenta .ren.queda b { font-size: 21px; letter-spacing: -.03em; }
.cuenta .clave { display: flex; align-items: center; gap: 7px; }
.cuenta .clave i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.cuenta .cierre { margin: 12px 0 0; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .8); }

/* ═══ QUÉ HACER AHORA ═══════════════════════════════════════════════════════
   Los pendientes de verdad convertidos en acción. Cada renglón sale de un
   número real de la base y su botón lleva a la pantalla donde se arregla. */
.pasos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; }
.paso {
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--blanco); border: 1px solid var(--borde); border-left: 3px solid var(--mor);
  border-radius: var(--r-g); padding: 14px 16px; box-shadow: var(--s1);
}
.paso.ojo { border-left-color: var(--ojo); }
.paso.mal { border-left-color: var(--mal); }
.paso .n {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff;
  background: var(--grad-suave); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}
.paso.ojo .n { background: linear-gradient(135deg, #ff8a3d, #d97706); }
.paso.mal .n { background: linear-gradient(135deg, #ff6a6a, #dc2626); }
.paso .cuerpo { flex: 1; min-width: 0; }
.paso .n-tit { font-size: 14.5px; font-weight: 800; letter-spacing: -.015em; }
.paso .n-que { font-size: 12.5px; color: var(--suave); line-height: 1.4; margin-top: 3px; }
.paso .boton { margin-top: 11px; }
.paso-listo {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 11px;
  background: linear-gradient(135deg, #e3f6ee, #f4fffa);
  border: 1px solid #c9ead9; border-radius: var(--r-g); padding: 14px 16px;
  font-size: 14px; font-weight: 700; color: #0b7d58;
}
.paso-listo svg { width: 18px; height: 18px; color: var(--ok); }

@media (max-width: 1050px) { .pasos { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .viz-tarjeta { padding: 14px; }
  .viz-punta { font-size: 11.5px; padding: 8px 10px; }
  .cuenta .ren.queda b { font-size: 19px; }
}

/* Si la persona pidió menos movimiento, se le hace caso: nada de animaciones. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .modulo { transform: none !important; }
}