@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300..800&family=Geist+Mono:wght@400..600&display=swap");
/* ══════════════════════════════════════════════════════════════════════
   Astrantix · Capa visual premium (oscura)
   Se aplica solo con <html class="axp">. No cambia HTML, IDs, scripts ni sw.js:
   redefine los colores del panel y agrega vidrio, brillo y movimiento.
   Para volver al diseño anterior: Ajustes → Interfaz → Diseño premium → Apagado.
   ══════════════════════════════════════════════════════════════════════ */

/* 1 · Paleta. Se pisan las variables que usa todo el panel (claro y oscuro, d6 y clásico). */
html.axp.axp.axp body,
html.axp.axp.axp body[data-theme],
html.axp.axp.axp body[data-theme][data-acento] {
  color-scheme: dark;
  --ax-bg: #09090b;
  --ax-bg-2: #0c0c0f;
  --ax-card: #111114;
  --ax-card-2: #16161a;
  --ax-hover: #1b1b20;
  --ax-line: rgba(255,255,255,.08);
  --ax-line-2: rgba(255,255,255,.14);
  --ax-ink: #fafafa;
  --ax-ink-2: #a1a1aa;
  --ax-ink-3: #71717a;
  --ax-acc: #2dd4bf;
  --ax-acc-2: #14b8a6;
  --ax-acc-btn: #0f9488;
  --ax-glow: rgba(45,212,191,.28);
  --ax-glow-2: rgba(45,212,191,.10);
  --ax-r: 12px;
  --ax-r-s: 9px;
  --ax-ease: cubic-bezier(.22,.61,.36,1);
  --ax-t: .3s var(--ax-ease);
  --ax-font: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ax-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* variables del panel */
  --bg: var(--ax-bg); --bg-dim: var(--ax-card-2); --bg-hover: var(--ax-hover); --bg-campo: #0d0d10;
  --card: var(--ax-card); --paper: var(--ax-card); --paper-2: var(--ax-card-2);
  --ink: var(--ax-ink); --ink-2: var(--ax-ink-2); --ink-3: var(--ax-ink-3); --ink-ph: #52525b;
  --mut: var(--ax-ink-3); --muted: var(--ax-ink-3);
  --line: var(--ax-line); --line-2: var(--ax-line-2); --linea: var(--ax-line); --lin: var(--ax-line);
  --azul: var(--ax-acc-btn); --azul-dark: #0b7a71; --azul-soft: rgba(45,212,191,.12); --azul-txt: #5eead4;
  --accent: var(--ax-acc-btn); --acc: var(--ax-acc-btn); --erp-accent: var(--ax-acc-btn); --bm-acento: var(--ax-acc);
  --verde: #22c55e; --verde-soft: rgba(34,197,94,.13);
  --rojo: #f43f5e; --rojo-soft: rgba(244,63,94,.13);
  --ambar: #f59e0b; --ambar-soft: rgba(245,158,11,.13); --ambar-txt: #fcd34d; --ambar-bg: rgba(245,158,11,.13); --amarillo: #facc15;
  --ok: #22c55e; --bad: #f43f5e;
  --r: var(--ax-r); --r-s: var(--ax-r-s);
  --sombra-1: 0 0 0 0 transparent; --sombra-2: 0 24px 60px -12px rgba(0,0,0,.65); --shadow: var(--sombra-2); --shadow-sm: none;
  --theme-bg: var(--ax-bg); --theme-panel: var(--ax-card); --theme-panel-2: var(--ax-card-2); --theme-line: var(--ax-line);
  --theme-ink: var(--ax-ink); --theme-muted: var(--ax-ink-3); --theme-input: #0d0d10; --theme-hover: var(--ax-hover);
  --erp-bg: var(--ax-bg); --erp-panel: var(--ax-card); --erp-line: var(--ax-line); --erp-ink: var(--ax-ink); --erp-muted: var(--ax-ink-3); --erp-soft: var(--ax-card-2);
  --vg-1: var(--ax-acc); --vg-2: #52525b; --vg-bar: #0f766e;
  --ax-ink-logo: #fafafa;

  background: transparent !important;
  color: var(--ax-ink);
  font-family: var(--ax-font) !important;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
html.axp { background: #09090b !important; }
html.axp body :is(button, input, select, textarea, table, h1, h2, h3, h4, h5, h6, .btn, .chip) { font-family: inherit; }
html.axp body :is(.num, .r.num, td.num, kbd, code, .p-cod, .gr-cod) { font-variant-numeric: tabular-nums; }
html.axp body :is(kbd, code) { font-family: var(--ax-mono) !important; }

/* Fondo: focos de luz y rejilla tenue (no se mueven, no cuestan al desplazar). */
html.axp body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(45,212,191,.09), transparent 62%),
    radial-gradient(700px 480px at 8% 108%, rgba(99,102,241,.07), transparent 60%),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, rgba(0,0,0,.55) 45%, transparent 85%);
          mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, rgba(0,0,0,.55) 45%, transparent 85%);
}
html.axp ::selection { background: rgba(45,212,191,.28); color: #fff; }
html.axp * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
html.axp ::-webkit-scrollbar { width: 10px; height: 10px; }
html.axp ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
html.axp ::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.22); }
html.axp ::-webkit-scrollbar-track { background: transparent; }

