/* NSI · sistema de diseño v1 (2026-10-15). Fuente única de tokens, componentes y movimiento.
   Decisiones: modo claro (D2), lienzo gris frío + azul tinta como acción + lima como «hecho» y «sugerido» (D3, D3b),
   sidebar oscuro con contenido claro (D4), Hanken Grotesk + JetBrains Mono (D5), tokens propios var(--…) (D14).
   Regla: ningún color literal fuera de este archivo; las pantallas solo usan clases y variables de aquí. */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Lienzo y superficies */
  --bg: #EEF0F3;            /* lienzo gris frío */
  --surface: #FFFFFF;       /* tarjetas, tablas, campos */
  --surface-2: #F6F7F9;     /* cabeceras de tabla, zonas secundarias */
  --surface-3: #E6E9EE;     /* hover de filas, pistas */
  --line: #D9DEE5;          /* bordes */
  --line-2: #C6CDD6;        /* bordes marcados */
  /* Tinta */
  --ink: #121417;
  --ink-2: #4B5563;
  --ink-3: #8A94A3;
  --ink-inv: #FFFFFF;
  /* Acento: azul tinta (D3b, más oscuro que el #1F55E0 de Illapa para distanciarse de Yupana ERL) */
  --accent: #1437B8;
  --accent-hover: #10309F;
  --accent-ink: #FFFFFF;
  --accent-soft: #E7ECFB;   /* fondos de selección, chips informativos */
  --accent-soft-ink: #12309E;
  /* Lima: «hecho», «aceptado», «sugerido» (nunca como botón principal) */
  --lime: #C9F23F;
  --lime-ink: #1F2A05;
  --lime-soft: #F0FBC8;
  /* Semántica */
  --ok: #15803D; --ok-soft: #DCFCE7; --ok-ink: #14532D;
  --warn: #B45309; --warn-soft: #FEF3C7; --warn-ink: #78350F;
  --bad: #B91C1C; --bad-soft: #FEE2E2; --bad-ink: #7F1D1D;
  --info: #1D4ED8; --info-soft: #DBEAFE; --info-ink: #1E3A8A;
  /* Sidebar oscuro (D4): tinta de Cuadre, no el azul saturado de Yupana ERL */
  --side-bg: #0F1115;
  --side-bg-2: #171A20;
  --side-line: #262A33;
  --side-ink: #E6E8EC;
  --side-ink-2: #9AA3B2;
  --side-active-bg: #1F2430;
  --side-active-ink: #FFFFFF;
  --side-accent: #C9F23F;   /* indicador del ítem activo */
  /* Marcas de terceros (solo para los botones de acceso con Microsoft y Google del login) */
  --ms-1: #F25022; --ms-2: #7FBA00; --ms-3: #00A4EF; --ms-4: #FFB900;
  --g-1: #4285F4; --g-2: #EA4335; --g-3: #FBBC05; --g-4: #34A853;
  /* Foco y sombra (sin sombra en reposo: Nizam 90 %) */
  --focus: 0 0 0 3px rgba(20, 55, 184, .28);
  --shadow-pop: 0 12px 32px rgba(18, 20, 23, .14), 0 2px 6px rgba(18, 20, 23, .08);
  /* Tipografía */
  --font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px; --fs-4xl: 36px;
  --lh: 1.45;
  /* Espacio y forma */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-pill: 999px;
  --side-w: 248px; --side-w-min: 64px; --top-h: 56px;
  /* Movimiento (Nizam: suave, corto, con entrada por desplazamiento) */
  --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms; --t-page: 420ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-draw: 700ms;          /* trazos largos: anillo, firma */
  --shadow-lift: 0 8px 20px rgba(18, 20, 23, .10), 0 1px 3px rgba(18, 20, 23, .06);
  --shadow-doc: 0 1px 2px rgba(18, 20, 23, .06), 0 6px 14px rgba(18, 20, 23, .08), 0 22px 40px rgba(18, 20, 23, .10);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-md)/var(--lh) var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
.mono, .monto, .serie, .ruc { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.monto { font-weight: 600; }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); }
.sm { font-size: var(--fs-sm); } .xs { font-size: var(--fs-xs); }
.right { text-align: right; } .center { text-align: center; }
.row { display: flex; align-items: center; gap: var(--s-2); } .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.col { display: flex; flex-direction: column; gap: var(--s-2); }
.grow { flex: 1 1 auto; min-width: 0; }
.wrap { flex-wrap: wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: none; box-shadow: var(--focus); }
::selection { background: var(--accent-soft); }

/* ---------- Shell (sidebar oscuro + contenido claro) ---------- */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns var(--t-slow) var(--ease); }
.shell.compacta { grid-template-columns: var(--side-w-min) minmax(0, 1fr); }
.side { position: sticky; top: 0; height: 100vh; background: var(--side-bg); color: var(--side-ink); display: flex; flex-direction: column; border-right: 1px solid var(--side-line); overflow: hidden; }
.side-marca { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-3); height: var(--top-h); }
.side-marca .logo { width: 30px; height: 30px; border-radius: 9px; background: var(--lime); color: var(--lime-ink); display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: none; }
.logo svg, .con-simbolo svg { width: 62%; height: 62%; display: block; }
.side-marca .nombre { font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.01em; white-space: nowrap; }
.side-marca .lema { font-size: var(--fs-xs); color: var(--side-ink-2); white-space: nowrap; }
.side-empresa { margin: var(--s-2) var(--s-3); padding: var(--s-3); border-radius: var(--r-m); background: var(--side-bg-2); border: 1px solid var(--side-line); display: grid; gap: var(--s-1); cursor: pointer; transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease); }
.side-empresa:hover { border-color: var(--side-ink-2); }
.side-empresa .razon { font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-empresa .ruc { font-size: var(--fs-xs); color: var(--side-ink-2); }
.side-nav { flex: 1; overflow-y: auto; padding: var(--s-2) var(--s-3); scrollbar-width: thin; scrollbar-color: var(--side-line) transparent; }
.side-grupo { margin: var(--s-4) 0 var(--s-1); padding: 0 var(--s-2); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--side-ink-2); white-space: nowrap; }
.side-item { display: flex; align-items: center; gap: var(--s-3); padding: 7px var(--s-2); border-radius: var(--r-s); color: var(--side-ink-2); font-weight: 500; font-size: var(--fs-sm); position: relative; cursor: pointer; white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.side-item svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-item:hover { background: var(--side-active-bg); color: var(--side-ink); }
.side-item:active { transform: scale(.98); }
.side-item.activo { background: var(--side-active-bg); color: var(--side-active-ink); }
.side-item.activo::before { content: ''; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--side-accent); }
.side-item .contador { margin-left: auto; font-family: var(--mono); font-size: 11px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--side-line); color: var(--side-ink); }
.side-item .contador.lima { background: var(--lime); color: var(--lime-ink); }
/* v2 (elección del dueño): módulos colapsables con icono, ítems de texto debajo, un nivel más de submenú (.side-sub) y,
   con el sidebar plegado, menús flotantes al pasar el puntero o pulsar el icono del módulo. Markup en kit/plantilla.html. */
