/* >cola · Mini App — la misma identidad Terminal TUI que el escritorio
   (decision 2026-09-03): lavanda sobre negro azulado, tipografia del sistema,
   sin emojis, botones de radio 8px. Un solo archivo, sin @import ni fuentes
   externas: la CSP no deja salir a ningun sitio salvo telegram.org. */
:root{
 --p:#0E0F15;--sf:#13141C;--ink:#C9C6DE;--dim:#8D8AA8;--fnt:#615E7C;
 --l:#232336;--l2:#32324C;--acc:#B4A7E8;--accink:#16112A;--rojo:#E8695C;
 --ambar:#E0B366;--verde:#6FE0A8;--gris:#6A6884;--onink:#0C0C12;
 --hov:#171822;--sel:#1B1C2B;--bodyink:#B3AFCC;--actbg:#111219;
 --okbg:#14291E;--okink:#7FE3AE;--waitbg:#2E2611;--waitink:#E4C070;
 --nobg:#1C1D28;--noink:#77748F;--dbg:#16151F;--dbrd:#302E48;--rojobg:#351B1C;
 --acs:30%;--aclbg:20%;--aclfg:72%;--aclbrd:33%;
 --avibg:#2A2410;--aviink:#DDC078;--avibrd:#3A3418;
 --avierrbg:#331716;--avierrink:#F09C90;--avierrbrd:#4A2422;
 --vivobg:#0F1A16;--vivoink:#6FE0A8;
 --rbtn:8px;--rpill:2px;
 --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 color-scheme:dark;}
:root[data-theme="claro"]{
 --p:#F4F4F8;--sf:#FBFBFD;--ink:#2A2735;--dim:#5F5B75;--fnt:#8B87A0;
 --l:#E2E1EC;--l2:#CFCDDE;--acc:#6B5BC7;--accink:#FFFFFF;--rojo:#C0392E;
 --ambar:#9A6E14;--verde:#2E7D57;--gris:#8B87A0;--onink:#FFFFFF;
 --hov:#ECECF3;--sel:#E4E3F0;--bodyink:#3A3648;--actbg:#F7F6FB;
 --okbg:#E0F0E7;--okink:#2E7D57;--waitbg:#F3EAD2;--waitink:#8A6210;
 --nobg:#EAEAF1;--noink:#6D6980;--dbg:#EFEDF8;--dbrd:#D8D4EA;--rojobg:#F8E4E1;
 --acs:45%;--aclbg:90%;--aclfg:32%;--aclbrd:80%;
 --avibg:#F6EFD8;--aviink:#7A5C10;--avibrd:#E6DCB8;
 --avierrbg:#F8E7E4;--avierrink:#96352B;--avierrbrd:#EACCC6;
 --vivobg:#E3F3EA;--vivoink:#256B4B;
 color-scheme:light;}

*{box-sizing:border-box}
/* sin zoom: el pellizco y el doble toque rompian la composicion en el telefono
   (2026-09-04). pan-x/pan-y deja desplazar y prohibe escalar; overflow-x oculto
   es el cinturon por si alguna fila vuelve a desbordar */
html,body{touch-action:pan-x pan-y;overflow-x:hidden;max-width:100vw}
/* el atributo hidden pierde contra cualquier display: de autor (.fuera es grid,
   .hilo es flex). Sin esta regla la pantalla de «fuera» tapaba la app que ya
   funcionaba debajo — visto en el telefono de Leonardo el 2026-09-04 */
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--p);color:var(--ink);font:15px/1.5 var(--mono);
 -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
 padding-bottom:env(safe-area-inset-bottom);overscroll-behavior-y:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
svg{width:18px;height:18px;flex:none}
a{color:var(--acc)}

/* ---------- cabecera */
.top{position:sticky;top:0;z-index:6;background:var(--sf);border-bottom:1px solid var(--l);
 display:flex;align-items:center;gap:10px;padding:10px 14px 8px;flex-wrap:wrap;
 padding-top:calc(10px + env(safe-area-inset-top))}