/* 2 · Menú lateral: vidrio oscuro, píldora con brillo. */
html.axp.axp.axp body .lat,
html.axp.axp.axp body #lat {
  background: rgba(10,10,13,.72) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border-right: 1px solid var(--ax-line) !important;
  box-shadow: 1px 0 0 rgba(255,255,255,.02), 24px 0 60px -40px rgba(0,0,0,.8) !important;
}
html.axp.axp.axp body .lat :is(.lat-cab, .lat-item) {
  border-radius: 9px !important;
  color: var(--ax-ink-2) !important;
  transition: background-color var(--ax-t), color var(--ax-t), box-shadow var(--ax-t), transform var(--ax-t) !important;
}
html.axp.axp.axp body .lat :is(.lat-cab, .lat-item):hover {
  background: rgba(255,255,255,.05) !important; color: var(--ax-ink) !important; transform: translateX(2px);
}
html.axp.axp.axp body .lat :is(.lat-cab.on, .lat-item.on) {
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03)) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 0 0 1px rgba(45,212,191,.0), 0 8px 24px -12px var(--ax-glow) !important;
}
html.axp.axp.axp body .lat .lat-cab.on svg { color: var(--ax-acc) !important; filter: drop-shadow(0 0 6px rgba(45,212,191,.55)); }
html.axp.axp.axp body .lat .lat-item.on::before { background: var(--ax-acc) !important; box-shadow: 0 0 10px var(--ax-acc); }
html.axp.axp.axp body .lat .lat-pildora { background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; border-radius: 9px !important; }
html.axp.axp.axp body .lat :is(.lat-buscar-btn, .lat-orden-btn) {
  background: rgba(255,255,255,.035) !important; border: 1px solid var(--ax-line) !important; border-radius: 10px !important;
  color: var(--ax-ink-2) !important; transition: border-color var(--ax-t), background-color var(--ax-t), box-shadow var(--ax-t) !important;
}
html.axp.axp.axp body .lat :is(.lat-buscar-btn, .lat-orden-btn):hover { border-color: var(--ax-line-2) !important; background: rgba(255,255,255,.06) !important; box-shadow: 0 0 0 4px rgba(255,255,255,.03) !important; }
html.axp.axp.axp body .lat kbd { background: rgba(255,255,255,.06) !important; border: 1px solid var(--ax-line) !important; color: var(--ax-ink-3) !important; border-radius: 5px; }
html.axp.axp.axp body .lat .lat-pie { border-top: 1px solid var(--ax-line) !important; background: transparent !important; }
html.axp.axp.axp body .lat :is(.lat-hijos, .lat-hijos-in) { background: transparent !important; }
html.axp.axp.axp body .lat :is(.lat-n, .lat-sub) { color: var(--ax-ink-3) !important; }
/* El botón Noche/Día no aplica: el diseño premium es oscuro. */
html.axp body #theme-toggle, html.axp body .js-tema, html.axp body [data-tema-toggle] { display: none !important; }

