… El JS agrega .abierto en un rAF tras render (para que la transición corra) y al cerrar la quita y re-renderiza tras ~300ms. */ .despliegue { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .28s var(--ease), opacity .22s var(--ease); } .despliegue.abierto { grid-template-rows: 1fr; opacity: 1; } .despliegue > .despliegue-inner { overflow: hidden; min-height: 0; } /* ── Menú de módulos (filas de opción) ────────────────────────────── NUEVO 2026-07-06 — rediseño aprobado por el usuario en el hub de Insumos y replicado a todos los hubs: las cards verticales de submódulos se leían igual que los KPIs del dashboard y todo se mezclaba. La navegación ahora son FILAS DE OPCIÓN — horizontales, superficie más sólida y radio menor que las cards de datos, icono en cápsula + chevron. Estructura: .menu-list > a.menu-item > .mi-icon(svg) + .mi-text(.mi-title + .mi-desc) + .mi-chev(svg chevron) — deshabilitado: div.menu-item .disabled con .coming-badge en lugar del chevron. */ .menu-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; } .menu-item { display: flex; align-items: center; gap: 16px; padding: 15px 18px; text-decoration: none; cursor: pointer; background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .7); border-radius: 16px; box-shadow: 0 1px 2px rgba(39, 39, 39, .04); transition: background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease); } .menu-item:hover { background: rgba(255, 255, 255, .94); border-color: rgba(39, 39, 39, .12); } .menu-item:hover .mi-chev svg { transform: translateX(3px); } .menu-item:hover .mi-icon { background: var(--ink); color: #fff; } .mi-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; position: relative; overflow: hidden; /* contiene el destello */ background: rgba(39, 39, 39, .06); color: var(--ink-soft); transition: background .22s var(--ease), color .22s var(--ease); } .mi-icon svg { width: 21px; height: 21px; stroke-width: 1.6; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; position: relative; } /* Destello en la cápsula cuando se pone negra (pedido del usuario 2026-07-06): mismo timing del estándar de botones oscuros (btn-shine 0.9s ease-in-out en loop, aparición instantánea). FIX 2026-07-07 — la banda del gradiente es RELATIVA AL ANCHO del elemento: los stops de los botones (37%→63%) en una cápsula de 42px daban ~11px de banda — se seguía viendo delgada tras el primer ensanche. En elementos chicos los stops se abren mucho más (28%→72% ≈ 18px) para que el barrido se perciba igual de grueso. */ /* FIX 2026-07-07 (iteración 2, verificada con capturas cuadro a cuadro) — abrir los stops SOLO diluía la luz: banda ancha pero tenue, se seguía viendo "delgada". La percepción de grosor necesita un NÚCLEO brillante (.55) con hombros suaves — un brillo definido, no un velo. */ /* FIX 2026-07-07 (iteración 3) — el núcleo era un pico que tocaba el máximo solo en el 50%: seguía leyéndose delgado. Ahora es una MESETA (brillo pleno sostenido del 42% al 58% ≈ un tercio de la cápsula). */ .mi-icon::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 24%, rgba(255, 255, 255, .20) 34%, rgba(255, 255, 255, .55) 42%, rgba(255, 255, 255, .55) 58%, rgba(255, 255, 255, .20) 66%, transparent 76%); transform: translateX(-130%); } .menu-item:not(.disabled):hover .mi-icon::after { animation: btn-shine 1.7s ease-in-out infinite; } .mi-text { min-width: 0; } .mi-title { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); } .mi-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; color: var(--muted); line-height: 1.4; margin-top: 2px; overflow: hidden; } .mi-chev { flex: none; margin-left: auto; line-height: 0; color: var(--muted-2); } .mi-chev svg { width: 16px; height: 16px; stroke-width: 2; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s var(--ease); } .menu-item.disabled { opacity: .55; pointer-events: none; cursor: default; } .menu-item .coming-badge { flex: none; margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--muted-2); background: rgba(39, 39, 39, .06); padding: 3px 10px; border-radius: var(--r-pill); } /* ── Foco visible ──────────────────────────────────────────────────── */ button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid rgba(60, 145, 230, .55); outline-offset: 2px; } .form-input:focus-visible, .form-select:focus-visible { outline: none; } /* ── Revelado de entrada ─────────────────────────────────────────── Al final del stylesheet a propósito: mientras el elemento tiene la clase .reveal esta transición debe ganarle a la de .card (hover) — a igual especificidad decide el orden. GlassUI retira .reveal al terminar la entrada. */ /* FIX 2026-07-03 — coreografía de entrada acelerada para el día a día (pedido del usuario: "más fluido, tipo 60 fps"): duraciones .45/.5s (antes .8/.9s) y los retardos escalonados de TODAS las páginas se escalan a la mitad con calc() — una sola palanca, sin tocar los --d inline de cada página. */ .reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .45s var(--ease), transform .5s var(--ease), filter .45s var(--ease); transition-delay: calc(var(--d, 0ms) * 0.5); } .reveal.in { opacity: 1; transform: none; filter: none; } /* ── Responsive ────────────────────────────────────────────────────── */ @media (max-width: 1020px) { .navpills { display: none; } .only-mobile { display: block; } .gtop .only-mobile { margin-left: auto; } .page-head { align-items: flex-start; flex-direction: column; } } @media (max-width: 700px) { main, .page, .page-wide { padding: 14px 18px 56px; } } /* ── Modo ligero (POS / hardware modesto) ────────────────────────── Mantiene el lenguaje (greige, radios, tipografía, acentos) pero elimina el costo GPU: sin blur real ni brillos animados. */ .glass-lite .ambient { display: none; } .glass-lite .card, .glass-lite .table-wrap, .glass-lite .empty-state, .glass-lite .navpills, .glass-lite .icirc, .glass-lite .btn, .glass-lite .qbtn, .glass-lite .pop, .glass-lite .modal-card, .glass-lite .modal-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; } .glass-lite .card, .glass-lite .table-wrap, .glass-lite .empty-state { background: rgba(255, 255, 255, .82); } .glass-lite .pop, .glass-lite .modal-card { background: #fdfdfc; } /* FIX 2026-08-11 (reporte del usuario, tablet en modo oscuro): las superficies sólidas de glass-lite quedaron SOLO con su valor claro — cualquier .card del theme salía blanca lavada sobre el lienzo oscuro (se vio al llevar las cards de dashboard de la consola al módulo Insumos de la tablet). Equivalentes sólidos de los tokens dark. */ [data-theme="dark"] .glass-lite .card, [data-theme="dark"] .glass-lite .table-wrap, [data-theme="dark"] .glass-lite .empty-state { background: rgba(26, 26, 26, .96); } [data-theme="dark"] .glass-lite .pop, [data-theme="dark"] .glass-lite .modal-card { background: #161616; } /* ── MODO OSCURO — fase 1: tokens duales (NUEVO 2026-07-23) ───────── Pedido del usuario: claro/oscuro en todo el sitio. El atributo [data-theme="dark"] en (lo pone GlassUI leyendo la MISMA clave localStorage del POS, ttpos_pos_theme) redefine la paleta y ajusta las superficies con blancos quemados. Fase 2 (2026-07-29, ver más abajo) ya barre superficies genéricas. Los impresos (PDF) no cambian. */ [data-theme="dark"] { color-scheme: dark; --canvas: #0d0d0d; --ink: #f4f4f2; --ink-soft: #cfcfca; --muted: #8f8f88; --muted-2: #6a6a63; --hairline: rgba(255, 255, 255, .09); --glass: rgba(26, 26, 26, .92); --glass-strong: rgba(32, 32, 32, .96); --glass-border: rgba(255, 255, 255, .10); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .5); --shadow-hover: 0 2px 4px rgba(0, 0, 0, .45), 0 22px 48px rgba(0, 0, 0, .6); --shadow-pop: 0 2px 6px rgba(0, 0, 0, .5), 0 26px 64px rgba(0, 0, 0, .7); --color-focus-ring: rgba(96, 165, 235, .5); --color-bg-alt: rgba(255, 255, 255, .06); --color-border: rgba(255, 255, 255, .14); --color-border-light: var(--hairline); } /* Superficies con blanco quemado (se llevan a tokens en la fase 2). */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea, [data-theme="dark"] textarea.form-input, [data-theme="dark"] .filter-select, [data-theme="dark"] .filter-input { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); } [data-theme="dark"] .form-input:hover, [data-theme="dark"] .form-select:hover { background: rgba(255, 255, 255, .10); } [data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] .field input:focus, [data-theme="dark"] .field select:focus, [data-theme="dark"] .field textarea:focus { background: #242422; } /* FIX 2026-07-29 — modo oscuro fase 2, barrido sistemático (reporte del usuario con captura: el campo "cantidad" de Solicitud de pedidos y luego el mismo defecto en la columna "Aprobar" de Gestión de pedidos quedaban con fondo claro y texto claro, ilegibles). Historial: cada página de Distribución (distribucion_pedidos.html, distribucion_aprobacion.html, distribucion_reportes.html, distribucion_despachos.html, distribucion_recepcion.html) más insumos_productos.html y toma_inventario.html definen su propia clase de input numérico grande (.sol-input, .cant-input, etc.) con `background: rgba(255,255,255,.9)` fijo — quedan afuera de las reglas de arriba porque no usan .form-input/.field. Causa raíz: el parche de fase 1 solo cubría las clases "oficiales" del contrato de formularios; cualquier /

con clase
   propia de página quedaba con el blanco de la maqueta original.
   Solución de raíz (no por página) — INTENTO 1: regla genérica POR TIPO DE
   ELEMENTO con especificidad (0,1,1), pensada para ganarle a una clase de
   página de menor especificidad (0,1,0) sin usar !important.
   FIX 2026-07-30 — ese intento 1 no alcanzaba (reporte del usuario con
   captura: "Emitir factura" seguía con la tabla de ítems en gris claro
   sólido en oscuro, texto claro encima, ilegible).
   Historial: en la sesión 2026-07-29 se retiraron por "duplicados" los
   overrides oscuros locales de `.items-table input` (facturacion_emision.
   html), `.modal textarea` (facturacion_recibidas.html) y `.eleg-num
   input` (inventario.html), confiando en que la regla genérica de arriba
   ya alcanzaba. `caf.html` (`.tramo-row-edit select/input`,
   `.upload-extra input[type="number"]`, `.modal-card input[type="number"]`)
   nunca tuvo override oscuro.
   Causa raíz: estas páginas fijan el fondo claro en una regla SIN scope de
   tema (aplica en claro Y oscuro) cuyo selector tiene especificidad IGUAL
   (0,1,1) o MAYOR (0,2,1, por el atributo `[type="number"]`) a la de la
   red de seguridad. En un empate de especificidad gana la regla que
   aparece más abajo en la cascada — y el <style> de cada página siempre
   carga después del <link> a este archivo — así que la regla de la
   página seguía ganando en los empates, y en `caf.html` ganaba directo
   por especificidad mayor. Además `facturacion_emision.html` fija el
   fondo del selector de giro (`#em-giro-sel`) por ATRIBUTO `style=""`
   inline, cuya especificidad ningún selector de hoja de estilos puede
   igualar. No existe un techo de especificidad "razonable" que garantice
   ganarle SIEMPRE a cualquier página presente y futura sin tocarla.
   Solución de raíz definitiva: `!important` en fondo/borde/color, acotado
   estrictamente a `[data-theme="dark"]`. Es la opción correcta aquí (y no
   un parche) porque: (a) un `!important` de hoja de estilos SÍ le gana a
   un `style=""` inline sin `!important` (la importancia se decide ANTES
   que la especificidad en la cascada, y un inline normal es especificidad
   alta pero sigue siendo "normal", no "important"); (b) es la única forma
   de dar la garantía que pidió el usuario ("ningún campo nuevo debe volver
   a quedar con fondo claro en oscuro sin tocar este archivo"), sin
   importar cuántas clases o atributos use el selector de una página nueva
   ni el orden de carga de sus hojas de estilo.
   Para no romper la única excepción legítima y documentada que SÍ debe
   seguir ganando (pos_venta.html define su propia paleta oscura
   --pos-input/--pos-hover/--pos-elevated vía `html[data-theme="dark"]
   .form-input`, sin !important), esta red de seguridad EXCLUYE con
   :where() (especificidad cero) a los elementos que ya llevan las clases
   "oficiales" del contrato de formularios (.form-input/.form-select/
   .filter-input/.filter-select) — para esos, el mecanismo de especificidad
   documentado más abajo se mantiene intacto y una página puede seguir
   customizándolos. También excluye `:disabled` y `[readonly]`: ya tienen
   (o pueden tener, en el caso de readonly) tratamiento propio de menor
   énfasis en varias páginas que no es el defecto reportado (texto sobre
   fondo claro sólido) y no se auditó su compatibilidad con !important. */
[data-theme="dark"] input:where(
    :not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(:disabled):not([readonly]):not(.form-input):not(.filter-input)
  ),
[data-theme="dark"] select:where(:not(:disabled):not(.form-select):not(.filter-select)),
[data-theme="dark"] textarea:where(:not(:disabled):not([readonly]):not(.form-input)) {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(:disabled):not([readonly]):not(.form-input):not(.filter-input)):hover,
[data-theme="dark"] select:where(:not(:disabled):not(.form-select):not(.filter-select)):hover {
  background: rgba(255, 255, 255, .10) !important;
}
[data-theme="dark"] input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(:disabled):not([readonly]):not(.form-input):not(.filter-input)):focus,
[data-theme="dark"] select:where(:not(:disabled):not(.form-select):not(.filter-select)):focus,
[data-theme="dark"] textarea:where(:not(:disabled):not([readonly]):not(.form-input)):focus {
  background: #242422 !important;
}
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--muted-2); opacity: 1; }
[data-theme="dark"] input:disabled, [data-theme="dark"] select:disabled, [data-theme="dark"] textarea:disabled {
  opacity: .55; background: var(--color-bg-alt);
}
/* Chips/badges de superficie neutra: usaban rgba(39,39,39,x) (tinte OSCURO
   pensado para lienzo claro) — sobre el canvas casi negro de este tema
   quedan invisibles como pastilla (el texto se sigue leyendo, pero pierde
   la superficie). Se reemplazan por el equivalente claro sobre oscuro. */
