/* TeleHost Verycash — identidad TeleHost: claro + rojo, colorido, animado, didáctico */
:root{
  --bg:#faf9f7; --card:#ffffff; --ink:#1c1917; --muted:#57534e; --line:#e7e5e4; --line-strong:#d6d3d1;
  --brand:#DC2626; --brand-dark:#b91c1c; --brand-soft:#fef2f2;
  --ok:#16a34a; --ok-bg:#f0fdf4; --blue:#2563eb; --blue-bg:#eff6ff;
  --amber:#d97706; --amber-bg:#fffbeb; --bad:#dc2626; --bad-bg:#fef2f2; --gris-bg:#f5f5f4;
  --radius:16px; --sombra:0 1px 3px rgba(28,25,23,.06),0 6px 18px rgba(28,25,23,.05);
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.55 Inter,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--brand);text-decoration:none}
.hidden{display:none!important}
.muted{color:var(--muted)}
.mini{font-size:.78rem;color:var(--muted)}
button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:.62rem 1.1rem;background:var(--brand);color:#fff;font-weight:700;transition:transform .15s ease,box-shadow .15s ease,background .15s}
button:hover{background:var(--brand-dark);transform:translateY(-1px);box-shadow:0 6px 16px rgba(220,38,38,.25)}
button:active{transform:translateY(0)}
button.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)}
button.ghost:hover{background:var(--brand-soft);color:var(--brand);border-color:var(--brand);box-shadow:none}
button:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
input,select{font:inherit;width:100%;padding:.62rem .75rem;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--card);color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(220,38,38,.12)}
label{display:block;font-size:.82rem;color:var(--muted);margin:.6rem 0 .25rem;font-weight:600}

/* ---------- animaciones ---------- */
@keyframes vIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.92);opacity:0}70%{transform:scale(1.02)}100%{transform:scale(1);opacity:1}}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes brillo{from{background-position:200% 0}to{background-position:-200% 0}}
#view>*{animation:vIn .45s cubic-bezier(.2,.8,.3,1) both}
#view>*:nth-child(2){animation-delay:.07s}#view>*:nth-child(3){animation-delay:.14s}
#view>*:nth-child(4){animation-delay:.21s}#view>*:nth-child(5){animation-delay:.28s}#view>*:nth-child(6){animation-delay:.35s}

/* ---------- login ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:1rem;
  background:radial-gradient(1000px 500px at 85% -10%,rgba(220,38,38,.10),transparent 60%),
             radial-gradient(700px 400px at -10% 110%,rgba(220,38,38,.07),transparent 60%),var(--bg)}
.auth .box{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:1.8rem;box-shadow:var(--sombra);animation:pop .5s cubic-bezier(.2,.8,.3,1) both}
.brand{font-weight:800;font-size:1.5rem;letter-spacing:-.03em}
.brand b{color:var(--brand)}
.err{color:var(--bad);font-size:.85rem;margin-top:.5rem;min-height:1.1rem}

/* ---------- shell ---------- */
/* minmax(0,1fr) y NO 1fr: sin el minimo 0, las tablas anchas fuerzan el ancho
   min-content de la columna y desbordan la pagina (~36px de scroll horizontal) */
.shell{display:grid;grid-template-columns:262px minmax(0,1fr);min-height:100vh}
.main{min-width:0}
/* foco visible para navegacion con teclado */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.side{background:var(--card);border-right:1px solid var(--line);padding:1.1rem;display:flex;flex-direction:column;gap:.4rem;position:sticky;top:0;height:100vh}
.side .logo{font-weight:800;font-size:1.2rem;margin-bottom:.6rem;letter-spacing:-.02em}
/* el menu crecio: scroll propio para que los ultimos items siempre se alcancen
   (min-height:0 es la clave para que flex permita encoger y scrollear) */