.lg{font-weight:700;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.lg span{color:var(--acc)}
.vivo{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:99px;
 background:var(--vivobg);color:var(--vivoink);font-size:10.5px;letter-spacing:.08em;
 text-transform:uppercase;white-space:nowrap;border:1px solid transparent;
 flex:1 1 auto;min-width:0;max-width:max-content;overflow:hidden}
.vivo span{overflow:hidden;text-overflow:ellipsis}
.vivo i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
 box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}
.vivo.tibio{background:var(--waitbg);color:var(--waitink)}
.vivo.roto{background:var(--avierrbg);color:var(--avierrink)}
.vivo.cargando i{animation:late 1s ease-in-out infinite}
@keyframes late{50%{opacity:.25}}
.topbtns{margin-left:auto;display:flex;gap:2px;flex:none}
.ib{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
 border-radius:var(--rbtn);color:var(--dim)}
.ib:active{background:var(--hov);color:var(--ink)}
/* contadores = filtros: tocar uno lleva a esa vista */
.nums{width:100%;display:flex;flex-wrap:wrap;gap:4px 6px;font-size:11px;color:var(--dim);
 font-variant-numeric:tabular-nums}
.nums button{white-space:nowrap;padding:3px 8px;border-radius:99px;border:1px solid transparent;color:var(--dim)}
.nums button:active{background:var(--hov)}
.nums button.on{border-color:var(--l2);background:var(--sel);color:var(--ink)}
.nums b{color:var(--ink)}
.nums .u b{color:var(--rojo)}

.aviso{padding:7px 14px;font-size:12px;background:var(--avibg);color:var(--aviink);
 border-bottom:1px solid var(--avibrd)}
.aviso.err{background:var(--avierrbg);color:var(--avierrink);border-color:var(--avierrbrd)}

/* ---------- pestanas */
.tabs{position:sticky;top:0;z-index:5;display:flex;background:var(--sf);border-bottom:1px solid var(--l)}
.tabs button{flex:1;padding:11px 6px 9px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
 color:var(--dim);border-bottom:2px solid transparent;display:inline-flex;gap:6px;
 justify-content:center;align-items:center}
.tabs button.on{color:var(--ink);border-bottom-color:var(--acc)}
.tabs .n{font-size:10.5px;padding:1px 6px;border-radius:99px;background:var(--nobg);color:var(--noink)}
.tabs .n.u{background:var(--rojobg);color:var(--rojo)}
.tabs .n.vacio{display:none}

/* ---------- filtros dentro de la vista */
.filtros{display:flex;gap:6px;padding:10px 14px 4px;overflow-x:auto;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.f{flex:none;padding:6px 11px;border-radius:99px;border:1px solid var(--l2);color:var(--dim);font-size:12px}
.f.on{background:var(--acc);color:var(--accink);border-color:var(--acc)}
.fila-ops{display:flex;gap:8px;padding:4px 14px 6px;align-items:center;font-size:11.5px;color:var(--fnt)}
.fila-ops button{color:var(--dim);text-decoration:underline dotted;text-underline-offset:3px}

/* ---------- lista */
.vista{min-height:60vh;padding-bottom:40px}
.gh{padding:14px 14px 6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fnt)}
.gh b{color:var(--dim);font-weight:600}
.r{display:grid;grid-template-columns:14px 1fr;gap:10px;padding:12px 14px;border-bottom:1px solid var(--l);
 width:100%;text-align:left;align-items:start}
.r:active{background:var(--hov)}
/* la columna 1fr no puede crecer por un asunto en una linea: min-width:0
   (sin esto la fila empujaba la pagina mas alla del ancho del telefono) */
