/* Copia del kit de la skill paneles-ngt (ngt-skills 0db9450, kit/panel.css), sin tocar.
   Se actualiza copiando el archivo de nuevo; pruebas/paleta.test.mjs avisa si difiere
   de la skill instalada en la máquina. Los colores salen de web/paleta.css. */
/* ============================================================================
   Panel de administración NGT — el sistema visual (paneles-ngt, 22/10/2026)

   Escrito de cero por NGT. La referencia de lenguaje visual fueron las demos
   públicas de Code and Chill (@_code_and_chill_), relevadas el 22/10/2026:
   de ahí sale el CÓMO SE VE (bento con jerarquía, tarjetas con gráfico,
   listas con barras de avance), no una línea de su código. Ver
   references/relevamiento-2026-10-22.md.

   Contrato:
   - Todo cuelga de `.adm` y de clases `adm-*`. El CSS del sitio es global
     (`h1{}`, `button{}`, `table{}`) y no puede desarmar el panel: por eso cada
     regla pisa lo que el sitio pudiera haber puesto en las etiquetas comunes.
   - Los colores vienen de variables `--a-*` que pone el código que arma el
     panel (en JARVIS, `variablesDelPanel()` de worker/src/panel-admin.mjs),
     YA pasadas por las reglas de contraste. Acá no se escribe ningún color de
     marca: sólo `--a-*`, y blanco/negro con alfa para luces y sombras.
   - Ninguna tarjeta que lleve texto tiene fondo translúcido: el contraste se
     mide contra un color de verdad (regla 20 del §8 del maestro). La única
     excepción es el modo vidrio (`.adm.adm-vidrio`, 31/10/2026): ahí el
     contraste se mide contra la placa mezclada con CADA color de la escena,
     y lo garantiza kit/vidrio.mjs, no el ojo.
   - Mirado el 31/10/2026 en los reels de code.xr
     (references/reels-code-xr-2026-10-31.md): de ahí salen el vidrio, la
     llegada en dos tiempos (primero la placa vacía, después lo de adentro),
     el cambio de vista con salida, la línea que une sus puntos, el globo que
     sigue al gráfico, los bloques que se apilan y los efectos del acceso.
   - El panel anima LA LLEGADA y LO QUE CAMBIA, nunca la estadía (animacion-ngt,
     regla 7, cambiada por Briam el 22/10/2026). Las animaciones de llegada sólo
     corren adentro de `.adm-llega`, que pone y saca kit/panel-mov.js: sin ese
     módulo el panel se ve completo y quieto. Todo el movimiento vive dentro de
     `@media (prefers-reduced-motion:no-preference)`.
   - Mirado de nuevo el 22/10 a la noche, reel por reel
     (references/reels-2026-10-22.md): de ahí salen el héroe en color pleno,
     las baldosas, la navegación en píldoras, los segmentos, el abanico, las
     barras divergentes, el flujo de nodos y la línea del día.
   ========================================================================== */

.adm{position:relative;min-height:100vh;display:flex;gap:0;background:var(--a-bg);color:var(--a-fg);font:500 14px/1.5 var(--font-body);text-align:left;letter-spacing:normal;text-transform:none;font-variant-numeric:tabular-nums}
.adm[hidden],[data-app][hidden]{display:none!important}
.adm *{box-sizing:border-box}
.adm h1,.adm h2,.adm h3,.adm p,.adm ul,.adm ol,.adm dl,.adm dd{margin:0;padding:0;border:0;background:none;text-shadow:none}
.adm a{color:inherit;text-decoration:none;background:none;border:0}
.adm table{border-collapse:collapse;width:100%;background:none;margin:0}
.adm th,.adm td{border:0;background:none}
.adm img{max-width:100%;display:block;border:0;filter:none}
.adm button{font:inherit;cursor:pointer;margin:0;text-transform:none;letter-spacing:normal;box-shadow:none}
.adm svg{overflow:visible}
.adm .adm-ic{flex:none}
.adm :focus-visible{outline:2px solid var(--a-primary);outline-offset:2px}

/* ── La barra lateral: una tarjeta que flota, con grupos y contadores ────── */
.adm-lado{width:248px;flex:none;position:sticky;top:12px;margin:12px 0 12px 12px;height:calc(100vh - 24px);overflow:auto;background:var(--a-surface);border:1px solid var(--a-line);border-radius:22px;display:flex;flex-direction:column;padding:16px 12px;gap:2px;z-index:40;box-shadow:var(--a-sombra)}
.adm-marca{display:flex;align-items:center;gap:10px;padding:4px 8px 14px}
.adm-logo{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--a-ink);color:var(--a-on-ink);font:700 15px/1 var(--font-title)}
.adm-marca-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.adm-marca-txt b{font:700 15px/1.2 var(--font-body);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-marca-txt small{color:var(--a-muted);font-size:12px}
.adm-x{display:none;background:none;border:0;color:var(--a-muted);font-size:24px;line-height:1;width:36px;height:36px}
.adm .adm-menu{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;flex:1;padding:0;margin:0;max-width:none;width:auto}
.adm-grupo{font:700 11px/1 var(--font-body)!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--a-muted)!important;padding:16px 10px 8px!important}
.adm .adm-nav{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;color:var(--a-muted);font-weight:600;min-height:40px;border:1px solid transparent}
.adm .adm-nav>span{flex:1}
.adm .adm-nav:hover{color:var(--a-fg);background:var(--a-s2)}
.adm .adm-nav.on{color:var(--a-on-tint);background:var(--a-tint);border-color:var(--a-tint-line)}
.adm .adm-cuenta{font:700 11px/1 var(--font-body);font-style:normal;min-width:22px;height:20px;padding:0 6px;border-radius:99px;display:inline-grid;place-items:center;background:var(--a-ink);color:var(--a-on-ink)}
.adm .adm-ver{margin-top:10px;border-color:var(--a-line)}
.adm-yo{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 8px 2px;border-top:1px solid var(--a-line)}
.adm-yo>div{display:flex;flex-direction:column;min-width:0}
.adm-yo b{font-size:13px;font-weight:700}
.adm-yo small{color:var(--a-muted);font-size:12px}

/* ── El cuerpo y la barra de arriba ─────────────────────────────────────── */
.adm-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column}
.adm-top{display:flex;align-items:center;gap:10px;padding:12px 28px;min-height:64px}
.adm-burger{display:none;background:var(--a-surface);border:1px solid var(--a-line);border-radius:12px;color:var(--a-fg);width:42px;height:42px;align-items:center;justify-content:center}
.adm-top-busca{position:relative;flex:0 1 340px;display:flex;align-items:center}
.adm-top-busca .adm-ic{position:absolute;left:12px;color:var(--a-muted)}
.adm .adm-top-busca .adm-in{padding-left:38px;padding-right:44px;border-radius:12px;background:var(--a-surface)}
.adm-top-busca kbd{position:absolute;right:8px;font:600 11px/1 var(--mono);color:var(--a-muted);border:1px solid var(--a-line);border-radius:6px;padding:4px 6px;background:var(--a-bg)}
.adm-vivo{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--a-fg);background:var(--a-surface);border:1px solid var(--a-line);border-radius:99px;padding:7px 12px;white-space:nowrap}
.adm-vivo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--a-ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--a-ok) 22%,transparent)}
.adm-quien{color:var(--a-muted);font-size:13px}
.adm-ej{font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--a-pt);border:1px solid var(--a-line);border-radius:99px;padding:6px 9px;white-space:nowrap}
.adm-top-acc{margin-left:auto;display:flex;gap:8px}
.adm-main{padding:8px 28px 120px;flex:1;min-width:0}
.adm-vista{display:none;flex-direction:column;gap:16px}
.adm-vista.on-vista{display:flex}