.side nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.side nav a{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:12px;color:var(--ink);font-weight:600;border-left:3px solid transparent;transition:background .15s,color .15s,border-color .15s,transform .15s}
.side nav a:hover{background:var(--brand-soft);color:var(--brand);transform:translateX(2px)}
.side nav a.on{background:var(--brand-soft);color:var(--brand);border-left-color:var(--brand)}
.side nav a .ico{font-size:1.1rem;width:1.4rem;text-align:center}
/* pie del sidebar: perfil y salir son DOS acciones distintas, no un solo boton */
.side .foot{margin-top:auto;font-size:.8rem;display:flex;flex-direction:column;gap:.1rem;border-top:1px solid var(--line);padding-top:.55rem}
.side .foot a{display:block;padding:.35rem .5rem;border-radius:8px;text-decoration:none}
.side .foot a#uName{font-weight:700;color:var(--ink)}
.side .foot a#uName::after{content:" · Mi cuenta ✎";font-weight:500;font-size:.72rem;color:var(--muted)}
.side .foot a#uName:hover{background:var(--brand-soft);color:var(--brand)}
.side .foot a#btnSalir{color:var(--muted);font-size:.74rem}
.side .foot a#btnSalir:hover{background:var(--brand-soft);color:var(--brand)}
.main{padding:1.5rem 1.8rem;max-width:1440px;width:100%}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.3rem;flex-wrap:wrap}
.top h1{font-size:1.45rem;margin:0;letter-spacing:-.02em}
.vsub{color:var(--muted);margin:0 0 1.2rem;font-size:.95rem}
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border-radius:999px;font-size:.8rem;font-weight:700;background:var(--card);border:1.5px solid var(--line)}
.badge.ok{color:var(--ok);border-color:var(--ok);background:var(--ok-bg)}
.badge.warn{color:var(--amber);border-color:var(--amber);background:var(--amber-bg)}
.badge.bad{color:var(--bad);border-color:var(--bad);background:var(--bad-bg);animation:latido 1.6s ease-in-out infinite}
select.emp{max-width:280px}

