/* ==================================================================
   Inventagrio — estilos
   Vidrio esmerilado estilo Apple sobre una aurora de colores suaves,
   sombras profundas en capas e iridiscencia de espectro completo que
   fluye en bordes, botones y la pantalla de carga.

   1. VARIABLES: todo color, radio, sombra, duración y curva vive aquí,
      con valores para claro y oscuro. El resto del archivo solo las usa.
   2. Al pasar el mouse: las tarjetas suben, la sombra se abre con un tinte
      de color, un brillo sigue al cursor y el borde iridiscente fluye.
      Todo con transiciones largas y curvas suaves para que nunca salte.
   3. Lo que se mueve es transform u opacity (nunca ancho, alto ni posición).
   4. Con "Reducir movimiento" no hay desplazamientos: solo opacidad.
   ================================================================== */

/* Ángulo animable para los degradados cónicos iridiscentes */
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  /* ---- Fondo: aurora de espectro amplio, muy suave ---- */
  --bg: #e9f0fa;
  --aur-1: rgba(110, 190, 255, .55);   /* cielo */
  --aur-2: rgba(120, 230, 205, .42);   /* agua */
  --aur-3: rgba(215, 240, 150, .30);   /* lima */
  --aur-4: rgba(255, 214, 150, .34);   /* oro */
  --aur-5: rgba(255, 175, 210, .40);   /* rosa */
  --aur-6: rgba(190, 165, 255, .50);   /* lavanda */
  /* ---- Vidrio: casi todo deja ver la aurora de atrás ---- */
  --glass: rgba(255, 255, 255, .22);          /* tarjetas */
  --glass-hover: rgba(255, 255, 255, .34);
  --glass-strong: rgba(255, 255, 255, .5);    /* barra superior, diálogos, panel lateral */
  --glass-menu: rgba(255, 255, 255, .72);     /* menús desplegables: un poco más firmes para leer listas */
  --glass-hi: rgba(255, 255, 255, .55);       /* reflejo de luz arriba a la izquierda */
  --glass-edge: rgba(255, 255, 255, .85);     /* luz en el canto superior del vidrio */
  --glass-border: rgba(255, 255, 255, .55);   /* borde de luz (el vidrio no tiene bordes oscuros) */
  --blur: blur(40px) saturate(220%);
  --blur-strong: blur(48px) saturate(230%);
  --surface: rgba(255, 255, 255, .42);        /* controles: botones, chips, pestaña elegida */
  --surface-2: rgba(255, 255, 255, .30);      /* campos, pistas, zonas hundidas */
  --surface-3: rgba(255, 255, 255, .48);
  --hover: rgba(31, 111, 209, .06);           /* filas y opciones bajo el cursor */
  --track: rgba(16, 42, 80, .06);             /* pista de pestañas y segmentados */
  --scrim: rgba(10, 30, 55, .34);             /* velo detrás de un diálogo */
  /* ---- Texto y bordes ---- */
  --text: #0d2237;
  --muted: #47566b;
  --faint: #8494a8;
  --border: rgba(16, 42, 80, .07);
  --border-strong: rgba(16, 42, 80, .14);
  /* ---- Color ---- */
  --accent: #1351a3;                          /* enlaces, íconos, selección */
  --accent-fill: #1351a3;
  --on-accent: #ffffff;
  --accent-soft: rgba(22, 91, 182, .10);
  --accent-2: #a9c9f2;                        /* barras secundarias de los gráficos */
  --violet: #5b6cf0;
  --grad-blue: linear-gradient(135deg, #3a8bef, #1558ad);
  --grad-accent: linear-gradient(135deg, #2f80e8, #4f62e8 55%, #6f5ee8);
  /* Verde y rojo: dinero que entra o que se debe */
  --green: #12612d;
  --green-soft: rgba(20, 108, 51, .11);
  --danger: #9f2430;
  --danger-soft: rgba(185, 42, 56, .09);
  /* Antigüedad de la cartera: del más fresco al vencido */
  --age-0: #8ee8d4; --age-1: #7cc8ff; --age-2: #8f9cff; --age-3: #e0566a;
  /* Iridiscencia de espectro completo */
  --iri-stops: #7cc8ff, #8ee8d4, #d4f19a, #ffe0a0, #ffbfd8, #d2b6ff, #a7beff, #7cc8ff;
  --iri-conic: conic-gradient(from var(--a), var(--iri-stops));
  --iri-border-o: .5;
  /* ---- Forma ---- */
  --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  /* ---- Sombras en capas ---- */
  --shadow-1: 0 1px 1px rgba(16, 32, 64, .03), 0 10px 28px -8px rgba(30, 60, 120, .14), 0 26px 60px -22px rgba(30, 60, 120, .14);
  --shadow-2: 0 2px 4px rgba(16, 32, 64, .05), 0 24px 48px -12px rgba(40, 70, 150, .24), 0 48px 96px -30px rgba(110, 90, 220, .26);
  --shadow-pop: 0 0 0 1px var(--border), 0 6px 14px rgba(8, 30, 60, .08), 0 24px 54px -12px rgba(8, 30, 60, .28);
  --shadow-modal: 0 0 0 1px var(--border), 0 36px 90px -18px rgba(8, 30, 60, .42);
  --shadow-knob: 0 1px 2px rgba(16, 32, 64, .08), 0 4px 12px -4px rgba(30, 60, 120, .18);
  --inset: inset 0 1px 2px rgba(16, 32, 64, .05), inset 0 0 0 1px rgba(16, 32, 64, .045);
  --ring: 0 0 0 4px var(--accent-soft);
  /* ---- Movimiento ---- */
  --dur-1: 160ms;                             /* presionar, aparecer un menú */
  --dur-2: 260ms;                             /* cambiar de estado */
  --dur-3: 420ms;                             /* entrar en escena */
  --dur-hover: 700ms;                         /* pasar el mouse: lento y suave, nunca salta */
  --ease: cubic-bezier(.22, 1, .36, 1);       /* salida suave */
  --ease-smooth: cubic-bezier(.16, 1, .3, 1); /* tipo Apple: arranca rápido, frena muy suave */
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --stagger: 45ms;
  /* ---- Tipografía ---- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", sans-serif;
  --font-round: ui-rounded, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #080e1b;
  --aur-1: rgba(60, 140, 255, .32);
  --aur-2: rgba(40, 200, 180, .18);
  --aur-3: rgba(170, 220, 90, .09);
  --aur-4: rgba(255, 190, 110, .09);
  --aur-5: rgba(255, 110, 180, .16);
  --aur-6: rgba(150, 110, 255, .28);
  --glass: rgba(18, 28, 50, .30);
  --glass-hover: rgba(30, 44, 74, .42);
  --glass-strong: rgba(22, 32, 56, .62);
  --glass-menu: rgba(24, 35, 60, .86);
  --glass-hi: rgba(255, 255, 255, .07);
  --glass-edge: rgba(255, 255, 255, .14);
  --glass-border: rgba(255, 255, 255, .11);
  --surface: rgba(255, 255, 255, .08);
  --surface-2: rgba(255, 255, 255, .045);
  --surface-3: rgba(255, 255, 255, .12);
  --hover: rgba(116, 176, 247, .08);
  --track: rgba(0, 0, 0, .25);
  --scrim: rgba(0, 4, 12, .5);
  --text: #e9f1fa;
  --muted: #a0b2c7;
  --faint: #6f8199;
  --border: rgba(255, 255, 255, .07);
  --border-strong: rgba(255, 255, 255, .14);
  --accent: #8cc0fa;
  --accent-fill: #2a6ed0;
  --accent-soft: rgba(116, 176, 247, .15);
  --accent-2: #3d5f8f;
  --violet: #8e9bff;
  --green: #4ade80;
  --green-soft: rgba(74, 222, 128, .13);
  --danger: #ff93a3;
  --danger-soft: rgba(255, 122, 142, .13);
  --age-0: #3fd0bd; --age-1: #6aa9f2; --age-2: #a48cf7; --age-3: #ff7a8e;
  --iri-border-o: .32;
  --shadow-1: 0 1px 1px rgba(0, 0, 0, .3), 0 14px 34px -10px rgba(0, 0, 0, .55);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .35), 0 26px 50px -12px rgba(0, 0, 0, .65), 0 30px 80px -30px rgba(120, 100, 255, .3);
  --shadow-pop: 0 0 0 1px var(--border), 0 6px 14px rgba(0, 0, 0, .4), 0 24px 54px -12px rgba(0, 0, 0, .7);
  --shadow-modal: 0 0 0 1px var(--border), 0 36px 90px -18px rgba(0, 0, 0, .8);
  --shadow-knob: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px -6px rgba(0, 0, 0, .5);
  --inset: inset 0 1px 2px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .04);
  color-scheme: dark;
}

/* ------------------------------ Base ------------------------------ */
* { box-sizing: border-box; }
/* Solo para lectores de pantalla (títulos de sección que el diseño no muestra) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
/* Scroll nativo (el del sistema ya es suave). Mientras se desplaza, el contenido no
   reacciona al mouse: nada se levanta ni se redibuja bajo el cursor. */
.scroll-shield { position: fixed; inset: 0; z-index: 40; }
body { margin: 0; font: 14px/1.5 var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
/* Aurora de fondo: manchas de todo el espectro, quietas (así el vidrio no tiene que
   volver a desenfocarse en cada frame). Es lo que el vidrio difumina. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vw 30vw at 2% 0%, var(--aur-1), transparent 70%),
    radial-gradient(30vw 26vw at 36% 4%, var(--aur-2), transparent 70%),
    radial-gradient(28vw 24vw at 74% 0%, var(--aur-4), transparent 70%),
    radial-gradient(32vw 30vw at 100% 30%, var(--aur-6), transparent 70%),
    radial-gradient(30vw 26vw at 58% 62%, var(--aur-3), transparent 72%),
    radial-gradient(34vw 30vw at 8% 100%, var(--aur-5), transparent 70%),
    radial-gradient(34vw 30vw at 90% 102%, var(--aur-1), transparent 70%);
}
h1, h2, h3 { font-family: var(--font-round); }
h2 { font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0 0 12px; letter-spacing: -.01em; }
h1.page-title { font-size: 25px; font-weight: 700; line-height: 1.2; letter-spacing: -.022em; margin: 0; }
code { font: 12px ui-monospace, Menlo, monospace; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }
table, .stat strong, .r, .side, .qty, b, strong { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.r { text-align: right; }
.spacer { flex: 1; }
.center { text-align: center; }
.accent-text { color: var(--text); }
.temp-text { color: var(--muted) !important; }
.neg { color: var(--danger) !important; }
.pos { color: var(--green) !important; }
.danger-text { color: var(--danger) !important; }
.error { color: var(--danger); min-height: 1em; margin: 6px 0 0; font-weight: 500; }
.hint { color: var(--muted); font-size: 12.5px; min-height: 1em; margin: 4px 0 0; }
i[data-icon] { display: inline-flex; width: 18px; height: 18px; flex: none; }
i[data-icon] svg { width: 100%; height: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Vidrio esmerilado: tarjetas y todo lo que flota */
.card, .topbar, dialog, .sort-menu, .combo-panel, .dp-panel, #toast {
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.topbar, dialog, .sort-menu, .combo-panel, .dp-panel { -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); }

/* ------------------------------ Tarjetas de vidrio ------------------------------ */
.card {
  position: relative; border-radius: var(--r-xl);
  background: linear-gradient(155deg, var(--glass-hi) 0%, transparent 38%), var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 rgba(255, 255, 255, .08), var(--shadow-1);
}
/* Borde iridiscente de 1 px (una máscara deja ver solo el contorno). En reposo es
   tenue; al pasar el mouse los colores fluyen alrededor. */
.card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: var(--iri-conic);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--iri-border-o); transition: opacity var(--dur-hover) var(--ease-smooth);
}
/* Brillo que sigue al cursor (app.js mueve --mx/--my una vez por frame) */
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), rgba(142, 232, 212, .13), rgba(255, 191, 216, .1) 35%, rgba(210, 182, 255, .09) 55%, transparent 75%);
  opacity: 0; transition: opacity var(--dur-hover) var(--ease-smooth);
}
:root[data-theme="dark"] .card::before {
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(150, 190, 255, .13), transparent 70%),
    radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), rgba(120, 230, 210, .08), rgba(255, 150, 200, .07) 40%, transparent 75%);
}
.card > * { position: relative; z-index: 1; }
/* Al pasar el mouse: sube, la sombra se abre con un tinte, brilla y el borde fluye.
   (Las tablas largas no suben: solo brillan.) */
