/* ==========================================================================
   Portal Empresa — Design system v2 "Precision+"
   Neutral premium, con tendencias 2026 aplicadas con restricción:
   glass topbar, bento, micro-interacciones, motion con propósito, dark mode.
   ========================================================================== */

:root {
  --bg: #f4f6f8;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, #eef1f6 0%, transparent 60%);
  --btn-r: var(--r-pill);   /* forma de botones (personalizable: pill|suave|recto) */
  --card-sh: var(--sh-1);   /* profundidad de tarjetas (personalizable: plana|media|elevada) */
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --surface-3: #f1f3f6;
  --border: #e9ecf1;
  --border-2: #dde1e8;
  /* Borde de CONTROLES de formulario (input/checkbox/switch): a 1px #dde1e8 daba ~1.3:1 vs el
     fondo, único indicador visual del control → falla WCAG 1.4.11 (3:1). #838996 clarea >=3:1
     tanto sobre la superficie (blanco, 3.4:1) como sobre el fondo de página (3.1:1). */
  --ctrl-border: #838996;
  --text: #101319;
  --text-2: #444b57;
  --muted: #676e7b;

  --accent: #1f2937;
  --accent-contrast: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 8%, var(--surface));
  /* Anillo de foco (navegación por teclado): usa --accent-ink (guarda de luminancia) al 85%
     para clarear >=3:1 vs la superficie (WCAG 2.4.11) en AMBOS temas y con CUALQUIER acento de
     marca (incl. medios como ámbar, donde 55% caía a ~2.3:1); a 24% de --accent crudo era
     ~1.5:1 (indicador de foco casi imperceptible). */
  --ring: color-mix(in srgb, var(--accent-ink, var(--accent)) 85%, transparent);
  /* 2ª parada del degradado para rellenos CON texto/íconos encima (botón, avatar, topbar).
     base.html la inyecta calculada en servidor (branding.grad_second): vívida = --accent-2
     crudo cuando el texto único ya clarea AA sobre él, o mínimamente acercada al acento si
     son de luminancia opuesta. Este valor es solo el fallback. Los fondos decorativos
     (bg-degradado, malla) siguen usando --accent-2 crudo (sin texto encima). */
  --grad-2: var(--accent-2, var(--accent));

  /* --ok/--warn oscurecidos para AA (>=4.5:1) como TEXTO sobre sus fondos claros (chips de
     estado, banner de mantenimiento): #14804a daba ~4.46 y #b25a09 ~4.31. Los -bg/-bd no cambian. */
  --ok: #137544;   --ok-bg: #e7f6ee;   --ok-bd: #bfe6cf;
  --warn: #9a4f06; --warn-bg: #fbf1e2; --warn-bd: #f0d9b5;
  --danger: #c23934; --danger-bg: #fdecec; --danger-bd: #f4c9c7;
  --info: #315ac4;  --info-bg: #ecf0fb; --info-bd: #cdd8f5;

  --sh-xs: 0 1px 2px rgba(15,18,26,.05);
  --sh-1: 0 1px 2px rgba(15,18,26,.04), 0 2px 6px rgba(15,18,26,.05);
  --sh-2: 0 4px 12px rgba(15,18,26,.07), 0 12px 32px rgba(15,18,26,.08);
  --sh-3: 0 12px 40px rgba(15,18,26,.14);

  --r: 14px; --r-sm: 10px; --r-xs: 8px; --r-pill: 999px;
  --glass: rgba(255,255,255,.72);

  --dur: .18s; --ease: cubic-bezier(.22,.61,.36,1);

  /* Tipografía configurable (la empresa puede cambiarla en Configuración) */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Inter Tight', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Escala de espaciado (tokenizada, para ritmo consistente) */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.25rem;
  --s6: 1.5rem; --s7: 1.75rem; --s8: 2rem; --s10: 2.5rem;
  --gap-section: var(--s5);   /* salto entre secciones mayores */

  /* Escala tipográfica (tokenizada) */
  --fs-display: 2.1rem; --fs-h1: 1.55rem; --fs-h2: 1.12rem; --fs-title: .95rem;
  --fs-body: .92rem; --fs-sub: .88rem; --fs-caption: .8rem; --fs-eyebrow: .74rem; --fs-mono: .83rem;
  --fw-medium: 500; --fw-semi: 600; --fw-display: 680;
}

[data-theme="dark"] {
  --bg: #0a0c10;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, #171b22 0%, transparent 60%);
  --surface: #171b22;
  --surface-2: #1f242c;
  --surface-3: #272d37;
  --border: #2c323d;
  --border-2: #3b4250;
  --ctrl-border: #6a7286;  /* ~3.7:1 vs superficie oscura (WCAG 1.4.11) */
  --text: #f4f6fa;
  --text-2: #cbd2de;
  --muted: #99a1b1;
  --accent: #e7eaf0;
  --accent-contrast: #14161b;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface));
  /* Semánticos de primer plano re-aclarados para AA sobre fondos oscuros */
  --ok: #4ade80; --warn: #fbbf24; --danger: #f87171; --info: #7aa2f7;
  --ok-bg: #10261a; --ok-bd: #1f4531;
  --warn-bg: #2a1f0f; --warn-bd: #4a3617;
  --danger-bg: #2a1615; --danger-bd: #4a2422;
  --info-bg: #141d33; --info-bd: #263a63;
  --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 8px 30px rgba(0,0,0,.5); --sh-3: 0 16px 50px rgba(0,0,0,.6);
  --glass: rgba(21,24,30,.7);
}

/* Mapea las variables de Bootstrap a nuestra paleta: sin esto, .card/.modal
   fuerzan el texto oscuro por defecto de Bootstrap (#212529) e invisibilizan
   el contenido en dark mode. Se resuelve dinámicamente por tema. */
:root, [data-theme="dark"] {
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-emphasis-color: var(--text);
  --bs-heading-color: var(--text);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--border);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--font-body);
  background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed;
  color: var(--text); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  letter-spacing: -.006em; margin: 0;
}
/* Patrón de puntos sutil (Vercel aesthetic), difuminado hacia abajo */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 3.5%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(125% 85% at 50% -5%, #000 45%, transparent 100%);
  mask-image: radial-gradient(125% 85% at 50% -5%, #000 45%, transparent 100%); }
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.15; letter-spacing: -.022em; font-weight: 640; color: var(--text); margin: 0; }
.h-page { font-size: var(--fs-h1); font-weight: var(--fw-display); letter-spacing: -.03em; }
.sub { color: var(--muted); font-size: .92rem; }
.muted { color: var(--muted); }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
/* Celda mono de tabla (CURP, fecha) — unifica los estilos inline dispersos */
.cell-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-mono); }
.cell-dim { color: var(--text-2); }
.num, .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
a { color: var(--text); }

::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }

/* ---------- Topbar (glass) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--glass); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner { max-width: 1200px; margin: 0 auto; height: 60px; display: flex; align-items: center; gap: .4rem; padding: 0 1.35rem; }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.03em; color: var(--text); text-decoration: none; white-space: nowrap; }
.brand .dot { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); box-shadow: var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.15); }
.brand img { height: 26px; border-radius: 6px; }
.nav { display: flex; flex-wrap: nowrap; gap: .1rem; margin-left: .4rem; overflow-x: auto; scrollbar-width: none; background: color-mix(in srgb, var(--surface-2) 65%, transparent); border: 1px solid var(--border); border-radius: var(--r-pill); padding: .22rem; }
.nav::-webkit-scrollbar { display: none; }
.nav a { display: inline-flex; flex-shrink: 0; align-items: center; gap: .34rem; color: var(--text-2); font-weight: 500; font-size: .86rem; padding: .4rem .52rem; border-radius: var(--r-pill); text-decoration: none; white-space: nowrap; transition: background var(--dur), color var(--dur), box-shadow var(--dur); }
.nav a svg { width: 16px; height: 16px; opacity: .7; }
.nav a:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.nav a.active { color: var(--text); background: var(--surface); box-shadow: var(--sh-xs); font-weight: 550; }
.nav a.active svg { opacity: 1; }
.spacer { flex: 1; }
.topbar .who { color: var(--muted); font-size: .84rem; white-space: nowrap; max-width: 104px; overflow: hidden; text-overflow: ellipsis; }
/* Degradado del topbar para que el menú NUNCA se corte:
   ≤1200px oculta el nombre del admin (redundante con la marca);
   ≤1090px el menú pasa a solo-iconos (las etiquetas viven en el tooltip). */
@media (max-width: 1200px) { .topbar .who { display: none; } }
@media (max-width: 1090px) and (min-width: 761px) {
  .nav .nav-lbl { display: none; }
  .nav a { padding: .44rem .52rem; }
}
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; box-shadow: var(--sh-xs); transition: background var(--dur), color var(--dur), transform var(--dur); }
.icon-btn:hover { background: var(--surface-2); color: var(--text); transform: translateY(-1px); }
.icon-btn svg { width: 17px; height: 17px; }

.saldo-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: .3rem .75rem; font-size: .82rem; color: var(--text-2); box-shadow: var(--sh-xs); text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: border-color var(--dur), color var(--dur), box-shadow var(--dur); }
.saldo-chip svg { width: 15px; height: 15px; flex-shrink: 0; }
a.saldo-chip:hover { color: var(--text); border-color: var(--accent); box-shadow: var(--sh-xs), 0 0 0 3px var(--accent-soft); }
.saldo-chip strong { color: var(--text); font-variant-numeric: tabular-nums; }
.saldo-chip svg { width: 14px; height: 14px; opacity: .7; }
.saldo-chip .sc-lbl { display: none; }  /* topbar compacto: solo icono + número; la etiqueta vive en el tooltip */
.saldo-chip strong { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 2rem 1.35rem 5rem; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.grid { display: grid; gap: 1rem; }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-2 { grid-template-columns: 1fr 1fr; }
.bento { grid-template-columns: repeat(12, 1fr); align-items: start; }
/* Los items del bento llenan su tramo (algunos no se estiran por defecto siendo contenedores flex) */
.bento > [class*="col-"] { width: 100%; min-width: 0; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; } .col-4 { grid-column: span 4; } .col-8 { grid-column: span 8; } .col-3 { grid-column: span 3; }
@media (max-width: 860px) { .g-4 { grid-template-columns: 1fr 1fr; } .g-3 { grid-template-columns: 1fr 1fr; } .g-2 { grid-template-columns: 1fr; } .bento > [class*="col-"] { grid-column: 1 / -1; } }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--card-sh); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur); }
.card-body { padding: 1.25rem 1.35rem; }
.card-body.flush { padding: .55rem 1.15rem; }   /* cards que contienen una tabla, unificado */
.card-title { font-size: .96rem; font-weight: 640; margin: 0 0 1rem; display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.card-title svg { width: 17px; height: 17px; opacity: .55; }
.hoverable:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--border-2); }