/* ── La cabecera de cada vista ──────────────────────────────────────────── */
.adm-migas{display:flex;gap:8px;align-items:center;color:var(--a-muted);font-size:13px;font-weight:600}
.adm-migas b{color:var(--a-fg);font-weight:600}
.adm-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.adm .adm-h1{font:600 30px/1.15 var(--font-body);letter-spacing:-.03em;color:var(--a-fg)}
.adm .adm-h2{font:700 15px/1.3 var(--font-body);letter-spacing:-.01em;color:var(--a-fg);display:flex;align-items:center;gap:10px}
.adm .adm-h3{font:700 11px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--a-muted);margin:22px 0 12px}
.adm .adm-h3:first-child{margin-top:0}
.adm .adm-sub,.adm .adm-ayuda{color:var(--a-muted);font-size:14px;margin-top:6px}
.adm .adm-sub b{color:var(--a-fg)}
.adm .adm-sub em{font-style:normal;color:var(--a-mal);font-weight:600}
.adm-acc{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ── Botones ────────────────────────────────────────────────────────────── */
.adm .adm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 16px;border-radius:99px;font:700 13px/1 var(--font-body);border:1px solid transparent;white-space:nowrap;transition:background .15s,border-color .15s,filter .15s}
.adm .adm-btn-1{background:var(--a-primary);color:var(--a-on)}
.adm .adm-btn-1:hover{filter:brightness(1.08)}
.adm .adm-btn-2{background:var(--a-surface);color:var(--a-fg);border-color:var(--a-line)}
.adm .adm-btn-2:hover{background:var(--a-s2)}
.adm .adm-btn-3{background:var(--a-ink);color:var(--a-on-ink)}
.adm .adm-chico{min-height:30px;padding:5px 11px}
.adm .adm-btn-ic{width:40px;padding:0}

/* ── Tarjetas ───────────────────────────────────────────────────────────── */
.adm-card{background:var(--a-surface);border:1px solid var(--a-line);border-radius:22px;padding:20px;box-shadow:var(--a-sombra);min-width:0}
.adm-card+.adm-card{margin-top:16px}
.adm-card-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.adm-card-cab .adm-h2{margin:0}
.adm-chipic{width:30px;height:30px;border-radius:10px;display:inline-grid;place-items:center;flex:none;background:var(--a-s2);color:var(--a-fg)}
.adm-chipic .adm-ic{width:15px;height:15px}
.adm-resumen{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0 0 8px}
.adm-resumen dt{font:700 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--a-muted);margin-bottom:6px}
.adm-resumen dd{margin:0;font:600 22px/1.1 var(--font-body);letter-spacing:-.03em;color:var(--a-fg)}

/* ── Las cifras: la fila de arriba, y las chicas adentro de una tarjeta ─── */
.adm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.adm-cifra{position:relative;background:var(--a-surface);border:1px solid var(--a-line);border-radius:22px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-width:0;box-shadow:var(--a-sombra);overflow:hidden}
.adm-cifra>span{color:var(--a-muted);font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px}
.adm-cifra>b{font:600 28px/1.05 var(--font-body);letter-spacing:-.04em;color:var(--a-fg)}
.adm-cifra-pie{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;min-height:34px}
.adm-cifra .adm-chispa{width:46%;max-width:130px;height:34px;color:var(--a-pt);flex:none}
.adm-cifra-tinta{background:var(--a-ink);border-color:var(--a-ink)}
.adm-cifra-tinta>span{color:var(--a-muted-ink)}
.adm-cifra-tinta>b{color:var(--a-on-ink)}
.adm-cifra-tinta .adm-chipic{background:var(--a-ink-2);color:var(--a-on-ink)}
.adm-cifra-tinta .adm-chispa{color:var(--a-on-ink)}
.adm-cifra-tinte{background:var(--a-tint);border-color:var(--a-tint-line)}
.adm-cifra-tinte>span{color:var(--a-muted-tint)}
.adm-cifra-tinte>b{color:var(--a-on-tint)}
.adm-cifra-tinte .adm-chipic{background:var(--a-surface);color:var(--a-on-tint)}
.adm-cifra-tinte .adm-chispa{color:var(--a-on-tint)}
.adm .adm-delta{display:inline-flex;align-self:flex-start;align-items:center;gap:4px;font:700 12px/1 var(--font-body);font-style:normal;padding:5px 8px;border-radius:99px;background:var(--a-s2);color:var(--a-fg)}
.adm-cifra-tinta .adm-delta{background:var(--a-ink-2);color:var(--a-on-ink)}
.adm-cifra-tinte .adm-delta{background:var(--a-surface);color:var(--a-on-tint)}
.adm-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.adm-cifras .adm-cifra,.adm-cifra.adm-cifra-chica{box-shadow:none;border-radius:16px;padding:12px 14px;gap:4px;background:var(--a-bg)}
.adm-cifra.adm-cifra-chica>b{font-size:22px}

/* ── El bento: la grilla del dashboard ──────────────────────────────────── */
.adm-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:stretch}
.adm-bento>.adm-card{margin:0;display:flex;flex-direction:column}
.adm-bento>.adm-card>.adm-graf{margin-top:auto}
.adm-bento .adm-cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
.adm-g8{grid-column:span 8}.adm-g7{grid-column:span 7}.adm-g6{grid-column:span 6}.adm-g5{grid-column:span 5}.adm-g4{grid-column:span 4}.adm-g12{grid-column:1/-1}