.side-modulo { margin: 2px 0; }
.side-cab { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: 7px var(--s-2); border: 0; border-radius: var(--r-s); background: transparent; color: var(--side-ink-2); font: inherit; font-weight: 600; font-size: var(--fs-sm); text-align: left; cursor: pointer; white-space: nowrap; position: relative; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.side-cab svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-cab .flecha { width: 14px; height: 14px; margin-left: auto; opacity: .7; transition: transform var(--t-base) var(--ease); }
.side-cab:hover { background: var(--side-active-bg); color: var(--side-ink); }
.side-modulo.abierto > .side-cab .flecha { transform: rotate(90deg); }
.side-modulo.activo > .side-cab { color: var(--side-ink); }
.side-modulo.activo:not(.abierto) > .side-cab::after { content: ''; position: absolute; right: 30px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--side-accent); transform: translateY(-50%); }
.side-items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease); }
.side-items > div { overflow: hidden; min-height: 0; }
.side-modulo.abierto > .side-items, .side-sub.abierto > .side-items { grid-template-rows: 1fr; }
.side-modulo .side-item { padding-left: 38px; font-weight: 500; }
.side-modulo .side-item > svg { display: none; }
.side-modulo .side-item.activo::before { left: 26px; top: 9px; bottom: 9px; width: 2px; }
.side-item.con-sub .flecha { width: 14px; height: 14px; margin-left: auto; opacity: .7; transition: transform var(--t-base) var(--ease); }
.side-sub.abierto > .side-item.con-sub .flecha { transform: rotate(90deg); }
.side-sub .side-items .side-item { padding-left: 52px; font-size: var(--fs-xs); font-weight: 500; }
.side-sub .side-items .side-item::after { content: ''; position: absolute; left: 44px; top: 0; bottom: 0; width: 1px; background: var(--side-line); }
.side-sub .side-items .side-item.activo::before { left: 43px; }
.side-nav > .side-item { font-weight: 600; }
@media (min-width: 901px) {
  .shell.compacta .side-marca .nombre, .shell.compacta .side-marca .lema, .shell.compacta .side-grupo, .shell.compacta .side-empresa, .shell.compacta .side-pie .quien { display: none; }
  .shell.compacta .side-nav { padding: var(--s-2); }
  .shell.compacta .side-items, .shell.compacta .side-cab span, .shell.compacta .side-cab .flecha, .shell.compacta .side-nav > .side-item span { display: none; }
  .shell.compacta .side-cab, .shell.compacta .side-nav > .side-item { justify-content: center; padding: 10px 0; }
  .shell.compacta .side-modulo.activo > .side-cab { color: var(--side-ink); background: var(--side-active-bg); }
  .shell.compacta .side-modulo.activo > .side-cab::after { right: 6px; top: 6px; transform: none; }
  .shell.compacta .side-nav > .side-item.activo::before { left: -8px; }
  .shell.compacta .side-pie { justify-content: center; }
}
.side-flotante { position: fixed; z-index: 46; min-width: 224px; max-width: 300px; background: var(--side-bg-2); border: 1px solid var(--side-line); border-radius: var(--r-m); box-shadow: var(--shadow-pop); padding: var(--s-2); color: var(--side-ink); animation: brotar var(--t-fast) var(--ease-out); }
.side-flotante .titulo { padding: 4px var(--s-2) 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--side-ink-2); white-space: nowrap; }
.side-flotante .side-items { display: grid !important; grid-template-rows: 1fr !important; }
.side-flotante .side-item { padding-left: var(--s-2); }
.side-flotante .side-item.activo::before { left: -8px; }
.side-flotante .side-sub .side-items .side-item { padding-left: var(--s-5); }
.side-flotante .side-sub .side-items .side-item::after { left: 10px; }
.side-flotante .side-sub .side-items .side-item.activo::before { left: 9px; }
.side-pie { padding: var(--s-3); border-top: 1px solid var(--side-line); display: flex; align-items: center; gap: var(--s-3); }
.side-pie .avatar { background: var(--accent); color: var(--accent-ink); }
.side-pie .quien { min-width: 0; }
.side-pie .quien b { display: block; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-pie .quien span { font-size: var(--fs-xs); color: var(--side-ink-2); }
.side-version { padding: 0 var(--s-3) var(--s-3); font-family: var(--mono); font-size: var(--fs-xs); color: var(--side-ink-2); }
.shell.compacta .side-version { text-align: center; padding-inline: 0; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { height: var(--top-h); display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-6); background: var(--bg); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid transparent; transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease); }
.top.pegada { border-bottom-color: var(--line); background: rgba(238, 240, 243, .92); backdrop-filter: blur(8px); }
.top .migas { display: flex; align-items: center; gap: var(--s-2); color: var(--ink-2); font-size: var(--fs-sm); }
.top .migas b { color: var(--ink); font-weight: 600; }
.top .buscar { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); height: 34px; padding: 0 var(--s-3); min-width: 260px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-m); color: var(--ink-3); font-size: var(--fs-sm); cursor: text; transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.top .buscar:hover { border-color: var(--line-2); }
.top .buscar kbd { margin-left: auto; }
.contenido { padding: var(--s-4) var(--s-6) var(--s-9); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.cabecera h1 { font-size: var(--fs-3xl); }
.cabecera .sub { color: var(--ink-2); margin-top: var(--s-1); }
.cabecera .acciones { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ---------- Botones ---------- */
/* v2 (elección del dueño, 14-galeria «Compacta»): botones un poco más pequeños (34 px, 13 px) y menos aire en paneles y tablas. */
.btn { --btn-bg: var(--surface); --btn-ink: var(--ink); --btn-line: var(--line-2); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 34px; padding: 0 14px; border-radius: var(--r-m); border: 1px solid var(--btn-line); background: var(--btn-bg); color: var(--btn-ink); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; user-select: none; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primario { --btn-bg: var(--accent); --btn-ink: var(--accent-ink); --btn-line: var(--accent); }
.btn-primario:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-lima { --btn-bg: var(--lime); --btn-ink: var(--lime-ink); --btn-line: var(--lime); }
.btn-lima:hover { background: #BDE735; border-color: #BDE735; }
.btn-fantasma { --btn-bg: transparent; --btn-line: transparent; }
.btn-fantasma:hover { background: var(--surface-3); border-color: transparent; }
.btn-peligro { --btn-bg: var(--surface); --btn-ink: var(--bad); --btn-line: var(--line-2); }
.btn-peligro:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--fs-sm); border-radius: var(--r-s); }
.btn-lg { height: 42px; padding: 0 var(--s-6); font-size: var(--fs-lg); }
.btn-icono { width: 34px; padding: 0; }
.btn-icono.btn-sm { width: 28px; }
/* Acceso con Microsoft o Google (login): glifos con los colores de marca definidos en :root */
.btn-social { justify-content: flex-start; gap: var(--s-3); width: 100%; }
.btn-social .marca-ms { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 16px; height: 16px; flex: none; }
.btn-social .marca-ms i { display: block; } .btn-social .marca-ms i:nth-child(1) { background: var(--ms-1); } .btn-social .marca-ms i:nth-child(2) { background: var(--ms-2); } .btn-social .marca-ms i:nth-child(3) { background: var(--ms-3); } .btn-social .marca-ms i:nth-child(4) { background: var(--ms-4); }
.btn-social svg.marca-g { width: 16px; height: 16px; stroke: none; }
.btn .atajo { margin-left: var(--s-1); }
kbd { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); line-height: 1.5; }
.btn-primario kbd { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: var(--accent-ink); }

/* ---------- Campos ---------- */
.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.campo > label, .etiqueta { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.campo .ayuda { font-size: var(--fs-xs); color: var(--ink-3); }
.campo .error { font-size: var(--fs-xs); color: var(--bad); }
.entrada { display: flex; align-items: center; gap: var(--s-2); height: 36px; padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--surface); transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.entrada input, .entrada select, .entrada textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0; height: 100%; }
.entrada input::placeholder { color: var(--ink-3); }
.entrada input:focus-visible, .entrada select:focus-visible, .entrada textarea:focus-visible { box-shadow: none; }
.entrada svg { width: 16px; height: 16px; stroke: var(--ink-3); fill: none; stroke-width: 2; flex: none; }
.entrada:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.entrada.invalida { border-color: var(--bad); }
.entrada.invalida:focus-within { box-shadow: 0 0 0 3px rgba(185, 28, 28, .2); }
.entrada .prefijo { font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink-2); padding-right: var(--s-2); border-right: 1px solid var(--line); }
.entrada.area { height: auto; padding: var(--s-2) var(--s-3); }
.entrada.area textarea { resize: vertical; min-height: 72px; line-height: var(--lh); }
.entrada.mono input { font-family: var(--mono); }
.entrada.grande { height: 46px; font-size: var(--fs-lg); border-radius: var(--r-l); }
.segmentado { display: inline-flex; padding: 3px; border-radius: var(--r-m); background: var(--surface-3); gap: 2px; }
.segmentado button { height: 30px; padding: 0 var(--s-3); border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.segmentado button.activo { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(18,20,23,.08); }
.segmentado button:hover:not(.activo) { color: var(--ink); }
.interruptor { position: relative; width: 38px; height: 22px; border-radius: var(--r-pill); background: var(--line-2); border: 0; cursor: pointer; transition: background var(--t-base) var(--ease); flex: none; }
.interruptor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: transform var(--t-base) var(--ease-spring); }
.interruptor[aria-checked="true"] { background: var(--accent); }
.interruptor[aria-checked="true"]::after { transform: translateX(16px); }
.casilla { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-2); background: var(--surface); display: inline-grid; place-items: center; cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); flex: none; }
.casilla svg { width: 12px; height: 12px; stroke: var(--accent-ink); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring); }
.casilla[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.casilla[aria-checked="true"] svg { opacity: 1; transform: scale(1); }
.tarjeta-opcion { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); cursor: pointer; transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease), transform var(--t-fast) var(--ease); }
.tarjeta-opcion:hover { border-color: var(--line-2); transform: translateY(-1px); }
.tarjeta-opcion.activa { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.tarjeta-opcion .icono { width: 36px; height: 36px; border-radius: var(--r-s); background: var(--surface-3); display: grid; place-items: center; flex: none; }
.tarjeta-opcion.activa .icono { background: var(--accent); color: var(--accent-ink); }
.tarjeta-opcion .icono svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.tarjeta-opcion b { display: block; }
.tarjeta-opcion span:not(.chip) { font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------- Paneles, tarjetas, KPI ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s-4); }
.panel-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
/* Sección colapsable (05-documento): .panel.colapsable con .panel-cab como disparador; el kit envuelve el resto en .panel-cuerpo */
.panel.colapsable > .panel-cab { cursor: pointer; user-select: none; }
.panel.colapsable > .panel-cab .flecha { width: 16px; height: 16px; margin-left: auto; flex: none; stroke: var(--ink-3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-base) var(--ease); }
.panel.colapsable > .panel-cuerpo { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t-slow) var(--ease); }
.panel.colapsable > .panel-cuerpo > div { overflow: hidden; min-height: 0; display: grid; gap: var(--s-3); }
.panel.colapsable.cerrado > .panel-cab { margin-bottom: 0; }
.panel.colapsable.cerrado > .panel-cab .flecha { transform: rotate(-90deg); }
.panel.colapsable.cerrado > .panel-cuerpo { grid-template-rows: 0fr; }
/* Datos de ficha (vista rápida y detalle): pares etiqueta y valor en dos columnas */
.ficha-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
.ficha-datos .dato { display: grid; gap: 2px; min-width: 0; }
.dato .k { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.dato .v { font-size: var(--fs-md); font-weight: 500; overflow-wrap: anywhere; }
.dato .v.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.panel-cab h3 { font-size: var(--fs-lg); }
.panel.compacto { padding: var(--s-4); }
.panel.resaltado { border-color: var(--accent); }
.panel.pegajoso { position: sticky; top: calc(var(--top-h) + var(--s-4)); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.grid-form { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-4); align-items: start; }
/* Cuadros (productos, mostrador): rejilla de tarjetas conmutable con la tabla */
.cuadros { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-3); }
.cuadro { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s-3); display: grid; gap: var(--s-2); cursor: pointer; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.cuadro:hover { border-color: var(--line-2); transform: translateY(-1px); }
.cuadro.enfocada { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cuadro .imagen { aspect-ratio: 4 / 3; border-radius: var(--r-s); background: var(--surface-3); display: grid; place-items: center; color: var(--ink-3); overflow: hidden; }
.cuadro .imagen svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.cuadro .nombre { font-weight: 600; font-size: var(--fs-sm); line-height: 1.3; }
.cuadro .precio { font-family: var(--mono); font-weight: 600; }
/* Kanban (cobranzas): columnas por estado, fichas arrastrables en la maqueta */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-2); scrollbar-width: thin; }
.kanban .columna { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s-2); display: grid; gap: var(--s-2); align-content: start; min-height: 220px; }
.kanban .columna-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-1) var(--s-2); font-size: var(--fs-sm); font-weight: 600; }
.kanban .columna-cab .n { font-family: var(--mono); color: var(--ink-3); font-weight: 500; }
.kanban .columna-cab .suma { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-2); }
.kanban .ficha { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s-3); display: grid; gap: 4px; cursor: grab; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.kanban .ficha:hover { border-color: var(--line-2); transform: translateY(-1px); }
.kanban .ficha.arrastrando { opacity: .5; }
.kanban .ficha .doc { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); }
.kanban .ficha .quien { font-weight: 600; font-size: var(--fs-sm); }
.kanban .ficha .monto { font-family: var(--mono); font-weight: 600; }
.kanban .columna.vencido { border-color: var(--bad-soft); } .kanban .columna.vencido .columna-cab { color: var(--bad); }
.kanban .columna.cobrado { background: var(--lime-soft); border-color: var(--lime); }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-1); position: relative; overflow: hidden; }
.kpi .titulo { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 500; }
.kpi .valor { font-family: var(--mono); font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.kpi .delta { font-size: var(--fs-xs); color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.kpi .delta.sube { color: var(--ok); } .kpi .delta.baja { color: var(--bad); }
.kpi.lima { background: var(--lime-soft); border-color: var(--lime); }
.kpi.acento { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.kpi.acento .titulo, .kpi.acento .delta { color: rgba(255,255,255,.75); }
.frase { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-m); background: var(--surface-2); font-size: var(--fs-md); }
.frase .icono { width: 28px; height: 28px; border-radius: 8px; background: var(--lime); color: var(--lime-ink); display: grid; place-items: center; flex: none; }
.frase .icono svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* ---------- Chips y estados ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.chip.sin-punto::before { display: none; }
.chip.aceptado, .chip.hecho { background: var(--lime); color: var(--lime-ink); }
.chip.enviado, .chip.proceso { background: var(--info-soft); color: var(--info-ink); }
.chip.borrador { background: var(--surface-3); color: var(--ink-2); }
.chip.observado, .chip.pendiente { background: var(--warn-soft); color: var(--warn-ink); }
.chip.rechazado, .chip.anulado, .chip.vencido { background: var(--bad-soft); color: var(--bad-ink); }
.chip.ok { background: var(--ok-soft); color: var(--ok-ink); }
.chip.acento { background: var(--accent-soft); color: var(--accent-soft-ink); }
.chip.demo { background: var(--warn-soft); color: var(--warn-ink); }
.chip.produccion { background: var(--lime); color: var(--lime-ink); }
.chip.pulsa::before { animation: pulso 1.4s var(--ease) infinite; }
.chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.filtro { height: 30px; padding: 0 var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: all var(--t-fast) var(--ease); }
.filtro:hover { border-color: var(--ink-3); }
.filtro.activo { background: var(--ink); color: var(--ink-inv); border-color: var(--ink); }
.filtro .n { font-family: var(--mono); margin-left: 6px; opacity: .7; }

/* ---------- Tabla ---------- */
.tabla-marco { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.tabla-barra { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tabla-scroll { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.tabla th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 8px var(--s-4); background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; }
.tabla td { padding: 9px var(--s-4); border-bottom: 1px solid var(--line); vertical-align: middle; font-size: var(--fs-sm); }
/* Columnas ordenables (th.ordenable) y fila enfocada por la vista rápida */
.tabla th.ordenable { cursor: pointer; user-select: none; }
.tabla th.ordenable::after { content: '↕'; margin-left: 6px; opacity: .45; font-family: var(--mono); }
.tabla th.ordenable.asc::after { content: '↑'; opacity: 1; color: var(--accent); }
.tabla th.ordenable.desc::after { content: '↓'; opacity: 1; color: var(--accent); }
.tabla tbody tr[data-vista] { cursor: pointer; }
.tabla tbody tr.enfocada { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background var(--t-fast) var(--ease); }
.tabla tbody tr:hover { background: var(--surface-2); }
.tabla tbody tr.seleccionada { background: var(--accent-soft); }
.tabla tbody tr.sugerida { background: var(--lime-soft); }
.tabla td.num, .tabla th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabla .principal { font-weight: 600; }
.tabla .secundario { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.tabla.densa td { padding: 6px var(--s-4); font-size: var(--fs-sm); }
/* Conmutador de vista (tabla, cuadros, kanban): .conmutador[data-conmuta="id"] con botones data-valor; muestra [data-cuando="valor"] dentro de #id */
.conmutador { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-s); overflow: hidden; background: var(--surface); flex: none; }
.conmutador button { display: grid; place-items: center; width: 34px; height: 28px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.conmutador button + button { border-left: 1px solid var(--line); }
.conmutador button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.conmutador button:hover { background: var(--surface-2); color: var(--ink); }
.conmutador button.activo { background: var(--ink); color: var(--ink-inv); }
.tabla .acciones-fila { display: flex; gap: var(--s-1); opacity: 0; transition: opacity var(--t-fast) var(--ease); justify-content: flex-end; }
.tabla tr:hover .acciones-fila, .tabla tr:focus-within .acciones-fila { opacity: 1; }
.tabla-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); flex-wrap: wrap; }
.paginas { display: flex; gap: var(--s-1); }
.paginas button { min-width: 28px; height: 28px; padding: 0 var(--s-2); border: 1px solid transparent; border-radius: var(--r-s); background: transparent; font-family: var(--mono); font-size: var(--fs-sm); cursor: pointer; }
.paginas button.activa { background: var(--ink); color: var(--ink-inv); }
.paginas button:hover:not(.activa) { background: var(--surface-3); }
.masivo { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); background: var(--ink); color: var(--ink-inv); border-radius: var(--r-m); position: sticky; bottom: var(--s-4); z-index: 10; box-shadow: var(--shadow-pop); animation: subir var(--t-slow) var(--ease-out); }
.masivo .btn { --btn-bg: transparent; --btn-ink: var(--ink-inv); --btn-line: rgba(255,255,255,.3); }

/* ---------- Pasos, pestañas, línea de tiempo ---------- */
.paso-cab { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.paso-n { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600; display: grid; place-items: center; flex: none; }
.paso-n.hecho { background: var(--lime); color: var(--lime-ink); }
.paso-cab h3 { font-size: var(--fs-lg); }
.pestanas { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); position: relative; }
.pestanas button { height: 36px; padding: 0 var(--s-3); border: 0; background: transparent; color: var(--ink-2); font-weight: 600; font-size: var(--fs-md); cursor: pointer; position: relative; transition: color var(--t-fast) var(--ease); }
.pestanas button:hover { color: var(--ink); }
.pestanas button.activa { color: var(--ink); }
.pestanas button.activa::after { content: ''; position: absolute; left: var(--s-2); right: var(--s-2); bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; animation: ensanchar var(--t-base) var(--ease-out); }
.pestanas .n { font-family: var(--mono); font-size: var(--fs-xs); margin-left: 6px; color: var(--ink-3); }
.linea-tiempo { display: grid; gap: 0; }
.hito { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-3); padding-bottom: var(--s-4); position: relative; }
.hito::before { content: ''; position: absolute; left: 11px; top: 22px; bottom: 0; width: 2px; background: var(--line); }
.hito:last-child::before { display: none; }
.hito .punto { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; }
.hito .punto svg { width: 12px; height: 12px; stroke: var(--ink-2); fill: none; stroke-width: 2.5; }
.hito.hecho .punto { background: var(--lime); } .hito.hecho .punto svg { stroke: var(--lime-ink); }
.hito.activo .punto { background: var(--accent); } .hito.activo .punto svg { stroke: var(--accent-ink); }
.hito.malo .punto { background: var(--bad-soft); } .hito.malo .punto svg { stroke: var(--bad); }
.hito b { display: block; font-size: var(--fs-md); }
.hito span:not(.chip) { font-size: var(--fs-sm); color: var(--ink-2); }
.hito time { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------- Avatares, estado vacío, tooltip ---------- */
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-soft-ink); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); flex: none; }
.avatar.sm { width: 24px; height: 24px; font-size: 11px; }
.vacio { display: grid; place-items: center; text-align: center; padding: var(--s-9) var(--s-4); gap: var(--s-3); color: var(--ink-2); }
.vacio .ilustracion { width: 72px; height: 72px; border-radius: 20px; background: var(--surface-3); display: grid; place-items: center; }
.vacio .ilustracion svg { width: 32px; height: 32px; stroke: var(--ink-3); fill: none; stroke-width: 1.6; }
.vacio h3 { color: var(--ink); }
.zona-carga { display: grid; place-items: center; gap: var(--s-2); padding: var(--s-7) var(--s-4); border: 2px dashed var(--line-2); border-radius: var(--r-l); background: var(--surface-2); text-align: center; color: var(--ink-2); cursor: pointer; transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease); }
.zona-carga:hover, .zona-carga.sobre { border-color: var(--accent); background: var(--accent-soft); }
.zona-carga svg { width: 28px; height: 28px; stroke: var(--ink-3); fill: none; stroke-width: 1.8; }
.pestanas-scroll { overflow-x: auto; scrollbar-width: none; }
.pestanas-scroll .pestanas { min-width: max-content; }
.alerta { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); }
.alerta svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; margin-top: 1px; }
.alerta.info { background: var(--info-soft); border-color: transparent; color: var(--info-ink); }
.alerta.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok-ink); }
.alerta.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn-ink); }
.alerta.bad { background: var(--bad-soft); border-color: transparent; color: var(--bad-ink); }
.alerta.lima { background: var(--lime-soft); border-color: transparent; color: var(--lime-ink); }