.stat { position: relative; padding: 1.3rem 1.35rem; overflow: hidden; }
.stat .ico { position: absolute; top: 1.3rem; right: 1.35rem; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.stat .ico svg { width: 18px; height: 18px; }
.stat .num { font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--fw-display); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .num small { font-size: 1rem; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.stat .lbl { color: var(--muted); font-size: .82rem; margin-top: .55rem; }
.stat .num.accent { color: var(--accent-ink); } .stat .num.ok { color: var(--ok); }
.stat .ico.info { background: var(--info-bg); color: var(--info); }
.stat .ico.ok { background: var(--ok-bg); color: var(--ok); }
.stat .ctx { margin-top: .55rem; font-size: .77rem; color: var(--muted); display: inline-flex; align-items: center; gap: .32rem; }
.stat .ctx .up { color: var(--ok); font-weight: 650; }
.stat .ctx svg { width: 13px; height: 13px; }

/* Barra de distribución (mini data-viz) */
.dist-bar { display: flex; gap: 2px; height: 9px; border-radius: 99px; overflow: hidden; background: var(--surface-3); margin: .15rem 0 1.1rem; }
/* Reset explícito: '.seg' también es el control segmentado (más abajo) y filtra
   border/padding/radio a estos tramos; los anulamos para mantener la barra continua. */
.dist-bar .seg { display: block; height: 100%; border: 0; padding: 0; border-radius: 0; transition: width .6s var(--ease); }
.dist-bar .seg.gray { background: color-mix(in srgb, var(--muted) 65%, transparent); }
.dist-bar .seg.info { background: var(--info); }
.dist-bar .seg.ok { background: var(--ok); }
.dist-bar .seg.danger { background: var(--danger); }

/* Acciones rápidas como lista compacta (columna del dashboard) */
.qa-row { display: flex; align-items: center; gap: .75rem; padding: .72rem .15rem; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); transition: padding-left var(--dur) var(--ease); }
.qa-row:last-child { border-bottom: none; }
.qa-row:hover { padding-left: .35rem; color: var(--text); }
.qa-row:hover .qa-arrow { transform: translateX(3px); color: var(--text-2); }
.qa-row .qa-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex-shrink: 0; }
.qa-row .qa-ico svg { width: 18px; height: 18px; }
.qa-row .qa-t { font-weight: 600; font-size: .9rem; }
.qa-row .qa-s { font-size: .8rem; color: var(--muted); }
.qa-row .qa-arrow { margin-left: auto; color: var(--muted); display: grid; transition: transform var(--dur) var(--ease), color var(--dur); }
.qa-row .qa-arrow svg { width: 17px; height: 17px; }
.col-stack { display: flex; flex-direction: column; gap: 1rem; }

/* Actividad reciente (feed) */
.feed-row { display: flex; align-items: center; gap: .75rem; padding: .62rem .1rem; border-bottom: 1px solid var(--border); }
.feed-row:last-child { border-bottom: none; }
.feed-row .fr-main { min-width: 0; flex: 1; }
.feed-row .fr-name { font-size: .89rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-row .fr-curp { font-family: 'JetBrains Mono', monospace; font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-row .fr-time { font-size: .76rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.feed-row .chip { flex-shrink: 0; min-width: 106px; justify-content: center; }

/* Avatar de iniciales */
.avatar { width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); color: var(--text); display: grid; place-items: center; font-weight: 650; font-size: .84rem; flex-shrink: 0; }
.avatar.sm { width: 30px; height: 30px; font-size: .76rem; }

/* Footer link de card */
.card-foot { margin-top: .3rem; padding-top: .85rem; border-top: 1px solid var(--border); }
.card-foot a { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 550; color: var(--text-2); text-decoration: none; transition: color var(--dur); }
.card-foot a:hover { color: var(--text); }
.card-foot a svg { width: 15px; height: 15px; }

/* Count badge */
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 .45rem; border-radius: 99px; background: var(--surface-3); color: var(--text-2); font-size: .8rem; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Feed cards del panel (En proceso · Consultas recientes) — misma altura y scroll interno */
.feed-card .card-body { display: flex; flex-direction: column; height: 100%; }
.feed-head { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; min-height: 28px; }
.feed-head .card-title { margin: 0; }
.feed-scroll { height: var(--feed-h, 482px); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
.feed-scroll .empty { margin: auto 0; }
.feed-scroll::-webkit-scrollbar { width: 6px; }
.feed-scroll::-webkit-scrollbar-track { background: transparent; }
.feed-scroll::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }
.feed-scroll:hover::-webkit-scrollbar-thumb { background: var(--muted); }
.feed-card .card-foot { margin-top: 0; }
.tag-api { flex-shrink: 0; font-size: .6rem; font-weight: 700; letter-spacing: .03em; padding: .1rem .34rem; border-radius: 5px; background: var(--surface-3); color: var(--text-2); }
/* En vivo: entrada suave de filas nuevas al actualizar */
@keyframes feedIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.feed-scroll .feed-row { animation: feedIn .22s var(--ease); }
@media (max-width: 860px) { .feed-scroll { height: auto; } .feed-scroll .feed-row { animation: none; } }
@media (prefers-reduced-motion: reduce) { .feed-scroll .feed-row { animation: none; } }

/* Buscador */
.search { position: relative; max-width: 280px; width: 100%; }
.search svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search .input { padding-left: 2.2rem; border-radius: var(--r-pill); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-family: inherit; font-weight: 550; font-size: .89rem; line-height: 1; padding: .64rem 1.15rem; border-radius: var(--btn-r); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: filter var(--dur), background var(--dur), border-color var(--dur), transform .07s var(--ease), box-shadow var(--dur); }
.btn svg { width: 16px; height: 16px; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
/* Focus-visible en TODOS los interactivos (navegación por teclado) */
.qa-row:focus-visible, .card-foot a:focus-visible, .pw-toggle:focus-visible,
.icon-btn:focus-visible, .saldo-chip:focus-visible, .dropzone:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.nav a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn-primary { background: var(--accent-fill); color: var(--accent-contrast); box-shadow: var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.12); }
.btn-primary:hover { filter: brightness(1.14); color: var(--accent-contrast); box-shadow: var(--sh-1); }
.btn-outline { background: var(--surface); border-color: var(--border-2); color: var(--text); }
.btn-outline:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 30%, var(--border-2)); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.07); color: #fff; }
/* En dark, --danger es un rojo CLARO pensado como primer plano (texto/íconos); usarlo
   como fondo con texto blanco cae a ~2.8:1 (bajo AA). Fondo sólido oscuro para el botón
   destructivo (borrar empleado/clave, regenerar) manteniendo texto blanco legible. */
[data-theme="dark"] .btn-danger { background: #c0362c; color: #fff; }
.btn-sm { padding: .42rem .7rem; font-size: .82rem; }
.btn-sm svg { width: 14px; height: 14px; }
.btn[disabled], .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn.loading { color: transparent !important; position: relative; }
.btn.loading::after { content: ""; position: absolute; width: 15px; height: 15px; border: 2px solid var(--text-2); border-top-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; }
.btn-primary.loading::after, .btn-danger.loading::after { border-color: var(--accent-contrast); border-top-color: transparent; }

/* ---------- Tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl thead th { text-align: left; font-weight: 600; font-size: .73rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: .6rem .7rem; border-bottom: 1px solid var(--border); }
.tbl thead th.right { text-align: right; }  /* el rótulo se sienta sobre su columna de valores alineada a la derecha */
.tbl tbody td { padding: .78rem .7rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr { transition: background var(--dur); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .strong { font-weight: 600; }
.right { text-align: right; } .tnum-td { font-variant-numeric: tabular-nums; }

/* ---------- Chips / status ---------- */
.chip { display: inline-flex; align-items: center; gap: .38rem; font-size: .76rem; font-weight: 600; padding: .22rem .58rem; border-radius: var(--r-pill); border: 1px solid transparent; white-space: nowrap; }
.chip .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.gray { background: var(--surface-2); color: var(--text-2); border-color: var(--border-2); }
.chip.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bd); }
.chip.info { background: var(--info-bg); color: var(--info); border-color: var(--info-bd); }
.chip.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bd); }
.chip.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bd); }
.chip.pulse .d { animation: pulse 1.4s ease-in-out infinite; }

/* ---------- Forms ---------- */
.field { margin-bottom: 1.1rem; }
.field label, .lbl { display: block; font-size: .84rem; font-weight: 550; color: var(--text-2); margin-bottom: .4rem; }
.input, .textarea, select.input { width: 100%; font-family: inherit; font-size: .93rem; color: var(--text); background: var(--surface); border: 1px solid var(--ctrl-border); border-radius: var(--r-xs); padding: .64rem .75rem; transition: border-color var(--dur), box-shadow var(--dur); }
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--muted) 85%, transparent); }
.input:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.textarea { resize: vertical; min-height: 130px; line-height: 1.55; font-family: 'JetBrains Mono', monospace; font-size: .86rem; }
.help { font-size: .8rem; color: var(--muted); margin-top: .4rem; }

/* ---------- Dropzone (subida premium) ---------- */
.dropzone { display: flex; flex-direction: column; align-items: center; gap: .3rem; border: 1.5px dashed var(--border-2); border-radius: var(--r-sm); padding: 1.15rem 1rem; text-align: center; cursor: pointer; background: var(--surface-2); transition: border-color var(--dur), background var(--dur), transform var(--dur) var(--ease); margin: 0; }
.dropzone:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border-2)); background: var(--surface-3); }
.dropzone.drag { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.015); }
.dropzone.has-file { border-style: solid; border-color: var(--ok-bd); background: var(--ok-bg); }
.dropzone .dz-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); color: var(--text-2); box-shadow: var(--sh-xs); margin-bottom: .2rem; transition: color var(--dur); }
.dropzone .dz-ico svg { width: 19px; height: 19px; }
.dropzone.has-file .dz-ico { color: var(--ok); }
.dropzone .dz-t { font-weight: 550; font-size: .86rem; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone .dz-s { font-size: .77rem; color: var(--muted); }

.cost-card { display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .72rem .85rem; }
.cost-card .cc-l { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--text-2); }
.cost-card .cc-l svg { width: 16px; height: 16px; opacity: .6; }
.cost-card .cc-total { font-weight: 650; font-size: .82rem; font-variant-numeric: tabular-nums; background: var(--accent-soft); color: var(--accent-ink); padding: .22rem .6rem; border-radius: var(--r-pill); white-space: nowrap; }

