/* ============================================================================
   CONCILIADOR — módulo financiero de la plataforma YPF.
   Lenguaje visual «liquid glass» oscuro: vidrio esmerilado sobre azul profundo,
   movimiento suave, números que respiran. Pensado para leerse como una app de
   teléfono: Gustavo tiene que entender dónde está su plata en tres segundos.
   ========================================================================== */

:root{
  --fondo-0:#040810;  --fondo-1:#070D1D;  --fondo-2:#0A1226;
  --vidrio:rgba(148,170,220,.055);
  --vidrio-2:rgba(148,170,220,.09);
  --borde:rgba(148,170,220,.14);
  --borde-brillo:rgba(148,170,220,.28);
  --ink:#EAF0FB;  --ink-2:#B9C6DE;  --muted:#8395B4;  --dim:#5A6A8A;
  --azul:#5B8DEF;  --azul-2:#7FB1FF;  --cian:#4FD1E0;
  --verde:#3DD68C; --verde-tenue:rgba(61,214,140,.12);
  --ambar:#F0B429; --ambar-tenue:rgba(240,180,41,.12);
  --rojo:#F26D5F;  --rojo-tenue:rgba(242,109,95,.13);
  --violeta:#9D7BF5;
  --radio:18px; --radio-ch:12px;
  --sombra:0 10px 34px rgba(2,6,16,.55);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Inter,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  --transicion:.28s cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(91,141,239,.16), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(79,209,224,.08), transparent 55%),
    radial-gradient(1000px 800px at 50% 110%, rgba(157,123,245,.07), transparent 60%),
    linear-gradient(180deg, var(--fondo-1), var(--fondo-0) 70%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--azul-2);text-decoration:none}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(148,170,220,.18);border-radius:8px}
::selection{background:rgba(91,141,239,.35)}