/* ---------- Capas: diálogo, panel lateral, paleta, toasts, menú ---------- */
.velo { position: fixed; inset: 0; background: rgba(18, 20, 23, .42); backdrop-filter: blur(2px); z-index: 40; animation: aparecer var(--t-base) var(--ease); }
.dialogo { position: fixed; inset: 0; z-index: 41; display: grid; place-items: center; padding: var(--s-4); pointer-events: none; }
.dialogo > .caja { pointer-events: auto; width: min(560px, 100%); background: var(--surface); border-radius: var(--r-l); border: 1px solid var(--line); box-shadow: var(--shadow-pop); padding: var(--s-6); display: grid; gap: var(--s-4); animation: brotar var(--t-slow) var(--ease-out); }
.dialogo .pie { display: flex; justify-content: flex-end; gap: var(--s-2); }
.dialogo > .caja.ancha { width: min(920px, 100%); }
.dialogo > .caja .tabla-marco { border-radius: var(--r-m); }
.lateral { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100%); background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-pop); z-index: 41; display: flex; flex-direction: column; animation: deslizar-izq var(--t-slow) var(--ease-out); }
/* Vista rápida (patrón de todos los grids): .lateral.rapida se abre sobre el velo (v4, z-index 41 sobre los 40 del velo; clic en el velo o Escape cierra) al pulsar una fila o cuadro con data-vista="id"; «Ver ficha completa» y «Editar» llevan al detalle en página */
.lateral.rapida { width: min(440px, 100%); z-index: 41; }
.lateral .cab { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.lateral .cab .titulo { display: grid; gap: 2px; min-width: 0; }
.lateral .cab h3 { font-size: var(--fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral .cab .sub { font-size: var(--fs-xs); color: var(--ink-3); font-family: var(--mono); }
.lateral .cab .acciones { display: flex; gap: var(--s-1); flex: none; }
.lateral .cuerpo { padding: var(--s-4); overflow-y: auto; flex: 1; display: grid; gap: var(--s-4); align-content: start; }
.lateral .pie { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: var(--s-2); flex-wrap: wrap; }
.lateral .seccion { display: grid; gap: var(--s-2); }
.lateral .seccion > h4 { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.paleta { position: fixed; left: 50%; top: 12vh; transform: translateX(-50%); width: min(640px, calc(100% - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-pop); z-index: 42; overflow: hidden; animation: brotar var(--t-base) var(--ease-out); }
.paleta .entrada { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; height: 52px; font-size: var(--fs-lg); }
.paleta .entrada:focus-within { box-shadow: none; }
.paleta ul { list-style: none; margin: 0; padding: var(--s-2); max-height: 50vh; overflow-y: auto; }
.paleta li { display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-3); border-radius: var(--r-s); cursor: pointer; }
.paleta li.activa, .paleta li:hover { background: var(--accent-soft); }
.paleta li kbd { margin-left: auto; }
.paleta .grupo { padding: var(--s-2) var(--s-3) 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.toasts { position: fixed; right: var(--s-5); bottom: calc(var(--s-5) + 68px); display: grid; gap: var(--s-2); z-index: 50; width: min(380px, calc(100% - 40px)); }
.toast { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-m); background: var(--ink); color: var(--ink-inv); font-size: var(--fs-sm); box-shadow: var(--shadow-pop); animation: subir var(--t-slow) var(--ease-out); }
.toast.saliendo { animation: bajar var(--t-base) var(--ease) forwards; }
.toast .punto { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--lime); flex: none; }
.toast.bad .punto { background: #FCA5A5; } .toast.warn .punto { background: #FCD34D; }
.toast b { display: block; }
.menu { position: absolute; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-pop); padding: var(--s-1); z-index: 30; animation: brotar var(--t-fast) var(--ease-out); }
.menu button { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: 8px var(--s-3); border: 0; background: transparent; border-radius: var(--r-s); text-align: left; cursor: pointer; font-size: var(--fs-sm); }
.menu button:hover { background: var(--surface-2); }
.menu button.peligro { color: var(--bad); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-1) 0; }
.tooltip { position: absolute; padding: 5px 8px; background: var(--ink); color: var(--ink-inv); font-size: var(--fs-xs); border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 60; animation: aparecer var(--t-fast) var(--ease); }

/* ---------- Carga: skeleton, spinner, progreso, SUNAT ---------- */
.esqueleto { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: brillo 1.4s ease infinite; border-radius: 6px; min-height: 12px; }
.esqueleto.linea { height: 12px; } .esqueleto.titulo { height: 20px; width: 40%; } .esqueleto.bloque { height: 96px; border-radius: var(--r-m); } .esqueleto.circulo { width: 32px; height: 32px; border-radius: 50%; }
.girar { width: 18px; height: 18px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: girar .8s linear infinite; flex: none; }
.girar.inv { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
.girar.lg { width: 32px; height: 32px; border-width: 3px; }
.progreso { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.progreso > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width var(--t-slow) var(--ease); }
.progreso.lima > i { background: var(--lime); }
.progreso.indeterminada > i { width: 40%; animation: deslizar-prog 1.2s var(--ease) infinite; }
.puntos { display: inline-flex; gap: 4px; }
.puntos i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: rebotar 1s var(--ease) infinite; }
.puntos i:nth-child(2) { animation-delay: .15s; } .puntos i:nth-child(3) { animation-delay: .3s; }
.envio { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-m); background: var(--surface-2); }
.envio .etapas { display: flex; align-items: center; gap: var(--s-2); }
.envio .etapa { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-3); }
.envio .etapa i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.envio .etapa.hecha { color: var(--ink); } .envio .etapa.hecha i { background: var(--lime); }
.envio .etapa.activa { color: var(--accent); } .envio .etapa.activa i { background: var(--accent); animation: pulso 1.2s var(--ease) infinite; }
.envio .etapas .raya { flex: 1; height: 2px; background: var(--line); }
.sello { width: 56px; height: 56px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; animation: brotar var(--t-slow) var(--ease-spring); }
.sello svg { width: 28px; height: 28px; stroke: var(--lime-ink); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: trazar .5s var(--ease-out) .15s forwards; }