.card { transition: transform var(--dur-hover) var(--ease-smooth), box-shadow var(--dur-hover) var(--ease-smooth); }
.card:not(.table-wrap):hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-2); }
.card:hover::before { opacity: 1; }
.card:hover::after { opacity: calc(var(--iri-border-o) + .4); animation: iri-flow 5s linear infinite; }
.card.clickable { cursor: pointer; }
.card.clickable:active { transform: translateY(-1px) scale(.995); transition-duration: var(--dur-1); }
.clickable { cursor: pointer; }
.go-hint { position: absolute !important; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity .5s var(--ease-smooth), transform .7s var(--ease-smooth); }
.go-hint i { width: 14px; height: 14px; }
.clickable:hover .go-hint, .clickable:focus-visible .go-hint { opacity: 1; transform: none; }
/* El ícono de la tarjeta "respira" con un halo iridiscente */
.stat-icon { position: relative; transition: transform .8s var(--ease-spring); }
.stat-icon::after {
  content: ""; position: absolute; inset: -5px; border-radius: 16px; z-index: -1;
  background: var(--iri-conic); filter: blur(10px); opacity: 0; transform: scale(.7);
  transition: opacity .8s var(--ease-smooth), transform .8s var(--ease-smooth);
}
.card:hover .stat-icon { transform: translateY(-2px) scale(1.04); }
.card:hover .stat-icon::after { opacity: .55; transform: scale(1); animation: iri-flow 4s linear infinite, pulse-soft 2.4s ease-in-out infinite; }

/* Logo (dos capas recortadas con máscaras) */
.logo-mark { position: relative; width: 100%; aspect-ratio: 1; }
.logo-mark span { position: absolute; inset: 0; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.logo-mark .ring { -webkit-mask-image: url(logo-ring.png); mask-image: url(logo-ring.png); background: linear-gradient(170deg, #6aa9f2, #1f6fd1 55%, #0f4c96); }
.logo-mark .box { -webkit-mask-image: url(logo-box.png); mask-image: url(logo-box.png); background: linear-gradient(160deg, #8fd8f5, #8f9cff 50%, #b48cf5); }
.logo-mark.small { width: 34px; transition: transform .8s var(--ease-spring); }
.brand:hover .logo-mark.small { transform: rotate(-10deg) scale(1.06); }

/* -------------------------- Barra superior -------------------------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 20px; padding: 11px 24px; background: var(--glass-strong); border-bottom: 1px solid var(--border); box-shadow: 0 8px 30px rgba(13, 34, 55, .06); -webkit-user-select: none; user-select: none; }
.topbar::after {   /* línea iridiscente que fluye de izquierda a derecha */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--iri-stops), #8ee8d4, #d4f19a); background-size: 200% 100%;
  opacity: calc(var(--iri-border-o) * 1.2); animation: iri-slide 14s linear infinite;
}
.brand { display: flex; align-items: center; gap: 10px; font: 700 17px var(--font-round); letter-spacing: -.02em; }
.top-actions { display: flex; align-items: center; gap: 10px; }
#tabs { position: relative; display: flex; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 15px; background: var(--surface-2); box-shadow: var(--inset); }
#tabs button { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; border: 0; background: none; color: var(--muted); padding: 7px 14px; border-radius: 11px; font: 500 13.5px var(--font); cursor: pointer; transition: color var(--dur-2) var(--ease); }
#tabs button:hover { color: var(--text); }
#tabs button.active { color: var(--accent); font-weight: 600; }
#tabs button i { width: 15px; height: 15px; transition: transform .6s var(--ease-spring); }
#tabs button:hover i { transform: translateY(-1px) scale(1.12); }
.tab-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--grad-accent); color: var(--on-accent); font-size: 11px; font-weight: 700; animation: pop-in .4s var(--ease-spring); }
/* Indicador de la pestaña activa: se desliza con un resorte leve */
.tab-indicator { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); width: 0; border-radius: 11px; background: var(--surface-3); box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-knob); transition: transform .5s var(--ease-spring); }
.tab-indicator::after {   /* rayita iridiscente bajo la pestaña activa */
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 16px; height: 3px; margin-left: -8px;
  border-radius: 3px; background: linear-gradient(90deg, var(--iri-stops)); background-size: 300% 100%;
  animation: iri-slide 6s linear infinite;
}

/* ----------------------------- Botones ----------------------------- */
button { font: inherit; cursor: pointer; color: inherit; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; overflow: hidden; isolation: isolate; border-radius: var(--r-md); padding: 8px 15px; min-height: 37px; font-weight: 600; white-space: nowrap; color: var(--text); background: var(--surface); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-knob); transition: transform .35s var(--ease-smooth), box-shadow .5s var(--ease-smooth); }
/* Velo al pasar el mouse y al presionar (solo opacidad) */
.btn::before, .icon-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn:hover::before, .icon-btn:hover::before { opacity: .05; }
.btn:active { transform: scale(.97); transition-duration: var(--dur-1); }
.btn:active::before, .icon-btn:active::before { opacity: .12; }
.btn.blue, .btn.accent { color: var(--on-accent); border-color: transparent; }
/* Botones de color: vidrio teñido (se ve el fondo a través, con un reflejo arriba) */
.btn.blue { background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 55%), linear-gradient(135deg, rgba(58, 139, 239, .9), rgba(21, 88, 173, .92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px rgba(31, 111, 209, .3), var(--shadow-knob); }
.btn.accent { background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 55%), linear-gradient(135deg, rgba(47, 128, 232, .9), rgba(79, 98, 232, .9) 55%, rgba(111, 94, 232, .92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px rgba(79, 98, 232, .32), var(--shadow-knob); }
.btn.blue:hover, .btn.accent:hover { box-shadow: 0 10px 26px rgba(79, 98, 232, .4), var(--shadow-knob); }
.btn.blue:hover::before, .btn.accent:hover::before { opacity: .08; }
/* Destello iridiscente que cruza los botones de color al pasar el mouse */
.btn.blue::after, .btn.accent::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .28) 38%, rgba(142, 232, 212, .32) 45%, rgba(255, 224, 160, .28) 51%, rgba(255, 191, 216, .3) 57%, transparent 70%);
  transform: translateX(-120%); transition: transform 1.1s var(--ease-smooth);
}
.btn.blue:hover::after, .btn.accent:hover::after { transform: translateX(120%); }
.btn i { width: 16px; height: 16px; transition: transform .5s var(--ease-spring); }
.btn:hover i { transform: scale(1.1); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.mini { min-height: 29px; padding: 4px 10px; font-size: 12.5px; border-radius: var(--r-sm); gap: 5px; }
.btn.mini i { width: 14px; height: 14px; }
.btn.mini.ghost { padding: 4px 8px; }
.icon-btn { position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate; width: 38px; height: 38px; border-radius: 50%; color: var(--text); background: var(--surface); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-knob); transition: transform .5s var(--ease-spring); }
.icon-btn:hover { transform: rotate(-12deg) scale(1.05); }
.icon-btn:active { transform: scale(.92); transition-duration: var(--dur-1); }
.icon-btn.small { width: 31px; height: 31px; }
.icon-btn.small i { width: 15px; height: 15px; }
.link { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--accent); padding: 4px 6px; border-radius: var(--r-sm); font-weight: 500; transition: background var(--dur-2) var(--ease); }
.link:hover { background: var(--accent-soft); }
.link i { width: 14px; height: 14px; transition: transform .45s var(--ease-spring); }
td.actions-cell .link, .rates .link { min-width: 30px; min-height: 30px; justify-content: center; }
.link:hover i { transform: translateX(2px); }
.link.del { color: var(--danger); }
.link.del:hover { background: var(--danger-soft); }
.link.del:hover i { transform: rotate(-8deg) scale(1.08); }