.r>div{min-width:0}
.rn .q{min-width:0}
.r.hecho{opacity:.5}
.dot{width:9px;height:9px;border-radius:50%;margin-top:7px;background:var(--gris)}
.dot.rojo{background:var(--rojo)}.dot.ambar{background:var(--ambar)}.dot.verde{background:var(--verde)}
.dot.urg{box-shadow:0 0 0 3px color-mix(in srgb,var(--rojo) 25%,transparent)}
.rn{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.rn .q{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rn .ag{flex:none;font-size:11px;color:var(--fnt);font-variant-numeric:tabular-nums}
.rs{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);margin-top:1px}
.rx{color:var(--dim);font-size:13px;line-height:1.4;margin-top:2px;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.acct{font-size:10px;padding:1px 6px;border-radius:var(--rpill);letter-spacing:.06em;font-weight:600;
 background:hsl(var(--h) var(--acs) var(--aclbg));color:hsl(var(--h) var(--acs) var(--aclfg));
 border:1px solid hsl(var(--h) var(--acs) var(--aclbrd))}
.tag{font-size:10px;padding:1px 6px;border-radius:var(--rpill);background:var(--nobg);color:var(--noink)}
.st{font-size:10px;padding:1px 6px;border-radius:var(--rpill)}
.st.ok{background:var(--okbg);color:var(--okink)}
.st.wait{background:var(--waitbg);color:var(--waitink)}
.st.no{background:var(--nobg);color:var(--noink)}
.st.urg{background:var(--rojobg);color:var(--rojo)}
.st.hecho{background:var(--okbg);color:var(--okink)}

.vacio{padding:44px 24px;text-align:center;color:var(--fnt);font-size:13.5px;line-height:1.6}
.vacio b{display:block;color:var(--dim);font-size:15px;margin-bottom:6px}
.masbtn{display:block;width:calc(100% - 28px);margin:12px 14px;padding:10px;border:1px dashed var(--l2);
 border-radius:var(--rbtn);color:var(--dim);font-size:12.5px;text-align:center}

/* ---------- brief */
.bsel{display:flex;align-items:center;gap:8px;padding:10px 14px 2px}
.bsel .ib{width:34px;height:34px}
.bsel .dia{flex:1;text-align:center;font-size:12.5px;color:var(--ink)}
.bsel .dia small{display:block;font-size:10.5px;color:var(--fnt)}
.bpases{display:flex;gap:6px;padding:6px 14px 2px;overflow-x:auto;scrollbar-width:none}
.bcab{padding:6px 14px 2px;font-size:11px;color:var(--fnt)}
.bstale{margin:8px 14px 0;padding:7px 10px;border-radius:var(--rbtn);background:var(--avibg);color:var(--aviink);font-size:12px}
.bsec{display:flex;align-items:center;gap:8px;padding:16px 14px 4px;font-size:11px;letter-spacing:.12em;
 text-transform:uppercase;color:var(--dim)}
.bsec .dot{margin:0}
.bitem{display:block;width:100%;text-align:left;padding:10px 14px 10px 32px;border-bottom:1px solid var(--l);position:relative}
.bitem.link::before{content:"";position:absolute;left:16px;top:18px;width:6px;height:6px;border-radius:50%;background:var(--acc)}
.bitem:active{background:var(--hov)}
.bitem>div{min-width:0;overflow-wrap:anywhere}
.bitem .bq{font-weight:600}
.bitem .bt{color:var(--dim)}
.bitem .chips{margin-top:6px}

/* ---------- detalle (pantalla completa, entra por la derecha) */
.det{position:fixed;inset:0;z-index:20;background:var(--p);transform:translateX(100%);
 transition:transform .22s ease;display:flex;flex-direction:column;visibility:hidden}
.det.abierta{transform:none;visibility:visible}
.dethd{display:flex;align-items:center;gap:6px;padding:8px 8px;background:var(--sf);border-bottom:1px solid var(--l);
 padding-top:calc(8px + env(safe-area-inset-top))}
.dettit{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detcuerpo{overflow-y:auto;overflow-x:hidden;flex:1;padding:14px 14px 60px;-webkit-overflow-scrolling:touch}
.detcuerpo *{max-width:100%}
.dh h2{margin:0 0 4px;font-size:17px;line-height:1.35;font-weight:600;text-wrap:balance}
.dh .de{color:var(--dim);font-size:13px;word-break:break-word}
.dh .de b{color:var(--ink);font-weight:600}
.dh .meta{color:var(--fnt);font-size:11.5px;margin-top:3px;font-variant-numeric:tabular-nums}
.acciones{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 12px;
 border-radius:var(--rbtn);border:1px solid var(--l2);background:var(--actbg);color:var(--ink);font-size:13px;
 white-space:nowrap}
.btn:active{background:var(--hov)}
.btn.primario{background:var(--acc);color:var(--accink);border-color:var(--acc)}
.btn.on{background:var(--okbg);color:var(--okink);border-color:transparent}
.btn.star.on{background:var(--waitbg);color:var(--waitink)}
.btn.ancho{grid-column:1/-1}
.btn[disabled]{opacity:.45}
.seclbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fnt);margin:18px 0 6px;
 display:flex;justify-content:space-between;align-items:center}
.seclbl button{color:var(--dim);font-size:11px;text-transform:none;letter-spacing:0;text-decoration:underline dotted}
.cuerpo{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;color:var(--bodyink);font-size:14px;line-height:1.55}
.cuerpo.extracto{color:var(--dim)}
.nota{font-size:11.5px;color:var(--fnt);margin-top:6px;line-height:1.45}
.hilo{display:flex;flex-direction:column;gap:8px}
.hseg{padding:9px 11px;border-left:3px solid var(--acc);border-radius:0 var(--rbtn) var(--rbtn) 0;
 background:color-mix(in srgb,var(--acc) var(--fuerza),var(--sf));white-space:pre-wrap;word-break:break-word;
 font-size:13px;color:var(--bodyink);line-height:1.5}
.hseg small{display:block;color:var(--fnt);font-size:10.5px;margin-bottom:4px}
.adj{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--l);
 border-radius:var(--rbtn);font-size:12.5px;margin-bottom:6px}