/* ---------- Elevación al pasar (v3: sin 3D, solo un levantamiento plano) ---------- */
.inclina { transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.inclina:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* ---------- Movimiento ---------- */
/* fill-mode backwards: tras la entrada el elemento recupera su transform propio (.inclina sigue funcionando). */
.entra { animation: entrar var(--t-slow) var(--ease-out) backwards; }
.entra-tarde { animation: entrar var(--t-slow) var(--ease-out) backwards; animation-delay: var(--retraso, 0ms); }
.lista-entra > * { animation: entrar var(--t-slow) var(--ease-out) backwards; }
.lista-entra > *:nth-child(1) { animation-delay: 0ms; } .lista-entra > *:nth-child(2) { animation-delay: 40ms; } .lista-entra > *:nth-child(3) { animation-delay: 80ms; } .lista-entra > *:nth-child(4) { animation-delay: 120ms; } .lista-entra > *:nth-child(5) { animation-delay: 160ms; } .lista-entra > *:nth-child(6) { animation-delay: 200ms; } .lista-entra > *:nth-child(7) { animation-delay: 240ms; } .lista-entra > *:nth-child(8) { animation-delay: 280ms; } .lista-entra > *:nth-child(n+9) { animation-delay: 320ms; }
.pagina-entra { animation: pagina var(--t-page) var(--ease-out) backwards; }
[hidden] { display: none !important; }
.resalta { animation: resaltar 1.6s var(--ease) 1; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pagina { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes brotar { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bajar { to { opacity: 0; transform: translateY(10px); } }
@keyframes deslizar-izq { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ensanchar { from { transform: scaleX(.4); } to { transform: none; } }
@keyframes pulso { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .5; } }
@keyframes brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes flotar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes deslizar-prog { from { transform: translateX(-120%); } to { transform: translateX(300%); } }
@keyframes rebotar { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes resaltar { 0% { background: var(--lime-soft); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ---------- Kit v3: escena de documento, revelado, anillo, traza, carga, botón con estados, vistas y filas ---------- */
/* Escena de documento 2D. El estado base es el cuadro final (movimiento reducido o sin animación);
   el ciclo de 7 s solo se aplica con movimiento permitido. */
.escena-doc { --w: 180px; --h: 230px; font-size: 12px; position: relative; width: var(--w); height: var(--h); margin-inline: auto; flex: none; }
.escena-doc.grande { --w: 240px; --h: 300px; font-size: 16px; }
.escena-doc .hoja { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .8em; padding: 1.4em 1.3em 1.2em; background: var(--surface); border: 1px solid var(--line); border-radius: 1.1em; box-shadow: var(--shadow-doc); }
.escena-doc .hoja.atras { padding: 0; background: var(--surface-2); transform: translate(-.9em, .5em) rotate(-5deg); box-shadow: var(--shadow-lift); }
.escena-doc .serie { font-size: .95em; color: var(--ink-2); }
.escena-doc .l { display: block; flex: none; height: .62em; border-radius: .31em; background: var(--surface-3); transform-origin: left center; }
.escena-doc .l.corta { width: 58%; }
.escena-doc .total { order: 2; display: flex; align-items: baseline; justify-content: space-between; gap: .6em; padding-top: .8em; border-top: 1px solid var(--line); }
.escena-doc .total em { font-style: normal; font-size: .85em; color: var(--ink-3); }
.escena-doc .total b { font-family: var(--mono); font-size: 1.15em; font-weight: 600; letter-spacing: -.02em; }
.escena-doc .hoja .sello { order: 1; width: auto; height: auto; display: block; margin: auto; padding: .35em .8em; border-radius: .5em; border: .17em solid var(--lime-ink); background: var(--lime-soft); color: var(--lime-ink); font-size: .76em; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; text-align: center; white-space: nowrap; transform: rotate(-7deg); animation: none; }
.escena-doc .check { position: absolute; top: -1.1em; right: -1.1em; width: 4em; height: 4em; overflow: visible; filter: drop-shadow(0 4px 8px rgba(18, 20, 23, .18)); }
.escena-doc .check circle { fill: var(--lime); stroke: var(--lime-ink); stroke-width: 2.5; stroke-dasharray: 133; stroke-dashoffset: 0; transform-origin: center; transform-box: fill-box; transform: rotate(-90deg); }
.escena-doc .check path { fill: none; stroke: var(--lime-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .escena-doc { animation: doc-ciclo 7s linear infinite, doc-flota 7s ease-in-out infinite; }
  .escena-doc .serie { animation: doc-serie 7s var(--ease-out) infinite; }
  .escena-doc .l:nth-of-type(1) { animation: doc-l1 7s var(--ease-out) infinite; }
  .escena-doc .l:nth-of-type(2) { animation: doc-l2 7s var(--ease-out) infinite; }
  .escena-doc .l:nth-of-type(3) { animation: doc-l3 7s var(--ease-out) infinite; }
  .escena-doc .l:nth-of-type(4) { animation: doc-l4 7s var(--ease-out) infinite; }
  .escena-doc .total { animation: doc-total 7s var(--ease-out) infinite; }
  .escena-doc .hoja .sello { animation: doc-sello 7s var(--ease-out) infinite; }
  .escena-doc .check { animation: doc-check 7s var(--ease-spring) infinite; }
  .escena-doc .check circle { animation: doc-aro 7s var(--ease-out) infinite; }
  .escena-doc .check path { animation: doc-tick 7s var(--ease-out) infinite; }
}
@keyframes doc-ciclo { 0% { opacity: 0; } 3% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes doc-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes doc-serie { 0%, 3% { opacity: 0; transform: translateY(4px); } 7%, 100% { opacity: 1; transform: none; } }
@keyframes doc-l1 { 0%, 7% { transform: scaleX(0); } 13%, 100% { transform: scaleX(1); } }
@keyframes doc-l2 { 0%, 12% { transform: scaleX(0); } 18%, 100% { transform: scaleX(1); } }
@keyframes doc-l3 { 0%, 17% { transform: scaleX(0); } 23%, 100% { transform: scaleX(1); } }
@keyframes doc-l4 { 0%, 22% { transform: scaleX(0); } 28%, 100% { transform: scaleX(1); } }
@keyframes doc-total { 0%, 27% { opacity: 0; } 33%, 100% { opacity: 1; } }
@keyframes doc-sello { 0%, 37% { opacity: 0; transform: translate(26px, -8px) rotate(-14deg) scale(1.25); } 44% { opacity: 1; transform: translate(0, 0) rotate(-7deg) scale(.94); } 48% { transform: rotate(-7deg) scale(1.03); } 51%, 100% { opacity: 1; transform: rotate(-7deg) scale(1); } }
@keyframes doc-check { 0%, 51% { opacity: 0; transform: scale(.7); } 56%, 100% { opacity: 1; transform: scale(1); } }
@keyframes doc-aro { 0%, 52% { stroke-dashoffset: 133; fill-opacity: 0; } 58% { stroke-dashoffset: 0; fill-opacity: 0; } 62%, 100% { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes doc-tick { 0%, 58% { stroke-dashoffset: 40; } 63%, 100% { stroke-dashoffset: 0; } }

/* Revelado al desplazar: el kit pone .visto al entrar en pantalla; --i escalona el grupo */
.revela { opacity: 0; }
.revela.visto { opacity: 1; animation: revelar var(--t-slow) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes revelar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .revela { opacity: 1; } .revela.visto { animation: none; } }

/* Anillo de progreso: el kit anima .valor hasta data-pct al entrar en pantalla */
svg.anillo { width: 56px; height: 56px; flex: none; transform: rotate(-90deg); }
svg.anillo circle { fill: none; stroke-width: 4.5; }
svg.anillo .pista { stroke: var(--surface-3); }
svg.anillo .valor { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 125.66; stroke-dashoffset: 125.66; transition: stroke-dashoffset var(--t-draw) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
svg.anillo.lima .pista { stroke: var(--lime-soft); }
svg.anillo.lima .valor { stroke: var(--lime); }
.anillo-caja { position: relative; display: inline-grid; place-items: center; flex: none; }
.anillo-caja > b { position: absolute; font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { svg.anillo .valor { transition: none; } }

/* Trazo (firma, línea): el kit fija el largo real y lo dibuja al entrar en pantalla */
svg.traza { width: 180px; height: 60px; color: var(--accent); overflow: visible; }
svg.traza path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset var(--t-draw) var(--ease-out); }
svg.traza line { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 4; }
@media (prefers-reduced-motion: reduce) { svg.traza path { transition: none; } }

/* Esqueleto agrupado (bloques .b) y paso a contenido con fundido cruzado */
.esqueleto:has(> .b) { display: grid; gap: var(--s-2); background: none; animation: none; min-height: 0; border-radius: 0; }
.esqueleto .b { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: brillo 1.4s ease infinite; }
.esqueleto .b.t { height: 30px; width: 55%; }
.esqueleto .b.corta { width: 40%; }
.esqueleto .b.alto { height: 56px; border-radius: var(--r-m); }
.carga-fundido { display: grid; }
.carga-fundido > * { grid-area: 1 / 1; min-width: 0; }
.carga-sale { animation: desvanecer var(--t-base) var(--ease) forwards; }
.carga-entra { animation: entrar var(--t-slow) var(--ease-out) backwards; }
@keyframes desvanecer { to { opacity: 0; } }

/* Botón con estados: [data-accion-demo="Texto"] pasa a cargando, luego ok con el texto indicado y vuelve */
.btn .ind { display: none; position: relative; width: 16px; height: 16px; flex: none; }
.btn.cargando .ind, .btn.ok .ind { display: inline-block; }
.btn .ind .spin { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; animation: girar .8s linear infinite; transition: opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease); }
.btn .ind .tick { position: absolute; inset: 0; width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; }
.btn.ok .ind .spin { animation: none; opacity: 0; transform: scale(.4); }
.btn.ok .ind .tick { animation: trazar var(--t-slow) var(--ease-out) forwards; }
.btn.cargando, .btn.ok { pointer-events: none; }
.btn.ok { --btn-bg: var(--lime); --btn-ink: var(--lime-ink); --btn-line: var(--lime); }
.btn.ok:hover { background: var(--lime); border-color: var(--lime); }
.btn .et.cambia { animation: entrar var(--t-base) var(--ease-out) backwards; }

/* Cambio de vista: pestañas y conmutador funden el panel que entra */
.cambio-vista { animation: cambio-vista var(--t-base) var(--ease-out) backwards; }
@keyframes cambio-vista { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Filas que entran en escalón: table.tabla.lista-entra (el kit pone .fila-in al cargar y tras filtrar u ordenar) */
table.lista-entra > * { animation: none; }
table.tabla.lista-entra tbody tr.fila-in { animation: entrar var(--t-slow) var(--ease-out) backwards; animation-delay: calc(var(--n, 0) * 30ms); }

/* ---------- Asistente v3: mascota arrastrable (borde más cercano, posición recordada) y panel anclado a su lado ---------- */
.mascota { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 48; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; background: var(--lime); color: var(--lime-ink); box-shadow: var(--shadow-pop); cursor: grab; display: grid; place-items: center; animation: flotar 4.5s var(--ease) infinite; transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast) var(--ease); touch-action: none; user-select: none; -webkit-user-select: none; }
.mascota:hover { transform: scale(1.08) rotate(-4deg); animation-play-state: paused; }
/* Movida por el usuario: queda por encima de la barra de opciones de las maquetas para no perder el clic */
.mascota.movida { z-index: 71; }
/* Con un panel lateral abierto, la mascota y los toasts se corren a la izquierda para no tapar sus botones */
body:has(.lateral:not([hidden])) .mascota { right: calc(min(480px, 100%) + var(--s-5)); }
body:has(.lateral.rapida:not([hidden])) .mascota { right: calc(min(440px, 100%) + var(--s-5)); }
body:has(.lateral:not([hidden])) .toasts { right: calc(min(480px, 100%) + var(--s-5)); }
body:has(.lateral.rapida:not([hidden])) .toasts { right: calc(min(440px, 100%) + var(--s-5)); }
body:has(.lateral:not([hidden])) .asistente { right: calc(min(480px, 100%) + var(--s-5)); }
body:has(.lateral.rapida:not([hidden])) .asistente { right: calc(min(440px, 100%) + var(--s-5)); }
.mascota:active { transform: scale(.96); }
.mascota.arrastrando { cursor: grabbing; animation: none; transition: none; transform: scale(1.1); }
.mascota.arrastrando .globo { display: none; }
.mascota svg { width: 32px; height: 32px; overflow: visible; }
.mascota .ojo { fill: var(--lime-ink); transform-origin: center; transform-box: fill-box; animation: parpadeo 4.8s infinite; }
.mascota .ojo + .ojo { animation-delay: .05s; }
.mascota .boca { fill: none; stroke: var(--lime-ink); stroke-width: 2.2; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 0; transition: transform var(--t-base) var(--ease-spring); vector-effect: non-scaling-stroke; }
.mascota:hover .boca, .mascota.abierta .boca { transform: scale(1.22, 1.7); }
.mascota .antena { position: absolute; left: 50%; top: -9px; width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: var(--lime-ink); pointer-events: none; }
.mascota .antena::before { content: ''; position: absolute; left: 50%; top: -6px; width: 8px; height: 8px; margin-left: -5px; border-radius: 50%; background: var(--lime); border: 2px solid var(--lime-ink); animation: brillo-antena 2.4s var(--ease) infinite; }
@keyframes brillo-antena { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 8px 3px var(--lime); } }
.mascota .aviso { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 11px; font-weight: 600; display: grid; place-items: center; border: 2px solid var(--bg); }
.mascota .globo { position: absolute; right: 58px; bottom: 10px; padding: 7px 11px; border-radius: 12px 12px 4px 12px; background: var(--ink); color: var(--ink-inv); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; pointer-events: none; animation: brotar var(--t-base) var(--ease-out) both; }
.mascota .globo.saliendo { animation: bajar var(--t-base) var(--ease) forwards; }
/* La cola del globo cambia de lado según dónde esté la mascota (data-lado lo pone el kit) */
.mascota[data-lado$="izquierda"] .globo { right: auto; left: 58px; border-radius: 12px 12px 12px 4px; }
.mascota[data-lado^="arriba"] .globo { bottom: auto; top: 10px; border-radius: 12px 4px 12px 12px; }
.mascota[data-lado="arriba-izquierda"] .globo { border-radius: 4px 12px 12px 12px; }
.mascota[data-lado="centro"] .globo { right: 50%; left: auto; bottom: calc(100% + var(--s-2)); top: auto; translate: 50% 0; border-radius: 12px 12px 4px 12px; }
.mascota.abierta .globo { display: none; }
.mascota.abierta { animation: none; }
.asistente { position: fixed; right: var(--s-5); bottom: calc(var(--s-5) + 68px); z-index: 48; width: min(380px, calc(100% - 40px)); height: min(560px, calc(100vh - 130px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; overflow: hidden; animation: asistente-abre var(--t-base) var(--ease-out); transform-origin: bottom right; }
.asistente[data-lado="abajo-izquierda"] { transform-origin: bottom left; }
.asistente[data-lado="arriba-derecha"] { transform-origin: top right; }
.asistente[data-lado="arriba-izquierda"] { transform-origin: top left; }
.asistente[data-lado="centro"] { transform-origin: 50% 100%; }
@keyframes asistente-abre { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
.asistente .cab { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--side-bg); color: var(--side-ink); }
.asistente .cab .cara { width: 32px; height: 32px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; flex: none; }
.asistente .cab .cara svg { width: 22px; height: 22px; } .asistente .cab .cara .ojo { fill: var(--lime-ink); } .asistente .cab .cara .boca { fill: none; stroke: var(--lime-ink); stroke-width: 2.2; stroke-linecap: round; }
.asistente .cab b { display: block; font-size: var(--fs-md); } .asistente .cab span { font-size: var(--fs-xs); color: var(--side-ink-2); }
.asistente .cab .btn { margin-left: auto; color: var(--side-ink-2); }
.asistente .charla { flex: 1; overflow-y: auto; padding: var(--s-4); display: grid; gap: var(--s-3); align-content: start; }
.burbuja { max-width: 90%; padding: 10px 12px; border-radius: 14px; border-bottom-left-radius: 4px; background: var(--surface-2); font-size: var(--fs-sm); line-height: 1.45; animation: subir var(--t-base) var(--ease-out) backwards; }
.burbuja.mia { margin-left: auto; background: var(--accent); color: var(--accent-ink); border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.burbuja .fuente { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-3); }
.burbuja .acciones { display: flex; gap: var(--s-1); margin-top: var(--s-2); flex-wrap: wrap; }
.burbuja .monto { font-family: var(--mono); font-weight: 600; }
.escribiendo { display: inline-flex; gap: 4px; padding: 6px 2px; }
.escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: rebotar 1s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; } .escribiendo i:nth-child(3) { animation-delay: .3s; }
.asistente .sugerencias { display: flex; flex-wrap: wrap; gap: var(--s-1); padding: 0 var(--s-4) var(--s-2); }
.asistente .sugerencias button { height: 26px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--fs-xs); font-weight: 500; cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.asistente .sugerencias button:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-soft-ink); }
.asistente .escribir { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.asistente .escribir .entrada { flex: 1; }
@keyframes parpadeo { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* ---------- Barra de opciones de la maqueta (solo en las maquetas, no en el producto) ---------- */
.opciones-maqueta { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: var(--s-2); padding: 6px 8px 6px 12px; background: var(--ink); color: var(--ink-inv); border-radius: var(--r-pill); box-shadow: var(--shadow-pop); font-size: var(--fs-sm); width: max-content; max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center; }
.opciones-maqueta button { white-space: nowrap; }
.opciones-maqueta .titulo { font-weight: 600; opacity: .8; }
.opciones-maqueta button { height: 28px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.25); background: transparent; color: inherit; font-weight: 600; font-size: var(--fs-xs); cursor: pointer; transition: background var(--t-fast) var(--ease); }
.opciones-maqueta button:hover { background: rgba(255,255,255,.12); }
.opciones-maqueta button.activa { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.opciones-maqueta .nota { opacity: .7; font-size: var(--fs-xs); }

/* ---------- Teléfono ---------- */
@media (max-width: 900px) {
  .shell, .shell.compacta { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: var(--side-w); transform: translateX(-100%); transition: transform var(--t-slow) var(--ease-out); z-index: 45; }
  .shell.menu-abierto .side { transform: none; }
  .top { padding: 0 var(--s-4); }
  .top .buscar { min-width: 0; width: 36px; padding: 0; justify-content: center; } .top .buscar span, .top .buscar kbd { display: none; }
  .contenido { padding: var(--s-4) var(--s-4) calc(var(--s-9) + 56px); }
  .cabecera h1 { font-size: var(--fs-2xl); }
  .grid-2, .grid-3, .grid-4, .grid-form { grid-template-columns: 1fr; }
  .panel.pegajoso { position: static; }
  .pie-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface); border-top: 1px solid var(--line); }
  .pie-movil .total { font-family: var(--mono); font-weight: 600; font-size: var(--fs-xl); }
  .opciones-maqueta { bottom: 76px; flex-wrap: nowrap; overflow-x: auto; padding: 5px 6px 5px 10px; }
  .opciones-maqueta .nota { display: none; }
  .opciones-maqueta .titulo { white-space: nowrap; }
  .solo-escritorio { display: none !important; }
  .mascota { right: var(--s-4); bottom: 124px; width: 46px; height: 46px; }
  .mascota svg { width: 30px; height: 30px; }
  .mascota .globo { right: 56px; }
  .mascota[data-lado$="izquierda"] .globo { left: 56px; }
  .asistente { right: var(--s-2); left: var(--s-2); width: auto; bottom: 182px; height: min(480px, calc(100vh - 200px)); }
  .toasts { bottom: 184px; right: var(--s-4); }
  .ficha-datos { grid-template-columns: 1fr; }
  .conmutador { margin-left: auto; }
  .side-flotante { display: none; }
}
@media (min-width: 901px) { .solo-movil { display: none !important; } .pie-movil { display: none; } }

/* ================================ Kit v4 ================================ */

/* ---------- Barra de categorías (D29): primera línea de filtro de cada lista ---------- */
.categorias { position: relative; display: flex; align-items: center; gap: var(--s-2); min-height: 36px; width: 100%; min-width: 0; }
.categorias > .cat { flex: none; }
.cat-desliza { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s-2); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; scroll-padding-inline: 4px; overscroll-behavior-x: contain; contain: inline-size; padding: 4px; margin: -4px; }
.cat-desliza::-webkit-scrollbar { display: none; }
.cat-desliza.arrastrando { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.cat-desliza.arrastrando .cat { pointer-events: none; }
/* Máscaras en los extremos: solo cuando hay desborde; el kit alterna .al-inicio y .al-final */
.cat-desliza.desborda { --fade-i: 28px; --fade-d: 28px; -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--fade-i), black calc(100% - var(--fade-d)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, black var(--fade-i), black calc(100% - var(--fade-d)), transparent 100%); }
.cat-desliza.desborda.al-inicio { --fade-i: 0px; }
.cat-desliza.desborda.al-final { --fade-d: 0px; }
.cat { display: inline-flex; align-items: center; gap: var(--s-2); height: 36px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; cursor: pointer; scroll-snap-align: start; transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.cat:hover { background: var(--surface-3); color: var(--ink); }
.cat .n { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); }
.cat.activa { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cat.activa .n { color: var(--accent-ink); opacity: .8; }
.cat:focus-visible { box-shadow: var(--focus); }
/* Flechas (las inyecta el kit): solo en escritorio con puntero, al pasar sobre la barra y si hay recorrido */
.cat-flecha { position: absolute; top: 50%; width: 28px; height: 28px; margin-top: -14px; padding: 0; display: none; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-lift); z-index: 2; transition: background var(--t-fast) var(--ease); }
.cat-flecha:hover { background: var(--surface-3); }
.cat-flecha svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.cat-flecha-der { right: 2px; }
@media (hover: hover) and (min-width: 901px) {
  .categorias:hover .cat-desliza.desborda:not(.al-inicio) ~ .cat-flecha-izq { display: grid; }
  .categorias:hover .cat-desliza.desborda:not(.al-final) ~ .cat-flecha-der { display: grid; }
}

/* ---------- Constructor de consultas colapsado (D29) ---------- */
.constructor { display: block; width: fit-content; max-width: 100%; }
.constructor > summary { display: inline-flex; align-items: center; gap: var(--s-2); height: 28px; padding: 0 10px; border-radius: var(--r-s); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; user-select: none; transition: background var(--t-fast) var(--ease); }
.constructor > summary::-webkit-details-marker { display: none; }
.constructor > summary:hover { background: var(--surface-3); }
.constructor > summary svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.constructor > summary .n { min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 11px; font-weight: 600; }
.constructor[open] { width: auto; flex: 1 1 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s-2) var(--s-4) var(--s-4); margin-top: var(--s-2); animation: acordeon-abre var(--t-slow) var(--ease-out); }
.constructor .reglas { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.constructor .regla { display: grid; grid-template-columns: 160px 140px minmax(0, 1fr) 36px; gap: var(--s-2); align-items: center; }
.constructor .regla select, .constructor .regla input { height: 36px; min-width: 0; width: 100%; padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-md); transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.constructor .regla input::placeholder { color: var(--ink-3); }
.constructor .regla select:focus-visible, .constructor .regla input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.constructor .regla .btn-icono { width: 36px; height: 36px; }
.constructor .regla .btn:disabled { opacity: .35; }
.constructor .pie { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.constructor .pie .crece { flex: 1 1 auto; }
@media (max-width: 700px) {
  .constructor .regla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .constructor .regla [data-valor] { grid-column: 1 / -1; grid-row: 2; }
  .constructor .pie .muted { flex: 1 1 100%; order: 3; }
}

/* ---------- Acordeón de módulos (11) ---------- */
.acordeon { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.acordeon + .acordeon { margin-top: var(--s-2); }
.acordeon > summary { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-4); cursor: pointer; list-style: none; user-select: none; border-radius: var(--r-m); }
.acordeon > summary::-webkit-details-marker { display: none; }
.acordeon > summary::before { content: ''; flex: none; width: 7px; height: 7px; margin: 0 4px 0 2px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); transition: transform var(--t-base) var(--ease); }
.acordeon[open] > summary::before { transform: rotate(45deg); }
.acordeon > summary:hover { background: var(--surface-2); }
.acordeon > summary .titulo { flex: 1 1 auto; min-width: 0; font-weight: 600; transition: color var(--t-base) var(--ease), opacity var(--t-base) var(--ease); }
.acordeon > summary .modulo-activo { margin-left: auto; }
.acordeon[open] > summary { border-bottom: 1px solid var(--line); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.acordeon > .cuerpo { padding: var(--s-3) var(--s-4) var(--s-4); animation: acordeon-abre var(--t-slow) var(--ease-out); }
.acordeon.inactivo > summary .titulo, .acordeon.inactivo > summary .chip { opacity: .45; }
.acordeon.inactivo > summary .titulo { color: var(--ink-3); }
.acordeon.inactivo > .cuerpo { display: none; }
@keyframes acordeon-abre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Interruptor con casilla real (label.switch > input + i) */
label.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--line-2); transition: background var(--t-base) var(--ease); }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: transform var(--t-base) var(--ease); }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(16px); }
.switch input:focus-visible + i { box-shadow: var(--focus); }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + i { opacity: .5; }

/* ---------- Tira de imágenes animada (16) ---------- */
.carrusel { --car-w: 420px; --car-gap: var(--s-5); position: relative; overflow: hidden; padding: var(--s-4) 0 var(--s-7); -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%); }
.carrusel .pista { display: flex; width: max-content; }
.carrusel figure { flex: none; width: var(--car-w); margin: 0 var(--car-gap) 0 0; }
.carrusel figure img { display: block; width: 100%; aspect-ratio: 420 / 262; height: auto; object-fit: cover; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface-2); box-shadow: 0 1px 2px rgba(18, 20, 23, .06), 0 6px 14px rgba(18, 20, 23, .07), 0 18px 36px rgba(18, 20, 23, .08); transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); }
.carrusel figure:hover img { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(18, 20, 23, .06), 0 10px 20px rgba(18, 20, 23, .09), 0 26px 48px rgba(18, 20, 23, .11); }
.carrusel figcaption { margin-top: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.carrusel.corre .pista { animation: carrusel-corre var(--seg, 48s) linear infinite; }
.carrusel.corre:hover .pista, .carrusel.corre:focus-within .pista { animation-play-state: paused; }
@keyframes carrusel-corre { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.carrusel.solapa { margin-bottom: -96px; z-index: 2; }
@media (max-width: 600px) { .carrusel { --car-w: 260px; --car-gap: var(--s-4); } }
@media (prefers-reduced-motion: reduce) { .carrusel.corre .pista { animation: none; } .carrusel figure img { transition: none; } }

/* ---------- Movimiento del sitio público (16, 20, 17): variantes de .revela y compañeras ---------- */
.revela.desde-izq.visto { animation: revelar-izq 560ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
.revela.desde-der.visto { animation: revelar-der 560ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
.revela.escala.visto { animation: revelar-escala 560ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes revelar-izq { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@keyframes revelar-der { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes revelar-escala { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
/* Línea que crece de 0 a 100 % de ancho al entrar en pantalla (<i> o <hr>) */
.linea-crece { display: block; width: 0; height: 2px; margin: 0; border: 0; background: var(--line-2); transition: width 700ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.linea-crece.visto { width: 100%; }
/* Paralaje: el kit mueve la propiedad translate (tope 24 px) */
.parallax { will-change: translate; }
/* Ken Burns de una sola vez sobre una imagen (el contenedor recorta) */
:has(> .foto-lenta) { overflow: hidden; }
.foto-lenta { transform-origin: center; }
.foto-lenta.visto { animation: foto-lenta 14s var(--ease) both; }
@keyframes foto-lenta { from { transform: scale(1); } to { transform: scale(1.06); } }
/* Navegador automatizado: estado final al instante */
html.automatizado .revela.desde-izq.visto, html.automatizado .revela.desde-der.visto, html.automatizado .revela.escala.visto { animation: none; }
html.automatizado .linea-crece { transition: none; }
html.automatizado .foto-lenta.visto { animation: none; transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .revela.desde-izq.visto, .revela.desde-der.visto, .revela.escala.visto { animation: none; }
  .linea-crece { width: 100%; transition: none; }
  .parallax { will-change: auto; translate: none !important; }
  .foto-lenta.visto { animation: none; transform: none; }
}

/* ---------- Barra pública sobria (16, 17, 18): lisa, sin desenfoque, sin píldora, sin degradado ---------- */
.nav.sobria { position: sticky; top: 0; z-index: 35; background: var(--surface); border-bottom: 1px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; box-shadow: none; transition: box-shadow var(--t-base) var(--ease); }
.nav.sobria.pegada, .nav.sobria.sombra { box-shadow: 0 6px 18px rgba(18, 20, 23, .07); }
.nav.sobria .nav-in { align-items: center; gap: var(--s-5); }
.nav.sobria .nav-marca { color: var(--ink); font-weight: 700; }
.nav.sobria .nav-links a { border-radius: var(--r-s); background: transparent; color: var(--ink-2); font-weight: 600; }
.nav.sobria .nav-links a:hover, .nav.sobria .nav-links a.activo { background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--line-2); }
.nav.sobria .nav-links a.activo { text-decoration-color: var(--accent); }
.nav.sobria .nav-acciones { margin-left: 0; gap: var(--s-4); }
.nav.sobria .btn-entrar, .nav.sobria .nav-entrar { background: transparent; border-color: transparent; padding: 0 var(--s-2); color: var(--ink); }
.nav.sobria .btn-entrar:hover, .nav.sobria .nav-entrar:hover { background: transparent; border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 901px) {
  .nav.sobria .nav-in { display: flex; }
  .nav.sobria .nav-links { display: flex; flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 900px) {
  .nav.sobria .nav-links, .nav.sobria .btn-entrar, .nav.sobria .nav-entrar { display: none; }
  .nav.sobria .nav-acciones { margin-left: auto; gap: var(--s-2); }
}