/* ------------------------------ Campos ------------------------------ */
input, select { font: inherit; color: var(--text); border: 1px solid var(--glass-border); border-radius: var(--r-md); background: var(--surface-2); box-shadow: var(--inset); padding: 8px 12px; min-height: 38px; transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: var(--inset), var(--ring); }
input::placeholder { color: var(--faint); }
input[type="number"]::-webkit-inner-spin-button { opacity: .4; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
select { -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer; max-width: 230px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8089' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px; }
.search { position: relative; display: flex; align-items: center; }
.search i { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--faint); pointer-events: none; }
.search input { padding-left: 36px; width: 260px; }
.search.mini input { width: 190px; min-height: 32px; padding-top: 5px; padding-bottom: 5px; }
.wide { flex: 1; min-width: 300px; }

/* Interruptor */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; color: var(--muted); font-weight: 500; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { position: relative; width: 40px; height: 24px; border-radius: 12px; background: var(--surface-3); }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-knob); transition: transform var(--dur-2) var(--ease-spring); }
.switch input:checked + .track { background: var(--grad-accent); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Casillas */
.check-inline { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; padding: 9px 12px; border-radius: var(--r-md); background: var(--accent-soft); cursor: pointer; font-size: 13px; font-weight: 500; animation: fade-up var(--dur-2) var(--ease); }
.check-inline.plain { margin: 0; padding: 6px 8px; background: none; animation: none; }
.check-inline input, .pd-row input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.box-check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; flex: none; background: var(--surface); border: 1px solid var(--border-strong); }
input:checked + .box-check, input:indeterminate + .box-check { background: var(--accent-fill); border-color: transparent; }
input:checked + .box-check::after { content: ""; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
input:indeterminate + .box-check::after { content: ""; width: 9px; height: 2px; border-radius: 2px; background: #fff; }
input:focus-visible + .box-check { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Control segmentado */
.segmented { display: inline-flex; padding: 4px; gap: 2px; border-radius: 14px; background: var(--surface-2); box-shadow: var(--inset); }
.segmented button { border: 0; background: none; color: var(--muted); padding: 6px 13px; border-radius: 10px; font-weight: 500; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); }
.segmented button:active { transform: scale(.96); }
.segmented button:hover { color: var(--text); }
.segmented button.on { background: var(--surface-3); color: var(--text); font-weight: 600; box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-knob); }

/* Aviso de salidas pendientes */
.pending-pill { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--glass-border); border-radius: var(--r-pill); padding: 6px 13px 6px 11px; font-weight: 600; font-size: 13px; color: var(--text); background: var(--surface); }
.pending-pill:hover { background: var(--surface-2); }
.pending-pill.on { background: var(--grad-accent); color: var(--on-accent); border-color: transparent; }
.pending-pill.on .pulse-dot { background: #fff; }
.pulse-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulse 1.8s ease-out infinite; }
.pulse-dot.corner { position: absolute; top: -2px; right: -2px; box-shadow: 0 0 0 2px var(--surface); }
.filter-pill { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--on-accent); background: var(--grad-accent); animation: pop-in var(--dur-2) var(--ease-spring); }
.filter-pill i { width: 14px; height: 14px; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); padding: 6px 14px; font-weight: 500; font-size: 13px; color: var(--muted); background: var(--surface); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-knob); transition: transform .45s var(--ease-spring), box-shadow .45s var(--ease-smooth), color var(--dur-2) var(--ease); }
.chip:hover { color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.chip.on { color: var(--on-accent); background: var(--grad-blue); border-color: transparent; }
.chip.on.cat { background: var(--c); }
.chip .x { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 0; background: none; color: inherit; padding: 0; }
.chip .x:hover { background: var(--danger-soft); color: var(--danger); }
.chip .x i { width: 12px; height: 12px; }
.chip.filter { cursor: pointer; animation: pop-in var(--dur-2) var(--ease-spring); }
.chip.filter .x { width: 16px; height: 16px; margin-right: -4px; }
.chip.filter .x i { width: 11px; height: 11px; }
.dot-c { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* Categoría: punto de su color + texto neutro (el color nunca es el único dato) */
.cat-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; padding: 1px 9px 1px 7px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--surface-2); }
.cat-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