/* Resumen del lote (Semanas cotizadas) */
.lote-sum { display: flex; flex-direction: column; }
.lote-sum .ls-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .15rem; font-size: .88rem; }
.lote-sum .ls-k { color: var(--text-2); display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }
.lote-sum .ls-k svg { width: 15px; height: 15px; opacity: .7; flex-shrink: 0; }
.lote-sum .ls-v { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lote-sum .ls-saldo { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .6rem .75rem; margin-bottom: .35rem; }
.lote-sum .ls-saldo .ls-v { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: -.01em; }
.lote-sum .ls-desc .ls-v { color: var(--warn); }
.lote-sum .ls-div { height: 1px; background: var(--border); margin: .2rem 0; }
.lote-sum .ls-total .ls-k { font-weight: 600; color: var(--text); }
.lote-sum .ls-total .ls-v { font-family: var(--font-display); font-size: 1.2rem; color: var(--accent-ink); letter-spacing: -.01em; }
.ls-alert { display: flex; align-items: center; gap: .5rem; padding: .58rem .7rem; background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: var(--r-sm); color: var(--warn); font-size: .82rem; font-weight: 550; }
.ls-alert svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- Code / API docs ---------- */
.code { background: #0e0f13; color: #e7e9ee; border: 1px solid #1e2027; border-radius: var(--r-sm); padding: 1.05rem 1.2rem; font-family: 'JetBrains Mono', monospace; font-size: .82rem; line-height: 1.75; overflow-x: auto; white-space: pre; }
/* .c (comentarios que documentan el esquema JSON de la respuesta API): #6b7280 daba ~3.96:1
   sobre el fondo casi-negro del bloque; #8b93a1 sube a ~5:1 (AA). */
.code .k { color: #9ecbff; } .code .s { color: #a7e0a0; } .code .c { color: #8b93a1; }
.token-box { display: flex; align-items: center; gap: .5rem; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-xs); padding: .5rem .65rem; font-family: 'JetBrains Mono', monospace; font-size: .82rem; }
.token-box code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.doc-lbl { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .4rem; }

/* ---------- Flash / alerts ---------- */
.flash { border-radius: var(--r-xs); padding: .75rem .95rem; font-size: .88rem; margin-bottom: 1rem; border: 1px solid transparent; }
.flash.error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bd); }
.flash.info { background: var(--info-bg); color: var(--info); border-color: var(--info-bd); }

/* ---------- Auth ---------- */
.auth-wrap { min-height: calc(100vh - 60px); display: grid; place-items: center; padding: 1.25rem; }
.auth-card { width: 100%; max-width: 390px; animation: fadeUp .5s var(--ease) both; }
.auth-card .brand-lg { display: flex; align-items: center; gap: .6rem; justify-content: center; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: .3rem; }
.auth-card .brand-lg .dot { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); }

/* ---------- Login split-screen ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; }
/* El extremo oscuro usa --split-end (calculado en servidor): con acento CLARO el texto es
   oscuro y un extremo muy oscuro caería bajo AA; --split-end lo acerca al acento lo mínimo
   para que el texto clarea AA en TODO el panel. Con acento oscuro queda vívido. */
.split-brand { position: relative; overflow: hidden; padding: 3rem 3.2rem; display: flex; flex-direction: column; justify-content: space-between; color: var(--accent-contrast); background: linear-gradient(150deg, var(--accent-fill), var(--split-end)); }
.split-brand .sb-pat { position: absolute; inset: 0; opacity: .55; background-image: radial-gradient(color-mix(in srgb, var(--accent-contrast) 16%, transparent) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(120% 80% at 15% 0%, #000 40%, transparent 100%); mask-image: radial-gradient(120% 80% at 15% 0%, #000 40%, transparent 100%); }
.sb-top, .sb-mid, .sb-feats { position: relative; }
.sb-top { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; letter-spacing: -.02em; }
.sb-top .dot { width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--accent-contrast) 22%, transparent); }
.sb-mid h2 { color: var(--accent-contrast); font-family: var(--font-display); font-size: 2.15rem; line-height: 1.12; letter-spacing: -.03em; max-width: 15ch; }
.sb-mid p { color: color-mix(in srgb, var(--accent-contrast) 78%, transparent); margin-top: .85rem; max-width: 42ch; font-size: .96rem; line-height: 1.55; }
.sb-feats { display: flex; flex-direction: column; gap: .78rem; }
.sb-feat { display: flex; align-items: center; gap: .7rem; font-size: .93rem; color: color-mix(in srgb, var(--accent-contrast) 92%, transparent); }
.sb-feat .fi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent-contrast) 15%, transparent); flex-shrink: 0; }
.sb-feat .fi svg { width: 17px; height: 17px; }
.split-form { display: grid; place-items: center; padding: 2rem; position: relative; }
.split-form .fbox { width: 100%; max-width: 366px; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split-brand { display: none; }
  .split-form { padding: max(2rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); }
}
/* Panel de marca del login en dark: grafito (no invertir el acento a losa blanca) */
[data-theme="dark"] .split-brand { background: linear-gradient(150deg, var(--surface-2), var(--bg)); color: var(--text); }
[data-theme="dark"] .split-brand .sb-mid h2 { color: var(--text); }
[data-theme="dark"] .split-brand .sb-mid p { color: var(--text-2); }
[data-theme="dark"] .split-brand .sb-feat { color: var(--text-2); }
[data-theme="dark"] .split-brand .sb-feat .fi { background: color-mix(in srgb, var(--text) 12%, transparent); }
[data-theme="dark"] .split-brand .sb-top .dot { background: color-mix(in srgb, var(--text) 22%, transparent); }
[data-theme="dark"] .split-brand .sb-pat { background-image: radial-gradient(color-mix(in srgb, var(--text) 12%, transparent) 1px, transparent 1px); }

/* Input con icono + toggle de contraseña */
.input-ic { position: relative; }
.input-ic > svg, .input-ic > i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.input-ic .input { padding-left: 2.3rem; }
.pw-toggle { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; padding: .62rem; border-radius: 8px; display: grid; place-items: center; }
.pw-toggle:hover { color: var(--text); background: var(--surface-2); }
.pw-toggle svg { width: 17px; height: 17px; }

/* ---------- Empty state ---------- */
.empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }
.empty svg { width: 30px; height: 30px; opacity: .5; margin-bottom: .5rem; }
.empty .t { font-size: .92rem; color: var(--text-2); font-weight: 550; }
.empty .s { font-size: .84rem; }

/* ---------- Empleados: directorio de equipo ---------- */
/* Barra de herramientas de la tabla (título + filtros por segmento) */
.tbl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .55rem .35rem .75rem; }
.seg-filter { display: inline-flex; gap: .25rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: .22rem; }
.seg-chip { display: inline-flex; align-items: center; gap: .35rem; font-family: inherit; font-size: .82rem; font-weight: 550; color: var(--text-2); background: none; border: none; cursor: pointer; padding: .34rem .7rem; border-radius: var(--r-pill); white-space: nowrap; transition: background var(--dur), color var(--dur), box-shadow var(--dur); }
.seg-chip svg { width: 13px; height: 13px; opacity: .75; }
.seg-chip:hover { color: var(--text); }
.seg-chip.active { background: var(--surface); color: var(--text); box-shadow: var(--sh-xs); font-weight: 600; }
.seg-chip.warn { color: var(--warn); }
.seg-chip.warn.active { color: var(--warn); }
.seg-chip .sc-n { font-variant-numeric: tabular-nums; font-size: .74rem; font-weight: 650; color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); border-radius: 99px; padding: 0 .34rem; min-width: 18px; text-align: center; }
.seg-chip.active .sc-n { color: var(--text-2); background: var(--surface-3); }
.seg-chip.warn .sc-n { color: var(--warn); background: var(--warn-bg); }
.seg-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* Fila de empleado: identidad, uso, saldo destacado */
.tbl-emp tbody td { padding-top: .7rem; padding-bottom: .7rem; }
/* Acento sutil al pasar el cursor (guía la lectura de la fila).
   Va en el PRIMER td, no en el <tr>: un ::before absoluto colgado de un <tr>
   genera una celda-fantasma en Chrome y corre todas las columnas una posición. */
.tbl-emp tbody td:first-child { position: relative; }
.tbl-emp tbody td:first-child::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: 0; transition: opacity var(--dur); }
.tbl-emp tbody tr:hover td:first-child::before { opacity: .55; }