[data-theme="dark"] .gside .sitem:hover,
[data-theme="dark"] .gside .soon-tag,
[data-theme="dark"] .mitem.on,
[data-theme="dark"] .mitem .soon-tag,
[data-theme="dark"] .toggle,
[data-theme="dark"] .badge-plan,
[data-theme="dark"] .menu-item .coming-badge,
[data-theme="dark"] .mi-icon {
  background: rgba(255, 255, 255, .08);
}
[data-theme="dark"] .modal-card { background: rgba(34, 34, 32, .96); }
[data-theme="dark"] .pop { background: rgba(34, 34, 32, .97); }
[data-theme="dark"] .notif:hover, [data-theme="dark"] .mitem:hover { background: rgba(255, 255, 255, .07); }
/* FIX 2026-07-23 — badges de estado apagados en dark: los tonos -deep
   (pensados para fondo claro) no contrastan sobre las superficies oscuras.
   En dark el texto usa el tono brillante de la paleta. */
[data-theme="dark"] .badge.ok, [data-theme="dark"] .badge-produccion { color: var(--green); }
[data-theme="dark"] .badge.proc, [data-theme="dark"] .badge-proceso { color: var(--blue); }
[data-theme="dark"] .badge.no, [data-theme="dark"] .badge-pendiente { color: var(--red); }
[data-theme="dark"] tbody tr:hover { background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .toggle .tthumb { background: #3c3c3a; }
[data-theme="dark"] .gside-toggle { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .icirc .dot { border-color: #222; }
[data-theme="dark"] .menu-item { background: rgba(34, 34, 32, .85); border-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .menu-item:hover { background: rgba(48, 48, 46, .95); border-color: rgba(255, 255, 255, .16); }
/* Elementos "tinta sólida": en oscuro --ink es claro → el texto blanco
   fijo se invierte a oscuro para mantener el contraste. */
[data-theme="dark"] .btn-primary, [data-theme="dark"] .qbtn.dark,
[data-theme="dark"] .menu-item:hover .mi-icon { color: #141414; }
/* FIX 2026-07-23 (pedido del usuario) — los iconos LIMA de los botones
   tinta casi no se ven en oscuro (el botón se invierte a superficie
   clara): pasan al par oscuro del lima (--lime-deep). */
[data-theme="dark"] .btn-primary svg, [data-theme="dark"] .qbtn.dark svg { stroke: var(--lime-deep); }
[data-theme="dark"] .navpills a.active, [data-theme="dark"] .gside .sitem.active { color: #141414; }
/* FIX 2026-07-31 — reporte del usuario con captura: al pasar el mouse
   sobre el ítem ACTIVO del panel lateral (p.ej. "Facturación" estando ya
   en Facturación) en modo oscuro, el texto quedaba gris oscuro sobre un
   fondo gris — casi ilegible.
   Historial: `.gside .sitem.active` es un patrón "tinta sólida"
   (background: var(--ink), línea 326) que la regla de arriba invierte en
   oscuro fijando `color: #141414` porque --ink pasa a ser claro. Pero el
   estado combinado activo+hover no tenía regla propia: el color lo fijaba
   `.gside .sitem.active:hover { color: #fff }` (base, más arriba en el
   archivo) empatado en especificidad (0,4,0) con el override oscuro de la
   línea anterior — el empate lo gana la regla que aparece más abajo en la
   cascada (esta línea), así que el color SÍ quedaba en #141414. El
   problema real era el FONDO: en ese mismo estado ganaba
   `[data-theme="dark"] .gside .sitem:hover` (0,4,0 también, por el
   :hover extra que no tiene `.active`) sobre `.gside .sitem.active`
   (0,3,0, sin :hover) — es decir la píldora sólida clara del activo
   desaparecía al hacer hover y quedaba el overlay translúcido oscuro del
   hover genérico no-activo, mientras el texto seguía forzado a #141414
   por la regla de arriba → texto oscuro sobre fondo oscuro.
   Causa raíz: ninguna regla modelaba el estado combinado activo+hover en
   oscuro; fondo y color se resolvían por separado desde reglas pensadas
   para otros estados.
   Solución: regla explícita para `.gside .sitem.active:hover` en oscuro
   con especificidad (0,5,0) — mayor que cualquiera de las reglas en
   conflicto — que reafirma la píldora sólida (var(--ink), clara en
   oscuro) y el texto oscuro (#141414), igual que el activo en reposo. */
[data-theme="dark"] .gside .sitem.active:hover { background: var(--ink); color: #141414; }
/* Patrón "tinta sólida" repetido en las páginas (background: var(--ink) +
   color #fff): en oscuro --ink es claro → el texto pasa a tinta oscura.
   Clases por página: filter-pill/badge-dark (usuarios), sec-pill/filter-tab
   (finanzas), tipo-dte-btn/btn-dark (emisión), fam-item (maestra).
   FIX 2026-07-29 — modo oscuro fase 2 (barrido sistemático): se agrega
   .orden-pill.active (reportes_personal.html), que tenía el mismo patrón
   sin cubrir — quedaba con botón activo por defecto en texto blanco sobre
   fondo claro invertido, ilegible desde la primera carga de la página. */
[data-theme="dark"] .filter-pill.active, [data-theme="dark"] .badge-dark,
[data-theme="dark"] .sec-pill.active, [data-theme="dark"] .filter-tab.active,
[data-theme="dark"] .tipo-dte-btn.active, [data-theme="dark"] .btn-dark,
[data-theme="dark"] .fam-item.active, [data-theme="dark"] .orden-pill.active { color: #141414; }
[data-theme="dark"] .rol-chip { background: rgba(255, 255, 255, .09); }
[data-theme="dark"] .avatar { color: #5a6414; }
/* Logos Nanuc/Crumb (tinta negra) → blanco. Provisional con invert();
   cuando exista la variante blanca del asset se reemplaza. */
[data-theme="dark"] img[src$="nanuc.svg"],
[data-theme="dark"] img[src$="nanuc-iso.svg"],
[data-theme="dark"] img[src$="logocrumbpos.svg"] { filter: invert(1); }

/* Los IMPRESOS no conocen el modo oscuro (regla del usuario 2026-07-23):
   ante cualquier window.print(), los tokens vuelven a la paleta clara y
   los logos dejan de invertirse. Los PDFs generados en el servidor nunca
   se ven afectados por el theme. */
@media print {
  [data-theme="dark"] {
    --canvas: #ffffff;
    --ink: #272727;
    --ink-soft: #4a4a46;
    --muted: #82827c;
    --muted-2: #a6a69f;
    --hairline: rgba(39, 39, 39, .08);
    --glass: rgba(255, 255, 255, .55);
    --glass-strong: rgba(255, 255, 255, .78);
    --glass-border: rgba(255, 255, 255, .65);
  }
  [data-theme="dark"] img[src$="nanuc.svg"],
  [data-theme="dark"] img[src$="nanuc-iso.svg"],
  [data-theme="dark"] img[src$="logocrumbpos.svg"] { filter: none; }
}

/* ── Movimiento reducido ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; filter: none; }
  .ambient i { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   TRANSITIONS.DEV (skill instalada 2026-08-10, pedido del usuario:
   animaciones canónicas para TODO el software). Piezas adaptadas del
   catálogo t-* a los tokens del theme; la guarda global de
   prefers-reduced-motion de arriba (transition/animation .01ms
   !important) cubre todo este bloque, como exige la skill.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Tokens de movimiento de la skill (solo los que usan estas piezas) */
  --duration-fast: 250ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* 25 · Checkbox check */
  --check-box: 150ms; --check-draw: 350ms; --check-delay: 100ms;
  --check-uncheck: 150ms; --check-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 27 · Toggle (overshoot con un rebote vía ease, sin keyframes:
     evita el replay en el primer paint de un switch ya encendido) */
  --toggle-dur: 350ms; --toggle-travel: 18px;
  --toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
  /* 03 · Notification badge */
  --badge-pop-dur: 500ms; --badge-blur: 2px;
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  /* 04 · Text states swap */
  --text-swap-dur: 150ms; --text-swap-translate-y: 4px;
  --text-swap-blur: 2px; --text-swap-ease: ease-in-out;
  /* 02 · Number pop-in */
  --digit-dur: 500ms; --digit-distance: 8px; --digit-stagger: 70ms;
  --digit-blur: 2px; --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  /* 09 · Icon swap */
  --icon-swap-dur: 250ms; --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25; --icon-swap-ease: ease-in-out;
  /* 10 · Success check */
  --sc-opacity-dur: 500ms; --sc-rotate-dur: 500ms; --sc-rotate-from: 80deg;
  --sc-bob-dur: 500ms; --sc-y-amount: 40px; --sc-blur-dur: 500ms;
  --sc-blur-from: 10px; --sc-path-dur: 500ms; --sc-path-delay: 80ms;
  --sc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 25 · CHECKBOX CANÓNICO (upgrade CSS puro sobre el input nativo:
   cero cambios de markup en las ~13 páginas que ya los usan; :checked e
   :indeterminate reaccionan también a cambios programáticos, que es
   como cargan estado varias páginas de config). La caja pinta primero
   (--check-box) y el visto se DIBUJA después en diagonal vía clip-path
   (--check-draw + delay), replicando el stroke-draw de la skill sin
   inyectar SVG. Los inputs del switch (.toggle-switch) quedan fuera.
   Opt-out puntual: data-no-anim. ─────────────────────────────────── */
input[type="checkbox"]:not(:is(.toggle-switch input, [data-no-anim])) {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex: none;
  border: 1.5px solid var(--muted); border-radius: 4px;
  background: transparent; cursor: pointer;
  position: relative; display: inline-block; vertical-align: -3px;
  transition: background var(--check-box) var(--check-ease),
              border-color var(--check-box) var(--check-ease);
}
input[type="checkbox"]:not(:is(.toggle-switch input, [data-no-anim]))::after {
  /* Medidas RELATIVAS a la caja: varias páginas fijan 15/16/22px al
     input (cierre del POS usa 22px) y el visto debe escalar con él. */
  content: ''; position: absolute; left: 26%; top: 6%;
  width: 29%; height: 54%;
  border-right: 1.7px solid var(--canvas);
  border-bottom: 1.7px solid var(--canvas);
  transform: rotate(43deg); opacity: 0;
  clip-path: inset(-15% 100% -15% -15%);
  transition: clip-path var(--check-uncheck) var(--check-ease),
              opacity 0ms linear var(--check-uncheck);
}
input[type="checkbox"]:not(:is(.toggle-switch input, [data-no-anim])):checked {
  background: var(--ink); border-color: var(--ink);
}
input[type="checkbox"]:not(:is(.toggle-switch input, [data-no-anim])):checked::after {
  opacity: 1; clip-path: inset(-15% -15% -15% -15%);
  transition: clip-path var(--check-draw) var(--check-ease) var(--check-delay),
              opacity 0ms linear var(--check-delay);
}
/* Tri-estado (matriz de permisos): guion centrado en vez de visto. */
input[type="checkbox"]:not(:is(.toggle-switch input, [data-no-anim])):indeterminate {
  background: var(--ink); border-color: var(--ink);
}
input[type="checkbox"]:not(:is(.toggle-switch input, [data-no-anim])):indeterminate::after {
  opacity: 1; left: 20%; top: calc(50% - 1px); width: 54%; height: 0;
  border-right: 0; border-bottom: 1.7px solid var(--canvas);
  transform: none; clip-path: none; transition: opacity var(--check-box) var(--check-ease);
}
input[type="checkbox"]:not(:is(.toggle-switch input, [data-no-anim])):focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
input[type="checkbox"]:not(:is(.toggle-switch input, [data-no-anim])):disabled {
  opacity: .45; cursor: default;
}

/* ── 27 · TOGGLE (switch booleano canónico — antes vivía duplicado en
   pos_configuracion/pos_integraciones; el viaje del pulgar gana el
   overshoot con rebote de la skill). Markup canónico:
   <label class="toggle-switch"><input type="checkbox"><span class="toggle-slider"></span></label> */
.toggle-switch { position: relative; width: 40px; height: 22px; flex: none; display: inline-block; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute; inset: 0; border-radius: var(--r-pill);
  background: var(--hairline); cursor: pointer;
  transition: background var(--toggle-dur) var(--ease);
}
.toggle-slider::after {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  translate: 0 0; will-change: translate;
  transition: translate var(--toggle-dur) var(--toggle-ease);
}
.toggle-switch input:checked + .toggle-slider { background: var(--blue); }
.toggle-switch input:checked + .toggle-slider::after { translate: var(--toggle-travel) 0; }
.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── 16 · TABS SLIDING — el segmentado del theme (.toggle + .tthumb) ya
   desliza; se alinea al token de la skill para tabs (250ms smooth-out
   en vez del spring de 400ms). ─────────────────────────────────────── */
.toggle .tthumb {
  transition: left var(--duration-fast) var(--ease-smooth-out),
              width var(--duration-fast) var(--ease-smooth-out);
}

/* ── 03 · NOTIFICATION BADGE — pop del punto rojo de la campana al
   aparecer (scale 0 → overshoot con blur). `.t-pop` es la clase
   genérica re-disparable (globito de mesas del POS, contadores). ──── */
@keyframes t-badge-pop {
  from { transform: scale(0); opacity: 0; filter: blur(var(--badge-blur)); }
  to   { transform: scale(1); opacity: 1; filter: blur(0); }
}
.icirc .dot { animation: t-badge-pop var(--badge-pop-dur) var(--badge-pop-ease); }
.t-pop { animation: t-badge-pop var(--badge-pop-dur) var(--badge-pop-ease); }

/* ── 04 · TEXT STATES SWAP (verbatim de la skill) ───────────────────── */
.t-text-swap {
  display: inline-block;
  transform: translateY(0); filter: blur(0); opacity: 1;
  transition: transform var(--text-swap-dur) var(--text-swap-ease),
              filter var(--text-swap-dur) var(--text-swap-ease),
              opacity var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur)); opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur)); opacity: 0;
  transition: none;
}

/* ── 02 · NUMBER POP-IN (verbatim; lo orquesta GlassUI.numeroPop) ──── */
@keyframes t-digit-pop-in {
  0% { transform: translateY(var(--digit-distance)); opacity: 0; filter: blur(var(--digit-blur)); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}
.t-digit-group { display: inline-flex; align-items: baseline; }
.t-digit { display: inline-block; will-change: transform, opacity, filter; }
.t-digit-group.is-animating .t-digit { animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both; }
.t-digit-group.is-animating .t-digit[data-stagger="1"] { animation-delay: var(--digit-stagger); }
.t-digit-group.is-animating .t-digit[data-stagger="2"] { animation-delay: calc(var(--digit-stagger) * 2); }

/* ── 09 · ICON SWAP (verbatim; lo usa el botón de tema sol/luna) ───── */
.t-icon-swap { position: relative; display: inline-grid; }
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition: opacity var(--icon-swap-dur) var(--icon-swap-ease),
              filter var(--icon-swap-dur) var(--icon-swap-ease),
              transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1; filter: blur(0); transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0; filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}

/* ── 10 · SUCCESS CHECK (verbatim con prefijo --sc-; el largo del path
   se calibra en JS con getTotalLength, regla dura de la skill) ─────── */
.t-success-check {
  display: inline-block; transform-origin: center; opacity: 0;
  will-change: transform, opacity, filter;
}
.t-success-check svg { display: block; overflow: visible; }
.t-success-check svg path { stroke-dasharray: 20; stroke-dashoffset: 20; }
.t-success-check[data-state="in"] {
  animation: t-sc-fade var(--sc-opacity-dur) var(--sc-ease-out) forwards,
             t-sc-rotate var(--sc-rotate-dur) var(--sc-ease-out) forwards,
             t-sc-blur var(--sc-blur-dur) var(--sc-ease-out) forwards,
             t-sc-bob var(--sc-bob-dur) var(--sc-ease-out) forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-sc-draw var(--sc-path-dur) var(--sc-ease-out) var(--sc-path-delay) forwards;
}
@keyframes t-sc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-sc-rotate { from { transform: rotate(var(--sc-rotate-from)); } to { transform: rotate(0deg); } }
@keyframes t-sc-blur { from { filter: blur(var(--sc-blur-from)); } to { filter: blur(0); } }
@keyframes t-sc-bob { from { translate: 0 var(--sc-y-amount); } to { translate: 0 0; } }
@keyframes t-sc-draw { to { stroke-dashoffset: 0; } }
/* Guarda extra de la skill para quien tenga reduce activo: el check
   aparece quieto y completo (la guarda global ya frena la animación). */
@media (prefers-reduced-motion: reduce) {
  .t-success-check { opacity: 1; }
  .t-success-check svg path { stroke-dashoffset: 0 !important; }
}

/* ── 09b · Flecha plegar/desplegar del panel lateral: el giro de 180°
   ya existía (body.gside-min la invierte) pero saltaba sin transición —
   ahora rota con el token del icon swap. ───────────────────────────── */
.gside-toggle svg { transition: transform var(--icon-swap-dur) var(--icon-swap-ease); }

/* ── 10b · SELLO DE RESULTADO (GlassUI.selloResultadoHtml/animarSello):
   círculo dibujándose + visto verde (éxito) o X roja (error). El aviso
   canónico lo integra con avisar({ sello: 'ok' | 'error' }). ────────── */
.sello-resultado.sello-ok svg { stroke: #29bf12; }
.sello-resultado.sello-error svg { stroke: var(--red); }
.sello-resultado .sello-circulo { opacity: .45; stroke-width: 2.6; }

/* ── SECTION-LABEL CANÓNICO (FIX 2026-08-10 — reclamo recurrente del
   usuario: "muy apretado, no hay aire entre títulos y elementos").
   La pieza se usaba en 34 páginas pero NUNCA estuvo en el theme: cada
   página la definía (o no — y quedaba pegada a las cards, como en
   Reportes → Ventas). Valores del consenso de las páginas que sí la
   definían, con el margen superior GENEROSO de la pasada de aire de
   Reportes (2026-07-24). Las definiciones locales existentes siguen
   ganando (su <style> carga después) — esto pone el piso para toda
   página presente y futura. ─────────────────────────────────────── */
.section-label {
  font-size: 13px; font-weight: 600; color: var(--muted);
  margin: 34px 0 14px;
}

/* ── OVERLAY DE PROCESO (GlassUI.procesando) — NUEVO 2026-08-11 (pedido
   del usuario: al emitir la guía de despacho "pasa un rato y uno no sabe
   si hay un error o qué"). Bloquea la pantalla con el modal canónico +
   anillo girando mientras corre una operación larga (emitir un DTE,
   generar un reporte). Cerrar SIEMPRE con .cerrar() en un finally. ── */
.proceso-spinner { width: 44px; height: 44px; margin: 0 auto 14px; display: block; animation: proceso-girar .9s linear infinite; }
.proceso-spinner circle {
  fill: none; stroke: var(--blue-deep); stroke-width: 3;
  stroke-linecap: round; stroke-dasharray: 90 150;
}
@keyframes proceso-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .proceso-spinner { animation: proceso-girar 2.5s linear infinite; }
}

/* ── CHECK VERDE EN BANNERS DE ÉXITO — DIRECTRIZ 2026-08-11 (pedido del
   usuario: "cuando algo se envíe o se acepte debe salir el icono de
   check verde que tenemos para las ventas — para todo lo exitoso").
   Los diálogos modales de éxito usan el sello canónico (avisar/confirmar
   con sello:'ok'); los BANNERS verdes — la otra superficie de éxito, con
   45 páginas usándolos — reciben aquí un visto que entra con pop, sin
   tocar ninguna página: es la clase del theme. El color va inline en el
   data-URI (un background-image no hereda currentColor); mismo verde en
   light y dark (--green-deep se lee bien sobre ambos fondos del banner
   verdoso translúcido). ──────────────────────────────────────────────── */
.banner.success::before, .form-banner.success::before, .alert-success::before {
  content: ""; display: inline-block; width: 15px; height: 15px;
  margin-right: 8px; vertical-align: -2px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231f8c0e" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m8 12.5 2.7 2.7L16 9.5"/></svg>') center / contain no-repeat;
  animation: banner-check-pop .45s var(--ease-bounce, cubic-bezier(.34, 1.36, .64, 1)) both;
}
@keyframes banner-check-pop {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .banner.success::before, .form-banner.success::before, .alert-success::before { animation: none; }
}

/* FIX 2026-08-12 (reporte del usuario: al scrollear rápido "pega un salto
   y se auto-scrollea solo, aparece vacía la pantalla y se scrollea
   rápidamente" — en ambos sentidos, intermitente) — diagnóstico: el
   SCROLL ANCHORING del navegador pelea con los .reveal animados
   (opacity+transform al entrar al viewport): cuando el contenido de
   anclaje se desplaza por la animación, Chrome "compensa" moviendo el
   scroll solo. Se desactiva el anclaje global; este theme no lo
   necesita (nada inserta contenido sobre el viewport en frío).
   VIGILAR en las pruebas del usuario; si reaparece, el siguiente
   sospechoso es content-visibility de tablas largas. */
html { overflow-anchor: none; }

/* FIX 2026-08-12 (bug de scroll del usuario, confirmado con su video
   falla.mov) — lo que se veía era el REBOTE ELÁSTICO de macOS: al
   scrollear rápido deja pasar del final/inicio, muestra el vacío
   ("aparece vacía la pantalla") y resortea solo de vuelta ("se
   auto-scrollea"); con la sidebar fija el efecto se percibe doble.
   Pedido textual: "si se llega al final o a la parte superior ahí se
   termina no más el scroll". overscroll-behavior: none desactiva el
   rebote del scroller principal en Chromium/Safari 16+; el intento
   anterior (overflow-anchor: none, más arriba) atacaba otra causa y
   queda igual: ninguna de las dos features la necesita el theme. */
html, body { overscroll-behavior: none; }

/* ── BOTONERA DE MODAL SIEMPRE VISIBLE — DIRECTRIZ 2026-08-12 (pedido
   del usuario con capturas de "Mi cuenta": "los botones al final deben
   verse siempre en primer plano, no esperar a scrollear todo hacia
   abajo — aplica a todo el software"). La .modal-card ya scrollea
   (max-height 90vh); la .modal-footer pasa a STICKY dentro de ese
   scroll: en modales cortos queda donde siempre, y en modales más
   altos que la pantalla queda ANCLADA abajo con el contenido pasando
   por debajo (fondo sólido + hairline para que se lea como barra).
   Los offsets negativos compensan el padding de la card (30/26px)
   para que la barra llegue hasta los bordes reales. Cubre los 23
   archivos que usan .modal-footer y todo modal futuro, sin tocar
   ninguna página. ──────────────────────────────────────────────── */
.modal-footer {
  position: sticky; bottom: -26px; z-index: 3;
  margin-left: -30px; margin-right: -30px; margin-bottom: -26px;
  padding: 14px 30px 20px;
  background: rgba(255, 255, 255, .94);
  border-top: 1px solid var(--hairline);
  border-radius: 0 0 24px 24px;
}
[data-theme="dark"] .modal-footer { background: rgba(34, 34, 32, .97); }
[data-theme="dark"] .glass-lite .modal-footer { background: #161616; }