/* Asentado — estilos.css v0.6.0 ENTERPRISE
 * Rediseño completo: tokens refinados, glass multicapa, tipografía cuidada,
 * dashboard con KPIs animados, transiciones entre vistas, skeletons, PWA pulido.
 * Estándar: ESTANDAR-UI-UX-APP (15 puntos) + enterprise polish.
 */

/* ═════════════════════════════ TOKENS ═════════════════════════════ */
:root{
  /* Fondo: noche verde profunda con capas */
  --bg0:#040d09; --bg1:#071510; --bg2:#0a1c14; --bg3:#0e2319;
  /* Tinta */
  --ink:#eef8f2; --ink-2:#c4d8cc; --muted:#8ba698; --faint:#5e7a6c;
  /* Marca: esmeralda + ámbar (verde billete) */
  --verde:#25c487; --verde-2:#5fe8b6; --verde-3:#0fa370;
  --ambar:#f0b53c; --ambar-2:#ffd76e; --ambar-3:#c99020;
  --danger:#f4607a; --danger-2:#ff8a9e;
  --vio:#9b7ff0; --vio-2:#c0a8ff;
  --info:#4ec2f4;
  /* Superficies de vidrio */
  --glass:rgba(8,22,16,.62); --glass-2:rgba(10,28,20,.48); --glass-3:rgba(255,255,255,.04);
  --glass-border:rgba(140,166,152,.14); --glass-border-2:rgba(140,166,152,.08);
  /* Líneas */
  --line:rgba(140,166,152,.14); --line-soft:rgba(140,166,152,.08); --line-strong:rgba(140,166,152,.22);
  /* Radios */
  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-sm:10px; --r-xs:7px;
  /* Sombras */
  --shadow-xs:0 2px 8px rgba(0,6,3,.25);
  --shadow-sm:0 4px 16px rgba(0,6,3,.3);
  --shadow-md:0 8px 32px rgba(0,6,3,.4);
  --shadow-lg:0 20px 60px rgba(0,6,3,.5);
  --shadow-xl:0 32px 80px rgba(0,6,3,.6);
  /* Glow */
  --glow-verde:0 0 0 1px rgba(37,196,135,.22), 0 8px 24px rgba(37,196,135,.12);
  --glow-ambar:0 0 0 1px rgba(240,181,60,.22), 0 8px 24px rgba(240,181,60,.1);
  --glow-danger:0 0 0 1px rgba(244,96,122,.22), 0 8px 24px rgba(244,96,122,.1);
  /* Movimiento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:120ms; --dur:180ms; --dur-slow:320ms;
  /* Tipografía */
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"Cascadia Code","Fira Code","SF Mono",monospace;
  --font-size-xs:.6875rem; --font-size-sm:.8125rem; --font-size-md:.9375rem; --font-size-lg:1.0625rem; --font-size-xl:1.375rem; --font-size-2xl:1.75rem; --font-size-3xl:2.25rem;
}

/* ═════════════════════════ RESET ═════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;scrollbar-color:rgba(139,166,152,.3) transparent}
body{
  background:var(--bg0); color:var(--ink);
  font-family:var(--font-body); font-size:var(--font-size-md); line-height:1.6;
  min-height:100vh; min-height:100dvh;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.sin-scroll{overflow:hidden}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
a{color:var(--verde-2);text-decoration:none;transition:opacity var(--dur) var(--ease)}
a:hover{opacity:.8}
code{font-family:var(--font-mono);font-size:.85em}
::selection{background:rgba(37,196,135,.25);color:var(--ink)}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(139,166,152,.2);border-radius:99px;border:2px solid var(--bg0)}
::-webkit-scrollbar-thumb:hover{background:rgba(139,166,152,.35)}
::-webkit-scrollbar-corner{background:transparent}

/* ═══════════════════ AURORA (fondo animado) ═══════════════════ */
.bg-aurora{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(ellipse 1200px 700px at 70% -10%, rgba(37,196,135,.06), transparent 60%),
    radial-gradient(ellipse 900px 500px at -10% 100%, rgba(240,181,60,.04), transparent 55%),
    radial-gradient(ellipse 600px 400px at 50% 50%, rgba(15,163,112,.03), transparent 70%),
    linear-gradient(170deg, var(--bg0) 0%, var(--bg1) 40%, var(--bg2) 70%, var(--bg0) 100%);
}
.blob{
  position:absolute;border-radius:50%;
  filter:blur(100px);opacity:.35;
  will-change:transform;
  animation:deriva 30s var(--ease) infinite alternate;
}
.b1{width:50vw;height:50vw;left:-15vw;top:-18vw;background:rgba(37,196,135,.12)}
.b2{width:40vw;height:40vw;right:-12vw;top:20vh;background:rgba(240,181,60,.07);animation-delay:-10s;animation-duration:36s}
.b3{width:35vw;height:35vw;left:28vw;bottom:-20vw;background:rgba(95,232,182,.06);animation-delay:-20s;animation-duration:24s}
@keyframes deriva{
  0%{transform:translate(0,0) scale(1) rotate(0deg)}
  33%{transform:translate(4vw,3vh) scale(1.08) rotate(120deg)}
  66%{transform:translate(-3vw,5vh) scale(.95) rotate(240deg)}
  100%{transform:translate(5vw,-4vh) scale(1.05) rotate(360deg)}
}

/* Grid sutil encima de la aurora */
.bg-aurora::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(139,166,152,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,166,152,.015) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black,transparent);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black,transparent);
}

/* ═══════════════ GLASS (3 capas del estándar) ═══════════════ */
.glass{
  background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.015) 40%,rgba(255,255,255,.008) 100%);
  backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.1);
  border-radius:var(--r-lg);
  position:relative;
  overflow:hidden;
}
.glass::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse 100% 50% at 50% 0%,rgba(255,255,255,.03),transparent 70%);
}
.panel, .cabecera, .modal, .barra-filtros, .zona-carga, .tarjeta-total, .toast, .plantilla-card, .resumen-cliente{
  background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.012) 50%,rgba(255,255,255,.006) 100%), var(--glass);
  backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.08);
}