/* Menú desplegable (ordenar, exportar) */
.sort { position: relative; }
.sort-btn { display: inline-flex; align-items: center; gap: 8px; }
.sort-btn .val { color: var(--accent); }
.sort-btn .dir { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); transition: transform var(--dur-2) var(--ease-spring); }
.sort-btn .dir.up { transform: rotate(180deg); }
.sort-btn .dir i { width: 13px; height: 13px; }
.sort-menu, .combo-panel, .dp-panel { position: absolute; z-index: 50; top: calc(100% + 6px); background: var(--glass-menu); border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); opacity: 0; transform: translateY(-4px) scale(.98); pointer-events: none; transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease); }
.sort-menu { z-index: 40; right: 0; width: 250px; padding: 6px; transform-origin: top right; }
.sort.open .sort-menu, .combo-panel.open, .datepick.open .dp-panel { opacity: 1; transform: none; pointer-events: auto; }
.sort-menu .lbl { padding: 6px 10px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sort-opt, .combo-opt { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: var(--text); text-align: left; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; }
.sort-opt i { width: 16px; height: 16px; color: var(--muted); }
.sort-opt .chk { margin-left: auto; color: var(--accent); opacity: 0; }
.sort-opt:hover { background: var(--hover); }
.sort-opt.on { font-weight: 600; }
.sort-opt.on i:first-child { color: var(--accent); }
.sort-opt.on .chk { opacity: 1; }
.sort-dir { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px 4px 2px; margin-top: 4px; border-top: 1px solid var(--border); }
.sort-dir button { border: 0; border-radius: var(--r-sm); padding: 6px 8px; font-size: 12.5px; font-weight: 500; color: var(--muted); background: none; }
.sort-dir button.on { color: var(--text); background: var(--track); }
th.sorted { color: var(--accent); }
th.clickable:hover { color: var(--text); }

/* ------------------------------ Diseño ------------------------------ */
main { max-width: 1360px; margin: 0 auto; padding: 22px 24px 48px; overflow-x: clip; }
.view { display: none; }
.view.active { display: block; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.panel { padding: 18px 20px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.panel-head h2 { margin: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* Tarjetas de indicadores */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.stat { padding: 16px 18px; }
.stat span.lbl { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; margin-top: 12px; }
.stat strong { display: block; font: 700 28px/1.2 var(--font-round); letter-spacing: -.022em; }
.stat small { display: block; font-size: 12px; margin-top: 2px; }
.stat-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--surface-2); box-shadow: var(--inset); color: var(--accent); }
.stat-icon i { width: 18px; height: 18px; }
.stat-icon.danger { color: var(--danger); background: var(--danger-soft); }
.stat-icon.green { color: var(--green); background: var(--green-soft); }
.delta { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; vertical-align: middle; }
.delta.up { color: var(--green); background: var(--green-soft); }
.delta.down { color: var(--danger); background: var(--danger-soft); }
.delta.flat { color: var(--muted); background: var(--surface-2); }
.dash { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; }
.dash-col { display: grid; gap: 18px; min-width: 0; }

/* Gráfico de barras (día / semana / mes) */
.chart { display: flex; align-items: flex-end; gap: 8px; height: 112px; padding-top: 8px; }
.chart.tall { height: 210px; gap: 5px; }
.chart .col { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.chart .col span { font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart .col.today span { color: var(--accent); font-weight: 700; }
.chart .col-track, .weekdays .wd .col-track { flex: 1; width: 100%; max-width: 34px; display: flex; align-items: flex-end; border-radius: 7px; background: var(--surface-2); overflow: hidden; }
.chart.tall .col-track { max-width: 26px; border-radius: 6px; }
.chart .col-bar, .weekdays .wd .col-bar { width: 100%; height: 100%; border-radius: inherit; transform-origin: bottom; transform: scaleY(0); background: linear-gradient(180deg, #6aa9f2, #1f6fd1); transition: transform .9s var(--ease), filter var(--dur-2) var(--ease); }
.chart .col.today .col-bar, .weekdays .wd.best .col-bar { background: linear-gradient(180deg, #ffbfd8, #d2b6ff 35%, #8f9cff 70%, #5b6cf0); }
.chart .col:hover .col-bar { filter: brightness(1.12) saturate(1.1); }
.chart .col:hover .col-track { background: var(--surface-3); }
.chart .col::after { content: attr(data-tip); position: absolute; bottom: calc(100% - 2px); left: 50%; z-index: 3; padding: 5px 9px; border-radius: var(--r-sm); white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--text); background: var(--surface); box-shadow: var(--shadow-pop); opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.chart .col:hover::after, .chart .col:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.chart .col:focus-visible { outline: none; }
.chart .col:focus-visible .col-track { box-shadow: 0 0 0 2px var(--accent); }
/* En los extremos el globo se alinea al borde para no salirse de la ventana */
.chart .col:nth-child(-n+3)::after { left: 0; transform: translate(0, 4px); }
.chart .col:nth-last-child(-n+3)::after { left: auto; right: 0; transform: translate(0, 4px); }
.chart .col:nth-child(-n+3):hover::after, .chart .col:nth-last-child(-n+3):hover::after,
.chart .col:nth-child(-n+3):focus-visible::after, .chart .col:nth-last-child(-n+3):focus-visible::after { transform: none; }
.chart.dense .col span { visibility: hidden; }
.chart.dense .col:nth-child(5n+1) span, .chart.dense .col:last-child span { visibility: visible; }

/* Listas de actividad */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px solid var(--border); border-radius: 10px; transition: transform .5s var(--ease-smooth), background var(--dur-2) var(--ease); }
.feed li:not(.empty):hover { transform: translateX(3px); background: var(--hover); }
.feed li:last-child { border-bottom: 0; }
.ico { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; background: var(--surface-2); color: var(--muted); }
.ico i { width: 16px; height: 16px; }
.ico.in, .ico.temp { color: var(--accent); background: var(--accent-soft); }
.ico.out, .ico.paid { color: var(--green); background: var(--green-soft); }
.ico.danger { color: var(--danger); background: var(--danger-soft); }
.feed .main { flex: 1; min-width: 0; }
.feed .title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed .sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed .sub.wrap { white-space: normal; }
.feed .side { text-align: right; flex: none; }
.feed .qty { font-weight: 700; }
.feed .qty.out { color: var(--green); }
.feed .qty.use, .feed .qty.temp { color: var(--muted); }
.feed .qty.danger { color: var(--danger); }
.feed.compact li { padding: 7px 4px; }
.row-actions { display: flex; align-items: center; gap: 6px; flex: none; }
/* Estados vacíos: texto tranquilo, centrado en su tarjeta */
.empty { color: var(--muted); padding: 18px 4px; list-style: none; text-align: center; font-size: 13px; }
.feed li.empty { display: block; border-bottom: 0; }

/* Barras horizontales */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bars .row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 5px; }
.bars .row b { white-space: nowrap; }
.bars .row span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .row span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bar, var(--accent)); flex: none; }
.bars .row small { color: var(--muted); font-weight: 400; }
.bars .track { height: 8px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.bars .fill { height: 100%; border-radius: 5px; transform-origin: left; transform: scaleX(0); background: var(--bar, var(--accent)); transition: transform 1s var(--ease), filter var(--dur-2) var(--ease); }
.bars li:hover .fill { filter: brightness(1.1); }
.bars .fill.stack { display: flex; gap: 2px; background: none; }
.bars .fill.stack > span { height: 100%; min-width: 3px; background: var(--c); border-radius: 2px; }
.bar-foot { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }

/* ------------------------------ Ventas ------------------------------ */
.sales-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; align-items: stretch; }
.sales-grid > .panel { display: flex; flex-direction: column; }
.sales-grid .chart.tall, .sales-grid .weekdays { flex: 1; min-height: 210px; height: auto; }
.sales-grid .donut-wrap { flex: 1; justify-content: center; }
.span-8 { grid-column: span 8; } .span-7 { grid-column: span 7; } .span-5 { grid-column: span 5; } .span-4 { grid-column: span 4; }
.donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.donut { position: relative; width: 190px; height: 190px; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.donut .seg { fill: none; stroke-width: 18; stroke-linecap: round; cursor: pointer; animation: fade-in var(--dur-3) var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); transition: opacity var(--dur-1) var(--ease); }
.donut .seg:hover, .donut .seg.hi { stroke-width: 22; }
.donut.dim .seg { opacity: .28; }
.donut.dim .seg.hi { opacity: 1; }
.donut .track { fill: none; stroke: var(--surface-2); stroke-width: 18; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 40px; }
.donut-center b { font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.donut-center span { font-size: 12px; color: var(--muted); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-center small { font-size: 12px; font-weight: 600; color: var(--accent); }
.legend { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 2px; }
.legend li { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--r-sm); font-size: 13px; cursor: pointer; }
.legend li:hover, .legend li.hi { background: var(--hover); }
.legend li.sel { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.legend li .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend li small { color: var(--muted); width: 42px; text-align: right; }
.weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: stretch; height: 150px; }
.weekdays .wd { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.weekdays .wd .col-track { max-width: 30px; }
.weekdays .wd span { font-size: 11.5px; color: var(--muted); }
.weekdays .wd.best span { color: var(--accent); font-weight: 700; }
.insight { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 9px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: 13px; }
.insight i { color: var(--accent); }
.internal-total { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 10px; }
.internal-total b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }

/* ------------------------------ Tablas ------------------------------ */
.table-wrap { padding: 4px 6px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 12px; text-align: left; vertical-align: middle; }
th { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--dur-2) var(--ease); }
tbody tr:hover { background: var(--hover); }
td:first-child { white-space: nowrap; }
td.actions-cell { white-space: nowrap; text-align: right; }
td.actions-cell .btn { margin-left: 4px; }
tr.low td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
tr.pending td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
tr.row-link { cursor: pointer; }
tr.row-link:focus-visible, th[data-cxsort]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-sm); }
tr.voided td { color: var(--muted); }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); white-space: nowrap; color: var(--muted); background: var(--surface-2); }
.badge.in, .badge.cx-due { color: var(--accent); background: var(--accent-soft); }
.badge.temp { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
.badge.sale, .badge.cx-paid { color: var(--green); background: var(--green-soft); }
.badge.cx-part { color: var(--text); background: var(--surface-3); }
.badge.cx-void { text-decoration: line-through; }
.badge.low { display: flex; width: fit-content; margin: 3px 0 0 auto; color: var(--danger); background: var(--danger-soft); }
.badge i { width: 12px; height: 12px; }
.cell-sub { display: block; color: var(--muted); font-size: 12px; }
.state-pending { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.empty-row td { color: var(--muted); text-align: center; padding: 36px; }
.empty-row:hover, .more-row:hover { background: none; }
.more-row td { text-align: center; padding: 14px; }
.settings { display: grid; gap: 16px; max-width: 880px; }

/* ------------------------------ Diálogos ------------------------------ */
dialog { width: min(620px, 92vw); padding: 22px 24px; overflow: visible; color: var(--text); background: linear-gradient(160deg, var(--glass-hi) 0%, transparent 35%), var(--glass-strong); border: 0; border-radius: 26px; box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-modal); }
dialog::after {   /* borde iridiscente que fluye lento alrededor del diálogo */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--iri-conic); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: calc(var(--iri-border-o) + .2); animation: iri-flow 8s linear infinite;
}
dialog.narrow { width: min(440px, 92vw); }
/* Si un diálogo de venta crece más que la ventana (venta a crédito), se desplaza por dentro */
#movDlg, #sellDlg { max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; }
dialog.wide { width: min(980px, 94vw); }
dialog.guide { width: min(1000px, 94vw); }
dialog.guide iframe { display: block; width: 100%; height: min(600px, 72vh); border: 0; background: transparent; }
dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); }
dialog[open] { animation: dlg-in .42s var(--ease-spring); }
dialog[open]::backdrop { animation: fade-in .3s var(--ease); }
dialog.closing { animation: dlg-out var(--dur-1) var(--ease-in) forwards; }
dialog.closing::backdrop { animation: fade-out var(--dur-1) var(--ease-in) forwards; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dlg-head h2 { margin: 0; font-size: 18px; letter-spacing: -.015em; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 12px; }
.form-grid.one { grid-template-columns: 1fr; }
.form-grid > label, .form-grid > .field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.form-grid > .full { grid-column: 1 / -1; }
.form-grid input { width: 100%; }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
dialog input, dialog select, dialog .dp-trigger { background: var(--surface); }

/* Elegir tipo de salida */
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.choice-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 11px 13px; border-radius: var(--r-lg); border: 1.5px solid var(--glass-border); color: var(--text); background: var(--surface); box-shadow: var(--shadow-knob); transition: transform .45s var(--ease-smooth), box-shadow .45s var(--ease-smooth), border-color var(--dur-2) var(--ease); }
.choice-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.choice-card b { display: block; font-size: 14px; }
.choice-card small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.choice-card:active { transform: scale(.985); }
.choice-card.on { border-color: var(--accent); box-shadow: var(--ring); }
.choice-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; flex: none; color: var(--accent); background: var(--accent-soft); }
.choice-ico.accent { color: var(--green); background: var(--green-soft); }
.choice-extra { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.subtle-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 8px; border-radius: var(--r-sm); font-size: 12.5px; color: var(--muted); }
.subtle-link i { width: 14px; height: 14px; }
.subtle-link:hover { color: var(--text); background: var(--hover); }
.subtle-link.on { color: var(--text); font-weight: 600; background: var(--track); }
.info-card { display: flex; align-items: center; gap: 12px; padding: 11px 13px; margin-bottom: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--glass-border); }
.info-main { flex: 1; min-width: 0; }
.info-qty { text-align: right; }
.info-qty b { font-size: 20px; font-weight: 700; }