/* ── Gráficos (SVG que arma el código; los colores salen de acá) ────────── */
.adm-graf{width:100%;height:auto;display:block}
.adm-graf text{font:600 11px var(--font-body);fill:var(--a-muted)}
.adm-graf .adm-eje{stroke:var(--a-line);stroke-width:1}
.adm-graf .adm-meta{stroke:var(--a-mal);stroke-width:1.5;stroke-dasharray:5 5}
.adm-graf .adm-meta-t{fill:var(--a-mal);font-weight:700}
.adm-graf .adm-barra{fill:var(--a-c2,color-mix(in srgb,var(--a-primary) 38%,var(--a-surface)))}
.adm-graf .adm-barra.on{fill:var(--a-primary)}
.adm-graf .adm-area{fill:var(--a-primary);opacity:.14}
.adm-graf .adm-trazo{fill:none;stroke:var(--a-primary);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.adm-chispa path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.adm-aro{display:grid;place-items:center;position:relative;margin:0 auto 12px;width:min(176px,100%)}
.adm-aro svg{width:100%;height:auto}
.adm-aro circle{fill:none;stroke-width:14}
.adm-aro .adm-aro-fondo{stroke:var(--a-s2)}
.adm-aro .adm-aro-va{stroke:var(--a-primary);stroke-linecap:round}
.adm-aro>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.adm-aro small{font:700 10px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--a-muted)}
.adm-aro b{font:600 30px/1.1 var(--font-body);letter-spacing:-.04em}
.adm-aro span{font-size:12px;color:var(--a-muted)}
.adm-leyenda{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:12px;color:var(--a-muted);font-weight:600}
.adm-leyenda i,.adm-tira-ley i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}
.adm-k1{background:var(--a-primary)}.adm-k2{background:var(--a-c2,color-mix(in srgb,var(--a-primary) 38%,var(--a-surface)))}.adm-k3{background:var(--a-c3,color-mix(in srgb,var(--a-primary) 55%,var(--a-fg)))}.adm-k4{background:var(--a-c4)}.adm-k5{background:var(--a-c5)}
.adm-tira{display:flex;height:14px;border-radius:99px;overflow:hidden;gap:3px;margin:4px 0 16px}
.adm-tira i{display:block;height:100%;flex-basis:calc(var(--v) * 100%);border-radius:4px}
.adm-tira-ley{display:grid;grid-template-columns:1fr auto auto;gap:10px 14px;font-size:13px;align-items:center}
.adm-tira-ley span{color:var(--a-muted);text-align:right}

/* ── Listas con avance (stock bajo, recién entrados, consultas) ─────────── */
.adm-lista{list-style:none;display:flex;flex-direction:column}
.adm-lista>li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--a-line)}
.adm-lista>li:first-child{border-top:0;padding-top:0}
.adm-lista>li>div{flex:1;min-width:0}
.adm-lista b{display:block;font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-lista small{display:block;color:var(--a-muted);font-size:12px}
.adm-lista small em{font-style:normal;color:var(--a-mal);font-weight:600}
.adm-lista>li>strong{font-weight:700;font-size:13px;white-space:nowrap}
.adm-nivel{display:block;width:100%;max-width:140px;height:6px;border-radius:99px;background:var(--a-s2);overflow:hidden;flex:none}
.adm-nivel::before{content:"";display:block;height:100%;width:calc(var(--v) * 100%);border-radius:inherit;background:var(--a-primary)}
.adm-nivel.adm-n-mal::before{background:var(--a-mal)}
.adm-nivel.adm-n-warn::before{background:var(--a-warn)}
.adm-nivel.adm-n-ok::before{background:var(--a-ok)}
.adm-lista .adm-nivel{width:96px}

/* ── Avatares (iniciales: nunca la foto de una persona en un prototipo) ── */
.adm-av{width:32px;height:32px;border-radius:50%;flex:none;display:inline-grid;place-items:center;font:700 11px/1 var(--font-body);letter-spacing:.02em;background:var(--a-s2);color:var(--a-fg);border:1px solid var(--a-line)}
.adm-av.adm-av-2{background:var(--a-tint);color:var(--a-on-tint);border-color:var(--a-tint-line)}
.adm-quien-c{display:flex;align-items:center;gap:10px}
.adm-quien-c small{display:block;color:var(--a-muted);font-size:12px}

/* ── Barra de herramientas de una lista: buscar, pestañas, filtros ──────── */
.adm-herr{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adm-pestanas{display:inline-flex;gap:4px;padding:4px;border-radius:99px;background:var(--a-surface);border:1px solid var(--a-line);flex-wrap:wrap}
.adm .adm-pestana{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 13px;border-radius:99px;border:0;background:none;color:var(--a-muted);font:700 13px/1 var(--font-body)}
.adm .adm-pestana:hover{color:var(--a-fg)}
.adm .adm-pestana[aria-pressed="true"]{background:var(--a-ink);color:var(--a-on-ink)}
.adm .adm-pestana em{font-style:normal;font-size:11px}
.adm-total{margin-left:auto;color:var(--a-muted);font-size:13px;font-weight:600}

/* ── Tablas ─────────────────────────────────────────────────────────────── */
.adm-tabla-w{border:1px solid var(--a-line);border-radius:22px;overflow-x:auto;background:var(--a-surface);box-shadow:var(--a-sombra)}
.adm-card .adm-tabla-w{border:0;border-radius:0;box-shadow:none;margin:0 -20px -20px;border-top:1px solid var(--a-line)}
.adm .adm-tabla{min-width:640px;font-size:13px}
.adm .adm-tabla th{text-align:left;font:700 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--a-muted);background:var(--a-surface);padding:14px 18px;white-space:nowrap;border-bottom:1px solid var(--a-line)}
.adm .adm-tabla td{padding:12px 18px;border-top:1px solid var(--a-line);vertical-align:middle;color:var(--a-fg)}
.adm .adm-tabla tbody tr:first-child td{border-top:0}
.adm .adm-tabla tbody tr:hover td{background:var(--a-s2)}
.adm .adm-tabla .adm-num-c{font-weight:700;white-space:nowrap}
.adm .adm-tabla tr[hidden]{display:none}
.adm-prod{display:flex;align-items:center;gap:12px}
.adm-prod small,.adm-item small{display:block;color:var(--a-muted);font-size:12px}
.adm .adm-mini{width:42px;height:42px;object-fit:cover;border-radius:12px;flex:none;border:1px solid var(--a-line)}
.adm .adm-banner{width:160px;height:60px;object-fit:cover;border-radius:12px}
.adm .adm-link{color:var(--a-pt);font-weight:700}
.adm .adm-link.adm-mal{color:var(--a-mal)}
.adm-acciones{white-space:nowrap}
.adm-stock{display:flex;flex-direction:column;gap:6px;min-width:90px}

/* ── Estados: una píldora con su punto ──────────────────────────────────── */
.adm-badge{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:4px 10px 4px 8px;font-size:12px;font-weight:700;white-space:nowrap}
.adm-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.adm-b-ok{background:var(--a-ok-t);color:var(--a-ok)}
.adm-b-warn{background:var(--a-warn-t);color:var(--a-warn)}
.adm-b-mal{background:var(--a-mal-t);color:var(--a-mal)}
.adm-b-info{background:var(--a-tint);color:var(--a-on-tint)}
.adm-pill{border:1px solid var(--a-tint-line);background:var(--a-tint);color:var(--a-on-tint);border-radius:99px;padding:8px 14px;font-weight:700;font-size:13px}

/* ── Formularios ────────────────────────────────────────────────────────── */
.adm-busca{max-width:420px;width:100%}
.adm .adm-in{width:100%;min-height:42px;background:var(--a-bg);color:var(--a-fg);border:1px solid var(--a-line);border-radius:12px;padding:9px 13px;font:500 14px/1.4 var(--font-body);margin:0;box-shadow:none}
.adm .adm-in:focus{outline:none;border-color:var(--a-primary);box-shadow:0 0 0 3px var(--a-tint)}
.adm textarea.adm-in{resize:vertical}
.adm select.adm-in{cursor:pointer}
.adm-grilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.adm-campo{display:flex;flex-direction:column;gap:6px;font-size:13px}
.adm-campo>span{color:var(--a-muted);font-weight:600}
.adm-campo.adm-ancho{grid-column:1/-1}
.adm-campo.adm-inline{min-width:200px}
.adm-dos{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.adm-dos.adm-iguales{grid-template-columns:1fr 1fr}
.adm-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--a-line)}
.adm-item>div{flex:1}
.adm-totales{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin-top:14px;font-size:14px}
.adm-totales dt{color:var(--a-muted)}
.adm-totales dd{text-align:right}
.adm-fila{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.adm-fila b{margin-left:auto}
.adm .adm-texto{color:var(--a-muted);line-height:1.7}
.adm-form{display:flex;flex-direction:column;gap:12px}
.adm-hist{list-style:none;display:flex;flex-direction:column;gap:12px;border-left:2px solid var(--a-line);padding-left:16px!important}
.adm-hist li{position:relative}
.adm-hist li::before{content:"";position:absolute;left:-22px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--a-primary);box-shadow:0 0 0 3px var(--a-surface)}
.adm-hist small{display:block;color:var(--a-muted);font-size:12px}
.adm .adm-volver{color:var(--a-muted);font-size:13px;font-weight:600;margin-bottom:-6px}
.adm-chips{display:flex;flex-wrap:wrap;gap:8px}
.adm-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--a-line);border-radius:99px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;background:var(--a-surface)}
.adm-chip input{accent-color:var(--a-primary);margin:0}
.adm-sw{width:14px;height:14px;border-radius:50%;display:inline-block;border:1px solid var(--a-line)}
.adm-atrib{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.adm .adm-et{font-size:13px;color:var(--a-muted);margin-bottom:8px;font-weight:600}
.adm [data-variantes]{margin-top:14px}
.adm [data-variantes] .adm-in{min-height:34px;padding:6px 8px;max-width:120px}
.adm-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.adm .adm-img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;border:1px solid var(--a-line)}
.adm-subir{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;border:1.5px dashed var(--a-line);border-radius:14px;color:var(--a-muted);font-size:12px;text-align:center;padding:12px;cursor:pointer;margin:12px 0}
.adm-imgs .adm-subir{margin:0}
.adm-pie{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.adm-pie-fijo{position:sticky;bottom:16px;background:var(--a-surface);border:1px solid var(--a-line);border-radius:99px;padding:8px;justify-content:flex-end;box-shadow:var(--a-sombra)}
.adm-agrega{display:flex;gap:8px;margin-top:14px}
.adm .adm-mono{font-family:var(--mono);font-size:12px}
.adm-switch{width:42px;height:24px;border-radius:99px;border:0;background:var(--a-line);position:relative;padding:0;flex:none;transition:background .2s}
.adm-switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.adm-switch[aria-pressed="true"]{background:var(--a-primary)}
.adm-switch[aria-pressed="true"] i{transform:translateX(18px)}
.adm-sw-fila{display:flex;align-items:center;gap:10px;font-size:13px}
.adm-bloques{list-style:none;display:flex;flex-direction:column;gap:8px}
.adm-bloque{display:flex;align-items:center;gap:12px;background:var(--a-surface);border:1px solid var(--a-line);border-radius:16px;padding:10px 14px}
.adm-bloque b{flex:1;font-weight:600}
.adm-num{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--a-s2);color:var(--a-fg);font-size:12px;font-weight:700}
.adm-mover{display:flex;gap:4px}
.adm-colores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.adm-color{display:flex;align-items:center;gap:10px;border:1px solid var(--a-line);border-radius:14px;padding:8px 10px;cursor:pointer;font-size:13px}
.adm-color input{width:34px;height:34px;border:0;padding:0;background:none;border-radius:8px;cursor:pointer;flex:none}
.adm-color span{flex:1}