/* ═════════════════════════ HEADER ═════════════════════════ */
.cabecera{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:12px;
  padding:10px clamp(16px,4vw,48px);
  border-left:none;border-right:none;border-top:none;border-radius:0;
  background:linear-gradient(180deg,rgba(4,13,9,.85),rgba(4,13,9,.7));
  backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:0 1px 0 var(--line), 0 8px 32px rgba(0,6,3,.3);
}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}
.logo{width:40px;height:40px;filter:drop-shadow(0 4px 12px rgba(37,196,135,.4));transition:transform var(--dur-slow) var(--ease-spring)}
.marca:hover .logo{transform:scale(1.06) rotate(-3deg)}
.marca-nombre{font-size:var(--font-size-lg);font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.marca-acento{
  background:linear-gradient(135deg,var(--verde-2),var(--ambar-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav{display:flex;gap:2px;margin-left:8px;margin-inline:auto}
.nav-enlace{
  color:var(--muted);font-weight:600;font-size:var(--font-size-sm);
  padding:10px 18px;border-radius:var(--r-sm);
  transition:all var(--dur) var(--ease);
  position:relative;letter-spacing:.01em;
}
.nav-enlace:hover{color:var(--ink);background:var(--glass-3)}
.nav-enlace.activo{color:var(--ink);background:var(--glass-3);box-shadow:var(--glow-verde)}
.nav-enlace.activo::after{
  content:'';position:absolute;bottom:-1px;left:20%;right:20%;height:2px;
  background:linear-gradient(90deg,transparent,var(--verde),transparent);
  border-radius:99px;
}
.cabecera-acciones{display:flex;gap:6px;align-items:center}

/* ═════════════════════════ BOTONES ═════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;font:inherit;font-weight:700;letter-spacing:.01em;
  padding:11px 22px;border-radius:var(--r-sm);
  transition:all var(--dur) var(--ease);
  position:relative;overflow:hidden;
  white-space:nowrap;
}
.btn:active{transform:translateY(0) scale(.98)}
.btn::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 50%);
  opacity:0;transition:opacity var(--dur) var(--ease);pointer-events:none;
}
.btn:hover::after{opacity:1}
.btn-primario{
  background:linear-gradient(135deg,var(--verde),var(--verde-3));
  box-shadow:var(--glow-verde);
  color:#02120b;
}
.btn-primario:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(37,196,135,.4),0 12px 32px rgba(37,196,135,.2)}
.btn-secundario{
  background:linear-gradient(135deg,rgba(240,181,60,.14),rgba(240,181,60,.05));
  border:1px solid rgba(240,181,60,.3);color:var(--ambar-2);
}
.btn-secundario:hover{transform:translateY(-1px);border-color:rgba(240,181,60,.5)}
.btn-fantasma{
  background:var(--glass-3);border:1px solid var(--line-soft);color:var(--muted);
}
.btn-fantasma:hover{color:var(--ink);transform:translateY(-1px);border-color:var(--line)}
.btn-peligro{
  background:linear-gradient(135deg,rgba(244,96,122,.18),rgba(244,96,122,.06));
  border:1px solid rgba(244,96,122,.3);color:var(--danger-2);
}
.btn-peligro:hover{transform:translateY(-1px);border-color:rgba(244,96,122,.5)}
.btn-grande{padding:16px 32px;font-size:var(--font-size-lg);border-radius:var(--r-md)}
.btn.centrado{align-self:center;margin-top:12px}

.btn-icono{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--glass-3);border:1px solid var(--line-soft);color:var(--muted);
  width:40px;height:40px;border-radius:var(--r-xs);font-size:1rem;line-height:1;
  transition:all var(--dur) var(--ease);flex-shrink:0;
}
.btn-icono:hover{
  color:var(--ink);transform:translateY(-1px);border-color:var(--line);
  background:var(--glass-3);box-shadow:var(--shadow-xs);
}
.btn-icono:active{transform:translateY(0) scale(.95)}

:focus-visible{outline:2px solid var(--verde);outline-offset:2px;border-radius:4px}
.btn:focus-visible,.btn-icono:focus-visible{outline:2px solid var(--verde-2);outline-offset:2px}

/* ═════════════════════════ LAYOUT ═════════════════════════ */
main{max-width:1280px;margin:0 auto;padding:28px clamp(16px,4vw,48px) 100px}
.vista{animation:vista-entra var(--dur-slow) var(--ease-out)}
@keyframes vista-entra{
  from{opacity:0;transform:translateY(16px) scale(.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ═══════════════════ HERO (primera pantalla) ═══════════════════ */
.hero{
  display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;
  margin-bottom:28px;
}
.hero-texto h1{
  font-size:clamp(2rem,4.5vw,3.2rem);
  letter-spacing:-.045em;line-height:1.05;font-weight:800;
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 50%,var(--verde-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:14px;
}
.hero-bajada{color:var(--muted);max-width:56ch;font-size:var(--font-size-md);line-height:1.65}
.hero-bajada strong{color:var(--ink-2);font-weight:700}
.hero-privacidad{
  display:flex;align-items:center;gap:8px;margin-top:16px;
  color:var(--verde-2);font-size:var(--font-size-sm);font-weight:600;
}
.ico-candado{width:18px;height:18px;opacity:.8}
.hero-escena{width:100%;max-width:360px;justify-self:center;overflow:visible;filter:drop-shadow(0 20px 40px rgba(37,196,135,.1))}

/* Animaciones de la escena hero */
.flota-factura{animation:flotar 8s var(--ease) infinite alternate}
.flota-excel{animation:flotar 8s var(--ease) infinite alternate-reverse}
.flota-flecha{animation:pulso-flecha 3.5s var(--ease) infinite}
.latido-anillo{animation:latido 3.5s var(--ease) infinite;transform-origin:196px 160px}
.pulso-check{animation:latido 3.5s var(--ease) infinite;transform-origin:105px 102px}
@keyframes flotar{from{transform:translateY(-8px)}to{transform:translateY(8px)}}
@keyframes pulso-flecha{0%,100%{opacity:.3;transform:translateX(-4px)}50%{opacity:1;transform:translateX(4px)}}
@keyframes latido{0%,100%{opacity:.2;transform:scale(.9)}50%{opacity:.7;transform:scale(1.06)}}

/* ═══════════════ ZONA DE CARGA ═══════════════ */
.zona-carga{
  border:2px dashed rgba(37,196,135,.35);border-radius:var(--r-xl);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:52px 24px;text-align:center;
  transition:all var(--dur-slow) var(--ease);
  position:relative;overflow:hidden;
}
.zona-carga::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(37,196,135,.04),transparent 70%);
  opacity:0;transition:opacity var(--dur-slow) var(--ease);
}
.zona-carga svg{width:56px;height:56px;margin-bottom:8px;transition:transform var(--dur-slow) var(--ease-spring)}
.zona-carga strong{font-size:var(--font-size-lg);letter-spacing:-.01em}
.zona-sub{color:var(--muted);font-size:var(--font-size-sm);max-width:48ch;line-height:1.5}
.zona-carga:hover,.zona-carga.encima{
  transform:translateY(-3px);
  border-color:var(--verde);
  box-shadow:var(--glow-verde);
}
.zona-carga:hover svg,.zona-carga.encima svg{transform:scale(1.1) translateY(-4px)}
.zona-carga:hover::before,.zona-carga.encima::before{opacity:1}
.cargar-pie{display:flex;justify-content:center;margin-top:16px;gap:12px}

/* ═══════════════ COLA DE PROCESO ═══════════════ */
.cola{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.fila-proceso{
  display:grid;grid-template-columns:1fr 140px 130px;gap:16px;align-items:center;
  padding:14px 18px;border-radius:var(--r-sm);
  background:var(--glass-3);border:1px solid var(--line-soft);
  font-size:var(--font-size-sm);
  animation:cola-entra var(--dur) var(--ease-out);
  transition:all var(--dur) var(--ease);
}
@keyframes cola-entra{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
.fila-proceso-nombre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-family:var(--font-mono);font-size:var(--font-size-xs)}
.fila-proceso-estado{justify-self:end;color:var(--faint);font-size:var(--font-size-xs);font-weight:600;white-space:nowrap}
.fila-proceso.ok{border-color:rgba(37,196,135,.2)}
.fila-proceso.ok .fila-proceso-estado{color:var(--verde-2)}
.fila-proceso.revisar{border-color:rgba(240,181,60,.2)}
.fila-proceso.revisar .fila-proceso-estado{color:var(--ambar-2)}
.fila-proceso.error{border-color:rgba(244,96,122,.2)}
.fila-proceso.error .fila-proceso-estado{color:var(--danger-2)}

.barra{
  height:6px;border-radius:99px;
  background:rgba(139,166,152,.12);
  overflow:hidden;position:relative;
}
.barra-relleno{
  height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--verde),var(--ambar));
  transition:width .5s var(--ease-out);
  position:relative;
}
.barra-relleno::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  animation:brillo 1.5s var(--ease) infinite;
}
@keyframes brillo{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.titulo-seccion{
  font-size:var(--font-size-xs);letter-spacing:.24em;color:var(--faint);
  font-weight:800;margin:28px 0 14px;
  text-transform:uppercase;
}

/* ═══════════════ FILAS MINI (recientes) ═══════════════ */
.fila-mini{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 16px;margin-top:8px;border-radius:var(--r-sm);
  background:var(--glass-3);border:1px solid var(--line-soft);
  color:var(--ink);text-align:left;
  transition:all var(--dur) var(--ease);
  animation:cola-entra var(--dur) var(--ease-out);
}
.fila-mini:hover{transform:translateY(-1px);border-color:var(--line);box-shadow:var(--shadow-xs)}
.fila-mini-quien{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:var(--font-size-sm)}
.fila-mini-monto{font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--font-size-md)}

/* ═══════════════ LISTA DE COMPROBANTES ═══════════════ */
.lista-comprobantes{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.fila-comp{
  display:grid;
  grid-template-columns:auto auto auto 1fr auto auto auto auto;
  gap:14px;align-items:center;
  padding:14px 18px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.008)), var(--glass);
  border:1px solid var(--line-soft);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:all var(--dur) var(--ease);
  position:relative;overflow:hidden;
  animation:cola-entra var(--dur) var(--ease-out);
}
.fila-comp:hover{
  transform:translateY(-1px);
  border-color:var(--line);
  box-shadow:var(--shadow-sm);
  z-index:1;
}
.fila-comp.con-revisar{border-left:3px solid var(--ambar)}
.fila-comp:not(.con-revisar){border-left:3px solid var(--verde)}

.fila-quien{min-width:0}
.fila-quien strong{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:-.015em;font-size:var(--font-size-md);
}
.fila-sub{color:var(--faint);font-size:var(--font-size-xs);font-variant-numeric:tabular-nums}
.fila-fecha{color:var(--muted);font-size:var(--font-size-sm);white-space:nowrap}
.fila-monto{
  font-variant-numeric:tabular-nums;font-weight:800;
  font-size:var(--font-size-md);white-space:nowrap;
  background:linear-gradient(135deg,var(--ink),var(--verde-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.01em;
}
.fila-acciones{display:flex;gap:4px}
.fila-tipos{display:flex;gap:4px;align-items:center;flex-wrap:wrap}

.thumb{
  width:44px;height:44px;border-radius:var(--r-xs);overflow:hidden;
  border:1px solid var(--line-soft);cursor:pointer;flex-shrink:0;
  transition:all var(--dur) var(--ease);
}
.thumb:hover{transform:scale(1.08);box-shadow:var(--shadow-sm);border-color:var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover}

/* Badges */
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--font-size-xs);font-weight:800;letter-spacing:.06em;
  padding:5px 10px;border-radius:var(--r-xs);white-space:nowrap;
  text-transform:uppercase;
}
.badge-A{background:rgba(37,196,135,.14);color:var(--verde-2);border:1px solid rgba(37,196,135,.28)}
.badge-B{background:rgba(240,181,60,.12);color:var(--ambar-2);border:1px solid rgba(240,181,60,.28)}
.badge-C,.badge-X,.badge-E{background:rgba(155,127,240,.12);color:var(--vio-2);border:1px solid rgba(155,127,240,.28)}
.badge-qr{
  background:rgba(95,232,182,.14);color:var(--verde-2);
  border:1px solid rgba(37,196,135,.4);font-size:.6rem;
}
.badge-maestro{
  background:rgba(155,127,240,.1);color:var(--vio-2);
  border:1px solid rgba(155,127,240,.3);font-size:.6rem;
}
.badge-conf{font-size:var(--font-size-xs);font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap}
.conf-ok{background:rgba(37,196,135,.1);color:var(--verde-2)}
.conf-revisar{background:rgba(240,181,60,.1);color:var(--ambar-2)}

/* Checkbox */
input[type="checkbox"]{
  width:20px;height:20px;
  accent-color:var(--verde);cursor:pointer;
  transition:transform var(--dur-fast) var(--ease);
}
input[type="checkbox"]:hover{transform:scale(1.15)}
input[type="checkbox"]:checked{transform:scale(1)}
.fila-comp>input[type="checkbox"]{margin-right:4px}

/* Vacío */
.vacio{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:52px;color:var(--muted);
  border:2px dashed var(--line-soft);border-radius:var(--r-lg);
  text-align:center;font-size:var(--font-size-md);
}

/* ═══════════════ FILTROS ═══════════════ */
.barra-filtros{
  display:flex;gap:12px;padding:16px 18px;
  border-radius:var(--r-lg);margin-bottom:16px;flex-wrap:wrap;
  align-items:flex-end;
}
.filtro{display:flex;flex-direction:column;gap:5px}
.filtro-rotulo{font-size:var(--font-size-xs);letter-spacing:.18em;color:var(--faint);font-weight:800;text-transform:uppercase}
.filtro select,.filtro input{
  background:var(--glass-3);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r-xs);padding:10px 14px;
  min-width:130px;
  transition:border-color var(--dur) var(--ease);
  font-size:var(--font-size-sm);
}
.filtro input{min-width:200px}
.filtro select:hover,.filtro input:hover{border-color:var(--line-strong)}
.filtro select:focus,.filtro input:focus{border-color:var(--verde)}
.filtro-ancho{flex:1}

/* ═══════════════ TARJETAS TOTALES ═══════════════ */
.tarjetas-totales{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:8px}
.tarjeta-total{
  border-radius:var(--r-lg);padding:18px 20px;
  display:flex;flex-direction:column;gap:6px;
  transition:all var(--dur) var(--ease);
}
.tarjeta-total:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.tt-rotulo{font-size:var(--font-size-xs);letter-spacing:.2em;color:var(--faint);font-weight:800;text-transform:uppercase}
.tt-num{
  font-variant-numeric:tabular-nums;font-weight:800;
  font-size:var(--font-size-xl);letter-spacing:-.02em;
  transition:color var(--dur) var(--ease);
}
.tt-destacada{border-color:rgba(240,181,60,.3)}
.tt-destacada .tt-num{
  background:linear-gradient(135deg,var(--ambar-2),var(--verde-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:var(--font-size-2xl);
}

/* ═══════════════ TOGGLE COMPRAS/VENTAS ═══════════════ */
.lado-toggle-contenedor{margin-bottom:14px;display:flex}
.lado-toggle{
  display:inline-flex;gap:3px;padding:4px;
  border-radius:99px;background:var(--glass-3);
  border:1px solid var(--line-soft);
}
.lado-btn{
  border:none;font:inherit;font-weight:700;color:var(--muted);
  padding:9px 24px;border-radius:99px;background:transparent;
  transition:all var(--dur) var(--ease);font-size:var(--font-size-sm);
  letter-spacing:.02em;
}
.lado-btn:hover{color:var(--ink)}
.lado-btn.activo{
  background:linear-gradient(135deg,var(--verde),var(--verde-3));
  color:#02120b;
  box-shadow:var(--glow-verde);
}

/* ═══════════════ TOASTS ═══════════════ */
.toasts{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:200;display:flex;flex-direction:column;gap:8px;
  width:min(94vw,520px);pointer-events:none;
}
.toast{
  pointer-events:auto;display:flex;align-items:center;gap:12px;cursor:pointer;
  border-radius:var(--r-sm);padding:14px 18px;
  font-size:var(--font-size-sm);font-weight:600;
  animation:toast-entra .3s var(--ease-spring);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;overflow:hidden;
}
.toast::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:0 3px 3px 0;
}
@keyframes toast-entra{
  from{opacity:0;transform:translateY(16px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.toast.saliendo{opacity:0;transform:translateY(8px) scale(.98);transition:all .25s var(--ease)}
.toast-ok{border-color:rgba(37,196,135,.35)} .toast-ok::before{background:var(--verde)} .toast-ok .toast-ico{color:var(--verde-2)}
.toast-error{border-color:rgba(244,96,122,.4)} .toast-error::before{background:var(--danger)} .toast-error .toast-ico{color:var(--danger-2)}
.toast-info{border-color:rgba(240,181,60,.35)} .toast-info::before{background:var(--ambar)} .toast-info .toast-ico{color:var(--ambar-2)}
.toast-ico{font-weight:800;font-size:var(--font-size-md)}

/* ═══════════════ MODALES (3 salidas) ═══════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:150;
  display:flex;align-items:center;justify-content:center;
  background:rgba(2,8,5,.7);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:20px;
  animation:overlay-entra .25s var(--ease);
}
@keyframes overlay-entra{from{opacity:0}to{opacity:1}}
.modal{
  width:min(820px,94vw);max-height:88vh;overflow-y:auto;
  border-radius:var(--r-xl);padding:0;
  animation:modal-pop .3s var(--ease-spring);
  box-shadow:var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,.06);
}
@keyframes modal-pop{
  from{opacity:0;transform:scale(.92) translateY(20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.modal.cerrandose{opacity:0;transform:scale(.95) translateY(10px);transition:all .2s var(--ease)}
.modal-encabezado{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:22px 28px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01)), var(--glass);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.modal-encabezado h2{font-size:var(--font-size-lg);letter-spacing:-.02em;font-weight:700}
.modal-cerrar{
  display:flex;align-items:center;justify-content:center;
  background:var(--glass-3);border:1px solid var(--line-soft);color:var(--muted);
  width:40px;height:40px;border-radius:var(--r-xs);font-size:1rem;
  transition:all var(--dur) var(--ease);
}
.modal-cerrar:hover{color:var(--ink);transform:rotate(-90deg);border-color:var(--line)}
.modal-cuerpo{padding:24px 28px}
.modal-pie{margin-top:20px;padding-bottom:4px}
.fila-botones{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.texto-modal{color:var(--muted);line-height:1.6}
.visor-adjunto{max-width:100%;border-radius:var(--r-sm);display:block;margin:0 auto}

/* ═══════════════ BIENVENIDA ═══════════════ */
.pasos-bienvenida{list-style:none;display:grid;gap:18px;margin-bottom:18px}
.pasos-bienvenida li{display:flex;gap:16px;align-items:flex-start}
.paso-num{
  flex-shrink:0;width:38px;height:38px;border-radius:var(--r-xs);
  display:grid;place-items:center;
  font-weight:800;font-size:var(--font-size-md);
  color:var(--ambar-2);
  background:rgba(240,181,60,.08);border:1px solid rgba(240,181,60,.25);
}
.nota-privacidad{color:var(--verde-2);font-size:var(--font-size-sm);font-weight:600}
.version-pie{color:var(--faint);font-size:var(--font-size-xs);margin-top:16px}
.separador{border:none;border-top:1px solid var(--line-soft);margin:20px 0}

/* ═══════════════ GRILLA DE EDICIÓN ═══════════════ */
.grilla-edicion{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo-rotulo{font-size:var(--font-size-xs);letter-spacing:.16em;color:var(--faint);font-weight:800;text-transform:uppercase}
.campo input,.campo select{
  background:rgba(4,13,9,.5);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r-xs);padding:10px 13px;width:100%;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  font-size:var(--font-size-sm);
}
.campo input:hover,.campo select:hover{border-color:var(--line-strong)}
.campo input:focus,.campo select:focus{border-color:var(--verde);box-shadow:0 0 0 3px rgba(37,196,135,.08)}
.aviso-validacion{grid-column:1/-1;color:var(--danger-2);font-size:var(--font-size-sm);min-height:1.4em;font-weight:600;line-height:1.4}

/* ═══════════════ IA ═══════════════ */
.aviso-ia{margin:8px 0 16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.nota-ia{color:var(--faint);font-size:var(--font-size-xs)}
.btn-ia{font-size:var(--font-size-sm)}
.btn-ia-header{font-size:1.2rem;line-height:1;transition:opacity var(--dur)}

/* ═══════════════ ASISTENTE ═══════════════ */
.asistente{display:flex;flex-direction:column;gap:16px}
.asistente-respuesta{display:flex;flex-direction:column;gap:10px;max-height:320px;overflow-y:auto;min-height:2em}
.chat-burbuja{
  padding:14px 18px;border-radius:var(--r-sm);
  background:var(--glass-3);border:1px solid var(--line-soft);
  animation:cola-entra var(--dur) var(--ease-out);
}
.chat-pregunta{color:var(--verde-2);font-size:var(--font-size-xs);font-weight:700;margin-bottom:8px;letter-spacing:.02em}
.chat-resp{color:var(--ink);font-size:var(--font-size-sm);line-height:1.6}
.chat-hint{color:var(--faint);font-size:var(--font-size-sm);padding:14px 18px;border-radius:var(--r-sm);border:1px dashed var(--line-soft);line-height:1.5}
.asistente-fila{display:flex;gap:10px}
.asistente-input{
  flex:1;background:var(--glass-3);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r-xs);padding:12px 16px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.asistente-input:focus{border-color:var(--verde);box-shadow:0 0 0 3px rgba(37,196,135,.08)}
.btn-explicar{color:var(--ambar-2);border-color:rgba(240,181,60,.25)}

/* ═══════════════ RESUMEN CLIENTE ═══════════════ */
.resumen-cliente{margin-top:16px;padding:20px 22px;border-radius:var(--r-lg)}
.resumen-hint{color:var(--muted);font-size:var(--font-size-sm);line-height:1.5}
.resumen-grilla{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.resumen-item{
  display:flex;flex-direction:column;gap:5px;
  padding:16px 18px;border-radius:var(--r-sm);
  background:var(--glass-3);border:1px solid var(--line-soft);
  transition:all var(--dur) var(--ease);
}
.resumen-item:hover{transform:translateY(-1px);box-shadow:var(--shadow-xs)}
.resumen-destacado{border-color:rgba(240,181,60,.3)}
.resumen-destacado .tt-num{
  background:linear-gradient(135deg,var(--ambar-2),var(--verde-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.resumen-input{
  background:rgba(4,13,9,.5);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r-xs);padding:9px 12px;
  font:inherit;font-variant-numeric:tabular-nums;
  transition:border-color var(--dur) var(--ease);
}
.resumen-input:focus{border-color:var(--verde);box-shadow:0 0 0 3px rgba(37,196,135,.08)}
.resumen-posicion{margin-top:16px;font-weight:700;font-variant-numeric:tabular-nums;font-size:var(--font-size-md)}
.pos-pagar{color:var(--danger-2)}
.pos-favor{color:var(--verde-2)}
.resumen-cliente .btn{margin-top:8px}

/* ═══════════════ PLANTILLAS ═══════════════ */
.plantillas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.plantilla-card{
  position:relative;text-align:left;color:var(--ink);
  border-radius:var(--r-lg);padding:18px 20px;
  display:flex;flex-direction:column;gap:8px;
  transition:all var(--dur) var(--ease);
  cursor:pointer;
}
.plantilla-card:hover{transform:translateY(-2px);border-color:var(--line);box-shadow:var(--shadow-sm)}
.plantilla-card.activa{border-color:rgba(37,196,135,.45);box-shadow:var(--glow-verde)}
.plantilla-card strong{font-size:var(--font-size-md);letter-spacing:-.01em}
.plantilla-card p{color:var(--muted);font-size:var(--font-size-sm);line-height:1.5}
.plantilla-formato{position:absolute;top:16px;right:18px;font-size:var(--font-size-xs);letter-spacing:.14em;color:var(--faint);font-weight:800}
.tag-recomendada{
  align-self:flex-start;font-size:var(--font-size-xs);font-weight:800;letter-spacing:.08em;
  color:var(--ambar-2);background:rgba(240,181,60,.1);
  border:1px solid rgba(240,181,60,.25);padding:4px 12px;border-radius:99px;
}
.tag-borrar-custom{align-self:flex-start;font-size:var(--font-size-xs);color:var(--danger-2);cursor:pointer;text-decoration:underline;opacity:.7}
.tag-borrar-custom:hover{opacity:1}
.plantilla-nueva{border-style:dashed;border-color:rgba(240,181,60,.3)}
.plantilla-nueva:hover{border-color:var(--ambar)}
.importar-excel{border-color:rgba(95,232,182,.3)}
.importar-excel:hover{border-color:var(--verde-2)}

/* ═══════════════ EXPORTAR ═══════════════ */
.titulo-vista{letter-spacing:-.03em;font-size:var(--font-size-2xl);font-weight:800}
.export-alcance{color:var(--muted);margin:8px 0 24px;font-size:var(--font-size-sm)}

.ayuda-tango{
  margin:24px 0;border-radius:var(--r-lg);border:1px solid var(--line-soft);
  background:var(--glass-3);padding:16px 20px;
}
.ayuda-tango summary{cursor:pointer;font-weight:700;color:var(--ambar-2);font-size:var(--font-size-sm)}
.ayuda-tango ol{margin:12px 0 6px 20px;color:var(--muted);font-size:var(--font-size-sm);display:grid;gap:8px}

.envuelve-tabla{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line-soft)}
.tabla-preview{border-collapse:collapse;width:100%;font-size:var(--font-size-sm);min-width:720px}
.tabla-preview th{
  text-align:left;font-size:var(--font-size-xs);letter-spacing:.14em;
  color:var(--faint);font-weight:800;
  padding:12px 14px;border-bottom:1px solid var(--line);
  white-space:nowrap;background:var(--glass-3);
  position:sticky;top:0;z-index:1;
}
.tabla-preview td{padding:10px 14px;border-bottom:1px solid var(--line-soft);color:var(--muted);white-space:nowrap;font-size:var(--font-size-sm)}
.tabla-preview td.num{font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
.tabla-preview td.mas{text-align:center;color:var(--faint)}
.tabla-preview tr:hover td{background:rgba(255,255,255,.015)}

.pie-accion{position:sticky;bottom:16px;display:flex;justify-content:center;margin-top:28px}
.pie-accion .btn{box-shadow:var(--shadow-lg), var(--glow-verde)}
.ultima-exportacion{text-align:center;color:var(--muted);font-size:var(--font-size-sm);margin-top:14px}

/* ═══════════════ BUILDER PLANTILLAS ═══════════════ */
.builder{display:flex;flex-direction:column;gap:16px}
.builder-nombre{
  background:var(--glass-3);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r-xs);padding:12px 16px;font:inherit;
}
.builder-inicio p{color:var(--faint);font-size:var(--font-size-sm);margin-bottom:8px}
.builder-agregar{display:flex;gap:10px}
.builder-select{
  flex:1;background:var(--glass-3);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r-xs);padding:10px 14px;font:inherit;
}
.builder-lista{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto}
.builder-fila{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 16px;border-radius:var(--r-xs);
  background:var(--glass-3);border:1px solid var(--line-soft);font-size:var(--font-size-sm);
}
.builder-acciones{display:flex;gap:4px}

/* ═══════════════ MAPEO PLANTILLA IMPORTADA ═══════════════ */
.mapeo{display:flex;flex-direction:column;gap:16px}
.mapeo-lista{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto}
.mapeo-fila{
  display:grid;grid-template-columns:1.1fr 1fr 1fr 40px;gap:10px;align-items:center;
  padding:10px 16px;border-radius:var(--r-xs);
  background:var(--glass-3);border:1px solid var(--line-soft);
}
.mapeo-quien{display:flex;flex-direction:column;gap:2px;min-width:0}
.mapeo-col{font-size:var(--font-size-xs);letter-spacing:.16em;color:var(--faint);font-weight:800;text-transform:uppercase}
.mapeo-header{font-size:var(--font-size-sm);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapeo-select,.mapeo-titulo{
  background:rgba(4,13,9,.5);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r-xs);padding:9px 12px;width:100%;font-size:var(--font-size-sm);
}

/* ═══════════════ GUÍA ARCA ═══════════════ */
.guia-arca{display:flex;flex-direction:column;gap:0}
.guia-paso{display:grid;grid-template-columns:42px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.guia-paso:last-of-type{border-bottom:none}
.guia-paso-num{
  width:38px;height:38px;border-radius:var(--r-xs);display:grid;place-items:center;
  font-weight:800;font-size:var(--font-size-md);color:var(--ambar-2);
  background:rgba(240,181,60,.08);border:1px solid rgba(240,181,60,.25);
}
.guia-paso-contenido h4{letter-spacing:-.015em;margin-bottom:8px;font-size:var(--font-size-md)}
.guia-paso-contenido p{color:var(--muted);font-size:var(--font-size-sm);line-height:1.6}
.guia-link{color:var(--verde-2);font-size:var(--font-size-sm);font-weight:600;display:inline-block;margin-top:10px}
.guia-link:hover{text-decoration:underline}
.guia-comando{margin-top:12px;padding:12px 16px;border-radius:var(--r-xs);background:rgba(4,13,9,.6);border:1px solid var(--line-soft)}
.guia-comando-rotulo{display:block;font-size:var(--font-size-xs);color:var(--faint);letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-bottom:5px}
.guia-comando code{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--verde-2);display:block;word-break:break-all}
.guia-chat{margin-top:20px}
.guia-chat-titulo{font-size:var(--font-size-xs);letter-spacing:.18em;color:var(--faint);font-weight:800;text-transform:uppercase;margin-bottom:12px}
.guia-chat-fila{display:flex;gap:10px}
.guia-input{flex:1;background:var(--glass-3);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-xs);padding:12px 16px;font:inherit}
.guia-chat-respuesta{margin-top:14px;padding:16px 20px;border-radius:var(--r-sm);background:var(--glass-3);border:1px solid var(--line-soft);color:var(--muted);font-size:var(--font-size-sm);line-height:1.6;min-height:1em}
.guia-chat-respuesta:empty{display:none}

.btn-padron{font-size:var(--font-size-sm)}

/* Selector de empresa */
.selector-empresa-contenedor{display:flex;align-items:center;gap:4px;margin-right:4px}
.empresa-select{
  background:var(--glass-3);border:1px solid var(--line-soft);color:var(--ink);
  border-radius:var(--r-xs);padding:8px 12px;
  font-size:var(--font-size-sm);font-weight:600;max-width:180px;
  cursor:pointer;transition:all var(--dur) var(--ease);
}
.empresa-select:hover{border-color:var(--line)}
.empresa-select:focus{border-color:var(--verde);box-shadow:0 0 0 3px rgba(37,196,135,.08)}
@media(max-width:640px){ .empresa-select{max-width:130px;font-size:var(--font-size-xs)} }

/* ═══════════════ PANEL ARCA ═══════════════ */
.panel-arca{margin-top:16px;padding:18px 20px;border-radius:var(--r-lg)}
.panel-arca-falta{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.panel-arca-falta p{color:var(--muted);font-size:var(--font-size-sm)}
.panel-arca-hint{color:var(--verde-2);font-size:var(--font-size-sm);font-weight:600}
.panel-arca-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.panel-arca-item{
  display:flex;flex-direction:column;gap:4px;
  padding:12px 14px;border-radius:var(--r-xs);
  background:var(--glass-3);border:1px solid var(--line-soft);
  transition:all var(--dur) var(--ease);
}
.panel-arca-item:hover{transform:translateY(-1px);border-color:var(--line)}
.panel-arca-cuit{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--ink);font-weight:700}
.panel-arca-nombre{font-size:var(--font-size-xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-arca-estado{font-size:var(--font-size-xs);font-weight:700;padding:4px 10px;border-radius:99px;display:inline-flex;align-items:center;gap:4px;margin-top:2px}
.estado-pendiente{background:rgba(240,181,60,.08);color:var(--ambar)}
.estado-ok{background:rgba(37,196,135,.1);color:var(--verde-2)}
.estado-error{background:rgba(244,96,122,.08);color:var(--danger-2)}
.panel-arca-mas{color:var(--faint);font-size:var(--font-size-xs);margin-top:8px}

/* ═══════════════ BARRA GLOBAL DE PROGRESO ═══════════════ */
.barra-global{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:300;
  background:transparent;pointer-events:none;
  opacity:0;transition:opacity .25s var(--ease);
}
.barra-global.activa{opacity:1}
.barra-global-relleno{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--verde),var(--ambar));
  border-radius:0 3px 3px 0;
  transition:width .4s var(--ease-out);
  box-shadow:0 0 12px rgba(37,196,135,.4);
}

/* ═══════════════ TOAST UNDO ═══════════════ */
.toast-undo{display:flex;align-items:center;gap:10px;padding:14px 18px}
.btn-undo{
  padding:6px 14px;border-radius:var(--r-xs);font-size:var(--font-size-sm);
  border:1px solid rgba(240,181,60,.3);color:var(--ambar-2);background:rgba(240,181,60,.08);
  transition:all var(--dur) var(--ease);
}
.btn-undo:hover{background:rgba(240,181,60,.15);border-color:rgba(240,181,60,.5)}

/* ═══════════════ PALETA DE COMANDOS (Cmd+K) ═══════════════ */
.paleta-overlay{
  position:fixed;inset:0;z-index:250;
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:12vh;
  background:rgba(2,8,5,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:overlay-entra .2s var(--ease);
}
.paleta-overlay.cerrandose{opacity:0;transition:opacity .15s var(--ease)}
.paleta{
  width:min(560px,92vw);border-radius:var(--r-lg);overflow:hidden;
  animation:modal-pop .25s var(--ease-spring);
  box-shadow:var(--shadow-xl);
}
.paleta-input{
  width:100%;padding:18px 22px;
  background:transparent;border:none;outline:none;
  font-size:var(--font-size-lg);color:var(--ink);
  border-bottom:1px solid var(--line-soft);
  font-family:inherit;
}
.paleta-input::placeholder{color:var(--faint)}
.paleta-lista{max-height:340px;overflow-y:auto;padding:6px}
.paleta-item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 16px;border-radius:var(--r-xs);
  background:transparent;border:none;color:var(--ink);
  font-size:var(--font-size-sm);font-weight:500;
  transition:background var(--dur-fast) var(--ease);
  text-align:left;
}
.paleta-item:hover,.paleta-item.activo{background:var(--glass-3)}
.paleta-icono{font-size:var(--font-size-md);width:24px;text-align:center;flex-shrink:0}
.paleta-texto{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paleta-atajo{
  padding:3px 8px;border-radius:var(--r-xs);
  background:var(--glass-3);border:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--faint);
}
.paleta-vacio{padding:20px 16px;text-align:center;color:var(--faint);font-size:var(--font-size-sm)}

/* ═══════════════ PRINT STYLES ═══════════════ */
@media print{
  body{background:#fff !important;color:#000 !important}
  .bg-aurora,.cabecera,.pie,.pie-accion,.zona-carga,.cargar-pie,.cola,.toasts,
  .lado-toggle-contenedor,.barra-filtros,.fila-acciones,.barra-global,
  .paleta-overlay,.modal-overlay{display:none !important}
  .panel,.glass{background:#fff !important;border:1px solid #ccc !important;box-shadow:none !important}
  .tarjeta-total{border:1px solid #ccc !important;background:#f8f8f8 !important}
  .fila-comp{border:1px solid #ccc;border-radius:0;margin-bottom:2px}
  .tt-num,.fila-monto{color:#000 !important;-webkit-text-fill-color:#000 !important}
  main{padding:20px;max-width:100%}
}

/* ═══════════════ FOOTER ═══════════════ */
.pie{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  max-width:1280px;margin:0 auto;
  padding:24px clamp(16px,4vw,48px) 40px;
  color:var(--faint);font-size:var(--font-size-xs);
  border-top:1px solid var(--line-soft);
}
.pie-version{background:var(--glass-3);border:1px solid var(--line-soft);padding:2px 10px;border-radius:99px;font-size:var(--font-size-xs)}

/* ═══════════════ SKELETON ═══════════════ */
.skeleton{
  background:linear-gradient(90deg,var(--glass-3) 25%,rgba(255,255,255,.06) 50%,var(--glass-3) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--r-xs);
  min-height:1em;
}
@keyframes shimmer{
  from{background-position:200% 0}
  to{background-position:-200% 0}
}

/* ═══════════════ ANIMACIÓN NÚMEROS ═══════════════ */
.contador-num{
  font-variant-numeric:tabular-nums;
  transition:opacity var(--dur) var(--ease);
}
.contador-animando{opacity:.4}

/* ═══════════════ ESTADOS ACTIVOS GLOBALES ═══════════════ */
.nav-enlace:active,.plantilla-card:active,.btn-icono:active,.fila-mini:active{
  transform:translateY(0) scale(.97);
}

/* ═══════════════ MOVIMIENTO RESPETUOSO ═══════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:1024px){
  .hero{grid-template-columns:1fr;gap:20px}
  .hero-escena{max-width:280px}
  .grilla-edicion{grid-template-columns:repeat(2,1fr)}
  .resumen-grilla{grid-template-columns:repeat(2,1fr)}
  .tarjetas-totales{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:640px){
  .cabecera{flex-wrap:wrap;gap:10px;padding:10px 16px}
  .nav{order:3;width:100%;margin-left:0;justify-content:space-between;gap:0;padding:4px}
  .nav-enlace{flex:1;text-align:center;padding:10px 6px;font-size:var(--font-size-xs)}
  .hero{grid-template-columns:1fr}
  .hero-escena{max-width:220px}
  .hero-bajada{font-size:var(--font-size-sm)}

  .tarjetas-totales{grid-template-columns:repeat(2,1fr);gap:8px}
  .tt-num{font-size:var(--font-size-lg)}
  .tt-destacada .tt-num{font-size:var(--font-size-xl)}

  .fila-comp{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "sel quien monto"
      "sel meta meta"
      "sel acciones acciones";
    row-gap:8px;padding:12px 14px;
  }
  .fila-comp>.thumb{display:none}
  .fila-comp>.fila-tipos{grid-area:meta;justify-self:start}
  .fila-comp>.badge-conf{grid-area:meta;justify-self:end}
  .fila-comp>.fila-quien{grid-area:quien}
  .fila-comp>.fila-fecha{display:none}
  .fila-comp>.fila-monto{grid-area:monto}
  .fila-comp>.fila-acciones{grid-area:acciones;justify-self:end}

  .fila-proceso{grid-template-columns:1fr 90px;padding:10px 12px}
  .fila-proceso .fila-proceso-estado{display:none}

  .grilla-edicion{grid-template-columns:1fr}
  .resumen-grilla{grid-template-columns:1fr}
  .zona-carga{padding:36px 16px}

  .mapeo-fila{grid-template-columns:1fr}
  .mapeo-quien{margin-bottom:8px}

  .modal{width:100vw;max-height:96vh;border-radius:var(--r-lg) var(--r-lg) 0 0;align-self:flex-end}
  .modal-encabezado{border-radius:var(--r-lg) var(--r-lg) 0 0}
  .modal-overlay{padding:0;align-items:flex-end}

  .plantillas{grid-template-columns:1fr}
  .barra-filtros{flex-direction:column;align-items:stretch}
  .filtro{width:100%}
  .filtro input,.filtro select{width:100%}

  .toasts{bottom:12px;width:calc(100vw - 24px)}
  .pie{flex-direction:column;align-items:center;text-align:center;gap:6px}
}