/* Selector desplegable propio (categoría, unidad, producto, persona) */
.combo { position: relative; display: block; }
.combo input { padding-right: 34px; }
.combo-caret { position: absolute; right: 11px; top: 50%; width: 16px !important; height: 16px !important; margin-top: -8px; color: var(--faint); pointer-events: none; transition: transform var(--dur-2) var(--ease); }
.combo.open .combo-caret { transform: rotate(180deg); color: var(--accent); }
.combo-panel { left: 0; max-height: 248px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; transform-origin: top center; }
.combo-panel.up { transform-origin: bottom center; }
.combo-panel.up:not(.open) { transform: translateY(4px) scale(.98); }
.combo-opt .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.combo-opt .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-opt .hint2 { color: var(--muted); font-size: 12px; white-space: nowrap; }
.combo-opt.active { background: var(--accent-soft); }
.combo-opt.selected .lbl { font-weight: 600; }
.combo-opt.create { color: var(--accent); font-weight: 600; }
.combo-opt.create i { width: 15px; height: 15px; }
.combo-empty { color: var(--muted); padding: 10px; font-size: 13px; }

/* Selector de fechas */
.datepick { position: relative; display: inline-block; }
.field .datepick { display: block; }
.dp-trigger { display: inline-flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 7px 12px; color: var(--text); background: var(--surface-2); font-weight: 500; text-align: left; }
.dp-trigger i { width: 16px; height: 16px; color: var(--accent); }
.dp-label { flex: 1; white-space: nowrap; }
.datepick.empty .dp-label { color: var(--muted); font-weight: 400; }
.datepick.open .dp-trigger { border-color: var(--accent); box-shadow: var(--ring); }
.dp-clear { display: grid; place-items: center; width: 20px; height: 20px; margin-right: -4px; border-radius: 50%; color: var(--muted); }
.dp-clear:hover { background: var(--danger-soft); color: var(--danger); }
.dp-clear i { width: 12px !important; height: 12px !important; color: inherit !important; }
.datepick.empty .dp-clear { display: none; }
.dp-panel { left: 0; width: 288px; padding: 12px; transform-origin: top center; }
.datepick.up .dp-panel { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp-head b { font-size: 14.5px; font-weight: 600; text-transform: capitalize; }
.dp-nav { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); background: var(--surface); transition: transform var(--dur-1) var(--ease); }
.dp-nav:hover { background: var(--surface-2); }
.dp-nav:active { transform: scale(.92); }
.dp-nav i { width: 16px; height: 16px; }
.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-week span { text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); padding: 4px 0; }
.dp-grid.from-right { animation: slide-from-right var(--dur-2) var(--ease); }
.dp-grid.from-left { animation: slide-from-left var(--dur-2) var(--ease); }
.dp-day { aspect-ratio: 1; border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; transition: transform var(--dur-1) var(--ease); }
.dp-day:hover, .dp-day.focus { background: var(--hover); }
.dp-day.today { color: var(--accent); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--accent); }
.dp-day.sel { color: var(--on-accent); font-weight: 700; background: var(--accent-fill); box-shadow: none; }
.dp-day:active { transform: scale(.9); }
.dp-foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.dp-link { border: 0; background: none; color: var(--accent); font-weight: 600; padding: 4px 8px; border-radius: var(--r-sm); }
.dp-link:hover { background: var(--accent-soft); }
.dp-link.muted { color: var(--muted); }

/* Aviso flotante */
#toast { position: fixed; bottom: 26px; left: 50%; z-index: 100; display: flex; align-items: center; gap: 8px; max-width: min(560px, 92vw); padding: 10px 18px; border-radius: var(--r-pill); font-weight: 600; color: var(--text); background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-pop); opacity: 0; transform: translate(-50%, 16px) scale(.96); pointer-events: none; transition: opacity .25s var(--ease), transform .4s var(--ease-spring); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast i { width: 18px; height: 18px; color: var(--violet); }

/* ==================================================================
   Personal y comisiones
   ================================================================== */