/* ── Diseño: la vista previa usa los colores de la TIENDA, no los del panel ── */
.adm-preview{border:1px solid var(--a-line);border-radius:16px;overflow:hidden;background:var(--bg);color:var(--fg)}
.adm-pv-cab{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);font:var(--title-weight,700) 13px/1 var(--font-title)}
.adm-pv-cab span{width:34px;height:6px;border-radius:4px;background:var(--muted);opacity:.6}
.adm-pv-cab i{margin-left:auto;width:54px;height:22px;border-radius:6px;background:var(--primary)}
.adm-pv-hero{padding:20px 14px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.adm-pv-hero b{width:70%;height:12px;border-radius:4px;background:var(--fg)}
.adm-pv-hero span{width:50%;height:8px;border-radius:4px;background:var(--muted)}
.adm-pv-hero em{width:90px;height:26px;border-radius:6px;background:var(--primary);margin-top:6px}
.adm-pv-grilla{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
.adm-pv-grilla>div{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;gap:6px;padding-bottom:10px}
.adm-pv-grilla img{width:100%;aspect-ratio:4/5;object-fit:cover}
.adm-pv-grilla b{margin:0 8px;height:7px;border-radius:4px;background:var(--fg);width:70%}
.adm-pv-grilla em{margin:0 8px;height:9px;border-radius:4px;background:var(--primary);width:40%}
.adm-pv-grilla em.adm-pv-oferta{background:var(--accent)}

/* ── El aviso de guardado: se mueve porque comunica un estado ───────────── */
.adm-toast{position:fixed;left:50%;bottom:76px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--a-ink);color:var(--a-on-ink);padding:11px 18px;border-radius:99px;font-size:13px;font-weight:600;max-width:min(92vw,460px);text-align:center;transition:opacity .2s,transform .2s;z-index:10001}
.adm-toast.ver{opacity:1;transform:translate(-50%,0)}
.adm-velo{display:none}

/* ── La barra para pasar del sitio al panel (fija, en las dos apps) ──────── */
.ngt-apps{margin:0;max-width:none;justify-content:flex-start;position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:10000;display:flex;gap:4px;padding:4px;border-radius:99px;background:color-mix(in srgb,#0b0d10 88%,transparent);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter:blur(8px);font:600 12px/1 var(--font-body)}
.ngt-apps a{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:99px;color:rgba(255,255,255,.72);text-decoration:none;min-height:36px;white-space:nowrap}
.ngt-apps a.on{background:#fff;color:#0b0d10}
.ngt-apps .adm-ic{width:15px;height:15px}

/* ── El héroe: una tarjeta en el color de la marca, entera ───────────────
   La cifra que manda, en color pleno con degradado (reels de mensajería y de
   Vessa). El texto es `--a-on`, medido contra `--a-primary` y `--a-hero-2`
   (el otro extremo del degradado: lo calcula quien arma las variables; sin
   él, el héroe es de un solo color). Los chips adentro van al revés —fondo
   `--a-on`, texto `--a-primary`—: el mismo par, así que el contraste vale. */
.adm-heroe{position:relative;overflow:hidden;background:linear-gradient(140deg,var(--a-primary),var(--a-hero-2,var(--a-primary)));border-color:transparent;color:var(--a-on)}
.adm-heroe>span,.adm-heroe .adm-h2,.adm-heroe small,.adm-heroe>b{color:var(--a-on)}
.adm-heroe .adm-chipic{background:var(--a-on);color:var(--a-primary)}
.adm-heroe .adm-delta{background:var(--a-on);color:var(--a-primary)}
.adm-heroe .adm-chispa{color:var(--a-on)}
.adm-heroe .adm-graf text{fill:var(--a-on)}
.adm-heroe .adm-graf .adm-eje{stroke:var(--a-on);opacity:.25}
.adm-heroe .adm-graf .adm-barra{fill:var(--a-on);opacity:.45}
.adm-heroe .adm-graf .adm-barra.on{opacity:1}
.adm-heroe .adm-graf .adm-trazo{stroke:var(--a-on)}
.adm-heroe .adm-graf .adm-area{fill:var(--a-on);opacity:.18}
.adm-cifra.adm-heroe>b{color:var(--a-on)}

/* ── Baldosas: bloques de color sólido que SON información (rapport) ────── */
.adm-baldosas{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.adm-baldosa{border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-height:118px;background:var(--a-s2);color:var(--a-fg);border:1px solid var(--a-line)}
.adm-baldosa small{font-size:12px;color:var(--a-muted)}
.adm-baldosa b{font:700 15px/1.25 var(--font-body);letter-spacing:-.01em}
.adm-baldosa strong{margin-top:auto;font:600 22px/1 var(--font-body);letter-spacing:-.03em}
.adm-baldosa-tinta{background:var(--a-ink);color:var(--a-on-ink);border-color:var(--a-ink)}
.adm-baldosa-tinta small{color:var(--a-muted-ink)}
.adm-baldosa-acento{background:var(--a-primary);color:var(--a-on);border-color:var(--a-primary)}
.adm-baldosa-acento small{color:var(--a-on)}
.adm-baldosa-tinte{background:var(--a-tint);color:var(--a-on-tint);border-color:var(--a-tint-line)}
.adm-baldosa-tinte small{color:var(--a-muted-tint)}

/* ── Saludo grande y fondo con temperatura ──────────────────────────────── */
.adm .adm-h1.adm-grande{font-size:clamp(30px,3.4vw,46px);letter-spacing:-.045em;line-height:1.02}
.adm.adm-calido{background:radial-gradient(1100px 420px at 18% -12%,var(--a-tint),transparent 70%),var(--a-bg)}

/* ── Navegación en píldoras arriba + riel flotante (Cadra, rapport, tavola) ─
   Variante del armazón: `.adm.adm-arriba` esconde la barra lateral en
   escritorio y usa `nav.adm-pildoras` en la barra de arriba. El riel lleva
   las acciones (buscar, nuevo, tema): íconos con `aria-label`. */
.adm-pildoras{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:99px;background:var(--a-surface);border:1px solid var(--a-line);box-shadow:var(--a-sombra);max-width:100%;overflow-x:auto;scrollbar-width:none}
.adm .adm-pildora{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 14px;border-radius:99px;color:var(--a-muted);font:700 13px/1 var(--font-body);white-space:nowrap;background:none;border:0}
.adm .adm-pildora:hover{color:var(--a-fg)}
.adm .adm-pildora.on,.adm .adm-pildora[aria-current="page"]{background:var(--a-ink);color:var(--a-on-ink)}
.adm .adm-pildora .adm-cuenta{min-width:18px;height:18px;padding:0 5px;font-size:10px;background:var(--a-mal);color:var(--a-on-ink)}
.adm .adm-pildora.on .adm-cuenta{background:var(--a-on-ink);color:var(--a-ink)}
.adm-riel{position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:35;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:99px;background:var(--a-ink);box-shadow:var(--a-sombra)}
.adm .adm-riel button,.adm .adm-riel a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:none;border:0;color:var(--a-on-ink)}
.adm .adm-riel button:hover,.adm .adm-riel a:hover,.adm .adm-riel .on{background:var(--a-ink-2)}
.adm.adm-arriba .adm-lado{display:none}
.adm.adm-arriba .adm-main,.adm.adm-arriba .adm-top{padding-left:84px}

/* ── La pastilla que se desliza (pestañas y píldoras), la pone panel-mov.js ─ */
.adm-pastilla{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:99px;background:var(--a-ink);pointer-events:none}
.adm .adm-con-pastilla .adm-pestana[aria-pressed="true"],.adm .adm-con-pastilla .adm-pildora.on,.adm .adm-con-pastilla .adm-pildora[aria-current="page"]{background:none}
.adm-con-pastilla .adm-pestana{position:relative;z-index:1}
.adm-pestanas{position:relative}

/* ── Progreso en segmentos (tasa de entrega, cupo, meta) ────────────────── */
.adm-segs{position:relative;height:22px;border-radius:6px;background:repeating-linear-gradient(90deg,var(--a-s2) 0 5px,transparent 5px 8px)}
.adm-segs::before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(90deg,var(--a-primary) 0 5px,transparent 5px 8px);clip-path:inset(0 calc((1 - var(--v,0)) * 100%) 0 0)}
.adm-segs.adm-n-mal::before{background:repeating-linear-gradient(90deg,var(--a-mal) 0 5px,transparent 5px 8px)}
.adm-segs.adm-n-warn::before{background:repeating-linear-gradient(90deg,var(--a-warn) 0 5px,transparent 5px 8px)}
.adm-heroe .adm-segs{background:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 5px,transparent 5px 8px)}
.adm-heroe .adm-segs::before{background:repeating-linear-gradient(90deg,var(--a-on) 0 5px,transparent 5px 8px)}

/* ── El abanico de rayitas (Vessa) y la dona por segmentos ──────────────── */
.adm-abanico{position:relative;display:grid;place-items:end center;margin:0 auto;width:min(260px,100%)}
.adm-abanico svg{width:100%;height:auto}
.adm-abanico line{stroke:var(--a-s2);stroke-width:3;stroke-linecap:round}
.adm-abanico line.on{stroke:var(--a-primary)}
.adm-abanico>div{position:absolute;left:0;right:0;bottom:0;text-align:center}
.adm-abanico b{display:block;font:600 30px/1.05 var(--font-body);letter-spacing:-.04em}
.adm-abanico small{color:var(--a-muted);font-size:12px}
.adm-aro .adm-s2{stroke:var(--a-c2,color-mix(in srgb,var(--a-primary) 38%,var(--a-surface)))}.adm-aro .adm-s3{stroke:var(--a-c3,color-mix(in srgb,var(--a-primary) 55%,var(--a-fg)))}.adm-aro .adm-s4{stroke:var(--a-c4)}.adm-aro .adm-s5{stroke:var(--a-c5)}
.adm-aro .adm-s-ok{stroke:var(--a-ok)}.adm-aro .adm-s-warn{stroke:var(--a-warn)}.adm-aro .adm-s-mal{stroke:var(--a-mal)}

/* ── Barras divergentes: lo que entra arriba, lo que sale abajo (Cadra) ─── */
.adm-graf .adm-entra{fill:var(--a-ok)}
.adm-graf .adm-sale{fill:var(--a-mal)}
.adm-graf .adm-cero{stroke:var(--a-fg);stroke-width:1;opacity:.35}
.adm-graf .adm-barra,.adm-graf .adm-entra{transform-box:fill-box;transform-origin:50% 100%}
.adm-graf .adm-sale{transform-box:fill-box;transform-origin:50% 0}
.adm-graf .adm-rayado{fill:url(#adm-trama)}

/* ── El flujo: una secuencia como nodos sobre una grilla de puntos ────────
   (el editor de automatizaciones del reel de mensajería). Cada nodo es una
   tarjeta sólida: la grilla queda detrás y no toca el contraste del texto. */
.adm-flujo{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;padding:22px 16px;border-radius:18px;background-color:var(--a-bg);background-image:radial-gradient(var(--a-line) 1px,transparent 1.2px);background-size:16px 16px}
.adm-nodo{position:relative;width:min(460px,100%);display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--a-surface);border:1px solid var(--a-line);box-shadow:var(--a-sombra)}
.adm-nodo>div{flex:1;min-width:0}
.adm-nodo small{display:block;font:700 10px/1.2 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--a-muted)}
.adm-nodo b{display:block;font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-nodo.on{border-color:var(--a-primary);box-shadow:0 0 0 3px var(--a-tint),var(--a-sombra)}
.adm-nodo.adm-hecho .adm-chipic{background:var(--a-ok-t);color:var(--a-ok)}
.adm-nodo-rama{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;font-size:12px;font-weight:700;color:var(--a-muted);background:var(--a-surface);border:1px solid var(--a-line);border-radius:99px;padding:4px 10px}
.adm-une{width:2px;height:26px;background:var(--a-line);position:relative;transform-origin:top}
.adm-une>i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:var(--a-surface);border:1px solid var(--a-line);display:grid;place-items:center;font:700 13px/1 var(--font-body);font-style:normal;color:var(--a-muted)}
.adm-fin{font-size:12px;font-weight:700;color:var(--a-muted);background:var(--a-surface);border:1px solid var(--a-line);border-radius:99px;padding:5px 12px}

/* ── Casillas: grilla de estados o mapa de calor (depósitos de Cadra) ───── */
.adm-casillas{display:grid;grid-template-columns:repeat(var(--cols,12),minmax(0,1fr));gap:4px}
.adm-casillas>i{aspect-ratio:1;border-radius:4px;background:var(--a-s2)}
.adm-casillas>.adm-c1{background:var(--a-c2,color-mix(in srgb,var(--a-primary) 38%,var(--a-surface)))}
.adm-casillas>.adm-c2{background:var(--a-primary)}
.adm-casillas>.adm-c-ok{background:var(--a-ok)}.adm-casillas>.adm-c-warn{background:var(--a-warn)}.adm-casillas>.adm-c-mal{background:var(--a-mal)}

/* ── La línea del día o del mes: puntos por estado y la marca de HOY ────── */
.adm-linea{position:relative;height:56px;margin:8px 4px 0}
.adm-linea::before{content:"";position:absolute;left:0;right:0;top:20px;height:2px;border-radius:2px;background:var(--a-line)}
.adm-linea-va{position:absolute;left:0;top:20px;height:2px;border-radius:2px;background:var(--a-ok);width:var(--hoy,0%)}
.adm-punto{position:absolute;top:15px;left:var(--x);width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--a-ok);box-shadow:0 0 0 3px var(--a-surface)}
.adm-punto.adm-p-warn{background:var(--a-warn)}.adm-punto.adm-p-mal{background:var(--a-mal)}
.adm-punto.adm-p-futuro{background:var(--a-surface);border:2px dashed var(--a-muted)}
.adm-punto.adm-p-grande{width:18px;height:18px;margin-left:-9px;top:12px}
.adm-hoy{position:absolute;top:2px;bottom:16px;left:var(--hoy,0%);width:2px;margin-left:-1px;background:var(--a-fg)}
.adm-hoy::before{content:attr(data-t);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font:700 10px/1 var(--font-body);letter-spacing:.1em;color:var(--a-fg);padding-bottom:3px}
.adm-linea-eje{position:absolute;left:0;right:0;bottom:0;font:600 11px/1 var(--font-body);color:var(--a-muted)}
.adm-linea-eje span{position:absolute;left:var(--x);transform:translateX(-50%)}

/* ── El vidrio (code.xr, 31/10/2026): placas esmeriladas sobre una escena ──
   Opt-in: `.adm.adm-vidrio`. La escena es un degradado hecho con la paleta
   (tres manchas sobre el fondo), NUNCA una foto: con una foto el contraste no
   se puede garantizar. La placa deja pasar la escena con alfa `--a-vidrio`.
   El texto se mide contra la placa mezclada con cada color de la escena y con
   el fondo: lo hace `vidrioSeguro()` de kit/vidrio.mjs, que sube el alfa
   hasta que todo llega (7 el texto, 4,5 el secundario) y escribe las
   `--a-escena-*` en hex en el `.adm`. Sin esas variables, el respaldo de
   abajo son las mismas mezclas que usa vidrio.mjs. Sin backdrop-filter, o si el sistema pide menos
   transparencia, la placa es opaca y el panel queda como el de siempre. */
.adm.adm-vidrio{--a-placa:color-mix(in srgb,var(--a-surface) calc(var(--a-vidrio,.74) * 100%),transparent);background:radial-gradient(900px 640px at 8% -4%,var(--a-escena-1,color-mix(in srgb,var(--a-primary) 26%,var(--a-bg))),transparent 72%),radial-gradient(820px 720px at 104% 28%,var(--a-escena-2,color-mix(in srgb,var(--a-c2,color-mix(in srgb,var(--a-primary) 38%,var(--a-surface))) 22%,var(--a-bg))),transparent 72%),radial-gradient(980px 620px at 38% 112%,var(--a-escena-3,color-mix(in srgb,var(--a-c3,color-mix(in srgb,var(--a-primary) 55%,var(--a-fg))) 18%,var(--a-bg))),transparent 72%),var(--a-bg);background-attachment:fixed}
.adm-vidrio :is(.adm-lado,.adm-card,.adm-cifra,.adm-tabla-w,.adm-pildoras,.adm-pestanas,.adm-nodo,.adm-vivo,.adm-burger):not(.adm-cifra-tinta,.adm-cifra-tinte,.adm-heroe){background:var(--a-placa);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border-color:color-mix(in srgb,var(--a-fg) 12%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 28%,transparent),var(--a-sombra)}
.adm-vidrio .adm-card .adm-tabla-w,.adm-vidrio .adm .adm-tabla th,.adm.adm-vidrio .adm-tabla th{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.adm.adm-vidrio{--a-placa:var(--a-surface)}}
@media (prefers-reduced-transparency:reduce){.adm.adm-vidrio{--a-placa:var(--a-surface)}}

/* ── La línea con brillo y el globo que sigue al gráfico ────────────────────
   El trazo lleva una sombra de su color. El globo (`.adm-tip`) lo mueve
   PanelMov.seguir(): se acerca al elemento con `data-tip` más cercano al
   cursor y escribe su texto (textContent, nunca HTML). */
.adm-graf .adm-trazo{filter:drop-shadow(0 4px 10px color-mix(in srgb,var(--a-primary) 45%,transparent))}
.adm-tip{position:absolute;z-index:5;pointer-events:none;left:0;top:0;transform:translate(-50%,calc(-100% - 10px));padding:7px 10px;border-radius:12px;background:var(--a-ink);color:var(--a-on-ink);font:700 12px/1.25 var(--font-body);white-space:nowrap;box-shadow:var(--a-sombra);opacity:0}
.adm-tip.ver{opacity:1}
.adm-tip-guia{position:absolute;z-index:4;pointer-events:none;top:0;bottom:0;width:1px;background:var(--a-fg);opacity:0}
.adm-tip-guia.ver{opacity:.25}
.adm-graf .adm-pt{fill:var(--a-surface);stroke:var(--a-primary);stroke-width:2;transform-box:fill-box;transform-origin:center}

/* ── Bloques que se apilan (barras hechas de cuadraditos) ──────────────────
   `<div class="adm-pila"><span class="on"><i></i><i></i>…</span>…</div>`:
   cada columna es un valor, cada `<i>` una unidad; la de hoy, `.on`. Quien
   arma el HTML escribe `--max` (la columna más alta): de ahí sale el alto de
   cada cuadrado, igual en todas las columnas, y la pila no pasa de `--alto`. */
.adm-pila{display:flex;align-items:flex-end;gap:6px;height:var(--alto,120px)}
.adm-pila>span{flex:1;display:flex;flex-direction:column-reverse;gap:3px;min-width:0}
.adm-pila>span>i{display:block;flex:none;height:calc((var(--alto,120px) - (var(--max,10) - 1) * 3px) / var(--max,10));border-radius:3px;background:var(--a-c2,color-mix(in srgb,var(--a-primary) 38%,var(--a-surface)))}
.adm-pila>span.on>i{background:var(--a-primary)}

/* ── El acceso: login, 2FA y el estado que procesa ──────────────────────────
   `.adm-acceso` es la tarjeta del login. PanelMov.paso() la cierra hasta su
   emblema (`.adm-acceso-emblema`, el logo), cambia lo de adentro y la vuelve
   a abrir. `.adm-otp` son las casillas del código: PanelMov.otp(c, true) las
   junta y suelta chispas; con false, tiembla. `.adm-halo` rodea lo que se
   está procesando (`.adm-procesa`) y termina en `.adm-ok` o `.adm-mal`. */
.adm-acceso{position:relative;width:min(420px,100%);margin:0 auto;padding:28px;border-radius:26px;background:var(--a-surface);border:1px solid var(--a-line);box-shadow:var(--a-sombra);overflow:hidden}
.adm-acceso-emblema{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;display:grid;place-items:center;opacity:0;pointer-events:none}
.adm-otp{position:relative;display:flex;justify-content:center;gap:8px}
.adm .adm-otp input{width:46px;height:54px;text-align:center;font:700 22px/1 var(--font-body);border-radius:14px;border:1px solid var(--a-line);background:var(--a-s2);color:var(--a-fg)}
.adm .adm-otp input:focus{border-color:var(--a-primary);outline:0;box-shadow:0 0 0 3px var(--a-tint)}
.adm-otp-ok{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:16px;display:grid;place-items:center;background:var(--a-ok);color:var(--a-on-ink);opacity:0;pointer-events:none}
.adm-chispa-p{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--a-ok);pointer-events:none;opacity:0}
.adm-halo{transition:box-shadow .3s ease}
.adm-halo.adm-ok{box-shadow:0 0 0 2px var(--a-ok),0 0 34px color-mix(in srgb,var(--a-ok) 45%,transparent)}
.adm-halo.adm-mal{box-shadow:0 0 0 2px var(--a-mal),0 0 34px color-mix(in srgb,var(--a-mal) 45%,transparent)}