/* 3 · Cabecera flotante: vidrio. */
html.axp.axp.axp body .cab-flota {
  background: rgba(9,9,11,.62) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--ax-line) !important; box-shadow: none !important;
}
html.axp.axp.axp body .cab-flota .cab-migas { color: var(--ax-ink-3) !important; }
html.axp.axp.axp body .cab-flota .cab-migas :is(b, strong, span:last-child) { color: var(--ax-ink) !important; }
html.axp.axp.axp body .cab-btn {
  background: rgba(255,255,255,.035) !important; border: 1px solid var(--ax-line) !important; color: var(--ax-ink-2) !important;
  border-radius: 10px !important; transition: transform var(--ax-t), background-color var(--ax-t), border-color var(--ax-t), color var(--ax-t), box-shadow var(--ax-t) !important;
}
html.axp.axp.axp body .cab-btn:hover { color: var(--ax-ink) !important; border-color: var(--ax-line-2) !important; background: rgba(255,255,255,.06) !important; transform: translateY(-1px); }
html.axp.axp.axp body .cab-btn.primario {
  background: #fafafa !important; color: #09090b !important; border-color: #fafafa !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 8px 26px -10px rgba(255,255,255,.45) !important;
}
html.axp.axp.axp body .cab-btn.primario:hover { background: #fff !important; box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 10px 32px -8px rgba(255,255,255,.55) !important; }

/* 4 · Títulos y textos. */
html.axp.axp.axp body main :is(h1, h2) { color: var(--ax-ink) !important; letter-spacing: -.025em; font-weight: 650; text-wrap: balance; }
html.axp.axp.axp body main .titulo h2 {
  font-size: clamp(22px, 2.1vw, 28px) !important;
  background: linear-gradient(180deg, #fff 30%, #a1a1aa 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html.axp.axp.axp body main :is(h3, h4) { color: var(--ax-ink) !important; letter-spacing: -.015em; }
html.axp.axp.axp body :is(.hint, .sub, .p-meta, .meta, .t-meta, .lbl, .lb) { color: var(--ax-ink-3) !important; }
html.axp.axp.axp body .sub { color: var(--ax-ink-2) !important; }
html.axp.axp.axp body a { color: var(--azul-txt); text-underline-offset: 3px; text-decoration-color: rgba(94,234,212,.35); transition: color var(--ax-t), text-decoration-color var(--ax-t); }
html.axp.axp.axp body a:hover { color: #99f6e4; text-decoration-color: currentColor; }

/* Entrada de cada pantalla. */
/* Caminata entre pantallas: la que se va sale hacia la izquierda y la nueva entra desde la derecha.
   Con View Transitions (Chrome/Edge) se animan las dos; sin ellas, al menos entra la nueva. */
@keyframes axIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes axOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-16px); } }
html.axp body main > section.on { animation: axIn .5s cubic-bezier(.22,.61,.36,1) both; }
html.axp.ax-vt body main > section.on { animation: none; view-transition-name: ax-pantalla; }
::view-transition-old(ax-pantalla) { animation: axOut .3s ease-in both; }
::view-transition-new(ax-pantalla) { animation: axIn .5s cubic-bezier(.22,.61,.36,1) both; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(ax-pantalla) { animation-duration: .5s; }

/* 5 · Tarjetas (Bento): bordes finos, foco de luz que sigue el cursor. */
html.axp.axp.axp body :is(.card, .tbl, .erp-kpi, .erp-live-total, .erp-payment-card, .panel, .box, .cat, .lista-card, .mg-card) {
  background:
    radial-gradient(420px circle at var(--ax-x, -999px) var(--ax-y, -999px), rgba(255,255,255,.055), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008)) ,
    var(--ax-card) !important;
  border: 1px solid var(--ax-line) !important;
  border-radius: var(--ax-r) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -28px rgba(0,0,0,.7) !important;
  transition: border-color var(--ax-t), box-shadow var(--ax-t), transform var(--ax-t) !important;
}
html.axp.axp.axp body :is(.card, .erp-kpi, .lista-card, .mg-card):hover {
  border-color: rgba(255,255,255,.13) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 0 0 1px rgba(45,212,191,.05), 0 24px 50px -30px rgba(0,0,0,.8), 0 0 40px -22px var(--ax-glow) !important;
}
html.axp.axp.axp body .card .card { background: rgba(255,255,255,.025) !important; box-shadow: none !important; }
/* Tarjetas que son un acceso (se tocan): se elevan. */
html.axp.axp.axp body :is(.ini-acciones > *, .erp-kpi, .hub-f, .rp-kpis > *, .ini-fila) {
  transition: transform var(--ax-t), border-color var(--ax-t), box-shadow var(--ax-t), background-color var(--ax-t) !important;
}
html.axp.axp.axp body :is(.ini-acciones > *, .hub-f):hover { transform: translateY(-3px) scale(1.015); }
html.axp.axp.axp body .erp-kpi:hover, html.axp.axp.axp body .rp-kpis > *:hover { transform: translateY(-2px); }
html.axp.axp.axp body :is(.ini-acciones > *, .hub-f):active { transform: translateY(-1px) scale(.995); }

/* Inicio en Bento Grid. */
html.axp.axp.axp body .ini-bento { gap: 14px !important; }
html.axp.axp.axp body .ini-bento > .card,
html.axp.axp.axp body .ini-acciones > * { border-radius: 14px !important; }
html.axp.axp.axp body #ini-hoy {
  background:
    radial-gradient(420px circle at var(--ax-x, -999px) var(--ax-y, -999px), rgba(255,255,255,.06), transparent 45%),
    radial-gradient(120% 140% at 0% 0%, rgba(45,212,191,.16), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(99,102,241,.10), transparent 60%),
    var(--ax-card) !important;
}
html.axp.axp.axp body .ini-acciones > * { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), var(--ax-card) !important; border: 1px solid var(--ax-line) !important; }
html.axp.axp.axp body .ini-acciones > *:hover { border-color: rgba(45,212,191,.35) !important; box-shadow: 0 0 0 1px rgba(45,212,191,.12), 0 18px 40px -22px var(--ax-glow) !important; }