/* Avatar: iniciales sobre el color de la persona (--p) */
.avatar { --p: #8b8d94; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: #fff; font: 700 14px/1 var(--font-round); letter-spacing: .02em; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--p) 50%, white), var(--p) 72%); box-shadow: 0 0 0 2px var(--glass-strong), 0 6px 14px -4px color-mix(in srgb, var(--p) 55%, transparent); transition: transform .6s var(--ease-spring); -webkit-user-select: none; user-select: none; }
.card:hover .pc-head .avatar { transform: scale(1.06) rotate(-4deg); }
.avatar.xs { width: 20px; height: 20px; font-size: 8.5px; }
.avatar.sm { width: 26px; height: 26px; font-size: 10px; }
.avatar.lg { width: 52px; height: 52px; font-size: 18px; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; margin-bottom: 18px; }
.person-card { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--p) 16%, transparent), transparent 62%), linear-gradient(155deg, var(--glass-hi) 0%, transparent 38%), var(--glass); }
.person-card.inactive { opacity: .6; }
.pc-head { display: flex; align-items: center; gap: 12px; }
.pc-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-id > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-id b { font-size: 15px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-due .lbl { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.pc-due strong { display: block; font-size: 27px; font-weight: 700; line-height: 1.2; letter-spacing: -.022em; }
.pc-due strong.zero { color: var(--muted); }
.pc-due small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.pc-due small i { width: 13px; height: 13px; color: var(--green); }
.pc-meter { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.pc-meter span { display: block; height: 100%; border-radius: inherit; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, color-mix(in srgb, var(--p) 45%, white), var(--p)); transition: transform 1.2s var(--ease-smooth); }
.pc-meter span.on { transform: scaleX(var(--w)); }
.pc-foot { display: flex; align-items: center; gap: 8px; }
.pc-foot > .muted { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.out-pill i { width: 13px; height: 13px; }
.person-card.add { align-items: center; justify-content: center; gap: 4px; min-height: 190px; text-align: center; border: 1.5px dashed var(--border-strong); border-radius: var(--r-xl); color: var(--text); background: transparent; transition: transform .6s var(--ease-smooth), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.person-card.add > i { width: 42px; height: 42px; padding: 11px; margin-bottom: 6px; border-radius: 50%; color: var(--accent); background: var(--accent-soft); transition: transform .6s var(--ease-spring); }
.person-card.add:hover > i { transform: scale(1.1) rotate(-8deg); }
.person-card.add:hover { background: var(--hover); border-color: var(--accent); transform: translateY(-4px); }
.team-note { display: grid; gap: 8px; margin: -2px 0 18px; }
.team-note > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--glass-border); font-size: 13px; }
.team-note > div > span { display: inline-flex; align-items: center; gap: 8px; }
.team-note i { width: 16px; height: 16px; color: var(--accent); }
.team-note .link i { width: 14px; height: 14px; color: inherit; }
.people-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.people-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.rate-help { margin: 0 0 8px; }
.rates { list-style: none; margin: 0 -6px; padding: 0; max-height: 470px; overflow: auto; }
.rates li { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-bottom: 1px solid var(--border); border-radius: var(--r-sm); }
.rates li:last-child { border-bottom: 0; }
.rates li:hover { background: var(--hover); }
.rates li.saved { background: var(--green-soft); }
.rates .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rates .main b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rates .sub { color: var(--muted); font-size: 12px; }
.rates .per-unit { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pct-input { position: relative; display: inline-flex; align-items: center; flex: none; }
.pct-input input { width: 76px; min-height: 32px; padding: 5px 26px 5px 10px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.pct-input input::-webkit-inner-spin-button, .pct-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pct-input > span { position: absolute; right: 11px; color: var(--muted); font-size: 12.5px; pointer-events: none; }
.pct-input.wide { display: flex; }
.pct-input.wide input { width: 100%; min-height: 38px; text-align: left; padding-left: 12px; }
.comm-line { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 7px 12px 7px 8px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--glass-border); animation: fade-up var(--dur-2) var(--ease); }
.comm-line .cl-text { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-line .cl-amount { min-width: 76px; text-align: right; font-size: 15px; font-weight: 700; }
.comm-line .cl-amount.muted { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.seller-chip, .add-seller { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--glass-border); border-radius: var(--r-pill); padding: 2px 9px 2px 3px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--text); background: var(--surface); }
.seller-chip:hover, .add-seller:hover { background: var(--surface-2); border-color: var(--border-strong); }
.add-seller { padding: 3px 10px; font-weight: 500; color: var(--muted); background: transparent; }
.seller-chip.static { cursor: default; }
.seller-chip.static:hover { background: var(--surface); border-color: var(--border); }
.add-seller i { width: 13px; height: 13px; }
.add-seller:hover { color: var(--accent); }
.pay-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--muted); background: var(--surface-2); }
.pay-tag i { width: 11px; height: 11px; }
.pay-tag.paid { color: var(--green); background: var(--green-soft); }
.pay-tag.due { color: var(--danger); background: var(--danger-soft); }
.who { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 12px; font-weight: 600; vertical-align: middle; }
.person-head .ph-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.person-head h2 { font-size: 20px; letter-spacing: -.02em; }
.ph-actions { display: flex; align-items: center; gap: 6px; }
.pd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.pd-kpi { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 11px 13px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--glass-border); }
.pd-kpi span { font-size: 12px; font-weight: 500; color: var(--muted); }
.pd-kpi b { font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.pd-kpi small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-kpi.due b { color: var(--danger); }
.pd-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; }
.pd-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pd-main .segmented { align-self: flex-start; }
.pd-main .error { min-height: 0; margin: 0; }
.pd-list { height: min(320px, 38vh); overflow: auto; margin: 0 -6px; padding: 0 6px; outline: none; }
.pd-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px; border-bottom: 1px solid var(--border); border-radius: var(--r-sm); }
.pd-row:last-child { border-bottom: 0; }
.pd-row.selectable { cursor: pointer; }
.pd-row.selectable:hover { background: var(--hover); }
.pd-row .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pd-row .main b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-row .sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-row .side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; text-align: right; }
.pd-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; animation: fade-up var(--dur-3) var(--ease); }
.pd-empty i { width: 34px; height: 34px; color: var(--green); }
.pay-bar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 6px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--glass-border); }
.pay-sum { flex: 1; min-width: 40px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-bar #payNote { width: 130px; min-height: 36px; }
.pay-bar .dp-trigger { min-height: 36px; }
.pd-side h3 { margin: 4px 0 12px; font-size: 14px; font-weight: 600; }
.pd-side h3 .muted { font-weight: 400; }
.pd-side .bars { gap: 10px; margin-bottom: 20px; max-height: 250px; overflow: auto; }

/* ==================================================================
   Cartera por cobrar
   ================================================================== */
.b0 { --age: var(--age-0); } .b1 { --age: var(--age-1); } .b2 { --age: var(--age-2); } .b3 { --age: var(--age-3); }
/* Barra de antigüedad: un tramo por rango, del ancho de su dinero */
.aging-bar { display: flex; gap: 3px; height: 20px; margin: 6px 0 14px; border-radius: 7px; transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease-smooth); }
.aging-bar.on, .aging-bar.mini { transform: none; }
.aging-bar .seg { min-width: 6px; height: 100%; border: 0; padding: 0; border-radius: 3px; background: var(--age); transition: opacity var(--dur-2) var(--ease), transform .45s var(--ease-spring); }
.aging-bar .seg:first-child { border-top-left-radius: 7px; border-bottom-left-radius: 7px; }
.aging-bar .seg:last-child { border-top-right-radius: 7px; border-bottom-right-radius: 7px; }
.aging-bar button.seg:hover { transform: scaleY(1.2); }
.aging-bar.filtered .seg:not(.sel) { opacity: .28; }
.aging-bar.mini { height: 7px; margin: 12px 0 2px; gap: 2px; }
.aging-empty { color: var(--muted); font-size: 13px; }
.aging-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.age-cell { display: flex; flex-direction: column; gap: 1px; text-align: left; padding: 10px 12px; border: 1.5px solid var(--glass-border); border-radius: var(--r-lg); color: var(--text); background: var(--surface); box-shadow: var(--shadow-knob); transition: transform .45s var(--ease-smooth), box-shadow .45s var(--ease-smooth), border-color var(--dur-2) var(--ease); }
.age-cell:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.age-cell:not(:disabled):active { transform: scale(.985); }
.age-cell.sel { border-color: var(--accent); box-shadow: var(--ring); }
.age-cell:disabled { opacity: .5; cursor: default; }
.age-cell .lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.age-cell .dot { width: 9px; height: 9px; border-radius: 3px; background: var(--age); }
.age-cell b { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.age-cell small { font-size: 11.5px; color: var(--muted); }
/* Días de antigüedad: el número en texto normal + una marca del color del tramo */
.age { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px 1px 7px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--text); background: var(--surface-2); }
.age::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--age); }
.age.b3 { color: var(--danger); background: var(--danger-soft); }
.warn-dot { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 6px; vertical-align: -3px; border-radius: 50%; color: var(--danger); background: var(--danger-soft); }
.warn-dot i { width: 11px; height: 11px; }
.cx-toolbar .search input { width: 300px; }
#view-cartera > .panel { margin-bottom: 18px; }
#cxBody td { white-space: nowrap; }
#cxBody td:nth-child(2), #cxBody tr[data-inv] td:nth-child(8), #cxBody tr[data-client] td:first-child { white-space: normal; min-width: 150px; }
.cx-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cx-mini b { display: block; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.022em; }
.cx-mini span { display: block; }

/* Panel lateral que se desliza desde la derecha */
dialog.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(540px, 100vw); height: 100vh; max-height: 100vh; padding: 0; border-radius: 26px 0 0 26px; overflow: hidden; }
dialog.drawer[open] { display: flex; flex-direction: column; animation: drawer-in .45s var(--ease-smooth); }
dialog.drawer::after { border-radius: 26px 0 0 26px; }
dialog.drawer.closing { animation: drawer-out var(--dur-1) var(--ease-in) forwards; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--border); }
.drawer-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.drawer-title h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.drawer-title .back { margin-left: -6px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 22px 28px; overscroll-behavior: contain; }
.drawer-body h3 { margin: 22px 0 8px; font-size: 14px; font-weight: 600; }
.cx-client, .cx-inv-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--glass-border); border-radius: var(--r-lg); text-align: left; color: var(--text); background: var(--surface); box-shadow: var(--shadow-knob); transition: transform .45s var(--ease-smooth), box-shadow .45s var(--ease-smooth); }
.cx-client:hover, .cx-inv-row:hover { transform: translateX(3px); box-shadow: var(--shadow-1); }
.cx-client:active, .cx-inv-row:active { transform: scale(.99); }
.cx-client .main, .cx-inv-row .main { flex: 1; min-width: 0; }
.cx-client > i { width: 16px; height: 16px; color: var(--faint); }
.cx-inv-list { display: grid; gap: 6px; }
.cx-inv-row.voided { opacity: .6; }
.cx-inv-row .side { text-align: right; }
.cx-warning { display: flex; align-items: flex-start; gap: 9px; margin: 10px 0 0; padding: 9px 12px; border-radius: var(--r-md); font-size: 12.5px; color: var(--text); background: var(--danger-soft); }
.cx-warning i { width: 15px; height: 15px; margin-top: 1px; color: var(--danger); }
.cx-warning.void { background: var(--track); }
.cx-warning.void i { color: var(--muted); }
.cx-balance { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: end; margin: 16px 0 12px; }
.cx-balance .lbl { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.cx-balance strong { display: block; font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
.cx-balance .right { text-align: right; }
.cx-balance .right b { font-size: 16px; }
.cx-progress { grid-column: 1 / -1; height: 5px; margin-top: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.cx-progress span { display: block; height: 100%; border-radius: inherit; background: var(--green); transform-origin: left; transition: transform var(--dur-3) var(--ease); }
.cx-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-form { margin-top: 14px; padding: 14px 16px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--glass-border); animation: fade-up var(--dur-2) var(--ease); }
.cx-form h3 { margin: 0 0 12px; }
.cx-form input, .cx-form .dp-trigger { background: var(--surface-2); }
.cx-form .hint.neg { font-weight: 500; }
.money-input { position: relative; display: flex; align-items: center; }
.money-input > span { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.money-input input { width: 100%; padding-left: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cx-dl { display: grid; grid-template-columns: 1fr; margin: 0; }
.cx-dl > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; padding: 5px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.cx-dl dt { flex: none; font-size: 12.5px; color: var(--muted); }
.cx-dl dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.cx-dl .datepick .dp-trigger { min-height: 30px; padding: 3px 9px; font-size: 13px; }
.cx-dl .datepick .dp-panel { left: auto; right: 0; }
.cx-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cx-original { margin-top: 22px; }
.cx-original summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent); padding: 4px 0; }
.cx-original .cx-dl { margin-top: 6px; }

/* ==================================================================
   Integración: ventas a crédito y cartera por vendedor
   ================================================================== */
.credit-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: var(--inset); }
.credit-row .credit-lbl { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.credit-row .segmented { background: var(--surface); }
.credit-row .muted { flex: 1; min-width: 160px; }
.credit-chip { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px 10px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--green); background: var(--green-soft); transition: transform .4s var(--ease-spring); }
.credit-chip.due { color: var(--accent); background: var(--accent-soft); }
.credit-chip i { width: 12px; height: 12px; }
.credit-chip:hover { transform: translateY(-1px); }
.cx-owe { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--border); border-radius: var(--r-md); padding: 7px 10px; font-size: 12.5px; text-align: left; color: var(--text); background: var(--surface-2); box-shadow: var(--inset); transition: transform .45s var(--ease-smooth), background var(--dur-2) var(--ease); }
.cx-owe > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-owe i { width: 14px; height: 14px; color: var(--accent); }
.cx-owe > i:last-child { color: var(--faint); transition: transform .45s var(--ease-spring); }
.cx-owe:hover { transform: translateX(2px); background: var(--hover); }
.cx-owe:hover > i:last-child { transform: translateX(3px); color: var(--accent); }
.cx-owe.late b { color: var(--danger); }
.src-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; vertical-align: 1px; color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); }
.src-tag.app { color: var(--green); background: var(--green-soft); }
.feed li.more { justify-content: center; border-bottom: 0; }
.feed li.more:hover { transform: none; background: none; }
.feed li.clickable { cursor: pointer; }