.rotulo{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
.num{font-variant-numeric:tabular-nums}
.pos{color:var(--verde)} .neg{color:var(--rojo)} .aten{color:var(--ambar)}
[hidden]{display:none !important}

/* ---------- animaciones base ---------- */
@keyframes aparecer{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes latido{50%{opacity:.35}}
@keyframes deslizar{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes velo-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- login ---------- */
.login-fondo{display:grid;place-items:center;padding:18px}
.login-caja{
  width:min(430px,100%);border:1px solid var(--borde);border-radius:22px;
  background:linear-gradient(160deg, var(--vidrio-2), var(--vidrio));
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:var(--sombra);padding:34px 34px 38px;animation:aparecer .5s ease both;
}
.login-caja h1{margin:8px 0 6px;font-size:26px;font-weight:700;letter-spacing:-.02em}
.login-sub{color:var(--muted);margin:0 0 22px;font-size:13.5px}
.login-caja label{display:block;margin:14px 0 6px}
.login-caja input{
  width:100%;background:rgba(4,8,16,.55);border:1px solid var(--borde);color:var(--ink);
  font:inherit;padding:12px 14px;border-radius:12px;transition:border var(--transicion);
}
.login-caja input:focus{border-color:var(--azul);outline:none}
.login-caja button{
  margin-top:22px;width:100%;padding:13px;font:inherit;font-weight:700;cursor:pointer;
  border:none;border-radius:14px;color:#fff;
  background:linear-gradient(135deg, var(--azul), #3E6FD9);
  box-shadow:0 8px 22px rgba(91,141,239,.35);transition:transform var(--transicion);
}
.login-caja button:hover{transform:translateY(-1px)}
.login-error{margin-top:14px;color:var(--rojo);font-size:13px}

/* ---------- encabezado ---------- */
header.top{
  position:sticky;top:0;z-index:40;height:60px;
  display:flex;align-items:center;gap:14px;padding:0 clamp(12px,3vw,28px);
  background:rgba(6,11,24,.68);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--borde);
}
.marca{display:flex;align-items:center;gap:11px;min-width:0}
.marca .logo{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--azul),var(--cian));
  color:#fff;font-weight:800;font-size:15px;box-shadow:0 4px 14px rgba(91,141,239,.4);
}
.marca-tx{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.marca-tx b{font-size:14.5px;letter-spacing:-.01em;white-space:nowrap}
.marca-tx span{font-size:10.5px;color:var(--dim);letter-spacing:.09em;white-space:nowrap}
.top-espacio{flex:1}
.envivo{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);
  border:1px solid var(--borde);border-radius:999px;padding:5px 12px;background:var(--vidrio)}
.envivo .punto{width:8px;height:8px;border-radius:50%;background:var(--verde);
  box-shadow:0 0 8px var(--verde);animation:latido 2.4s ease-in-out infinite}
.envivo.caido .punto{background:var(--rojo);box-shadow:0 0 8px var(--rojo);animation:none}
.sesion{font-size:12px;color:var(--muted);white-space:nowrap}
.sesion b{color:var(--ink-2)}
.chip-borde{font-size:12px;color:var(--ink-2);border:1px solid var(--borde);
  padding:7px 13px;border-radius:999px;background:var(--vidrio);cursor:pointer;
  transition:border var(--transicion);font-family:inherit}
.chip-borde:hover{border-color:var(--borde-brillo);color:var(--ink)}

/* conmutador de módulos */
.modulos{position:relative}
.modulos-menu{
  position:absolute;right:0;top:calc(100% + 10px);min-width:230px;z-index:50;
  border:1px solid var(--borde);border-radius:16px;overflow:hidden;
  background:rgba(10,17,35,.92);backdrop-filter:blur(24px);
  box-shadow:var(--sombra);animation:aparecer .22s ease both;
}
.modulos-menu a{
  display:flex;gap:11px;align-items:center;padding:13px 16px;color:var(--ink-2);
  border-bottom:1px solid var(--borde);font-size:13px;
}
.modulos-menu a:last-child{border-bottom:none}
.modulos-menu a:hover{background:var(--vidrio-2);color:var(--ink)}
.modulos-menu .mi{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:14px;flex:none}
.mi.fin{background:linear-gradient(135deg,var(--azul),var(--cian));color:#fff}
.mi.cam{background:linear-gradient(135deg,#F0B429,#E2685F);color:#fff}

/* ---------- pestañas escritorio ---------- */
nav.tabs{
  position:sticky;top:60px;z-index:39;display:flex;gap:4px;overflow-x:auto;
  padding:10px clamp(12px,3vw,28px) 10px;scrollbar-width:none;
  background:linear-gradient(rgba(6,11,24,.5), transparent);
  backdrop-filter:blur(8px);
}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{
  appearance:none;border:1px solid transparent;background:none;color:var(--muted);
  font:inherit;font-size:13px;font-weight:600;padding:9px 16px;cursor:pointer;
  white-space:nowrap;border-radius:999px;transition:all var(--transicion);
  display:flex;align-items:center;gap:7px;
}
nav.tabs button svg{width:15px;height:15px;flex:none}
nav.tabs button:hover{color:var(--ink-2);background:var(--vidrio)}
nav.tabs button.activa{
  color:#fff;background:linear-gradient(135deg, rgba(91,141,239,.28), rgba(79,209,224,.16));
  border-color:rgba(91,141,239,.4);
}
.globo{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;
  border-radius:9px;background:var(--rojo);color:#fff;font-size:10px;font-weight:700}

/* ---------- estructura ---------- */
main{max-width:1240px;margin:0 auto;padding:8px clamp(12px,3vw,28px) 96px}
section.vista{display:none}
section.vista.activa{display:block;animation:aparecer .38s ease both}
.cartel-demo{
  margin:4px 0 16px;padding:11px 16px;border:1px solid rgba(240,180,41,.35);
  border-radius:var(--radio-ch);background:var(--ambar-tenue);color:var(--ambar);
  font-size:12.5px;display:flex;gap:9px;align-items:center;
}

/* ---------- vidrio ---------- */
.tarjeta{
  border:1px solid var(--borde);border-radius:var(--radio);
  background:linear-gradient(165deg, var(--vidrio-2), var(--vidrio));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:var(--sombra);padding:18px 20px;margin:0 0 16px;
  transition:border var(--transicion), transform var(--transicion);
}
.tarjeta:hover{border-color:var(--borde-brillo)}
.tarjeta h2{
  margin:0 0 14px;font-size:13px;font-weight:700;color:var(--ink-2);
  letter-spacing:.02em;display:flex;align-items:center;gap:8px;
}
.tarjeta h2 .sub{font-weight:400;color:var(--dim);font-size:11.5px;letter-spacing:0}
.enlace-mas{margin-left:auto;font-size:12px;color:var(--azul-2);cursor:pointer;
  background:none;border:none;font-family:inherit;display:flex;align-items:center;gap:4px}
.enlace-mas:hover{color:var(--cian)}

/* ---------- fila "dónde está la plata" (el héroe) ---------- */
.plata{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 16px}
.plata .paso-plata{
  position:relative;border:1px solid var(--borde);border-radius:var(--radio);
  background:linear-gradient(165deg, var(--vidrio-2), var(--vidrio));
  backdrop-filter:blur(18px);box-shadow:var(--sombra);
  padding:18px 20px;overflow:hidden;animation:aparecer .4s ease both;
}
.plata .paso-plata:nth-child(2){animation-delay:.06s}
.plata .paso-plata:nth-child(3){animation-delay:.12s}
.paso-plata::after{
  content:"";position:absolute;inset:auto -30% -55% -30%;height:120px;border-radius:50%;
  filter:blur(38px);opacity:.6;pointer-events:none;
}
.paso-plata.vendido::after{background:rgba(91,141,239,.25)}
.paso-plata.camino::after{background:rgba(240,180,41,.22)}
.paso-plata.entro::after{background:rgba(61,214,140,.22)}
.paso-plata .icono-paso{width:36px;height:36px;border-radius:11px;display:grid;
  place-items:center;margin-bottom:10px}
.vendido .icono-paso{background:rgba(91,141,239,.18);color:var(--azul-2)}
.camino  .icono-paso{background:var(--ambar-tenue);color:var(--ambar)}
.entro   .icono-paso{background:var(--verde-tenue);color:var(--verde)}
.paso-plata .monto{font-size:clamp(20px,2.6vw,28px);font-weight:700;letter-spacing:-.02em;margin:2px 0}
.paso-plata .detalle-paso{font-size:12px;color:var(--muted)}
.paso-plata .flecha{
  position:absolute;right:-11px;top:50%;transform:translateY(-50%);z-index:2;
  color:var(--dim);font-size:16px;
}
.delta{font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 9px;display:inline-block}
.delta.sube{background:var(--verde-tenue);color:var(--verde)}
.delta.baja{background:var(--rojo-tenue);color:var(--rojo)}
.delta.neutro{background:var(--vidrio-2);color:var(--muted)}

/* ---------- grillas del tablero ---------- */
.tablero-grilla{display:grid;grid-template-columns:1.55fr 1fr;gap:16px}
.tablero-grilla-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:960px){.tablero-grilla,.tablero-grilla-2{grid-template-columns:1fr}}

/* ---------- KPIs chicos ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 16px}
.kpi{border:1px solid var(--borde);border-radius:var(--radio-ch);padding:13px 15px;
  background:var(--vidrio);backdrop-filter:blur(14px)}
.kpi .v{font-size:19px;font-weight:700;margin-top:4px;letter-spacing:-.01em}
.kpi .sub{font-size:11px;color:var(--dim);margin-top:2px}

/* ---------- gráficos ---------- */
.graf-area{width:100%;height:190px;display:block}
.serie-vendido{stroke:var(--azul);fill:url(#deg-vendido)}
.serie-acred{stroke:var(--verde);fill:url(#deg-acred)}
.graf-leyenda{display:flex;gap:18px;align-items:center;font-size:11.5px;color:var(--muted);
  margin-top:8px;flex-wrap:wrap}
.punto-serie{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px}

.donut-caja{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.donut-svg{width:168px;height:168px;flex:none}
.donut-svg circle.seg{fill:none;stroke-width:16;stroke-linecap:butt;
  transition:stroke-dasharray .9s cubic-bezier(.4,0,.2,1)}
.donut-centro{font-size:20px;font-weight:700;fill:var(--ink)}
.donut-centro-sub{font-size:9.5px;fill:var(--dim);letter-spacing:.08em}
.donut-leyenda{flex:1;min-width:190px;display:flex;flex-direction:column;gap:8px}
.donut-item{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2);
  cursor:pointer;border:none;background:none;font-family:inherit;padding:4px 6px;
  border-radius:9px;transition:background var(--transicion);text-align:left}
.donut-item:hover{background:var(--vidrio-2)}
.donut-item .cuadr{width:10px;height:10px;border-radius:3px;flex:none}
.donut-item .pcte{margin-left:auto;font-weight:700;color:var(--ink)}

/* ---------- marcas de tarjetas (todas las que operan en Argentina) ---------- */
.marca-pago{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.marca-logo{width:36px;height:23px;border-radius:5px;display:inline-grid;place-items:center;
  flex:none;font-weight:800;font-style:italic;font-size:10px;letter-spacing:.02em;
  background:#101a33;border:1px solid var(--borde);overflow:hidden}
.marca-logo.img{background:#fff;padding:2px 3px}
.marca-logo.img img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.marca-logo.visa{color:#7FB1FF}
.marca-logo.mc span,.marca-logo.maestro span{width:13px;height:13px;border-radius:50%;display:inline-block}
.marca-logo.mc .c1{background:#EB001B;margin-right:-6px}
.marca-logo.mc .c2{background:#F79E1B;mix-blend-mode:screen}
.marca-logo.maestro .c1{background:#0099DF;margin-right:-6px}
.marca-logo.maestro .c2{background:#ED0006;mix-blend-mode:screen}
.marca-logo.amex{background:#1B60B7;color:#fff;font-style:normal;font-size:8.5px}
.marca-logo.cabal{background:#0E5C31;color:#fff;font-style:normal;font-size:8px}
.marca-logo.naranja{background:#FE5000;color:#fff;font-style:normal;font-size:8.5px;font-weight:900}
.marca-logo.diners{background:#E8E9EB;color:#0B4EA2;font-style:normal;font-size:7.5px;font-weight:900}
.marca-logo.argencard{background:#C8102E;color:#fff;font-style:normal;font-size:7px}
.marca-logo.discover{background:#F5F5F5;color:#E55C20;font-style:normal;font-size:7px;font-weight:900}
.marca-logo.jcb{background:linear-gradient(90deg,#0B4EA2 33%,#C8102E 33% 66%,#0E7A3C 66%);color:#fff;font-style:normal;font-size:8px}
.marca-logo.nativa{background:#2E7D32;color:#fff;font-style:normal;font-size:7.5px}
.marca-logo.cmr{background:#78BE20;color:#0B3B0B;font-style:normal;font-size:8.5px;font-weight:900}
.marca-logo.cencosud{background:#D50032;color:#fff;font-style:normal;font-size:6.5px}
.marca-logo.shopping{background:#FFC72C;color:#1C1C1C;font-style:normal;font-size:9px;font-weight:900}
.marca-logo.mp{background:#00A6E0;color:#fff;font-style:normal;font-size:9px;font-weight:900}
.marca-logo.qr{background:#101a33;color:var(--cian);font-style:normal;font-size:11px}
.marca-logo.tnacion{background:#3AA0DA;color:#fff;font-style:normal;font-size:7.5px}
.marca-logo.mas{background:#E4002B;color:#fff;font-style:normal;font-size:8.5px;font-weight:900}
.marca-logo.lider{background:#004B93;color:#fff;font-style:normal;font-size:7.5px}
.marca-logo.cordobesa{background:#1D3C8F;color:#fff;font-style:normal;font-size:6.5px}
.marca-logo.payway{background:#2D2A72;color:#fff;font-style:normal;font-size:7px}
.marca-logo.getnet{background:#C4001C;color:#fff;font-style:normal;font-size:7.5px}
.marca-logo.gen{color:var(--muted);font-style:normal;font-size:8px}

/* ---------- barra de progreso de acreditación (presentada → pagada) ---------- */
.progreso{display:flex;flex-direction:column;gap:4px;min-width:130px}
.progreso .pista{height:6px;border-radius:4px;background:rgba(148,170,220,.14);overflow:hidden}
.progreso .lleno{height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--azul),var(--cian));
  transition:width .8s cubic-bezier(.4,0,.2,1)}
.progreso.listo .lleno{background:linear-gradient(90deg,var(--verde),#5DE0A6)}
.progreso .paso-tx{font-size:10px;color:var(--dim);display:flex;justify-content:space-between;gap:8px}
.estado-acr{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  padding:3px 10px;border-radius:999px}
.estado-acr .pto{width:7px;height:7px;border-radius:50%}
.estado-acr.presentada{background:rgba(91,141,239,.14);color:var(--azul-2)}
.estado-acr.presentada .pto{background:var(--azul-2)}
.estado-acr.encamino{background:var(--ambar-tenue);color:var(--ambar)}
.estado-acr.encamino .pto{background:var(--ambar);animation:latido 1.8s ease-in-out infinite}
.estado-acr.hoy{background:var(--verde-tenue);color:var(--verde)}
.estado-acr.hoy .pto{background:var(--verde);animation:latido 1.4s ease-in-out infinite}
.estado-acr.acreditada{background:var(--verde-tenue);color:var(--verde)}
.estado-acr.acreditada .pto{background:var(--verde)}

/* ---------- crosshair del gráfico ---------- */
.graf-tip{
  position:fixed;z-index:88;pointer-events:none;opacity:0;transition:opacity .12s ease;
  background:rgba(10,17,35,.97);border:1px solid var(--borde-brillo);border-radius:11px;
  padding:9px 12px;font-size:11.5px;box-shadow:var(--sombra);min-width:150px;
}
.graf-tip.visible{opacity:1}
.graf-tip b{display:block;margin-bottom:4px;color:var(--ink)}
.graf-tip .gt-fila{display:flex;justify-content:space-between;gap:14px;color:var(--ink-2)}
.graf-tip .gt-fila .cua{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:6px}

/* ---------- analítica ---------- */
.ana-grilla{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:960px){.ana-grilla{grid-template-columns:1fr}}
.barra-h{display:flex;flex-direction:column;gap:9px}
.barra-h .bh-item{display:grid;grid-template-columns:minmax(110px,auto) 1fr auto;gap:10px;align-items:center;font-size:12px}
.barra-h .bh-pista{height:9px;border-radius:5px;background:rgba(148,170,220,.1);overflow:hidden}
.barra-h .bh-lleno{height:100%;border-radius:5px;transition:width .7s cubic-bezier(.4,0,.2,1)}
.barra-h .bh-val{font-weight:700;white-space:nowrap}
.graf-mensual{width:100%;height:200px;display:block}

/* ---------- ajustes ---------- */
.ajustes-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.ajuste{border:1px solid var(--borde);border-radius:var(--radio-ch);padding:15px;background:var(--vidrio)}
.ajuste label{display:block;font-size:12.5px;color:var(--ink-2);font-weight:600;margin-bottom:4px}
.ajuste small{display:block;color:var(--dim);font-size:11px;margin-bottom:9px;line-height:1.5}
.ajuste input{width:100%;background:rgba(6,11,24,.6);border:1px solid var(--borde);color:var(--ink);
  font:inherit;padding:10px 12px;border-radius:10px}
.ajuste input:focus{border-color:var(--azul);outline:none}

/* ---------- botones del ticket ---------- */
.ticket-acciones{display:flex;gap:9px;justify-content:center;margin:4px 0 10px}
.t-nota{font-size:10px;color:#777;text-align:center;border-top:1px dashed #bbb;
  margin-top:8px;padding-top:7px;font-style:italic}

/* ---------- listas de actividad / calendario ---------- */
.lista-limpia{display:flex;flex-direction:column;gap:4px}
.item-linea{
  display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:12px;
  transition:background var(--transicion);cursor:pointer;border:none;background:none;
  font:inherit;color:inherit;text-align:left;width:100%;
}
.item-linea:hover{background:var(--vidrio-2)}
.item-icono{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.item-icono.ok{background:var(--verde-tenue);color:var(--verde)}
.item-icono.mal{background:var(--rojo-tenue);color:var(--rojo)}
.item-icono.info{background:rgba(91,141,239,.15);color:var(--azul-2)}
.item-icono.warn{background:var(--ambar-tenue);color:var(--ambar)}
.item-cuerpo{flex:1;min-width:0}
.item-cuerpo b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-cuerpo span{font-size:11.5px;color:var(--dim)}
.item-monto{font-weight:700;font-size:13.5px;white-space:nowrap}

/* ---------- tablas ---------- */
.tabla-marco{overflow-x:auto;border:1px solid var(--borde);border-radius:var(--radio-ch);
  background:rgba(6,11,24,.4);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th,td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--borde);white-space:nowrap}
th{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  background:rgba(10,17,35,.75);position:sticky;top:0;backdrop-filter:blur(8px)}
td.der,th.der{text-align:right}
tbody tr{transition:background .18s ease}
tbody tr:hover{background:var(--vidrio-2)}
tbody tr:last-child td{border-bottom:none}
tr.clic{cursor:pointer}
.vacio{padding:34px;text-align:center;color:var(--dim);font-size:12.5px}

.pastilla{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;
  border-radius:999px;font-size:11px;font-weight:600}
.pastilla.venta{background:var(--verde-tenue);color:var(--verde)}
.pastilla.devolucion{background:var(--ambar-tenue);color:var(--ambar)}
.pastilla.contracargo{background:var(--rojo-tenue);color:var(--rojo)}
.pastilla.representacion{background:rgba(91,141,239,.15);color:var(--azul-2)}
.pastilla.futuro{background:rgba(91,141,239,.15);color:var(--azul-2)}
.pastilla.hoy{background:var(--verde-tenue);color:var(--verde)}
.pastilla.otro,.pastilla.cargo,.pastilla.pago{background:var(--vidrio-2);color:var(--muted)}

/* ---------- controles/filtros ---------- */
.fila-controles{display:flex;flex-wrap:wrap;gap:9px;align-items:end;margin:2px 0 16px}
.control{display:flex;flex-direction:column;gap:4px}
.control label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600}
.control input,.control select{
  background:rgba(6,11,24,.6);border:1px solid var(--borde);color:var(--ink);
  font:inherit;font-size:12.5px;padding:9px 11px;border-radius:11px;color-scheme:dark;
  transition:border var(--transicion);min-width:0;
}
.control input:focus,.control select:focus{border-color:var(--azul);outline:none}
.boton{
  background:var(--vidrio-2);border:1px solid var(--borde);color:var(--ink);
  font:inherit;font-size:12.5px;font-weight:600;padding:9px 17px;border-radius:11px;
  cursor:pointer;transition:all var(--transicion);
}
.boton:hover{border-color:var(--borde-brillo);transform:translateY(-1px)}
.boton.primario{border:none;color:#fff;
  background:linear-gradient(135deg,var(--azul),#3E6FD9);
  box-shadow:0 6px 18px rgba(91,141,239,.3)}
.boton:disabled{opacity:.4;cursor:default;transform:none}

/* ---------- paginación ---------- */
.paginas{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:12px;
  font-size:12px;color:var(--muted);flex-wrap:wrap}
.paginas button{
  min-width:32px;height:32px;border-radius:9px;border:1px solid var(--borde);
  background:var(--vidrio);color:var(--ink-2);font:inherit;font-size:12px;cursor:pointer;
  transition:all var(--transicion);
}
.paginas button:hover{border-color:var(--borde-brillo)}
.paginas button.actual{background:linear-gradient(135deg,var(--azul),#3E6FD9);
  border-color:transparent;color:#fff;font-weight:700}
.paginas button:disabled{opacity:.35;cursor:default}

/* ---------- tooltips (globo ÚNICO fijo, manejado por JS: nunca se recorta) ---------- */
.tip{cursor:help;border-bottom:1px dotted var(--dim)}
#tip-global{
  position:fixed;z-index:90;max-width:270px;pointer-events:none;
  background:rgba(10,17,35,.97);border:1px solid var(--borde-brillo);color:var(--ink-2);
  font-size:11.5px;line-height:1.5;padding:9px 12px;border-radius:11px;
  box-shadow:var(--sombra);opacity:0;transition:opacity .15s ease;
  text-transform:none;letter-spacing:normal;font-weight:400;font-family:var(--sans);
}
#tip-global.visible{opacity:1}

/* ---------- cascada ---------- */
.cascada{margin:8px 0 0}
.cascada .paso{display:flex;justify-content:space-between;gap:14px;
  padding:8px 6px;border-bottom:1px dashed var(--borde)}
.cascada .paso.total{border-bottom:none;border-top:1px solid var(--borde-brillo);
  font-weight:700;padding-top:11px;font-size:15px}
.cascada .paso span:first-child{color:var(--muted)}

/* ---------- panel deslizante y modales ---------- */
.velo{position:fixed;inset:0;z-index:70;background:rgba(3,6,13,.6);
  backdrop-filter:blur(3px);animation:velo-in .25s ease both}
.detalle{
  position:fixed;inset:0 0 0 auto;width:min(700px,96vw);z-index:71;
  background:rgba(9,15,31,.97);backdrop-filter:blur(26px);
  border-left:1px solid var(--borde-brillo);box-shadow:-24px 0 60px rgba(0,0,0,.6);
  padding:22px 24px 40px;overflow-y:auto;animation:deslizar .32s ease both;
}
.detalle-cerrar{float:right}

/* ---------- ticket virtual (tal cual Fiserv) ---------- */
.ticket{
  width:min(360px,100%);margin:14px auto;padding:22px 24px;border-radius:6px;
  background:#F6F4EE;color:#1C1C1C;font-family:var(--mono);font-size:12px;
  line-height:1.55;box-shadow:0 16px 44px rgba(0,0,0,.5);position:relative;
}
.ticket::before,.ticket::after{
  content:"";position:absolute;left:0;right:0;height:9px;
  background-image:radial-gradient(circle at 6px 0px, transparent 5px, #F6F4EE 5px);
  background-size:14px 9px;
}
.ticket::before{top:-8px;transform:rotate(180deg)}
.ticket::after{bottom:-8px}
.ticket .t-cab{text-align:center;border-bottom:1px dashed #999;padding-bottom:9px;margin-bottom:9px}
.ticket .t-cab b{font-size:14px;letter-spacing:.05em}
.ticket .t-fila{display:flex;justify-content:space-between;gap:10px}
.ticket .t-monto{font-size:19px;font-weight:700;text-align:center;
  border:2px solid #1C1C1C;border-radius:6px;padding:7px;margin:9px 0}
.ticket .t-sep{border-top:1px dashed #999;margin:9px 0}
.ticket .t-pie{text-align:center;color:#555;font-size:10.5px;margin-top:9px}
.ticket .t-neg{color:#B3261E;font-weight:700}

/* ---------- importar ---------- */
.zona-archivo{
  border:1.5px dashed var(--borde-brillo);border-radius:var(--radio);padding:32px;
  text-align:center;color:var(--muted);background:var(--vidrio);
  transition:all var(--transicion);
}
.zona-archivo.sobre{border-color:var(--azul);color:var(--azul-2);
  background:rgba(91,141,239,.08);transform:scale(1.008)}
.import-res{margin-top:14px;font-size:13px}
.import-res .okimp{color:var(--verde)} .import-res .malimp{color:var(--rojo)}

/* ---------- manual ---------- */
.manual-grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.manual-caja h3{margin:0 0 8px;font-size:14.5px;display:flex;align-items:center;gap:9px}
.manual-caja p,.manual-caja li{font-size:13px;color:var(--ink-2);line-height:1.65}
.manual-caja ul{margin:6px 0;padding-left:20px}
.manual-caja b{color:var(--ink)}

footer.pie{
  max-width:1240px;margin:0 auto;padding:0 clamp(12px,3vw,28px) 30px;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  color:var(--dim);font-size:11px;
}

/* ---------- barra inferior móvil (tipo app) ---------- */
nav.barra-movil{display:none}
@media (max-width:760px){
  body{font-size:13.5px}
  nav.tabs{display:none}
  main{padding-bottom:110px}
  nav.barra-movil{
    display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:45;
    border:1px solid var(--borde-brillo);border-radius:24px;
    background:rgba(8,14,29,.88);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
    box-shadow:0 12px 40px rgba(0,0,0,.55);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  nav.barra-movil button{
    flex:1;appearance:none;background:none;border:none;color:var(--dim);
    font-family:inherit;font-size:9.5px;font-weight:600;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;
    border-radius:14px;transition:color var(--transicion);
  }
  nav.barra-movil button svg{width:21px;height:21px}
  nav.barra-movil button.activa{color:var(--azul-2)}
  .plata{grid-template-columns:1fr;gap:10px}
  .paso-plata .flecha{display:none}
  .detalle{width:100vw;border-left:none;border-radius:22px 22px 0 0;
    inset:auto 0 0 0;max-height:92vh}
  th,td{padding:9px 10px}
  header.top .sesion{display:none}
}

/* hoja "más" del móvil */
.hoja-mas{
  position:fixed;left:0;right:0;bottom:0;z-index:72;border-radius:24px 24px 0 0;
  background:rgba(9,15,31,.97);backdrop-filter:blur(26px);
  border-top:1px solid var(--borde-brillo);padding:18px 18px calc(26px + env(safe-area-inset-bottom,0px));
  animation:aparecer .28s ease both;
}
.hoja-mas .asa{width:44px;height:5px;border-radius:3px;background:var(--borde-brillo);
  margin:0 auto 16px}
.hoja-mas button{
  width:100%;display:flex;align-items:center;gap:13px;padding:14px 12px;
  background:none;border:none;border-bottom:1px solid var(--borde);color:var(--ink-2);
  font:inherit;font-size:14.5px;cursor:pointer;border-radius:12px;
}
.hoja-mas button:last-child{border-bottom:none}
.hoja-mas button:hover{background:var(--vidrio-2)}
.hoja-mas button svg{width:19px;height:19px;color:var(--azul-2)}

/* ---------- fuente de cada porcentaje (impuestos) ---------- */
.fuente-pct{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:999px;cursor:help;white-space:nowrap}
.fuente-pct::before{content:"";width:6px;height:6px;border-radius:50%}
.fuente-pct.declarado{background:var(--verde-tenue);color:var(--verde)}
.fuente-pct.declarado::before{background:var(--verde)}
.fuente-pct.calculado{background:rgba(91,141,239,.13);color:var(--azul-2)}
.fuente-pct.calculado::before{background:var(--azul-2)}

/* ---------- grupo de exportación ---------- */
.export-grupo{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- chips de filtro de la conciliación ---------- */
.chip-filtro{font-size:12px;padding:6px 13px}
.chip-filtro.on{background:linear-gradient(135deg,var(--azul),#3E6FD9);color:#fff;border-color:transparent}

/* ---------- detalle de conciliación: dos fuentes lado a lado ---------- */
.detalle-ancho{max-width:760px}
.dos-fuentes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0}
@media (max-width:640px){.dos-fuentes{grid-template-columns:1fr}}
.fuente-col{border:1px solid var(--borde);border-radius:var(--radio-ch);padding:12px 14px;background:var(--vidrio)}
.fuente-tit{font-weight:700;font-size:13px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--borde)}
.fuente-tit small{color:var(--muted);font-weight:400}
.kv{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:12.5px;border-bottom:1px dashed rgba(148,170,220,.08)}
.kv-n{color:var(--muted)}
.kv-v{font-weight:600;text-align:right}
.ajuste-caja{margin-top:16px;padding:14px;border:1px solid var(--borde);border-radius:var(--radio-ch);background:rgba(157,123,245,.06)}
.hist{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow:auto}
.hist-l{font-size:12px;color:var(--ink-2);display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  border-left:2px solid var(--borde-brillo);padding:4px 0 4px 10px}
.hist-nota{width:100%;color:var(--muted);font-style:italic;margin-top:2px}
tr.clic{cursor:pointer}

/* ---- cola de excepciones ---- */
.exc-tot{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin:2px 0 16px}
.exc-kpi{flex:1;min-width:96px;border:1px solid var(--borde);border-radius:14px;
  padding:12px 14px;background:var(--vidrio);cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:2px;transition:all var(--transicion)}
.exc-kpi:hover{border-color:var(--borde-brillo);background:var(--vidrio-2)}
.exc-kpi.on{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul) inset}
.exc-kpi .exc-n{font-size:22px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.exc-kpi .exc-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.exc-kpi.critica .exc-n{color:var(--rojo)}
.exc-kpi.alta .exc-n{color:var(--ambar)}
.exc-kpi.media .exc-n{color:var(--azul-2)}
.exc-monto{margin-left:auto;border:1px solid var(--borde);border-radius:14px;padding:12px 16px;
  background:var(--vidrio);display:flex;flex-direction:column;gap:2px;justify-content:center}
.exc-monto .num{font-size:18px;font-weight:800;color:var(--ink)}
#exc-lista{display:flex;flex-direction:column;gap:8px}
.exc-item{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  font:inherit;color:inherit;cursor:pointer;padding:12px 14px;border-radius:12px;
  border:1px solid var(--borde);border-left-width:3px;background:var(--vidrio);
  transition:background var(--transicion),border-color var(--transicion)}
.exc-item:hover{background:var(--vidrio-2);border-color:var(--borde-brillo)}
.exc-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font-size:15px;flex:none}
.exc-ico.contracargo{background:var(--rojo-tenue);color:var(--rojo)}
.exc-ico.devolucion{background:var(--ambar-tenue);color:var(--ambar)}
.exc-ico.representacion{background:rgba(91,141,239,.15);color:var(--azul-2)}
.exc-item .exc-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.exc-item .exc-cuerpo b{font-size:13.5px;color:var(--ink)}
.exc-det{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exc-lado{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:none}
.exc-lado .num{font-size:14px;font-weight:700;color:var(--ink)}
.exc-fecha{font-size:11px;color:var(--dim)}

/* ---- billeteras / medios de pago ---- */
.medios-barras{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:10px;margin-top:8px}
.medio-chip{display:flex;align-items:center;gap:11px;padding:11px 13px;width:100%;
  text-align:left;font:inherit;color:inherit;cursor:pointer;
  border:1px solid var(--borde);border-radius:13px;background:var(--vidrio);
  transition:border var(--transicion),background var(--transicion),transform var(--transicion)}
.medio-chip:hover{border-color:var(--borde-brillo);background:var(--vidrio-2);transform:translateY(-1px)}
.medio-chip:active{transform:translateY(0)}
.medio-badge{width:38px;height:38px;border-radius:10px;flex:none;display:grid;
  place-items:center;color:#fff;font-weight:800;font-size:11px;letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 2px 6px rgba(0,0,0,.25)}
.medio-logo{background:#fff;padding:5px;overflow:hidden}
.medio-logo img{width:100%;height:100%;object-fit:contain;display:block}
.medio-badge.grande.medio-logo{padding:8px}
.medio-info{min-width:0;flex:1}
.medio-nombre{font-size:13px;font-weight:600;color:var(--ink);display:flex;
  align-items:center;gap:6px;flex-wrap:wrap;line-height:1.25}
.medio-tag{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--borde);border-radius:5px;padding:1px 5px;flex:none}
.medio-cifra{font-size:12px;color:var(--ink-2);margin-top:1px}
.medio-cifra b{color:var(--ink);font-variant-numeric:tabular-nums}
.medio-barra{height:4px;border-radius:3px;background:var(--vidrio-2);margin-top:7px;overflow:hidden}
.medio-barra span{display:block;height:100%;border-radius:3px;
  transition:width .6s cubic-bezier(.22,.61,.36,1)}
.micro-nota{margin-top:14px;font-size:11px;color:var(--muted);line-height:1.45}
/* detalle de un medio de pago (modal) */
.medio-cab{display:flex;align-items:center;gap:14px;margin:2px 0 16px}
.medio-badge.grande{width:54px;height:54px;border-radius:14px;font-size:15px}
.medio-cab-nom{font-size:19px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px}
.medio-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mstat{border:1px solid var(--borde);border-radius:12px;padding:11px 13px;background:var(--vidrio)}
.mstat-l{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.mstat-v{display:block;font-size:17px;font-weight:800;color:var(--ink);margin-top:4px}
.kv-linea{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;
  border-bottom:1px solid var(--borde);font-size:13px;color:var(--ink-2)}
.kv-linea.total{border-bottom:none;border-top:1px solid var(--borde-brillo);
  margin-top:2px;padding-top:9px;font-weight:600;color:var(--ink)}
.spark{width:100%;height:78px;margin-top:4px;display:block}
@media (max-width:560px){.medio-stats{grid-template-columns:repeat(2,1fr)}}

/* ---- gestión de usuarios (RBAC) ---- */
.pastilla.apagada{background:var(--vidrio-2);color:var(--dim)}
.boton.mini{padding:5px 12px;font-size:12px;border-radius:9px}
.us-form{display:flex;flex-direction:column;gap:12px}
.us-campo{display:flex;flex-direction:column;gap:5px}
.us-campo>span{font-size:11px;color:var(--muted);letter-spacing:.02em}
.us-campo input{background:rgba(4,8,16,.5);border:1px solid var(--borde);color:var(--ink);
  font:inherit;padding:10px 12px;border-radius:10px;transition:border var(--transicion)}
.us-campo input:focus{border-color:var(--azul);outline:none}
.us-campo input:disabled{color:var(--muted);cursor:not-allowed;opacity:.75}
.perm-grilla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.perm-modulo{border:1px solid var(--borde);border-radius:14px;padding:13px;background:var(--vidrio)}
.perm-tit{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:10px}
.seg{display:inline-flex;width:100%;border:1px solid var(--borde);border-radius:11px;
  overflow:hidden;background:rgba(4,8,16,.4)}
.seg-b{flex:1;padding:8px 6px;font:inherit;font-size:12px;background:transparent;
  border:none;border-right:1px solid var(--borde);color:var(--muted);cursor:pointer;
  transition:all var(--transicion)}
.seg-b:last-child{border-right:none}
.seg-b:hover{color:var(--ink-2);background:var(--vidrio)}
.seg-b.on{color:#fff;background:linear-gradient(135deg,var(--azul),#3E6FD9);font-weight:600}
.perm-desc{font-size:11px;color:var(--muted);margin-top:8px;min-height:15px;text-align:center}
.us-pie{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}
@media (max-width:560px){.perm-grilla{grid-template-columns:1fr}}