/* KPI. */
html.axp.axp.axp body :is(.erp-kpi .val, .erp-kpi strong, .rp-kpis .v, .ini-mes strong, .vg-k b) { color: #fff !important; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
html.axp.axp.axp body .erp-kpi .lbl { color: var(--ax-ink-3) !important; text-transform: uppercase; letter-spacing: .06em; font-size: 11px !important; }

/* 6 · Botones con microinteracciones. */
html.axp.axp.axp body .btn {
  position: relative; isolation: isolate;
  border-radius: var(--ax-r-s) !important;
  background: linear-gradient(180deg, #19b3a5, var(--ax-acc-btn)) !important;
  border: 1px solid rgba(94,234,212,.35) !important;
  color: #fff !important; font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 6px 18px -8px var(--ax-glow) !important;
  transition: transform var(--ax-t), box-shadow var(--ax-t), background var(--ax-t), border-color var(--ax-t), color var(--ax-t), opacity var(--ax-t) !important;
}
html.axp.axp.axp body .btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 0 0 4px rgba(45,212,191,.12), 0 12px 28px -10px rgba(45,212,191,.55) !important;
}
html.axp.axp.axp body .btn:active:not(:disabled) { transform: translateY(0) scale(.97); transition-duration: .08s !important; }
html.axp.axp.axp body .btn:disabled { opacity: .45; cursor: not-allowed; }
html.axp.axp.axp body .btn.g {
  background: rgba(255,255,255,.035) !important; border: 1px solid var(--ax-line-2) !important; color: var(--ax-ink) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset !important;
}
html.axp.axp.axp body .btn.g:hover:not(:disabled) {
  background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 0 0 4px rgba(255,255,255,.04), 0 10px 24px -14px rgba(255,255,255,.25) !important;
}
html.axp.axp.axp body :is(.btn.peligro, .btn.rojo, .btn.mal) {
  background: rgba(244,63,94,.12) !important; border-color: rgba(244,63,94,.4) !important; color: #fda4af !important; box-shadow: none !important;
}
html.axp.axp.axp body :is(.btn.peligro, .btn.rojo, .btn.mal):hover:not(:disabled) { background: rgba(244,63,94,.2) !important; box-shadow: 0 0 0 4px rgba(244,63,94,.1), 0 10px 26px -12px rgba(244,63,94,.6) !important; }
/* brillo que cruza el botón al pasar */
html.axp.axp.axp body .btn:not(.g):not(.s)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 66%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0; opacity: 0; transition: background-position .7s var(--ax-ease), opacity .3s;
}
html.axp.axp.axp body .btn:not(.g):not(.s):hover::after { background-position: -40% 0; opacity: 1; }
html.axp.axp.axp body :is(.btn, .cab-btn, .lat-item, .lat-cab, button, a, summary, input, select, textarea):focus-visible {
  outline: none !important; box-shadow: 0 0 0 2px #09090b, 0 0 0 4px rgba(45,212,191,.75) !important;
}