.emp-id { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.emp-id .avatar { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent); }
.emp-id .avatar.off { background: var(--surface-3); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border-2); }
.emp-meta { min-width: 0; }
.emp-user { font-size: .9rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-meta .nombre { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Columna de actividad (uso + última) */
.emp-usage { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.emp-usage .chip { min-width: 0; }
.uu-total { display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; font-weight: 600; color: var(--text); }
.uu-total svg { width: 14px; height: 14px; opacity: .5; }
.uu-today { font-size: .74rem; font-weight: 650; color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-bd); border-radius: var(--r-pill); padding: .05rem .4rem; }
.uu-last { font-size: .74rem; color: var(--muted); margin-top: .2rem; }

/* Saldo como dato destacado */
.saldo-pill { display: inline-flex; align-items: baseline; gap: .28rem; }
.saldo-pill .sp-n { font-family: var(--font-display); font-size: 1.08rem; font-weight: 680; letter-spacing: -.02em; color: var(--text); }
.saldo-pill .sp-u { font-size: .72rem; color: var(--muted); font-weight: 500; }
.saldo-pill.low .sp-n { color: var(--warn); }
.saldo-pill.low .sp-u { color: var(--warn); }
.saldo-pill.low::after { content: "Sin saldo"; font-size: .66rem; font-weight: 650; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: 99px; padding: .05rem .38rem; margin-left: .1rem; align-self: center; }

@media (max-width: 640px) {
  .tbl-toolbar { padding-bottom: .6rem; }
  .seg-filter { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg-filter::-webkit-scrollbar { display: none; }
  .uu-last { white-space: nowrap; }
}

/* ---------- Herramientas de tabla (orden + exportar) ---------- */
.tbl-tools { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; }
.tbl-tools .btn-soft { display: inline-flex; align-items: center; gap: .4rem; height: 34px; padding: 0 .8rem; font-size: .82rem; font-weight: 550; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--btn-r); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tbl-tools .btn-soft:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-2); }
.tbl-tools .btn-soft svg { width: 15px; height: 15px; }
.tbl-tools .btn-soft .srt-lbl { color: var(--text); font-weight: 600; }
.menu button.on { color: var(--accent-ink); font-weight: 600; }
.menu button.on svg { color: var(--accent-ink); }

/* ---------- Columna de selección ---------- */
.chk-col { width: 40px; text-align: center; padding-left: .4rem !important; padding-right: 0 !important; }
.chk { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; cursor: pointer; }
/* La casilla se ve 18px pero el area clickable real es 40x40 (AA 2.5.8 / tactil) */
.chk input { position: absolute; opacity: 0; width: 40px; height: 40px; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; cursor: pointer; }
.chk .box { width: 18px; height: 18px; border: 1.5px solid var(--ctrl-border); border-radius: 5px; background: var(--surface); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); display: grid; place-items: center; }
.chk .box svg { width: 12px; height: 12px; color: var(--accent-contrast); opacity: 0; transform: scale(.6); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.chk input:checked + .box { background: var(--accent); border-color: var(--accent); }
.chk input:checked + .box svg { opacity: 1; transform: scale(1); }
.chk input:focus-visible + .box { box-shadow: 0 0 0 3px var(--ring); }
.chk input:indeterminate + .box { background: var(--accent); border-color: var(--accent); }
.chk input:indeterminate + .box::after { content: ""; width: 9px; height: 2px; border-radius: 2px; background: var(--accent-contrast); position: absolute; }
.chk input:indeterminate + .box svg { opacity: 0; }
.tbl-emp tbody tr.sel { background: var(--accent-soft); }

/* Abrir drawer al pulsar el bloque de identidad */
.emp-id.clickable { cursor: pointer; border-radius: var(--r-sm); margin: -.3rem -.45rem; padding: .3rem .45rem; transition: background var(--dur) var(--ease); }
.emp-id.clickable:hover { background: var(--surface-2); }
.emp-id.clickable:hover .emp-user { color: var(--accent-ink); }
.emp-id.clickable:focus-visible { outline: none; background: var(--surface-2); box-shadow: 0 0 0 3px var(--ring); }

/* ---------- Barra de acciones en lote ---------- */
.bulkbar { display: none; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 .35rem .55rem; padding: .5rem .6rem .5rem .8rem; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--r-sm); animation: bulkIn .25s var(--ease) both; }
.bulkbar.show { display: flex; }
@keyframes bulkIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.bulkbar .bb-n { font-weight: 640; color: var(--text); font-size: .88rem; }
.bulkbar .bb-n b { color: var(--accent-ink); }
.bulkbar .bb-sep { width: 1px; align-self: stretch; background: var(--border-2); margin: .1rem .1rem; }
.bulkbar .bb-actions { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-left: auto; }
.bulkbar .btn-sm { height: 32px; }

/* ---------- Drawer de control del empleado ---------- */
.drawer-ov { position: fixed; inset: 0; background: rgba(10,12,16,.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 210; opacity: 0; pointer-events: none; transition: opacity .28s var(--ease); }
.drawer-ov.show { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: 430px; max-width: 92vw; background: var(--surface); border-left: 1px solid var(--border-2); box-shadow: var(--sh-3); z-index: 211; transform: translateX(100%); transition: transform .32s var(--ease); display: flex; flex-direction: column; }
.drawer.show { transform: translateX(0); }
.drawer .dw-close { position: absolute; top: .9rem; right: .9rem; z-index: 2; }
.dw-scroll { overflow-y: auto; padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 1.25rem; }
/* Cabecera */
.dw-head { display: flex; align-items: center; gap: .85rem; padding-right: 2.2rem; }
.dw-avatar { width: 52px; height: 52px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-contrast); display: grid; place-items: center; font-family: var(--font-display); font-weight: 680; font-size: 1.35rem; flex-shrink: 0; box-shadow: var(--sh-1); }
.dw-avatar.off { background: var(--surface-3); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border-2); }
.dw-id { min-width: 0; }
.dw-id .dw-user { font-family: var(--font-display); font-weight: 640; font-size: 1.12rem; letter-spacing: -.01em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-id .dw-name { font-size: .84rem; color: var(--muted); }
.dw-id .dw-meta { display: flex; align-items: center; gap: .45rem; margin-top: .3rem; }
.dw-id .dw-meta .since { font-size: .74rem; color: var(--text-2); }
/* Bloque saldo */
.dw-saldo { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .9rem 1rem 1rem; }
.dw-saldo .dw-slabel { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dw-saldo .dw-sval { display: flex; align-items: baseline; gap: .35rem; margin: .1rem 0 .75rem; }
.dw-saldo .dw-sval b { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); line-height: 1; }
.dw-saldo .dw-sval span { font-size: .8rem; color: var(--muted); }
.dw-saldo.low .dw-sval b { color: var(--warn); }
.dw-sbtns { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.dw-sbtns .btn { width: 100%; }
.dw-sbtns .retirar { grid-column: 1 / -1; }
/* Mini stats */
.dw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.dw-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .6rem .35rem; text-align: center; }
.dw-stat .n { font-family: var(--font-display); font-size: 1.2rem; font-weight: 680; color: var(--text); letter-spacing: -.02em; }
.dw-stat.curso .n { color: var(--info); }
.dw-stat.err .n { color: var(--danger); }
.dw-stat .l { font-size: .64rem; color: var(--muted); margin-top: .1rem; text-transform: uppercase; letter-spacing: .02em; }
/* Caption: tasa de éxito + última actividad */
.dw-tasa { display: flex; flex-wrap: wrap; gap: .35rem .9rem; justify-content: center; font-size: .8rem; color: var(--muted); margin-top: -.5rem; }
.dw-tasa span { display: inline-flex; align-items: center; gap: .35rem; }
.dw-tasa svg { width: 14px; height: 14px; opacity: .7; }
.dw-tasa b { color: var(--text); font-weight: 650; }
/* Estado de error del drawer (con reintentar) */
.dw-errbox { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem; padding: 3rem 1.5rem; }
.dw-errbox > svg { width: 34px; height: 34px; color: var(--muted); }
.dw-errbox .t { font-weight: 600; color: var(--text); }
.dw-errbox .s { font-size: .85rem; color: var(--muted); margin-bottom: .6rem; }
/* Secciones */
.dw-sec > .dw-sh { display: flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 640; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .55rem; }
.dw-sec > .dw-sh svg { width: 14px; height: 14px; }
/* Credenciales */
.dw-cred { display: flex; flex-direction: column; gap: .5rem; }
.dw-field { display: flex; align-items: center; gap: .5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .1rem .1rem .1rem .7rem; }
.dw-field .k { font-size: .7rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; }
.dw-field .v { flex: 1; min-width: 0; font-family: var(--font-body); font-size: .86rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-field .v.mono { font-family: 'JetBrains Mono', monospace; font-size: .82rem; }
.dw-cpy { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; background: transparent; color: var(--muted); border-radius: var(--r-xs); cursor: pointer; flex-shrink: 0; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.dw-cpy:hover { background: var(--surface-3); color: var(--accent-ink); }
.dw-cpy svg { width: 15px; height: 15px; }
.dw-cred .btn-block { width: 100%; justify-content: center; }
.dw-temp { display: none; }
.dw-temp.show { display: block; }
.dw-temp .warnline { font-size: .74rem; color: var(--warn); display: flex; align-items: center; gap: .35rem; margin-top: .35rem; }
.dw-temp .warnline svg { width: 13px; height: 13px; }
/* Listas (consultas / movimientos) */
.dw-list { display: flex; flex-direction: column; }
.dw-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .1rem; border-bottom: 1px solid var(--border); font-size: .84rem; }
.dw-row:last-child { border-bottom: none; }
.dw-row .di { flex: 1; min-width: 0; }
.dw-row .di .t { color: var(--text); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-row .di .s { font-size: .74rem; color: var(--muted); }
.dw-row .rt { font-size: .74rem; color: var(--text-2); white-space: nowrap; }
.dw-row .mv { font-family: var(--font-display); font-weight: 640; font-size: .9rem; white-space: nowrap; }
.dw-row .mv.pos { color: var(--ok); } .dw-row .mv.neg { color: var(--danger); }
.dw-empty { font-size: .82rem; color: var(--muted); padding: .5rem .1rem; }
.dw-danger { border-top: 1px solid var(--border); padding-top: 1rem; }
.dw-skel { display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem; }
@media (max-width: 640px) {
  .drawer { width: 100vw; max-width: 100vw; }
  .tbl-tools .btn-soft .srt-lbl { display: none; }
}

/* ---------- Skeleton ---------- */
.skel { display: inline-block; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }

/* ---------- Toasts ---------- */
#toasts { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 100; display: flex; flex-direction: column; gap: .55rem; max-width: 340px; }
.toast { display: flex; align-items: flex-start; gap: .6rem; background: var(--surface); border: 1px solid var(--border-2); border-left-width: 3px; border-radius: var(--r-sm); box-shadow: var(--sh-3); padding: .75rem .9rem; font-size: .87rem; color: var(--text); animation: toastIn .32s var(--ease) both; }
.toast.out { animation: toastOut .25s var(--ease) both; }
.toast svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.toast.ok { border-left-color: var(--ok); } .toast.ok svg { color: var(--ok); }
.toast.error { border-left-color: var(--danger); } .toast.error svg { color: var(--danger); }
.toast.info { border-left-color: var(--info); } .toast.info svg { color: var(--info); }
.toast.warning { border-left-color: var(--warn); } .toast.warning svg { color: var(--warn); }

/* ---------- Modal (custom, ligero) ---------- */
.mdl-back { position: fixed; inset: 0; background: rgba(10,12,16,.42); backdrop-filter: blur(3px); z-index: 90; display: grid; place-items: center; padding: 1rem; animation: fade .2s ease both; }
.mdl { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r); box-shadow: var(--sh-3); padding: 1.4rem 1.5rem; animation: pop .24s var(--ease) both; }
.mdl h3, .mdl-title { font-size: var(--fs-h2); font-weight: 640; margin-bottom: 1rem; letter-spacing: -.01em; }
.mdl-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.2rem; }
/* Paso de éxito del alta de empleado: héroe + credenciales listas para compartir */
.ok-hero { text-align: center; margin-bottom: 1.1rem; }
.ok-badge { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ok, #16a34a) 16%, var(--surface)); color: var(--ok, #16a34a); }
.ok-badge i { width: 24px; height: 24px; }
.cred-box { display: flex; flex-direction: column; gap: .1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .3rem .2rem; }
.cred-row { display: flex; align-items: center; gap: .8rem; padding: .5rem .7rem; }
.cred-row + .cred-row { border-top: 1px solid var(--border); }
.cred-k { flex: 0 0 84px; color: var(--text-2); font-size: .85rem; }
.cred-v { flex: 1; font-family: var(--font-mono, monospace); font-size: .9rem; word-break: break-all; color: var(--text); }
/* Modales Bootstrap (crear empleado / clave API) igualan el look del modal .mdl */
.modal-content { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r); box-shadow: var(--sh-3); color: var(--text); }
.modal-backdrop.show { background: rgba(10,12,16,.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 1; }
.modal-dialog { max-width: 440px; }
.modal-body { padding: 1.4rem 1.5rem; }

/* ---------- Menú de acciones (dropdown por fila) ---------- */
.menu-wrap { position: relative; display: inline-flex; }
/* position:fixed + coords por JS: escapa el overflow de .tbl-wrap y no se recorta */
.menu { position: fixed; min-width: 208px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-sm); box-shadow: var(--sh-3); padding: .35rem; z-index: 200; display: none; }
.menu.open { display: block; animation: pop .16s var(--ease); }
.menu button { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; background: none; border: none; padding: .52rem .55rem; border-radius: var(--r-xs); font-family: inherit; font-size: .88rem; font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; }
.menu button:hover { background: var(--surface-2); }
.menu button svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.menu button.danger { color: var(--danger); }
.menu button.danger:hover { background: var(--danger-bg); }
.menu button.danger svg { color: var(--danger); }
.menu-sep { height: 1px; background: var(--border); margin: .3rem .25rem; }

/* ---------- Banner (mantenimiento / aviso) ---------- */
.banner { display: flex; align-items: center; gap: .6rem; padding: .68rem .9rem; border-radius: var(--r-sm); font-size: .88rem; font-weight: 500; margin-bottom: 1rem; border: 1px solid transparent; }
.banner svg { width: 17px; height: 17px; flex-shrink: 0; }
.banner span { flex: 1; }
.banner a { font-weight: 650; white-space: nowrap; text-decoration: underline; }
.banner.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bd); }
.banner.warn a { color: var(--warn); }
.banner.info { background: var(--info-bg); color: var(--info); border-color: var(--info-bd); }
.banner.info a { color: var(--info); }