/* ── Hover: la tarjeta se levanta apenas (es respuesta, no adorno) ──────── */
.adm-bento>.adm-card,.adm-kpis>.adm-cifra,.adm-baldosa{transition:transform .18s ease,box-shadow .18s ease}

/* ── Lo que llega en vivo ───────────────────────────────────────────────── */
.adm-flota{position:absolute;pointer-events:none;font:700 12px/1 var(--font-body);padding:5px 8px;border-radius:99px;background:var(--a-ink);color:var(--a-on-ink);white-space:nowrap}

/* ── EL MOVIMIENTO ─────────────────────────────────────────────────────────
   Llegada: una vez por vista y por sesión, y TODO termina antes de 0,86 s
   (animacion-ngt, regla 7: menos de 0,9). En dos tiempos, como los reels de
   code.xr: primero entra la placa vacía (desenfocada, apenas chica) y 120 ms
   después lo de adentro; los gráficos arrancan cuando su placa ya está.
   - `--i` es el orden de la placa (lo escribe panel-mov.js): 30 ms entre una
     y otra, con tope en 6. Lo heredan sus hijos, así cada gráfico espera a
     su tarjeta.
   - `--j` es el orden dentro de un grupo (barras, puntos, bloques) y `--n`
     cuántos hay: el espaciado se achica para que el último no pase del
     presupuesto, haya 6 barras o 31 puntos.
   Las cuentas, peor caso (placa 6): placa 180+380 = 560; contenido
   180+120+300 = 600; barras 180+180+120+360 = 840; puntos 180+160+140+300 =
   780; trazo 180+260+420 = 860; área 180+380+300 = 860; flujo 180+140+220+300
   = 840; bloques 180+160+240+220 = 800. Los números (panel-mov.js) 800; el
   aro 200+180+460 = 840. `pruebas` del kit: medir-llegada en demo.html.
   Lo que cambia: la pastilla, la fila nueva, el número que salta, el aviso,
   el paso del acceso. Lo único en bucle: el punto de «en vivo» y el halo
   mientras algo se procesa. */