/* Controles segmentados y pestañas. */
html.axp.axp.axp body .seg { background: rgba(255,255,255,.03) !important; border: 1px solid var(--ax-line) !important; border-radius: 10px !important; padding: 3px !important; }
html.axp.axp.axp body .seg > * { border-radius: 7px !important; color: var(--ax-ink-2) !important; background: transparent !important; transition: background-color var(--ax-t), color var(--ax-t), box-shadow var(--ax-t) !important; }
html.axp.axp.axp body .seg > *:hover { color: var(--ax-ink) !important; background: rgba(255,255,255,.04) !important; }
html.axp.axp.axp body .seg > .on { background: rgba(255,255,255,.09) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 4px 14px -6px rgba(0,0,0,.6) !important; }
html.axp.axp.axp body :is(.aj-tab, .ftab, .rc-tab) { transition: color var(--ax-t), background-color var(--ax-t), border-color var(--ax-t) !important; }
html.axp.axp.axp body :is(.aj-tab, .ftab, .rc-tab).on { color: #fff !important; border-color: var(--ax-acc) !important; }

/* 7 · Chips de estado. */
html.axp.axp.axp body .chip { background: rgba(255,255,255,.05) !important; border: 1px solid var(--ax-line) !important; color: var(--ax-ink-2) !important; border-radius: 999px !important; font-weight: 550; }
html.axp.axp.axp body .chip.chip-ok, html.axp.axp.axp body .chip.ok { background: rgba(34,197,94,.1) !important; border-color: rgba(34,197,94,.3) !important; color: #86efac !important; }
html.axp.axp.axp body .chip.chip-mal, html.axp.axp.axp body .chip.mal { background: rgba(244,63,94,.1) !important; border-color: rgba(244,63,94,.32) !important; color: #fda4af !important; }
html.axp.axp.axp body .chip.chip-info { background: rgba(45,212,191,.1) !important; border-color: rgba(45,212,191,.3) !important; color: #5eead4 !important; }
html.axp.axp.axp body .chip.chip-gris { background: rgba(255,255,255,.04) !important; color: var(--ax-ink-3) !important; }
html.axp.axp.axp body :is(.chip.warn, .chip.chip-warn, .chip.pend) { background: rgba(245,158,11,.1) !important; border-color: rgba(245,158,11,.32) !important; color: #fcd34d !important; }

/* 8 · Tablas: cabecera de vidrio, filas con brillo al pasar. */
html.axp.axp.axp body .tbl { overflow: hidden; }
html.axp.axp.axp body table { border-collapse: separate; border-spacing: 0; }
html.axp.axp.axp body main table thead th {
  background: rgba(255,255,255,.025) !important; color: var(--ax-ink-3) !important;
  font-size: 11.5px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .055em;
  border-bottom: 1px solid var(--ax-line) !important;
}
html.axp.axp.axp body .tbl-scroll thead th { background: #131316 !important; }
html.axp.axp.axp body main table td { border-bottom: 1px solid rgba(255,255,255,.05) !important; color: var(--ax-ink); }
html.axp.axp.axp body main table tbody tr { transition: background-color var(--ax-t), box-shadow var(--ax-t) !important; }
html.axp.axp.axp body main table tbody tr:hover {
  background: linear-gradient(90deg, rgba(45,212,191,.07), rgba(255,255,255,.035) 40%, rgba(255,255,255,.02)) !important;
  box-shadow: inset 2px 0 0 rgba(45,212,191,.7);
}
html.axp.axp.axp body main table tbody tr:hover td { background: transparent !important; }
html.axp.axp.axp body main table tbody tr:last-child td { border-bottom: 0 !important; }
html.axp.axp.axp body .th-flecha { color: var(--ax-acc) !important; }
html.axp.axp.axp body :is(.dia-sep, tr.dia td, .fila-dia td) { background: rgba(255,255,255,.02) !important; color: var(--ax-ink-3) !important; }

/* 9 · Formularios. */
html.axp.axp.axp body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea) {
  background: rgba(255,255,255,.03) !important; border: 1px solid var(--ax-line-2) !important; color: var(--ax-ink) !important;
  border-radius: 10px !important; box-shadow: 0 1px 0 rgba(0,0,0,.4) inset !important;
  transition: border-color var(--ax-t), box-shadow var(--ax-t), background-color var(--ax-t) !important;
}
html.axp.axp.axp body :is(input, select, textarea)::placeholder { color: #52525b !important; }
html.axp.axp.axp body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea):hover { border-color: rgba(255,255,255,.22) !important; }
html.axp.axp.axp body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea):focus {
  outline: none !important; border-color: rgba(45,212,191,.7) !important; background: rgba(45,212,191,.03) !important;
  box-shadow: 0 0 0 4px rgba(45,212,191,.13), 0 0 22px -6px var(--ax-glow) !important;
}
html.axp.axp.axp body select option { background: #111114; color: #fafafa; }
html.axp body :is(input[type=checkbox], input[type=radio], input[type=range]) { accent-color: var(--ax-acc-2); }

/* 10 · Ventanas (modal) y menús desplegables: vidrio y entrada suave. */
html.axp.axp.axp body #modal { background: rgba(3,3,6,.62) !important; -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); }
html.axp.axp.axp body #modal #mbox {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), rgba(17,17,20,.94) !important;
  border: 1px solid rgba(255,255,255,.1) !important; border-radius: 16px !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 40px 120px -30px rgba(0,0,0,.9), 0 0 80px -40px var(--ax-glow) !important;
  color: var(--ax-ink);
}
@keyframes axPop { from { opacity: 0; transform: translateY(10px) scale(.975); } to { opacity: 1; transform: none; } }
html.axp body #modal.on #mbox { animation: axPop .34s var(--ax-ease, ease) both; }
html.axp.axp.axp body :is(.mas-menu, .sug-list, .sug-items, .menu-fila, .ccal, .busca-res, .dropdown, .pop, .v177-pop) {
  background: rgba(17,17,20,.9) !important; -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,.1) !important; border-radius: 12px !important;
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.8) !important;
  animation: axPop .22s var(--ax-ease, ease) both;
}
html.axp.axp.axp body :is(.mas-menu, .sug-list, .sug-items) :is(button, a, li, .sug) { border-radius: 8px !important; transition: background-color var(--ax-t), color var(--ax-t) !important; }
html.axp.axp.axp body :is(.mas-menu, .sug-list, .sug-items) :is(button, a, li, .sug):hover { background: rgba(255,255,255,.07) !important; }
html.axp.axp.axp body details.mas > summary { border-radius: 8px; transition: background-color var(--ax-t); }
html.axp.axp.axp body details.mas > summary:hover { background: rgba(255,255,255,.07); }

/* 11 · Avisos. */
html.axp.axp.axp body :is(#toast, #v4-avisos > *, .toast) {
  background: rgba(20,20,24,.86) !important; color: var(--ax-ink) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,.1) !important; border-radius: 12px !important;
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.8) !important;
}
html.axp.axp.axp body :is(#toast.err, #v4-avisos > .err, .toast.err) { border-color: rgba(244,63,94,.45) !important; box-shadow: 0 16px 40px -14px rgba(0,0,0,.8), 0 0 30px -12px rgba(244,63,94,.5) !important; }
html.axp.axp.axp body :is(.aviso, .rp-alerta, .alerta) {
  background: rgba(245,158,11,.07) !important; border: 1px solid rgba(245,158,11,.25) !important; border-radius: 12px !important; color: #fde68a !important;
}
html.axp.axp.axp body .rp-alerta { background: rgba(244,63,94,.07) !important; border-color: rgba(244,63,94,.28) !important; color: #fecdd3 !important; }
html.axp.axp.axp body .vacio { background: transparent !important; border: 1px dashed rgba(255,255,255,.12) !important; color: var(--ax-ink-2) !important; }

/* 12 · Dock y barra del celular. */
html.axp.axp.axp body :is(.dock, #dock, .bm-dock, .v189-tabs, .tabs-cel) {
  background: rgba(14,14,17,.72) !important; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.09) !important; box-shadow: 0 20px 50px -20px rgba(0,0,0,.85) !important;
}
html.axp.axp.axp body :is(.dock, #dock, .bm-dock) :is(button, a) { transition: transform var(--ax-t), background-color var(--ax-t), color var(--ax-t) !important; }
html.axp.axp.axp body :is(.dock, #dock, .bm-dock) :is(button, a):hover { transform: translateY(-3px) scale(1.06); }

/* 13 · Detalles finos. */
html.axp.axp.axp body hr { border-color: var(--ax-line) !important; }
html.axp.axp.axp body :is(.punto) { box-shadow: 0 0 10px currentColor; }
html.axp.axp.axp body :is(.ses-capa, .ses-caja) { background-color: #09090b !important; }
html.axp.axp.axp body .ses-logo-ax { --ax-ink: #fafafa; }

/* Imprimir: nunca en oscuro. */
@media print {
  html.axp body::before { display: none !important; }
  html.axp body { background: #fff !important; color: #000 !important; }
}
/* Menos movimiento si el equipo lo pide. */
@media (prefers-reduced-motion: reduce) {
  html.axp *, html.axp *::before, html.axp *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Equipos lentos (cajas del POS): sin desenfoque si se marca. */
html.axp.ax-ligero *, html.axp.ax-ligero *::before { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   14 · v239 · Estética más fuerte y descansada
   Fondo tinta con un toque verde azulado (cansa menos que el negro puro), textos secundarios
   con más contraste, títulos con más peso, tarjetas más redondas y acento más vivo.
   ══════════════════════════════════════════════════════════════════════ */
html.axp.axp.axp body,
html.axp.axp.axp body[data-theme],
html.axp.axp.axp body[data-theme][data-acento] {
  --ax-bg: #070b0d;
  --ax-bg-2: #0a1013;
  --ax-card: #0d1417;
  --ax-card-2: #121b1f;
  --ax-hover: #16232a;
  --ax-line: rgba(170,220,230,.085);
  --ax-line-2: rgba(170,220,230,.16);
  --ax-ink: #f1f6f7;
  --ax-ink-2: #b2c0c6;
  --ax-ink-3: #8a9ba2;
  --ax-acc: #2ee6c8;
  --ax-acc-2: #19c9b0;
  --ax-acc-btn: #0d9488;
  --ax-glow: rgba(46,230,200,.30);
  --ax-r: 16px;
  --ax-r-s: 10px;
  --ink-ph: #5d6d74;
  --bg-campo: #0a1114; --theme-input: #0a1114;
  --azul-txt: #6ff0dc;
}
html.axp { background: #070b0d !important; }
html.axp body::before {
  background:
    radial-gradient(1000px 560px at 85% -10%, rgba(46,230,200,.10), transparent 60%),
    radial-gradient(760px 520px at -5% 105%, rgba(56,189,248,.07), transparent 60%),
    radial-gradient(600px 400px at 45% 120%, rgba(129,140,248,.05), transparent 60%),
    linear-gradient(rgba(170,220,230,.02) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(170,220,230,.02) 1px, transparent 1px) 0 0 / 48px 48px;
}
html.axp.axp.axp body { line-height: 1.5; }

/* Títulos con más presencia y una raya de acento. */
html.axp.axp.axp body main .titulo h2 {
  font-size: clamp(24px, 2.4vw, 32px) !important; font-weight: 750 !important; letter-spacing: -.035em;
  background: linear-gradient(180deg, #ffffff 35%, #9fb3ba 125%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html.axp.axp.axp body main .titulo { position: relative; }
html.axp.axp.axp body main section > .titulo h2::after,
html.axp.axp.axp body main #ficha-vista > .titulo h2::after {
  content: ""; display: block; width: 34px; height: 3px; margin-top: 8px; border-radius: 99px;
  background: linear-gradient(90deg, var(--ax-acc), rgba(46,230,200,0)); -webkit-text-fill-color: initial;
}
html.axp.axp.axp body main :is(h3) { font-weight: 650; }
html.axp.axp.axp body .fc-sub, html.axp.axp.axp body .ca-h { color: var(--ax-ink-2) !important; font-weight: 650; letter-spacing: .07em; }

/* Tarjetas: más redondas, con un filo de luz arriba. */
html.axp.axp.axp body :is(.card, .tbl, .erp-kpi, .erp-live-total, .erp-payment-card, .panel, .box, .cat, .lista-card, .mg-card) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 1px 2px rgba(0,0,0,.4), 0 24px 48px -32px rgba(0,0,0,.85) !important;
}
html.axp.axp.axp body :is(.card, .erp-kpi, .lista-card, .mg-card):hover {
  border-color: rgba(46,230,200,.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgba(46,230,200,.06), 0 28px 56px -32px rgba(0,0,0,.9), 0 0 48px -26px var(--ax-glow) !important;
}

/* KPI: cifras grandes y una línea de acento al pasar. */
html.axp.axp.axp body .erp-kpi { position: relative; overflow: hidden; }
html.axp.axp.axp body .erp-kpi::after {
  content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 2px; border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--ax-acc), transparent); opacity: 0; transition: opacity var(--ax-t);
}
html.axp.axp.axp body .erp-kpi:hover::after { opacity: .9; }
html.axp.axp.axp body :is(.erp-kpi .val, .erp-kpi strong) { font-size: clamp(22px, 2vw, 27px) !important; font-weight: 750 !important; }
html.axp.axp.axp body .erp-kpi .lbl { letter-spacing: .08em; font-weight: 650; }
html.axp.axp.axp body .mx-t b { color: #fff; }
html.axp.axp.axp body .mx-hero { background: radial-gradient(120% 140% at 0% 0%, rgba(46,230,200,.16), transparent 60%), var(--ax-card-2) !important; border-color: rgba(46,230,200,.22) !important; }
html.axp.axp.axp body :is(.mx-t, .mx-graf) { background: var(--ax-card-2) !important; border-color: var(--ax-line) !important; }

/* Menú: el elegido con barra de luz y fondo con acento. */
html.axp.axp.axp body .lat :is(.lat-cab.on, .lat-item.on) {
  background: linear-gradient(90deg, rgba(46,230,200,.16), rgba(46,230,200,.04) 70%) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(46,230,200,.18), 0 10px 28px -14px var(--ax-glow) !important;
}
html.axp.axp.axp body .lat .lat-item.on::before { background: var(--ax-acc) !important; box-shadow: 0 0 12px var(--ax-acc), 0 0 2px var(--ax-acc); }
html.axp.axp.axp body .lat .lat-cab svg { transition: color var(--ax-t), filter var(--ax-t); }
html.axp.axp.axp body .lat .lat-cab:hover svg { color: var(--ax-acc) !important; }
html.axp.axp.axp body .lat .lat-item.lat-masop { color: var(--ax-ink-3) !important; }
html.axp.axp.axp body .lat .lat-item.lat-masop:hover { color: var(--ax-acc) !important; }

/* Botón principal: degradado más vivo. */
html.axp.axp.axp body .btn {
  background: linear-gradient(180deg, #23cdb6 0%, #0d9488 100%) !important;
  border-color: rgba(111,240,220,.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 22px -10px var(--ax-glow) !important;
  letter-spacing: -.005em;
}
html.axp.axp.axp body .btn.g { background: rgba(255,255,255,.04) !important; border-color: var(--ax-line-2) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; }

/* Pestañas de las fichas: subrayado con luz. */
html.axp.axp.axp body .ftab.on { box-shadow: inset 0 -2px 0 var(--ax-acc) !important; text-shadow: 0 0 18px rgba(46,230,200,.35); }

/* Tablas: filas más aireadas y cabecera fija más clara. */
html.axp.axp.axp body main table :is(td, th) { padding-top: 11px; padding-bottom: 11px; }
html.axp.axp.axp body .tbl-scroll thead th { background: #0f171b !important; color: var(--ax-ink-3) !important; }
html.axp.axp.axp body main table tbody tr:nth-child(even) td { background: rgba(170,220,230,.014); }
html.axp.axp.axp body main table tbody tr:hover {
  background: linear-gradient(90deg, rgba(46,230,200,.09), rgba(255,255,255,.03) 45%, rgba(255,255,255,.015)) !important;
  box-shadow: inset 2px 0 0 var(--ax-acc);
}

/* Campos: fondo un poco más hundido para que se lean como campos. */
html.axp.axp.axp body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea) {
  background: rgba(0,0,0,.22) !important; border-color: var(--ax-line-2) !important;
}
html.axp.axp.axp body :is(input, select, textarea)::placeholder { color: var(--ink-ph) !important; }

/* Chips de las fichas con color. */
html.axp.axp.axp body .fchip.verde { background: rgba(46,230,200,.12) !important; color: #6ff0dc !important; border-color: rgba(46,230,200,.3) !important; }
html.axp.axp.axp body .fchip.rojo { background: rgba(244,63,94,.12) !important; color: #fda4af !important; border-color: rgba(244,63,94,.32) !important; }
html.axp.axp.axp body .fc-av {
  background: radial-gradient(120% 120% at 20% 10%, #2ee6c8, #0d9488 55%, #0b5f58) !important; color: #031614 !important;
  box-shadow: 0 0 0 4px rgba(46,230,200,.10), 0 12px 30px -10px var(--ax-glow);
}

@media (max-width: 640px) {
  html.axp.axp.axp body main table :is(td, th) { padding-top: 9px; padding-bottom: 9px; }
}