/* ---------- Switch (toggle) ---------- */
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .sl { position: absolute; inset: 0; background: var(--surface-2); border: 1px solid var(--ctrl-border); border-radius: 99px; cursor: pointer; transition: background var(--dur); }
.switch .sl::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: var(--sh-1); transition: transform var(--dur) var(--ease); }
.switch input:checked + .sl { background: var(--accent); }
.switch input:checked + .sl::before { transform: translateX(18px); }
.switch input:focus-visible + .sl { box-shadow: 0 0 0 3px var(--ring); }

/* ---------- Selector de color (swatches) ---------- */
.swatches { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.swatch { width: 30px; height: 30px; border-radius: 9px; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); transition: transform var(--dur) var(--ease); }
.swatch:hover { transform: scale(1.12); }
.swatch.sel { border-color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.color-input { width: 46px; height: 30px; padding: 0; border: 1px solid var(--border-2); border-radius: 9px; background: none; cursor: pointer; }
.color-input::-webkit-color-swatch-wrapper { padding: 3px; }
.color-input::-webkit-color-swatch { border: none; border-radius: 6px; }

/* ---------- Preview de personalización en vivo ---------- */
.brand-preview { --pv-r: 14px; --pv-rp: 999px; --pv-fd: var(--font-display); --pv-fb: var(--font-body); border: 1px solid var(--border); border-radius: var(--pv-r); overflow: hidden; background: var(--surface-2); box-shadow: var(--sh-1); }
.bp-bar { display: flex; align-items: center; gap: .6rem; padding: .72rem .95rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.bp-logo { width: 27px; height: 27px; border-radius: calc(var(--pv-r) * .5); display: grid; place-items: center; color: var(--pv-contrast, #fff); font-weight: 700; font-family: var(--pv-fd); font-size: .92rem; background: var(--pv); flex-shrink: 0; }
.bp-logo img { width: 27px; height: 27px; border-radius: calc(var(--pv-r) * .45); object-fit: cover; }
.bp-name { font-family: var(--pv-fd); font-weight: 700; letter-spacing: -.02em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--pv); }
.bp-body { padding: 1.15rem .95rem; display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
.bp-btn { color: var(--pv-contrast, #fff); background: var(--pv); padding: .5rem .95rem; border-radius: var(--pv-rp); font-weight: 550; font-size: .85rem; font-family: var(--pv-fb); }
.bp-chip { font-size: .74rem; font-weight: 650; padding: .22rem .6rem; border-radius: var(--pv-rp); background: color-mix(in srgb, var(--pv) 14%, var(--surface)); color: var(--pv); border: 1px solid color-mix(in srgb, var(--pv) 30%, transparent); font-family: var(--pv-fb); }
.bp-link { font-size: .82rem; font-weight: 550; color: var(--pv); font-family: var(--pv-fb); }
.logo-prev { width: 46px; height: 46px; border-radius: 10px; object-fit: contain; border: 1px solid var(--border); background: var(--surface); padding: 3px; }

/* Segmented control (opciones de estilo) */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: .22rem; gap: .12rem; flex-wrap: wrap; }
.seg button { border: none; background: none; font-family: inherit; font-size: .84rem; font-weight: 500; color: var(--text-2); padding: .42rem .85rem; border-radius: var(--r-pill); cursor: pointer; transition: background var(--dur), color var(--dur); white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--sh-xs); font-weight: 550; }

.icon-btn-on { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); }

/* ---------- Motion ---------- */
.reveal { animation: fadeUp .5s var(--ease) both; }
.reveal-1 { animation-delay: .04s; } .reveal-2 { animation-delay: .09s; } .reveal-3 { animation-delay: .14s; } .reveal-4 { animation-delay: .19s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.5); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }

/* ---------- Command palette (⌘K) ---------- */
kbd { font-family: inherit; font-size: .7rem; line-height: 1; background: var(--surface-2); border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: 5px; padding: .12rem .35rem; color: var(--text-2); }
.cmdk-back { position: fixed; inset: 0; background: rgba(10,12,16,.5); backdrop-filter: blur(4px); z-index: 200; display: none; align-items: flex-start; justify-content: center; padding: 11vh 1rem 1rem; }
.cmdk-back.open { display: flex; animation: fade .15s ease; }
.cmdk { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r); box-shadow: var(--sh-3); overflow: hidden; animation: pop .2s var(--ease); }
.cmdk-head { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.cmdk-head > svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.cmdk-input { flex: 1; border: none; background: none; outline: none; font-family: inherit; font-size: 1rem; color: var(--text); }
.cmdk-input::placeholder { color: var(--muted); }
.cmdk-list { max-height: 46vh; overflow-y: auto; padding: .4rem; }
.cmdk-group { font-size: .7rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: .55rem .6rem .25rem; }
.cmdk-item { display: flex; align-items: center; gap: .7rem; padding: .6rem .65rem; border-radius: var(--r-xs); cursor: pointer; font-size: .92rem; color: var(--text); }
.cmdk-item svg { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }
.cmdk-item.sel { background: var(--accent-soft); }
.cmdk-item.sel svg { color: var(--accent-ink); }
.cmdk-empty { padding: 1.6rem; text-align: center; color: var(--muted); font-size: .9rem; }
.cmdk-foot { display: flex; gap: 1.1rem; padding: .55rem 1rem; border-top: 1px solid var(--border); font-size: .75rem; color: var(--muted); }
.cmdk-foot kbd { font-size: .66rem; }
/* Transición suave al cambiar de tema */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .24s ease, border-color .24s ease, color .24s ease, fill .24s ease, box-shadow .24s ease !important;
}

/* ---------- Mobile-native ---------- */
/* Tablas: scroll horizontal INTERNO (nunca desborda la página) */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tbl-wrap .tbl { min-width: 100%; }
.tbl-wrap .tbl th, .tbl-wrap .tbl td { white-space: nowrap; }
.tbl-wrap::-webkit-scrollbar { height: 7px; }
.nav, .code { -webkit-overflow-scrolling: touch; }

/* Feedback :active inmediato (sensación nativa) */
.btn:active { transform: translateY(1px) scale(.98); }
.card.hoverable:active { transform: scale(.985); }
.qa-row:active, .tbl tbody tr:active { background: var(--surface-2); }
.nav a:active { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.icon-btn:active { transform: scale(.93); }
.saldo-chip:active, .card-foot a:active { opacity: .7; }

/* En táctil: no dejar 'pegados' los hover de elevación / resaltado */
@media (hover: none) {
  .hoverable:hover, .card:hover { transform: none; box-shadow: var(--card-sh); }
  .qa-row:hover .qa-arrow { transform: none; }
  .qa-row:hover { padding-left: .15rem; }
  .icon-btn:hover { transform: none; }
  .tbl tbody tr:hover { background: transparent; }
  .dropzone:hover { border-color: var(--border-2); background: var(--surface-2); }
}

/* ---------- Responsive / móvil ---------- */
@media (max-width: 760px) {
  /* iOS no hace zoom al enfocar si el input es >= 16px */
  .input, .textarea, select.input, .search .input, .token-box, .token-box code { font-size: 16px; }
  /* Safe-area (notch / home indicator) integrada en el padding shorthand */
  #toasts { right: max(1.1rem, env(safe-area-inset-right)); bottom: max(1.1rem, env(safe-area-inset-bottom)); left: 1.1rem; max-width: none; }
  .topbar-inner { height: auto; flex-wrap: wrap; row-gap: .55rem; gap: .5rem;
    padding: calc(.55rem + env(safe-area-inset-top)) max(.85rem, env(safe-area-inset-right)) .55rem max(.85rem, env(safe-area-inset-left)); }
  .topbar .nav { order: 5; width: 100%; margin-left: 0; }
  .topbar .who { display: none; }
  .wrap { padding: 1.3rem max(.9rem, env(safe-area-inset-right)) calc(4rem + env(safe-area-inset-bottom)) max(.9rem, env(safe-area-inset-left)); }
  .page-head { gap: .8rem; }
  .btn-sm { min-height: 38px; }        /* touch target ≥ ~44px con el padding */
  .icon-btn { width: 38px; height: 38px; }
  .search { max-width: 100%; }
  .stat .num { font-size: 1.75rem; }
  .h-page { font-size: 1.32rem; }
}
@media (max-width: 560px) {
  .feed-row .fr-time { display: none; }  /* prioriza nombre/CURP sobre el tiempo relativo */
  .g-3, .g-4 { grid-template-columns: 1fr; }  /* KPIs a 1 columna en teléfono */
}
@media (max-width: 520px) {
  .brand { font-size: .96rem; }
  .saldo-chip { padding: .28rem .6rem; }
  .tbl thead th, .tbl tbody td { padding: .6rem .5rem; }
}

/* ==========================================================================
   Personalización avanzada por empresa — fondo, botones, densidad, sombra.
   El valor por defecto NO añade clase (look grafito actual) = cero regresión.
   ========================================================================== */
/* Color de fondo: re-mapea la capa --bg-grad que el <body> ya pinta.
   No toca superficies ni texto → contraste AA intacto. Hereda dark automáticamente. */
body.bg-liso { --bg-grad: none; }
body.bg-malla {
  --bg-grad:
    linear-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px) 0 0/26px 26px,
    radial-gradient(1000px 520px at 100% -10%, var(--accent-soft) 0%, transparent 60%);
}
body.bg-aurora {
  --bg-grad:
    radial-gradient(760px 460px at 12% -8%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 55%),
    radial-gradient(900px 520px at 108% 0%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%);
}
body.bg-bruma { --bg-grad: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--bg)) 0%, var(--bg) 42%); }