@media (prefers-reduced-motion:no-preference){
 .adm-bento>.adm-card:hover,.adm-kpis>.adm-cifra:hover,.adm-baldosa:hover{transform:translateY(-2px)}
 .adm-vivo::before{animation:adm-late 2.4s ease-out infinite}
 .adm-pastilla{transition:left .32s cubic-bezier(.3,.8,.25,1),width .32s cubic-bezier(.3,.8,.25,1)}
 .adm-tip{transition:opacity .15s ease,left .14s cubic-bezier(.3,.8,.3,1),top .14s cubic-bezier(.3,.8,.3,1)}
 .adm-tip-guia{transition:opacity .15s ease,left .14s cubic-bezier(.3,.8,.3,1)}
 .adm-halo.adm-procesa{animation:adm-procesa 1.4s ease-in-out infinite}

 .adm-llega .adm-cab,.adm-llega .adm-kpis>*,.adm-llega .adm-bento>*,.adm-llega>.adm-card,.adm-llega>.adm-tabla-w,.adm-llega>.adm-herr,.adm-llega .adm-baldosas>*{animation:adm-placa .38s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(min(var(--i,0),6) * 30ms)}
 .adm-llega .adm-kpis>*>*,.adm-llega .adm-bento>*>*,.adm-llega>.adm-card>*,.adm-llega .adm-baldosas>*>*{animation:adm-contenido .3s ease-out both;animation-delay:calc(min(var(--i,0),6) * 30ms + 120ms)}
 .adm-llega .adm-h1{animation:adm-sube .45s cubic-bezier(.2,.75,.25,1) both}
 .adm-llega .adm-graf .adm-barra,.adm-llega .adm-graf .adm-entra,.adm-llega .adm-graf .adm-sale{animation:adm-crece .36s cubic-bezier(.25,.8,.3,1) both;animation-delay:calc(min(var(--i,0),6) * 30ms + 180ms + var(--j,0) * min(16ms,120ms / var(--n,1)))}
 .adm-llega .adm-punto,.adm-llega .adm-graf .adm-pt{animation:adm-pop .3s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(min(var(--i,0),6) * 30ms + 160ms + var(--j,0) * min(14ms,140ms / var(--n,1)))}
 .adm-llega .adm-graf .adm-trazo{stroke-dasharray:1;animation:adm-traza .42s cubic-bezier(.35,.6,.3,1) both;animation-delay:calc(min(var(--i,0),6) * 30ms + 260ms)}
 .adm-llega .adm-chispa path{stroke-dasharray:1;animation:adm-traza .45s cubic-bezier(.35,.6,.3,1) both;animation-delay:calc(min(var(--i,0),6) * 30ms + 200ms)}
 .adm-llega .adm-graf .adm-area{animation:adm-aparece .3s ease both;animation-delay:calc(min(var(--i,0),6) * 30ms + 380ms)}
 .adm-llega .adm-tira i,.adm-llega .adm-nivel::before{transform-origin:0 50%;animation:adm-ancho .45s cubic-bezier(.25,.8,.3,1) both;animation-delay:calc(min(var(--i,0),6) * 30ms + 180ms)}
 .adm-llega .adm-segs::before{animation:adm-recorta .45s cubic-bezier(.25,.8,.3,1) both;animation-delay:calc(min(var(--i,0),6) * 30ms + 180ms)}
 .adm-llega .adm-abanico line.on{animation:adm-aparece .2s ease both;animation-delay:calc(min(var(--i,0),6) * 30ms + 160ms + var(--j,0) * min(8ms,200ms / var(--n,1)))}
 .adm-llega .adm-hoy,.adm-llega .adm-linea-va{animation:adm-avanza .5s cubic-bezier(.3,.8,.3,1) both;animation-delay:calc(min(var(--i,0),6) * 30ms + 160ms)}
 .adm-llega .adm-flujo>*{animation:adm-entra .3s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(min(var(--i,0),6) * 30ms + 140ms + var(--j,0) * min(50ms,220ms / var(--n,1)))}
 .adm-llega .adm-casillas>i{animation:adm-aparece .25s ease both;animation-delay:calc(min(var(--i,0),6) * 30ms + 140ms + var(--j,0) * min(6ms,200ms / var(--n,1)))}
 .adm-llega .adm-pila>span>i{animation:adm-pop .22s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(min(var(--i,0),6) * 30ms + 160ms + var(--j,0) * min(10ms,240ms / var(--n,1)))}

 /* El cambio de vista (PanelMov.cambiar): la vista vieja se desenfoca y se
    va; la nueva entra con su llegada, o con un fundido si ya se vio. */
 html.adm-cambia::view-transition-old(root){animation:adm-se-va .18s ease-in both}
 html.adm-cambia::view-transition-new(root){animation:adm-aparece .22s ease-out both .08s}
 .adm-vuelve{animation:adm-contenido .26s ease-out both}

 .adm-nuevo,.adm .adm-tabla tbody tr.adm-nuevo td{animation:adm-ilumina 1.8s ease-out both}
 .adm-salta{animation:adm-salta .45s cubic-bezier(.3,1.5,.5,1)}
 .adm-flota{animation:adm-flota 1.6s ease-out both}
 .adm-tiembla{animation:adm-tiembla .4s ease}
}
@keyframes adm-placa{from{opacity:0;transform:scale(.965);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes adm-contenido{from{opacity:0;transform:translateY(6px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes adm-se-va{to{opacity:0;filter:blur(10px);transform:scale(.99)}}
@keyframes adm-procesa{0%,100%{box-shadow:0 0 0 1px var(--a-primary),0 0 14px color-mix(in srgb,var(--a-primary) 25%,transparent)}50%{box-shadow:0 0 0 2px var(--a-primary),0 0 34px color-mix(in srgb,var(--a-primary) 50%,transparent)}}
@keyframes adm-entra{from{opacity:0;transform:translateY(12px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes adm-sube{from{opacity:0;transform:translateY(40%)}to{opacity:1;transform:none}}
@keyframes adm-crece{from{transform:scaleY(0)}}
@keyframes adm-traza{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes adm-aparece{from{opacity:0}}
@keyframes adm-ancho{from{transform:scaleX(0)}}
@keyframes adm-recorta{from{clip-path:inset(0 100% 0 0)}}
@keyframes adm-pop{from{opacity:0;transform:scale(.2)}}
@keyframes adm-avanza{from{left:0;width:0}}
@keyframes adm-late{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a-ok) 55%,transparent)}70%,100%{box-shadow:0 0 0 9px color-mix(in srgb,var(--a-ok) 0%,transparent)}}
@keyframes adm-ilumina{from{background-color:var(--a-tint)}}
@keyframes adm-salta{40%{transform:translateY(-3px) scale(1.04)}}
@keyframes adm-flota{0%{opacity:0;transform:translateY(6px)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
@keyframes adm-tiembla{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}

/* ── Anchos ─────────────────────────────────────────────────────────────── */
@media (max-width:1280px){.adm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.adm-g8,.adm-g7,.adm-g6,.adm-g5,.adm-g4{grid-column:span 6}.adm-g8,.adm-g7{grid-column:1/-1}.adm-top-busca{display:none}}
@media (max-width:1100px){.adm-dos,.adm-dos.adm-iguales{grid-template-columns:1fr}}
@media (max-width:1023px){
 .adm-lado{position:fixed;left:0;top:0;bottom:0;margin:0;width:288px;height:auto;border-radius:0 22px 22px 0;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 40px rgba(0,0,0,.4)}
 .adm.menu-on .adm-lado{transform:none}
 .adm.menu-on .adm-velo{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);z-index:39}
 .adm-x,.adm-burger{display:inline-flex}
 .adm-top{position:sticky;top:0;z-index:30;background:var(--a-bg);padding:10px 16px;border-bottom:1px solid var(--a-line)}
 .adm-top-acc,.adm-quien{display:none}
 .adm-main{padding:16px 16px 110px}
 .adm-g8,.adm-g7,.adm-g6,.adm-g5,.adm-g4{grid-column:1/-1}
}
@media (max-width:560px){.adm-kpis{gap:10px}.adm-cifra>b{font-size:22px}.adm-cifra .adm-chispa{display:none}.adm-cifras,.adm-grilla,.adm-colores{grid-template-columns:1fr 1fr}.adm-grilla,.adm-colores{grid-template-columns:1fr}.adm-vivo{display:none}.adm .adm-h1{font-size:24px}.ngt-apps span{font-size:11px}.ngt-apps a{padding:9px 11px}}
@media (max-width:380px){.adm-kpis{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.adm-lado,.adm-toast,.adm-switch,.adm-switch i,.adm .adm-btn{transition:none}}
@media (max-width:1023px){.adm.adm-arriba .adm-lado{display:flex}.adm-riel{display:none}.adm.adm-arriba .adm-main,.adm.adm-arriba .adm-top{padding-left:16px}.adm-pildoras{display:none}.adm-nodo-rama{position:static;transform:none;margin-left:auto}}