/* ---------- cards / kpis ---------- */
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem;box-shadow:var(--sombra);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(28,25,23,.07),0 14px 30px rgba(28,25,23,.09)}
.card h3{margin:.1rem 0 .5rem;font-size:.78rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.card.acc{border-top:4px solid var(--brand)}
.kpi{font-size:1.8rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi.small{font-size:1.3rem}

/* ---------- bandas semáforo (didáctico) ---------- */
.band{display:flex;gap:.9rem;align-items:flex-start;border:1px solid var(--line);border-left-width:6px;padding:.85rem 1rem;border-radius:14px;background:var(--card);margin-bottom:.65rem;box-shadow:var(--sombra);transition:transform .18s}
.band:hover{transform:translateX(4px)}
.band .emo{font-size:1.5rem;line-height:1.2}
.band .t{font-weight:800;font-size:1.02rem}
.band .s{color:var(--muted);font-size:.87rem}
.band.b-ok{border-left-color:var(--ok);background:linear-gradient(90deg,var(--ok-bg),var(--card) 45%)}
.band.b-blue{border-left-color:var(--blue);background:linear-gradient(90deg,var(--blue-bg),var(--card) 45%)}
.band.b-amber{border-left-color:var(--amber);background:linear-gradient(90deg,var(--amber-bg),var(--card) 45%)}
.band.b-bad{border-left-color:var(--bad);background:linear-gradient(90deg,var(--bad-bg),var(--card) 45%)}
.band.b-muted{border-left-color:var(--line-strong);background:linear-gradient(90deg,var(--gris-bg),var(--card) 45%)}

/* barra de distribución "dónde está cada dólar" */
.dist{display:flex;height:22px;border-radius:999px;overflow:hidden;border:1px solid var(--line);margin:.4rem 0 .3rem}
.dist>i{display:block;height:100%;width:0;transition:width 1.1s cubic-bezier(.2,.8,.3,1)}
.dist .d-ok{background:var(--ok)} .dist .d-blue{background:var(--blue)} .dist .d-amber{background:var(--amber)} .dist .d-muted{background:#a8a29e}
.leyenda{display:flex;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.3rem}

/* ---------- veredictos ---------- */
.veredicto{border-radius:var(--radius);padding:1.1rem 1.2rem;border:1.5px solid var(--line);box-shadow:var(--sombra);margin-bottom:1rem}
.veredicto.v-ok{background:var(--ok-bg);border-color:#bbf7d0}
.veredicto.v-warn{background:var(--amber-bg);border-color:#fde68a}
.veredicto.v-bad{background:var(--bad-bg);border-color:#fecaca}
.veredicto .vk{font-size:1.65rem;font-weight:800;letter-spacing:-.02em}

/* ---------- tablas / pills / barras ---------- */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line)}
/* cabecera de tablas estilo legacy: banda rosada con letras rojas de marca */
th{color:var(--brand);background:var(--brand-soft);font-size:.76rem;text-transform:uppercase;letter-spacing:.04em}
tr:hover td{background:var(--brand-soft)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.pill{padding:.22rem .6rem;border-radius:999px;font-size:.76rem;font-weight:700;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--amber-bg);color:var(--amber)} .pill.bad{background:var(--bad-bg);color:var(--bad)}
.bar{height:12px;background:var(--gris-bg);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),#f87171);transition:width 1.1s cubic-bezier(.2,.8,.3,1)}
.bar>i.lleno{background:linear-gradient(90deg,var(--bad),var(--amber))}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end}
.sep{height:1px;background:var(--line);margin:.9rem 0}
.mono{font-variant-numeric:tabular-nums}

/* pasos didácticos (cargar archivos) */
.paso{display:flex;gap:.8rem;align-items:flex-start;margin:.55rem 0}
.paso .n{flex:0 0 26px;height:26px;border-radius:999px;background:var(--brand);color:#fff;font-weight:800;font-size:.85rem;display:grid;place-items:center}
.paso .txt b{display:block}
.paso .txt .s{color:var(--muted);font-size:.84rem}
.skel{height:1.1em;border-radius:8px;background:linear-gradient(90deg,var(--gris-bg) 25%,#ecebe9 50%,var(--gris-bg) 75%);background-size:200% 100%;animation:brillo 1.2s linear infinite}

/* hamburguesa (solo movil), panel lateral off-canvas y boton WhatsApp */
.menu-btn{display:none;background:var(--card);color:var(--ink);border:1.5px solid var(--line-strong);padding:.5rem .8rem;font-size:1.15rem;line-height:1}
.backdrop{position:fixed;inset:0;background:rgba(28,25,23,.45);z-index:40}
a.wbtn{display:inline-block;padding:.3rem .7rem;border-radius:10px;border:1.5px solid #25D366;color:#128C7E;font-weight:700;font-size:.8rem;white-space:nowrap}
a.wbtn:hover{background:rgba(37,211,102,.1)}
@media(max-width:760px){
  .shell{grid-template-columns:1fr}
  .menu-btn{display:inline-flex;align-items:center}
  .side{position:fixed;left:0;top:0;height:100vh;width:min(300px,85vw);z-index:50;transform:translateX(-105%);transition:transform .25s ease;overflow-y:auto;box-shadow:0 0 40px rgba(0,0,0,.2)}
  .side.open{transform:none}
  .main{padding:1rem}
  button,.side nav a{min-height:44px}                 /* area tactil comoda para el dedo */
  /* tablas como tarjetas apiladas: cada fila es una tarjeta etiqueta+valor (data-l) */
  table.tcards,table.tcards tbody{display:block}
  table.tcards tr{display:block;border:1px solid var(--line);border-radius:14px;margin-bottom:.7rem;padding:.55rem .8rem;background:var(--card);box-shadow:var(--sombra)}
  table.tcards tr:first-child{display:none}
  table.tcards td{display:flex;justify-content:space-between;align-items:baseline;gap:.9rem;border-bottom:1px dashed var(--line);padding:.38rem 0;text-align:right;white-space:normal}
  table.tcards td:last-child{border-bottom:0}
  table.tcards td::before{content:attr(data-l);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;text-align:left;flex:0 0 auto}
  table.tcards tr:hover td{background:transparent}
  .card div[style*="overflow-x"]{max-height:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* tablas de detalle: columnas sin comprimir, el contenedor hace scroll */
.tscroll th,.tscroll td{white-space:nowrap}

/* etiquetas de seccion del menu */
.navlbl{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:.2rem .75rem}

/* Tablas anchas: caja acotada para que la barra de scroll horizontal quede SIEMPRE a la vista
   (antes solo se alcanzaba bajando toda la tabla) + encabezados fijos al hacer scroll. */
.card div[style*="overflow-x"]{ max-height:72vh; overflow:auto; }
.card div[style*="overflow-x"] table.tscroll th{ position:sticky; top:0; background:var(--brand-soft); z-index:2; box-shadow:inset 0 -1px 0 var(--line); }

/* Selector de mes (reemplaza el input type=month nativo, feo en es) */
.mesf{display:inline-flex;align-items:center;gap:.45rem;margin:0;font-size:.85rem;color:var(--muted)}
.mesf select.messel{padding:.45rem .7rem;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-weight:500;cursor:pointer;min-width:170px}
.mesf select.messel:hover{border-color:var(--brand)}

/* Asistente IA flotante: pill sobrio estilo SaaS (blanco + borde + sparkle de marca) */
.ia-fab{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:.45rem;padding:.68rem 1.1rem;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);font:inherit;font-weight:700;font-size:.88rem;letter-spacing:.01em;cursor:pointer;box-shadow:0 6px 24px rgba(17,24,39,.14);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.ia-fab svg{display:block;color:var(--brand)}
.ia-fab:hover{transform:translateY(-1px);border-color:var(--brand);box-shadow:0 10px 28px rgba(17,24,39,.18)}
@media (max-width:760px){.ia-fab{width:52px;height:52px;padding:0;justify-content:center}.ia-fab .ia-fab-t{display:none}}
/* sidebar tipo Claude: panel lateral derecho de altura completa que empuja el contenido */
.ia-panel{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(430px,100vw);background:var(--card);border-left:1px solid var(--line);box-shadow:-14px 0 40px rgba(17,24,39,.16);display:flex;flex-direction:column;overflow:hidden}
.ia-panel.hidden{display:none}
body.ia-open .ia-fab{display:none}
@media (min-width:1200px){ body.ia-open .shell{margin-right:430px} .shell{transition:margin-right .25s ease} }
/* botones de siguiente paso autogenerados por el agente */
.ia-sug{align-self:flex-start;display:flex;flex-wrap:wrap;gap:.35rem;margin:.1rem 0 .2rem}
.ia-sug button{padding:.38rem .75rem;border-radius:999px;border:1.5px solid var(--brand);background:var(--card);color:var(--brand);font-size:.78rem;font-weight:700;cursor:pointer}
.ia-sug button:hover{background:var(--brand);color:#fff}
.ia-head{background:var(--brand);color:#fff;font-weight:700;font-size:.92rem;padding:.65rem .9rem;display:flex;align-items:center;justify-content:space-between}
.ia-head a{color:#fff;text-decoration:none;font-weight:800;padding:0 .3rem}
.ia-msgs{flex:1;overflow-y:auto;padding:.8rem;display:flex;flex-direction:column;gap:.5rem}
.iam{max-width:88%;padding:.55rem .8rem;border-radius:14px;font-size:.86rem;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.iam.u{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:4px}
.iam.a{align-self:flex-start;background:var(--gris-bg);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:4px}
.iam.err{align-self:flex-start;background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad)}
.ia-input{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid var(--line)}
.ia-input input{flex:1;margin:0}
.ia-input button{padding:.5rem .9rem}
@media print{.ia-fab,.ia-panel{display:none!important}}

/* Chips de filtro rapido (Ordenes: al dia / por pagar / en gracia / asume / multa) */
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0 0}
.chip{padding:.32rem .8rem;border-radius:999px;border:1.5px solid var(--brand);background:var(--card);color:var(--brand);font-size:.78rem;font-weight:700;cursor:pointer;min-height:34px}
.chip:hover{background:var(--brand-soft)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
/* fila implicada al venir de "Ver el detalle 👉" del cierre */
tr.hl>td{background:var(--amber-bg)!important}
tr.hl>td:first-child{box-shadow:inset 3px 0 0 var(--amber)}

/* ---------- impresion: reporte validado limpio (sin menu ni botones) ---------- */
.print-head{display:none}
@media print{
  .side,.top,.backdrop,.menu-btn,.vsub,button,.mesf,.wbtn,input,select,label,.err{display:none!important}
  .shell{display:block}
  .main{max-width:100%;padding:0}
  body{background:#fff}
  .card,.veredicto,.band{box-shadow:none;break-inside:avoid}
  .card div[style*="overflow-x"]{max-height:none!important;overflow:visible!important}
  .tscroll th,.tscroll td{white-space:normal}
  .print-head{display:block;border-bottom:2px solid #000;margin-bottom:1rem;padding-bottom:.6rem}
  .print-head .ph-brand{font-weight:800;font-size:1.1rem}
  .print-head .ph-brand b{color:var(--brand)}
  .print-head .ph-t{font-size:1.4rem;font-weight:800}
  .print-head .ph-s{color:#444;font-size:.9rem}
  .print-head .ph-sello{margin-top:.45rem;font-weight:700;border:1.5px solid var(--ok);color:var(--ok);display:inline-block;padding:.2rem .6rem;border-radius:8px;font-size:.85rem}
}