/* ==================================================================
   Facturación: editor de factura y trazabilidad
   ================================================================== */
/* Diálogos que se desplazan por dentro: el borde iridiscente se movería con el contenido; se usa un borde fijo */
dialog.invoice-editor::after, #movDlg::after, #sellDlg::after { display: none; }
dialog.invoice-editor, #movDlg, #sellDlg { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 22%, transparent), inset 0 1px 0 var(--glass-edge), var(--shadow-modal); }
dialog.invoice-editor { width: min(1100px, 96vw); max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0; }
.inv-grid { display: grid; gap: 14px; }
.inv-section {
  padding: 14px 16px 16px; border-radius: var(--r-lg);
  background: linear-gradient(155deg, var(--glass-hi) 0%, transparent 40%), var(--glass);
  border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge);
  animation: rise .6s var(--ease-smooth) both;
}
.inv-grid > :nth-child(2) { animation-delay: 60ms; } .inv-grid > :nth-child(3) { animation-delay: 120ms; }
.inv-grid > :nth-child(4) { animation-delay: 180ms; } .inv-grid > :nth-child(5) { animation-delay: 240ms; }
.inv-section h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.step { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 12px var(--font-round); color: #fff; background: var(--grad-accent); box-shadow: 0 3px 8px rgba(79, 98, 232, .35); }
.form-grid.three { grid-template-columns: 1fr 1fr 1fr; }
.terms-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.terms-custom { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.terms-custom input { width: 72px; min-height: 34px; text-align: right; }
.due-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); font-size: 13px; color: var(--accent); background: var(--accent-soft); animation: fade-up .3s var(--ease) both; }
.due-pill.cash { color: var(--green); background: var(--green-soft); }
.due-pill i { width: 15px; height: 15px; }
.terms-extra { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 18px; margin-top: 12px; }
.pay-method { display: flex; flex-direction: column; gap: 6px; min-width: 240px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.lines-head, .inv-line { display: grid; grid-template-columns: minmax(220px, 1fr) 76px 118px 104px 84px 110px 32px; gap: 8px; align-items: center; }
.lines-head { padding: 0 8px 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.inv-lines { display: grid; gap: 8px; }
.inv-line {
  padding: 8px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: var(--inset);
  animation: line-in .45s var(--ease-spring) both; transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.inv-line input, .inv-line select { width: 100%; min-height: 36px; background: var(--surface); }
.inv-line .ln-total { text-align: right; font-size: 14px; }
.inv-line .ln-del { width: 30px; height: 30px; }
.inv-line .ln-hint { grid-column: 1 / -1; margin: -2px 2px 0; font-size: 11.5px; color: var(--muted); }
.inv-line.bad { box-shadow: var(--inset), inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 45%, transparent); }
.inv-line.bad .ln-hint { color: var(--danger); font-weight: 500; }
.inv-line.leaving { opacity: 0; transform: translateX(18px) scale(.98); }
.inv-line.shake { animation: shake .4s var(--ease); }
.lines-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.inv-bottom { display: grid; grid-template-columns: 1fr 370px; gap: 14px; align-items: start; animation: rise .6s 300ms var(--ease-smooth) both; }
.inv-notes { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
textarea { width: 100%; font: inherit; color: var(--text); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); box-shadow: var(--inset); padding: 10px 12px; resize: vertical; transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--inset), var(--ring); }
.inv-totals { display: grid; gap: 7px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-1); }
.tl { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.tl > span:first-child { color: var(--muted); }
.tl.grand { margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--border); font-size: 15px; font-weight: 600; }
.tl.grand > span:first-child { color: var(--text); }
.tl.grand b { font: 700 22px var(--font-round); letter-spacing: -.02em; }
.tl.ret .money-input { width: 140px; }
.tl.ret input { min-height: 34px; text-align: right; }
.tl.ret input.bad { border-color: var(--danger); }
.tl.due b { font-size: 16px; color: var(--accent); }
.actions.sticky { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 10px; margin: 14px -24px 0; padding: 12px 24px 14px;
  background: var(--glass-menu); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); border-top: 1px solid var(--glass-border); }
.badge.fx-late { color: var(--danger); background: var(--danger-soft); }
#fxBody td:nth-child(2), #fxBody td:nth-child(6), #fxBody td:nth-child(7) { white-space: nowrap; }
#fxBody td:nth-child(5) .cell-sub { white-space: nowrap; }
.fx-empty-cta { margin-top: 14px; }

/* Trazabilidad: la cadena de la factura, de arriba abajo */
.trace { position: relative; list-style: none; margin: 0; padding: 0 0 0 2px; }
.trace::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--iri-stops)); opacity: .55; }
.trace-step { position: relative; display: flex; gap: 12px; padding: 7px 0; }
.trace-step .dot { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; color: var(--accent); background: var(--surface); box-shadow: var(--shadow-knob); }
.trace-step .dot i { width: 14px; height: 14px; }
.trace-step.line .dot { color: var(--violet); }
.trace-step.done .dot { color: var(--green); }
.trace-step.void .dot { color: var(--danger); }
.trace-step > div { min-width: 0; padding-top: 3px; }
.trace-step b { font-size: 13.5px; }
.trace-step .code { margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--muted); }
.trace-step .sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.trace-step .sub i { width: 13px; height: 13px; }
.trace-step .sub b { font-size: 12.5px; }
.trace-in { animation: trace-in .55s var(--ease-smooth) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes trace-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes line-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* Aparición de las tarjetas: el borde de cristal se enciende y se apaga a su brillo normal */
.card.reveal-in::after { animation: border-in 1.3s var(--ease-smooth) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
@keyframes border-in { 0% { opacity: 0; } 45% { opacity: calc(var(--iri-border-o) + .45); } 100% { opacity: var(--iri-border-o); } }

@media (max-width: 900px) {
  .form-grid.three { grid-template-columns: 1fr; }
  .lines-head { display: none; }
  .inv-line { grid-template-columns: 1fr 1fr 1fr; }
  .inv-line > .combo { grid-column: 1 / -1; }
  .inv-bottom { grid-template-columns: 1fr; }
}

/* ==================================================================
   Carga: esqueleto mientras llegan los datos de una sección
   ================================================================== */
.view.is-loading .card[data-reveal] > * { visibility: hidden; }
.view.is-loading .card[data-reveal] { min-height: 64px; }
.view.is-loading .card[data-reveal]::before {
  inset: 16px 18px; opacity: 1; border-radius: var(--r-md);
  background: repeating-linear-gradient(to bottom, var(--surface-3) 0 12px, transparent 12px 30px);
  animation: skeleton 1.1s ease-in-out infinite alternate;
}

/* ==================================================================
   Pantalla de carga
   ================================================================== */
#splash { position: fixed; inset: 0; z-index: 1000; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg); transition: opacity .7s ease .1s, visibility 0s .9s; }
#splash.done { opacity: 0; visibility: hidden; }
/* Aurora: manchas de todo el espectro que se acercan y flotan (solo transform) */
.splash-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0; }
.splash-orb.a { width: 48vw; height: 48vw; left: -10vw; top: -12vw; background: var(--aur-1); animation: orb-in 1.6s var(--ease-smooth) forwards, drift-a 9s ease-in-out infinite alternate; }
.splash-orb.b { width: 40vw; height: 40vw; right: -8vw; bottom: -10vw; background: var(--aur-5); animation: orb-in 1.6s .1s var(--ease-smooth) forwards, drift-b 10s ease-in-out infinite alternate; }
.splash-orb.c { width: 34vw; height: 34vw; right: 14vw; top: 2vw; background: var(--aur-2); animation: orb-in 1.6s .2s var(--ease-smooth) forwards, drift-a 11s ease-in-out infinite alternate-reverse; }
.splash-orb.d { width: 30vw; height: 30vw; left: 18vw; bottom: 0; background: var(--aur-4); animation: orb-in 1.6s .3s var(--ease-smooth) forwards, drift-b 12s ease-in-out infinite alternate-reverse; }
.splash-orb.e { width: 30vw; height: 30vw; right: 30vw; bottom: 18vw; background: var(--aur-6); animation: orb-in 1.6s .35s var(--ease-smooth) forwards, drift-a 13s ease-in-out infinite alternate; }
.splash-stage { position: relative; width: 190px; height: 190px; display: grid; place-items: center; margin-bottom: 26px; }
.splash-halo { position: absolute; inset: -40px; border-radius: 50%; background: conic-gradient(from 0deg, var(--iri-stops)); filter: blur(30px); opacity: 0; animation: halo-in 1.2s .3s var(--ease-smooth) forwards, spin 6s .3s linear infinite, pulse-soft 2.6s 1.4s ease-in-out infinite; }
.splash-card { position: relative; width: 160px; height: 160px; padding: 24px; border-radius: 46px; overflow: hidden; background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--border); box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-2); animation: card-in .9s var(--ease-spring) both; }
.splash-card .ring { animation: ring-in 1.3s .25s var(--ease) both, ring-breathe 3s 1.6s ease-in-out infinite; }
.splash-card .box { animation: box-in .9s .7s var(--ease-spring) both, box-float 2.6s 1.6s ease-in-out infinite; }
.sheen { position: absolute; inset: -20%; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%); transform: translateX(-120%); animation: sheen 1.1s 1.35s ease-in-out forwards; }
:root[data-theme="dark"] .sheen { background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .16) 50%, transparent 62%); }
.splash-name { position: relative; font: 700 34px var(--font-round); letter-spacing: -.03em; }
.splash-name span { display: inline-block; opacity: 0; animation: letter-in .7s calc(.95s + var(--i) * 45ms) var(--ease) forwards; }
.splash-tag { position: relative; margin-top: 4px; color: var(--muted); font-size: 14px; opacity: 0; animation: fade-up .7s 1.55s var(--ease) forwards; }
.splash-bar { position: relative; width: 170px; height: 6px; margin-top: 22px; border-radius: 4px; background: var(--surface-2); box-shadow: var(--inset); overflow: hidden; opacity: 0; animation: fade-up .5s 1.6s var(--ease) forwards; }
.splash-bar span { position: absolute; inset: 0; border-radius: 4px; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--iri-stops)); animation: fill-bar 1.2s 1.7s var(--ease) forwards; }
#splash.done .splash-stage { transform: scale(1.12); opacity: 0; transition: transform .8s var(--ease), opacity .5s ease; }
#splash.done .splash-name, #splash.done .splash-tag, #splash.done .splash-bar { transform: translateY(-10px); opacity: 0; transition: transform .6s var(--ease), opacity .4s; }