/* Forma de botones (alias sobre radios existentes; no afecta chips/pills globales) */
body.btn-suave { --btn-r: var(--r-sm); }
body.btn-recto { --btn-r: var(--r-xs); }

/* Densidad: reescala el ritmo con tokens de espaciado existentes.
   Cubre también las KPI (.stat, con su propio padding) y los feeds del panel
   para que la compactación sea coherente en toda la página, no mixta. */
body.den-compacta { --gap-section: var(--s3); --feed-h: 430px; }
body.den-compacta .card-body:not(.flush) { padding: var(--s4); }
body.den-compacta .page-head { margin-bottom: var(--s4); }
body.den-compacta .stat { padding: var(--s4); }
body.den-compacta .stat .ico { top: var(--s4); right: var(--s4); }

/* Profundidad de tarjetas (plana cae a solo borde; correcto en oscuro).
   El hover de las .hoverable escala respecto a la sombra base elegida para no "saltar". */
body.sh-plana { --card-sh: none; }
body.sh-plana .hoverable:hover { box-shadow: var(--sh-1); }
body.sh-elevada { --card-sh: var(--sh-2); }
body.sh-elevada .hoverable:hover { box-shadow: var(--sh-3); }

/* ==========================================================================
   Personalización avanzada (v2) — para que dos portales se vean radicalmente
   distintos. Todo por clase de <body>; el default (sin clase) = look actual.
   ========================================================================== */
/* Base neutral (temperatura de superficies) — remapea la familia de neutrales manteniendo el
   texto de alto contraste (AA). El default 'slate' NO añade clase = look actual. */