.adj span:last-child{color:var(--fnt);flex:none;font-variant-numeric:tabular-nums}
.borr{padding:12px;border-radius:var(--rbtn);background:var(--dbg);border:1px solid var(--dbrd);
 white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.55;color:var(--bodyink)}
.borr.vacio{color:var(--fnt);text-align:left;padding:12px;font-size:13px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px}
.kv span:nth-child(odd){color:var(--fnt)}
.cmd{width:100%;min-height:120px;padding:10px;border-radius:var(--rbtn);border:1px solid var(--l2);
 background:var(--sf);color:var(--ink);font:12.5px/1.45 var(--mono);resize:vertical}

/* ---------- hoja inferior */
.velo{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.45)}
.hoja{position:fixed;left:0;right:0;bottom:0;z-index:31;background:var(--sf);border-top:1px solid var(--l2);
 border-radius:14px 14px 0 0;transform:translateY(110%);transition:transform .22s ease;max-height:86vh;
 display:flex;flex-direction:column;visibility:hidden;padding-bottom:env(safe-area-inset-bottom)}
.hoja.abierta{transform:none;visibility:visible}
.hojahd{display:flex;align-items:center;justify-content:space-between;padding:12px 8px 8px 16px;
 font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.hojacuerpo{overflow-y:auto;padding:0 16px 20px}
.hojacuerpo h3{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fnt);margin:16px 0 8px}
.opts{display:flex;gap:6px;flex-wrap:wrap}
.cfgnota{font-size:12px;color:var(--dim);line-height:1.5;margin-top:8px}
.cfgnota b{color:var(--ink)}
.kvc{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:12px;color:var(--dim);
 font-variant-numeric:tabular-nums}
.kvc span:nth-child(odd){color:var(--fnt)}

/* ---------- avisos flotantes y pantalla fuera de Telegram */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);
 z-index:40;background:var(--ink);color:var(--p);padding:9px 14px;border-radius:var(--rbtn);font-size:12.5px;
 max-width:calc(100% - 40px);text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.fuera{position:fixed;inset:0;z-index:50;background:var(--p);display:grid;place-items:center;padding:24px}
.fueracaja{max-width:360px;line-height:1.55;font-size:14px}
.fueracaja .lg{font-size:18px;margin-bottom:18px}
.fueracaja p{margin:0 0 12px}
.fueracaja .fnt{color:var(--fnt);font-size:12.5px}

@media(prefers-reduced-motion:reduce){.det,.hoja{transition:none}.vivo.cargando i{animation:none}}
@media(min-width:640px){body{max-width:560px;margin:0 auto;border-left:1px solid var(--l);border-right:1px solid var(--l)}
 .det,.hoja{max-width:560px;left:50%;right:auto;width:100%;transform:translate(-50%,0) translateX(100%)}
 .det.abierta{transform:translate(-50%,0)}
 .hoja{transform:translate(-50%,110%)}.hoja.abierta{transform:translate(-50%,0)}}
.btn.apagado{opacity:.55;border-style:dashed}