/* ==================================================================
   Animaciones
   ================================================================== */
.reveal-in { animation: rise .75s var(--ease-smooth) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.view.leaving { animation: view-out .18s var(--ease-in) forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes view-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes dlg-in { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes dlg-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes drawer-out { to { transform: translateX(100%); } }
@keyframes slide-from-right { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes slide-from-left { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(3); opacity: 0; } }
@keyframes skeleton { from { opacity: .45; } to { opacity: 1; } }
@keyframes fill-bar { to { transform: scaleX(1); } }
@keyframes iri-flow { to { --a: 360deg; } }
@keyframes iri-slide { to { background-position: -200% 0; } }
@keyframes pulse-soft { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes orb-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, 4vw) scale(1.15); } }
@keyframes drift-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-5vw, -3vw) scale(.95); } }
@keyframes halo-in { to { opacity: 1; } }
@keyframes card-in { from { opacity: 0; transform: scale(.55) translateY(20px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ring-in { from { opacity: 0; transform: rotate(-220deg) scale(.45); } to { opacity: 1; transform: none; } }
@keyframes ring-breathe { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(8deg) scale(1.03); } }
@keyframes box-in { 0% { opacity: 0; transform: translateY(-46px) scale(.4); } 100% { opacity: 1; transform: none; } }
@keyframes box-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes sheen { to { transform: translateX(120%); } }
@keyframes letter-in { from { opacity: 0; transform: translateY(16px) scale(.9); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* "Reducir movimiento" (Ajustes del Sistema > Accesibilidad > Pantalla):
   nada se desplaza ni cambia de tamaño; solo aparece y desaparece por opacidad. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-property: opacity !important; animation-iteration-count: 1 !important; }
  .reveal-in, .splash-card, .splash-name span, .splash-tag, .splash-bar, .check-inline, .comm-line, .cx-form, .pd-empty, .chip.filter, .filter-pill, .dp-grid, dialog[open], .tab-badge,
  .inv-section, .inv-bottom, .inv-line, .due-pill, .trace-in { animation-name: fade-in !important; }
  .inv-line.shake, .card.reveal-in::after { animation: none !important; }
  .inv-line.leaving { transform: none !important; }
  dialog.closing, .view.leaving { animation-name: fade-out !important; }
  .pulse-dot::after, .view.is-loading .card[data-reveal]::before, .topbar::after, .tab-indicator::after,
  .card:hover::after, .card:hover .stat-icon::after, .splash-orb, .splash-halo, .splash-card .ring, .splash-card .box, .sheen { animation: none !important; }
  .splash-orb, .splash-halo { opacity: 1; }
  .card:hover, .card:active, .btn:hover, .btn:active, .icon-btn:hover, .icon-btn:active, .chip:hover, .person-card.add:hover,
  .aging-bar button.seg:hover, .card:hover .stat-icon, .feed li:hover, #tabs button:hover i, .btn:hover i { transform: none !important; }
}

/* ------------------------------ Ventanas angostas ------------------------------ */
@media (max-width: 1240px) { #tabs button i { display: none; } }
@media (max-width: 1080px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .dash { grid-template-columns: 1fr; }
  .sales-grid > * { grid-column: span 12; }
  .pd-body { grid-template-columns: 1fr; }
  .pd-kpis { grid-template-columns: repeat(2, 1fr); }
  dialog.wide { max-height: calc(100vh - 32px); overflow-y: auto; }   /* en una columna, la ficha se desplaza */
  dialog.wide::after { display: none; }
}
@media (max-width: 1060px) { .topbar { gap: 12px; padding: 10px 16px; } #tabs button { padding: 6px 9px; font-size: 13px; } .brand > span { display: none; } main { padding: 18px 16px 40px; } }
@media (max-width: 860px) { .aging-legend { grid-template-columns: repeat(2, 1fr); } .form-grid { grid-template-columns: 1fr; } .cx-toolbar .search input, .search input { width: 100%; } .search { flex: 1 1 220px; } }

/* Un calendario o menú abierto queda por encima de las secciones vecinas */
.inv-section:has(.datepick.open, .sort.open), .card:has(.datepick.open, .sort.open),
.form-grid > :has(.datepick.open) { position: relative; z-index: 20; }

/* ==================================================================
   Salidas que esperan factura
   ================================================================== */
.wait-chip { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--accent); border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.wait-chip i { width: 12px; height: 12px; }
.inv-row .inv-doc { flex: 1; min-width: 180px; min-height: 34px; animation: fade-up var(--dur-2) var(--ease); }
.inv-row .inv-doc + .muted:empty { display: none; }

.fx-pending { padding: 16px 18px 12px; margin-bottom: 18px; animation: rise .6s var(--ease-smooth) both; }
.fx-pending:not(.table-wrap):hover { transform: none; }          /* lista de trabajo: no se levanta */
.fxp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.fxp-head h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; }
.fxp-head h2 i { width: 17px; height: 17px; color: var(--accent); }
.fxp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fxp-row { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; border-radius: var(--r-lg); border: 1px solid transparent; transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.fxp-row:hover { background: var(--hover); }
.fxp-row.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.fxp-pick { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px 8px; cursor: pointer; }
.fxp-pick input { position: absolute; opacity: 0; pointer-events: none; }
.fxp-pick .box-check i { width: 12px; height: 12px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-spring); }
.fxp-pick input:checked + .box-check i { opacity: 1; transform: none; }
.fxp-pick input:focus-visible + .box-check { outline: 2px solid var(--accent); outline-offset: 2px; }
.fxp-pick .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fxp-pick .main b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxp-pick .code { margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--muted); }
.fxp-pick .amt { font-size: 14px; white-space: nowrap; }

/* Línea de factura que viene de una salida: producto y cantidad fijos */
.inv-line.linked { box-shadow: var(--inset), inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); }
.ln-linked { position: relative; display: block; }
.ln-linked i { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; color: var(--accent); pointer-events: none; }
.inv-line .ln-linked input { padding-left: 33px; font-weight: 600; cursor: default; }
.inv-line input[readonly] { background: var(--surface-2); color: var(--text); box-shadow: none; }
.inv-line.linked .ln-hint { color: var(--accent); }
.inv-line input[readonly]::-webkit-inner-spin-button, .inv-line input[readonly]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pay-method .combo input { width: 100%; }
.trace-step .sub { display: block; }
.trace-step .sub i { display: inline-flex; vertical-align: -2px; margin-right: 5px; }

/* ==================================================================
   Servidor: modo, roles y usuarios
   ================================================================== */
body:not([data-modo="servidor"]) .srv-only, body[data-modo="servidor"] .desk-only { display: none !important; }
/* El operador no ve lo que no puede hacer (el servidor igual lo rechaza) */
body[data-role="operador"] :is(.admin-only, .link.del, [data-del], [data-act="void"], [data-act="restore"], [data-act="undo"],
  [data-doc-act="void"], [data-pay], #paySubmit, [data-undo-pay], [data-pd-undo], [data-edit], [data-rate]) { display: none !important; }

.user-menu { position: relative; }
.user-menu .sort-menu { right: 0; left: auto; min-width: 230px; padding: 6px; }
.user-chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 5px; border-radius: var(--r-pill); font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-knob); transition: transform .35s var(--ease-smooth); }
.user-chip:hover { transform: translateY(-1px); }
.um-head { display: flex; flex-direction: column; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.user-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.user-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 10px; border-radius: var(--r-lg); background: var(--surface-2); }
.user-row.off { opacity: .6; }
.user-row .main { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.user-row select { min-height: 32px; padding: 4px 8px; }