body.base-zinc  { --bg:#f5f5f6; --bg-grad:radial-gradient(1200px 600px at 100% -10%,#ececed 0%,transparent 60%); --surface:#fff; --surface-2:#f4f4f5; --surface-3:#ededee; --border:#e7e7e9; --border-2:#d6d6d9; --glass:rgba(255,255,255,.72); }
body.base-stone { --bg:#f6f4f0; --bg-grad:radial-gradient(1200px 600px at 100% -10%,#efece5 0%,transparent 60%); --surface:#fffdfa; --surface-2:#f2efe9; --surface-3:#ebe7df; --border:#e8e2d7; --border-2:#dbd3c5; --glass:rgba(255,253,250,.74); }
body.base-frost { --bg:#f1f5f9; --bg-grad:radial-gradient(1200px 600px at 100% -10%,#e6edf5 0%,transparent 60%); --surface:#fdfeff; --surface-2:#eef3f8; --surface-3:#e6edf4; --border:#e0e8f1; --border-2:#cdd9e7; --glass:rgba(253,254,255,.72); }
body.base-carbon{ --bg:#fff; --bg-grad:none; --surface:#fff; --surface-2:#f7f7f7; --surface-3:#f0f0f0; --border:#e4e4e4; --border-2:#d0d0d0; --text:#000; --glass:rgba(255,255,255,.82); }
[data-theme="dark"] body.base-zinc  { --bg:#0b0b0c; --bg-grad:radial-gradient(1200px 600px at 100% -10%,#18181a 0%,transparent 60%); --surface:#18181a; --surface-2:#1f1f22; --surface-3:#27272b; --border:#2b2b30; --border-2:#3a3a40; --glass:rgba(20,20,22,.72); }
[data-theme="dark"] body.base-stone { --bg:#0d0c0a; --bg-grad:radial-gradient(1200px 600px at 100% -10%,#1a1815 0%,transparent 60%); --surface:#1a1815; --surface-2:#211e1a; --surface-3:#282420; --border:#332e27; --border-2:#443d33; --glass:rgba(26,24,21,.72); }
[data-theme="dark"] body.base-frost { --bg:#070a11; --bg-grad:radial-gradient(1200px 600px at 100% -10%,#131824 0%,transparent 60%); --surface:#131824; --surface-2:#19202f; --surface-3:#20293b; --border:#27324a; --border-2:#35446a; --glass:rgba(19,24,36,.72); }
[data-theme="dark"] body.base-carbon{ --bg:#000; --bg-grad:none; --surface:#0d0d0f; --surface-2:#151517; --surface-3:#1c1c1f; --border:#242427; --border-2:#333338; --text:#fff; --glass:rgba(13,13,15,.82); }
/* Estas bases oscurecen surface-2/3; el --muted default (#676e7b) cae bajo AA sobre sus
   superficies más profundas en CLARO. Se oscurece a #5f6673 (~4.9:1). En OSCURO se restaura
   el muted claro (si no, esta regla —más específica que :root dark— lo pintaría casi negro). */
body.base-zinc, body.base-stone, body.base-frost { --muted:#5f6673; }
[data-theme="dark"] body.base-zinc, [data-theme="dark"] body.base-stone, [data-theme="dark"] body.base-frost { --muted:#99a1b1; }

/* Escala de texto: el font-size de <html> (base.html) escala los tokens rem; aquí el texto base. */
body.esc-compacta { font-size: 14px; }
body.esc-amplia { font-size: 16.5px; }

/* Acento en DEGRADADO: relleno de botones/marca/avatares pasa de sólido a degradado (acento→acento-2). */
body.acento-degradado .btn-primary,
body.acento-degradado .brand .dot,
body.acento-degradado .avatar:not(.off),
body.acento-degradado .qa-ico,
body.acento-degradado .dw-avatar:not(.off) { background: linear-gradient(135deg, var(--accent-fill) 0%, var(--grad-2) 100%); }
/* El relleno pasó a un degradado saturado de acento: el primer plano DEBE invertir a
   --accent-contrast, si no las iniciales del avatar (color:--text) y el ícono de acción
   rápida (color:--accent) quedan ilegibles sobre él. .btn-primary y .dw-avatar ya lo hacen.
   :not(.off) en .dw-avatar: un empleado INACTIVO debe conservar su fondo apagado (no el
   degradado vívido, que semánticamente = activo). */
body.acento-degradado .avatar:not(.off),
body.acento-degradado .qa-row .qa-ico { color: var(--accent-contrast); }

/* Fondos adicionales -------------------------------------------------------- */
/* Degradado de marca: malla de dos radiales con los dos colores de acento (look vibrante). */
body.bg-degradado {
  --bg-grad:
    radial-gradient(880px 560px at 6% -12%, color-mix(in srgb, var(--accent) 24%, transparent) 0%, transparent 55%),
    radial-gradient(820px 520px at 104% 6%, color-mix(in srgb, var(--accent-2) 22%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--bg)) 0%, var(--bg) 42%);
}
/* Puntos marcados (más grandes, teñidos con el acento), difuminados hacia abajo. */
body.bg-puntos { --bg-grad: none; }
body.bg-puntos::before {
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 26%, transparent) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
/* Rejilla técnica (líneas horizontales + verticales). */
body.bg-rejilla { --bg-grad: none; }
body.bg-rejilla::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 6.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 6.5%, transparent) 1px, transparent 1px);
  background-size: 30px 30px, 30px 30px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}

/* Topbar — 4 estilos distintos ---------------------------------------------- */
/* Sólida: la barra se pinta con el acento; textos e íconos invierten a --accent-contrast. */
body.tb-solida .topbar {
  background: var(--accent-fill); backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent; box-shadow: var(--sh-1);
}
/* Degradado: usa --grad-2 (2º color ya acercado al acento) para que su luminancia no se
   aleje del único --accent-contrast; evita texto ilegible sobre el extremo derecho de la
   barra, justo donde viven saldo, usuario e íconos. */
body.acento-degradado.tb-solida .topbar { background: linear-gradient(100deg, var(--accent-fill) 0%, var(--grad-2) 100%); }
body.tb-solida .topbar .brand,
body.tb-solida .topbar .nav a,
body.tb-solida .topbar .who,
body.tb-solida .topbar .icon-btn,
body.tb-solida .topbar .sc-lbl,
body.tb-solida .topbar .saldo-chip,
body.tb-solida .topbar .saldo-chip strong { color: var(--accent-contrast); }
/* Contenedor .nav y botones de icono: fondo translúcido de --accent-contrast, si no la .nav
   queda como pastilla clara con texto blanco (falla AA) y los iconos quedan del color de su
   fondo (--surface) → invisibles sobre la barra de acento. */
body.tb-solida .topbar .nav { background: color-mix(in srgb, var(--accent-contrast) 10%, transparent); border-color: color-mix(in srgb, var(--accent-contrast) 20%, transparent); }
body.tb-solida .topbar .icon-btn { background: color-mix(in srgb, var(--accent-contrast) 12%, transparent); border-color: color-mix(in srgb, var(--accent-contrast) 22%, transparent); }
/* Activo/hover: overlay LEVE hacia --accent-contrast (antes 26/20% aclaraban tanto el
   fondo del pill que, con --accent-contrast blanco, el ítem activo perdía contraste vs uno
   normal). La afordancia la da un anillo inset, sin subir la luminancia del relleno. */
body.tb-solida .topbar .nav a.active { background: color-mix(in srgb, var(--accent-contrast) 15%, transparent); color: var(--accent-contrast); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-contrast) 38%, transparent); }
body.tb-solida .topbar .nav a:hover,
body.tb-solida .topbar .icon-btn:hover { background: color-mix(in srgb, var(--accent-contrast) 11%, transparent); }
body.tb-solida .topbar .saldo-chip { background: color-mix(in srgb, var(--accent-contrast) 15%, transparent); border-color: transparent; }
body.tb-solida .topbar .brand .dot { background: color-mix(in srgb, var(--accent-contrast) 85%, transparent); box-shadow: none; }
/* Borde: superficie sólida, sin blur, con línea inferior marcada. */
body.tb-borde .topbar {
  background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 2px solid var(--border-2);
}
/* Minimal: transparente, sin borde ni desenfoque (la barra "flota" sobre el fondo). */
body.tb-minimal .topbar {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
/* …pero al hacer scroll se solidifica (glass + blur) para no chocar con el contenido que
   pasa por debajo de la barra sticky. La clase .scrolled la pone app.js. */
body.tb-minimal .topbar.scrolled {
  background: var(--glass); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--border);
}

/* Tarjetas — estilos alternativos ------------------------------------------- */
/* Contorno: sin sombra, borde protagonista (look "wireframe" limpio). */
body.card-contorno .card, body.card-contorno.sh-elevada .card { box-shadow: none; border-color: var(--border-2); }
/* Glass: superficie translúcida con desenfoque (look premium/vidrio). */
body.card-glass .card {
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-color: color-mix(in srgb, var(--border) 60%, transparent);
}

/* Forma del logo ------------------------------------------------------------ */
.brand.logo-circulo .dot, .brand.logo-circulo img { border-radius: 999px; }
.brand.logo-cuadrado .dot, .brand.logo-cuadrado img { border-radius: 3px; }

/* Animaciones reducidas: corta transiciones/animaciones (respeta el gusto del cliente). */
body.anim-off *, body.anim-off *::before, body.anim-off *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
/* …pero NO los indicadores funcionales de progreso (spinner de botón, shimmer de skeleton),
   que deben seguir girando para comunicar "cargando". */
body.anim-off .btn.loading::after, body.anim-off .skel {
  animation-duration: .9s !important; animation-iteration-count: infinite !important;
}

/* Estilo de RELLENO del botón primario (independiente de la forma). Va DESPUÉS de
   acento-degradado para que contorno/suave ganen sobre el degradado si se combinan. */
/* Texto y anillo en --accent-ink (acento con guarda de luminancia, calculado en servidor):
   a diferencia del relleno sólido —que usa --accent-contrast— aquí el texto va sobre fondo
   claro, así que un acento claro (ámbar/lima/cian) debe oscurecerse para alcanzar AA. */
body.btnf-contorno .btn-primary { background: transparent; color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent-ink); }
body.btnf-contorno .btn-primary:hover { background: var(--accent-soft); color: var(--accent-ink); filter: none; box-shadow: inset 0 0 0 1.5px var(--accent-ink); }
body.btnf-suave .btn-primary { background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; }
body.btnf-suave .btn-primary:hover { background: color-mix(in srgb, var(--accent) 17%, var(--surface)); color: var(--accent-ink); filter: none; }

/* Interletra (tracking) — cuerpo + títulos */
body.track-ajustado { letter-spacing: -.02em; }
body.track-amplio   { letter-spacing: .012em; }
body.track-ajustado h1, body.track-ajustado h2, body.track-ajustado h3, body.track-ajustado h4, body.track-ajustado .h-page { letter-spacing: -.04em; }
body.track-amplio h1, body.track-amplio h2, body.track-amplio h3, body.track-amplio h4, body.track-amplio .h-page { letter-spacing: 0; }

/* Peso de los títulos */
body.tw-medio  { --fw-display: 600; }
body.tw-fuerte { --fw-display: 760; }
body.tw-medio h1, body.tw-medio h2, body.tw-medio h3, body.tw-medio h4 { font-weight: 600; }
body.tw-fuerte h1, body.tw-fuerte h2, body.tw-fuerte h3, body.tw-fuerte h4 { font-weight: 760; }

/* ==========================================================================
   Vista previa grande "mini-portal" (.pvx) — refleja TODO en vivo vía --pv-*/.pv-*.
   Nunca toca el :root real: la UI del admin no muta mientras juega con los controles.
   ========================================================================== */
.preview-canvas { position: sticky; top: calc(60px + var(--s4)); }
.pvx {
  --pv-grad: radial-gradient(600px 300px at 100% -20%, color-mix(in srgb, var(--pv) 9%, transparent) 0%, transparent 60%);
  --pv-btn: 999px; --pv-sh: var(--sh-1);
  border: 1px solid var(--border); border-radius: calc(var(--pv-r) + 4px); overflow: hidden;
  background: var(--surface); box-shadow: var(--sh-2);
}
.pvx-chrome { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.pvx-dots { display: inline-flex; gap: 5px; flex-shrink: 0; }
.pvx-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-2); }
.pvx-url { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: .16rem .6rem; margin: 0 auto; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvx-url svg { width: 12px; height: 12px; flex-shrink: 0; }
.pvx-tag { font-size: .62rem; font-weight: 700; color: var(--pv); background: color-mix(in srgb, var(--pv) 12%, var(--surface)); padding: .12rem .4rem; border-radius: var(--r-xs); flex-shrink: 0; }
.pvx-app { background: var(--bg); background-image: var(--pv-grad); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.pvx.pv-den-compacta .pvx-app { padding: var(--s4); gap: var(--s3); }
/* Espejo del "color de fondo" dentro del preview (misma familia, escala reducida) */
.pvx.pv-bg-liso .pvx-app { --pv-grad: none; }
.pvx.pv-bg-malla .pvx-app {
  --pv-grad:
    linear-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px) 0 0/22px 22px,
    radial-gradient(500px 260px at 100% -20%, color-mix(in srgb, var(--pv) 9%, transparent) 0%, transparent 60%);
}
.pvx.pv-bg-aurora .pvx-app {
  --pv-grad:
    radial-gradient(380px 240px at 10% -10%, color-mix(in srgb, var(--pv) 16%, transparent) 0%, transparent 55%),
    radial-gradient(460px 260px at 108% 0%, color-mix(in srgb, var(--pv) 10%, transparent) 0%, transparent 60%);
}
.pvx.pv-bg-bruma .pvx-app { --pv-grad: linear-gradient(180deg, color-mix(in srgb, var(--pv) 7%, var(--bg)) 0%, var(--bg) 42%); }
.pvx-top { display: flex; align-items: center; gap: .5rem; }
.pvx-logo { width: 26px; height: 26px; border-radius: calc(var(--pv-r) * .5); background: var(--pv-fill); color: var(--pv-contrast, #fff); font-family: var(--pv-fd); font-weight: 700; font-size: .9rem; display: grid; place-items: center; flex-shrink: 0; }
.pvx-logo img { width: 26px; height: 26px; border-radius: calc(var(--pv-r) * .5); object-fit: cover; }
.pvx-name { font-family: var(--pv-fd); font-weight: 700; letter-spacing: -.02em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvx-nav { margin-left: auto; display: flex; gap: .7rem; font-family: var(--pv-fb); font-size: .72rem; color: var(--muted); }
.pvx-nav b { color: var(--pv); font-weight: 650; }
.pvx-moon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); color: var(--text-2); flex-shrink: 0; }
.pvx-moon svg { width: 12px; height: 12px; }
.pvx-hero { display: flex; flex-direction: column; }
.pvx-eyebrow { font-family: var(--pv-fb); font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pv); margin: 0; }
.pvx-h { font-family: var(--pv-fd); font-size: 1.15rem; color: var(--text); margin: .1rem 0 0; letter-spacing: -.01em; }
.pvx-muted { font-family: var(--pv-fb); color: var(--muted); font-size: .78rem; margin: .15rem 0 0; }
.pvx-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--pv-r); box-shadow: var(--pv-sh); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); transition: box-shadow var(--dur) var(--ease), border-radius var(--dur) var(--ease); }
.pvx.pv-den-compacta .pvx-card { padding: var(--s3); gap: var(--s2); }
.pvx-chips { display: flex; align-items: center; gap: .45rem; }
.pvx-chip { font-family: var(--pv-fb); font-size: .72rem; font-weight: 600; padding: .28rem .7rem; border-radius: var(--pv-rp); background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.pvx-chip.on { background: color-mix(in srgb, var(--pv) 14%, var(--surface)); color: var(--pv); border-color: color-mix(in srgb, var(--pv) 30%, transparent); }
.pvx-btn { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; color: var(--pv-contrast, #fff); background: var(--pv-fill); font-family: var(--pv-fb); font-size: .78rem; font-weight: 600; padding: .4rem .8rem; border-radius: var(--pv-btn); transition: border-radius var(--dur) var(--ease); }
.pvx-btn svg { width: 14px; height: 14px; }
.pvx-table { display: flex; flex-direction: column; gap: .4rem; }
.pvx-tr { display: flex; align-items: center; gap: .55rem; padding: .4rem .5rem; border-radius: var(--r-sm); background: var(--surface-2); }
.pvx-av { width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--pv) 14%, var(--surface)); color: var(--pv); font-size: .6rem; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.pvx-td { font-family: var(--pv-fb); font-size: .75rem; color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvx-td b { color: var(--text); }
.pvx-badge { font-size: .6rem; font-weight: 700; padding: .12rem .45rem; border-radius: var(--r-pill); flex-shrink: 0; }
.pvx-badge.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-bd); }
.pvx-badge.run { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-bd); }
.pvx-status { display: flex; align-items: center; gap: .4rem; font-family: var(--pv-fb); font-size: .72rem; color: var(--muted); }
.pvx-status .pvx-sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.pvx-link { color: var(--pv); font-weight: 600; margin-left: auto; }

/* Preview: reflejo de las opciones avanzadas (degradado, topbar, tarjeta, fondos, logo) */
/* --pv-fill = relleno AA (espejo de --accent-fill); --pv-2 = 2ª parada adaptada. syncPreview
   los calcula con la MISMA lógica del servidor (fillFor/gradSecond) para no mentir. */
.pvx { --pv-2: var(--pv); --pv-fill: var(--pv); }
.pvx.pv-degradado .pvx-btn,
.pvx.pv-degradado .pvx-logo { background: linear-gradient(135deg, var(--pv-fill) 0%, var(--pv-2) 100%); }
.pvx.pv-degradado .pvx-av { background: linear-gradient(135deg, var(--pv-fill) 0%, var(--pv-2) 100%); color: var(--pv-contrast, #fff); }
/* Relleno del botón / interletra / peso de título en el preview (van DESPUÉS de pv-degradado
   para ganarle en orden de fuente, igual que btnf-* le gana a acento-degradado en el portal). */
.pvx.pv-btnf-contorno .pvx-btn { background: transparent; color: var(--pv); box-shadow: inset 0 0 0 1.5px var(--pv); }
.pvx.pv-btnf-suave .pvx-btn { background: color-mix(in srgb, var(--pv) 12%, var(--surface)); color: var(--pv); box-shadow: none; }
.pvx.pv-track-ajustado { letter-spacing: -.02em; }
.pvx.pv-track-amplio { letter-spacing: .012em; }
.pvx.pv-tw-medio .pvx-h, .pvx.pv-tw-medio .pvx-name { font-weight: 640; }
.pvx.pv-tw-fuerte .pvx-h, .pvx.pv-tw-fuerte .pvx-name { font-weight: 760; }
.pvx.pv-bg-degradado .pvx-app {
  --pv-grad:
    radial-gradient(440px 280px at 6% -14%, color-mix(in srgb, var(--pv) 24%, transparent) 0%, transparent 55%),
    radial-gradient(420px 260px at 106% 6%, color-mix(in srgb, var(--pv-2) 22%, transparent) 0%, transparent 58%);
}
.pvx.pv-bg-puntos .pvx-app {
  --pv-grad: radial-gradient(color-mix(in srgb, var(--pv) 26%, transparent) 1.3px, transparent 1.3px);
  background-size: 15px 15px;
}
.pvx.pv-bg-rejilla .pvx-app {
  --pv-grad:
    linear-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px) 0 0/20px 20px;
}
/* Topbar del preview (barra tipo pill que se pinta con el acento) */
.pvx.pv-tb-solida .pvx-top { background: var(--pv-fill); padding: .45rem .6rem; border-radius: var(--pv-r); }
.pvx.pv-tb-solida.pv-degradado .pvx-top { background: linear-gradient(100deg, var(--pv-fill) 0%, var(--pv-2) 100%); }
/* Texto/logo/luna en --pv-contrast (calculado), no #fff fijo: con acento claro el portal
   real usa tinta oscura y el preview debe igualarlo. */
.pvx.pv-tb-solida .pvx-name, .pvx.pv-tb-solida .pvx-nav, .pvx.pv-tb-solida .pvx-nav b { color: var(--pv-contrast, #fff); }
.pvx.pv-tb-solida .pvx-logo { background: color-mix(in srgb, var(--pv-contrast, #fff) 88%, transparent); color: var(--pv-fill); }
.pvx.pv-tb-solida .pvx-moon { border-color: color-mix(in srgb, var(--pv-contrast, #fff) 45%, transparent); color: var(--pv-contrast, #fff); }
.pvx.pv-tb-borde .pvx-top { border-bottom: 2px solid var(--border-2); padding-bottom: .5rem; }
.pvx.pv-tb-minimal .pvx-top { opacity: .92; }
/* Tarjeta del preview */
.pvx.pv-card-contorno .pvx-card { box-shadow: none; border-color: var(--border-2); }
.pvx.pv-card-glass .pvx-card { background: color-mix(in srgb, var(--surface) 66%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* Forma del logo en el preview */
.pvx.pv-logo-circulo .pvx-logo, .pvx.pv-logo-circulo .pvx-logo img { border-radius: 999px; }
.pvx.pv-logo-cuadrado .pvx-logo, .pvx.pv-logo-cuadrado .pvx-logo img { border-radius: 3px; }
/* Base neutral en el preview (superficies) */
/* Incluyen --border-2 (borde de tb-borde y card-contorno del preview); sin él tomaban el
   slate por defecto y el preview no reflejaba el borde real de la base. */
.pvx.pv-base-zinc  { --surface:#fff; --surface-2:#f4f4f5; --surface-3:#ededee; --border:#e7e7e9; --border-2:#d6d6d9; --bg:#f5f5f6; }
.pvx.pv-base-stone { --surface:#fffdfa; --surface-2:#f2efe9; --surface-3:#ebe7df; --border:#e8e2d7; --border-2:#dbd3c5; --bg:#f6f4f0; }
.pvx.pv-base-frost { --surface:#fdfeff; --surface-2:#eef3f8; --surface-3:#e6edf4; --border:#e0e8f1; --border-2:#cdd9e7; --bg:#f1f5f9; }
.pvx.pv-base-carbon{ --surface:#fff; --surface-2:#f7f7f7; --surface-3:#f0f0f0; --border:#e4e4e4; --border-2:#d0d0d0; --bg:#fff; }
/* Modo OSCURO del preview (lo activa syncPreview según cfg-tema): superficies oscuras espejo de
   app.css [data-theme=dark]; syncPreview además aclara --pv/--pv-fill/--pv-2/--pv-contrast. La
   variante combinada con la base gana por especificidad (0,0,3,0) sobre la base clara. */
.pvx.pv-dark { --bg:#0a0c10; --surface:#171b22; --surface-2:#1f242c; --surface-3:#272d37; --border:#2c323d; --border-2:#3b4250; --text:#f4f6fa; --text-2:#cbd2de; --muted:#99a1b1; }
.pvx.pv-dark.pv-base-zinc  { --bg:#0b0b0c; --surface:#18181a; --surface-2:#1f1f22; --surface-3:#27272b; --border:#2b2b30; --border-2:#3a3a40; }
.pvx.pv-dark.pv-base-stone { --bg:#0d0c0a; --surface:#1a1815; --surface-2:#211e1a; --surface-3:#282420; --border:#332e27; --border-2:#443d33; }
.pvx.pv-dark.pv-base-frost { --bg:#070a11; --surface:#131824; --surface-2:#19202f; --surface-3:#20293b; --border:#27324a; --border-2:#35446a; }
.pvx.pv-dark.pv-base-carbon{ --bg:#000; --surface:#0d0d0f; --surface-2:#151517; --surface-3:#1c1c1f; --border:#242427; --border-2:#333338; --text:#fff; }
/* Escala de texto en el preview */
.pvx.pv-esc-compacta { font-size: .92em; }
.pvx.pv-esc-amplia { font-size: 1.08em; }

/* Galería de temas prediseñados (aplican un look completo de un clic) */
.theme-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: .5rem; }
.theme-card { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .55rem .4rem; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--r-sm); cursor: pointer; font-family: inherit; transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur); }
.theme-card:hover { transform: translateY(-2px); box-shadow: var(--sh-1); border-color: var(--border-2); }
.theme-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.theme-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.tc-swatch { width: 100%; height: 32px; border-radius: var(--r-xs); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .9rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.tc-name { font-size: .73rem; font-weight: 600; color: var(--text-2); }
/* Anillo de foco unificado en los controles que aún caían al outline del navegador. */
.seg button:focus-visible, .menu button:focus-visible, .tbl-tools .btn-soft:focus-visible,
.dw-cpy:focus-visible, .swatch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* Editor de configuración: agrupación por secciones ligeras */
.cfg-group { margin-bottom: 1.5rem; }
.cfg-group:last-of-type { margin-bottom: 0; }
.cfg-eyebrow { display: flex; align-items: center; gap: .55rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 .9rem; }
.cfg-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--border); }

@media (max-width: 900px) { .preview-canvas { position: static; } }
@media (max-width: 380px) { .pvx-nav { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  /* …pero los indicadores funcionales de progreso deben seguir animando (misma excepción
     que anim-off): con reduced-motion, .btn.loading oculta su texto (color:transparent),
     así que sin spinner giratorio el botón "cargando" se ve vacío/congelado. */
  .btn.loading::after, .skel { animation-duration: .9s !important; animation-iteration-count: infinite !important; }
}

/* ---------- Impresión (historial / créditos a papel o PDF) ---------- */
/* Fuerza tema claro legible sobre papel (aunque el usuario tenga dark mode) y
   oculta el chrome de la app (topbar, toasts, botones de acción, patrón de fondo). */
@media print {
  :root, [data-theme="dark"] {
    --bg: #fff; --bg-grad: none; --surface: #fff; --surface-2: #fff; --surface-3: #f3f4f6;
    --border: #d1d5db; --border-2: #cbd0d8; --text: #000; --text-2: #333; --muted: #555;
    --card-sh: none; --sh-1: none; --sh-2: none; --sh-xs: none;
  }
  /* Las bases tintadas fijan --surface/--border/--text en el propio body (ej.
     [data-theme=dark] body.base-stone), con más especificidad que el reset de arriba →
     en oscuro + base tintada la impresión salía negra. !important sobre body gana sin
     importar la especificidad y fuerza papel blanco legible. */
  body {
    --bg: #fff !important; --surface: #fff !important; --surface-2: #fff !important; --surface-3: #f3f4f6 !important;
    --border: #d1d5db !important; --border-2: #cbd0d8 !important; --text: #000 !important; --text-2: #333 !important; --muted: #555 !important;
    background: #fff !important;
  }
  .topbar, #toasts, .banner, .flash, .drawer, .drawer-ov, .menu, .cmdk-back, .mdl-back,
  .btn, .icon-btn, .seg-filter, .tbl-tools, .bulkbar, .page-head .search, .qa-list { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #d1d5db; break-inside: avoid; }
  .tbl-wrap { overflow: visible !important; }
  .tbl th, .tbl td { white-space: normal !important; }
  a { color: #000; text-decoration: none; }
}