/* TandemBot — consola oscura de alto contraste: navy profundo, acento cian eléctrico, datos en mono.
   Colores de estado reservados y siempre acompañados de texto. */
:root{
  color-scheme:dark;
  --bg:#04080f; --bg-2:#070e19;
  --panel:#0a1422; --panel-2:#0e1a2b; --panel-3:#12223a;
  --glass:rgba(10,20,34,.78);
  --ink:#e8f0f7; --ink-2:#a9bccb; --muted:#6f8597; --faint:#435869;
  --line:#132438; --line-2:#1c3350;
  --hover:rgba(34,211,238,.06);
  --acc:#22d3ee; --acc-2:#3b82f6; --acc-soft:rgba(34,211,238,.13); --acc-ink:#03121a;
  --grad:linear-gradient(135deg,#22d3ee,#3b82f6);
  --good:#34d399; --warn:#fbbf24; --crit:#fb7185; --info:#7dd3fc; --vio:#a78bfa;
  --good-bg:rgba(52,211,153,.12); --warn-bg:rgba(251,191,36,.13); --crit-bg:rgba(251,113,133,.12); --info-bg:rgba(125,211,252,.11); --vio-bg:rgba(167,139,250,.13);
  --wa:#0b141a; --wa-in:#1f2c34; --wa-out:#005c4b;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 12px 32px rgba(0,0,0,.4);
  --glow:0 0 0 1px rgba(34,211,238,.35),0 0 26px rgba(34,211,238,.16);
  --f-body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-label:'Josefin Sans','Century Gothic',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --r:14px; --r-s:9px; --side:248px; --top:60px;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#eef3f7; --bg-2:#e6edf2; --panel:#ffffff; --panel-2:#f5f8fb; --panel-3:#eaf1f6; --glass:rgba(255,255,255,.85);
  --ink:#0b1f2d; --ink-2:#3d5262; --muted:#687d8c; --faint:#a3b3bf; --line:#e1e8ee; --line-2:#cdd9e2; --hover:rgba(8,145,178,.06);
  --acc:#0891b2; --acc-2:#2563eb; --acc-soft:rgba(8,145,178,.10); --acc-ink:#fff;
  --good:#059669; --warn:#b77900; --crit:#e11d48; --info:#0369a1; --vio:#7c3aed;
  --good-bg:rgba(5,150,105,.10); --warn-bg:rgba(183,121,0,.11); --crit-bg:rgba(225,29,72,.08); --info-bg:rgba(3,105,161,.08); --vio-bg:rgba(124,58,237,.09);
  --wa:#efeae2; --wa-in:#ffffff; --wa-out:#d9fdd3;
  --shadow:0 1px 2px rgba(11,31,45,.06),0 8px 22px rgba(11,31,45,.07); --glow:0 0 0 1px rgba(8,145,178,.35),0 0 18px rgba(8,145,178,.12);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
::selection{background:var(--acc-soft)}
.mono,.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.label{font-family:var(--f-label);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--muted);font-weight:600}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:12.5px}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
h1{font-size:24px} h2{font-size:17px} h3{font-size:14px}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:2px solid var(--bg)} ::-webkit-scrollbar-track{background:transparent}

/* ---------- layout ---------- */
.app{display:grid;grid-template-columns:var(--side) 1fr;height:100vh;height:100dvh}
.side{background:linear-gradient(180deg,#06101d,#040a13);border-right:1px solid #0f1f33;display:flex;flex-direction:column;min-height:0;color:#cfdce6}
:root[data-theme="light"] .side{background:linear-gradient(180deg,#0b1f2d,#08192a)}
.brand{display:flex;align-items:center;gap:11px;padding:18px 18px 16px}
.brand .logo{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,rgba(34,211,238,.25),transparent 60%),#0a1828;border:1px solid #17304a;box-shadow:0 0 22px rgba(34,211,238,.18)}
.brand .logo svg{width:24px;height:24px}
.brand b{font-family:var(--f-label);letter-spacing:.14em;font-size:15px;color:#fff;display:block}
.brand small{color:#6f8597;font-size:11px}
.side .sec{padding:6px 10px}
.side .sec>.label{display:block;padding:12px 10px 6px;color:#58718a}
.navi{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:none;border-radius:9px;color:#b9c9d6;cursor:pointer;text-align:left;font-size:13.5px}
.navi:hover{background:rgba(255,255,255,.04);color:#fff}
.navi.on{background:linear-gradient(90deg,rgba(34,211,238,.16),rgba(34,211,238,.03));color:#fff;box-shadow:inset 2px 0 0 var(--acc)}
.navi svg{width:17px;height:17px;flex:none;opacity:.9}
.navi .thumb{width:26px;height:26px;border-radius:7px;flex:none;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.08)}
.navi .badge{margin-left:auto;font-family:var(--f-mono);font-size:10.5px;background:rgba(251,191,36,.16);color:#fbbf24;border-radius:20px;padding:1px 7px}
.proylist{overflow:auto;flex:1;min-height:0}
.side .pie{padding:12px 14px;border-top:1px solid #0f1f33;display:flex;align-items:center;gap:10px}
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.top{height:var(--top);display:flex;align-items:center;gap:12px;padding:0 22px;border-bottom:1px solid var(--line);background:var(--glass);backdrop-filter:blur(14px);flex:none;position:relative;z-index:5}
.top .migas{display:flex;align-items:center;gap:8px;min-width:0;flex:1;font-size:13.5px}
.top .migas a{color:var(--muted);text-decoration:none} .top .migas a:hover{color:var(--ink)}
.top .migas b{font-weight:600}
.contenido{flex:1;overflow:auto;min-height:0;padding:24px 26px 60px}
.contenido.sinpad{padding:0}
.hamb{display:none}

/* ---------- marcador de créditos ---------- */
.creditos{display:flex;align-items:center;gap:12px;padding:6px 12px 6px 10px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel);cursor:pointer;font-size:12px;white-space:nowrap}
.creditos:hover{box-shadow:var(--glow)}
.creditos .ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--acc-soft);color:var(--acc)}
.creditos .ico svg{width:15px;height:15px}
.creditos .k{font-family:var(--f-label);font-size:9.5px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;display:block;line-height:1}
.creditos .v{font-family:var(--f-mono);font-weight:600;font-size:13px;line-height:1.35}
.creditos .sep{width:1px;height:26px;background:var(--line-2)}
.creditos .barra{width:64px;height:4px;border-radius:4px;background:var(--line-2);overflow:hidden;margin-top:3px}
.creditos .barra i{display:block;height:100%;background:var(--grad)}
.creditos.alerta .barra i{background:var(--warn)} .creditos.lleno .barra i{background:var(--crit)}

/* ---------- controles ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel-2);cursor:pointer;font-size:13px;font-weight:500;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover{border-color:var(--acc);background:var(--panel-3)}
.btn svg{width:16px;height:16px}
.btn.primario{background:var(--grad);border-color:transparent;color:#021019;font-weight:600}
.btn.primario:hover{box-shadow:var(--glow);filter:brightness(1.07)}
.btn.sutil{background:none;border-color:transparent;color:var(--ink-2)} .btn.sutil:hover{background:var(--hover);color:var(--ink)}
.btn.peligro{color:var(--crit);border-color:rgba(251,113,133,.35);background:none} .btn.peligro:hover{background:var(--crit-bg);border-color:var(--crit)}
.btn.ok{color:var(--good);border-color:rgba(52,211,153,.35);background:none} .btn.ok:hover{background:var(--good-bg)}
.btn.chico{padding:5px 10px;font-size:12px;border-radius:8px} .btn.chico svg{width:14px;height:14px}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.icono{width:34px;height:34px;display:inline-grid;place-items:center;border-radius:9px;border:1px solid transparent;background:none;cursor:pointer;color:var(--ink-2)}
.icono:hover{background:var(--hover);color:var(--ink);border-color:var(--line-2)}
.icono svg{width:18px;height:18px}
.campo{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg-2);outline:none;transition:border-color .15s,box-shadow .15s}
.campo:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
textarea.campo{resize:vertical;min-height:84px;line-height:1.5}
select.campo{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
.fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:6px}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid2>*,.grid3>*{min-width:0}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.f-req::after{content:' *';color:var(--acc)}
.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;font-size:13px}
.switch input{display:none}
.switch i{width:34px;height:20px;border-radius:20px;background:var(--line-2);position:relative;transition:background .15s;flex:none}
.switch i::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s}
.switch input:checked+i{background:var(--acc)} .switch input:checked+i::after{transform:translateX(14px)}
.check{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:13px}
.check input{accent-color:var(--acc);width:15px;height:15px}

/* ---------- tarjetas ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card.pad{padding:18px}
.card .cab{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.card .cab h2,.card .cab h3{flex:1}
.card .cuerpo{padding:16px 18px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:22px}
.kpi{padding:14px 16px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;inset:0 0 auto;height:2px;background:var(--grad);opacity:.7}
.kpi .v{font-family:var(--f-mono);font-size:26px;font-weight:600;letter-spacing:-.02em;margin-top:6px}
.kpi .s{font-size:12px;color:var(--muted);margin-top:2px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:500;background:var(--panel-3);color:var(--ink-2);border:1px solid var(--line-2);white-space:nowrap}
.chip.ok{background:var(--good-bg);color:var(--good);border-color:transparent}
.chip.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.chip.crit{background:var(--crit-bg);color:var(--crit);border-color:transparent}
.chip.info{background:var(--info-bg);color:var(--info);border-color:transparent}
.chip.vio{background:var(--vio-bg);color:var(--vio);border-color:transparent}
.chip.acc{background:var(--acc-soft);color:var(--acc);border-color:transparent}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.dot.aprobada{background:var(--good);box-shadow:0 0 8px var(--good)} .dot.revision{background:var(--warn)} .dot.borrador{background:var(--vio)}
.vacio{padding:42px 20px;text-align:center;color:var(--muted)}
.vacio svg{width:38px;height:38px;color:var(--faint);margin-bottom:8px}
.aviso{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--warn-bg);border:1px solid rgba(251,191,36,.25);margin-bottom:16px}
.aviso.info{background:var(--info-bg);border-color:rgba(125,211,252,.22)}
.aviso svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--warn)} .aviso.info svg{color:var(--info)}

/* ---------- proyectos ---------- */
.proyectos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.pcard{cursor:pointer;overflow:hidden;transition:transform .15s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--glow);border-color:transparent}
.pcard .portada{height:150px;background:var(--panel-3) center/cover;position:relative}
.pcard .portada::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(4,8,15,.85))}
.pcard .portada .tit{position:absolute;left:16px;right:16px;bottom:12px;z-index:1;color:#fff}
.pcard .portada .tit h2{font-size:19px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.pcard .portada .tit small{color:#cfe2ee;font-size:12px}
.pcard .portada .sinfoto{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-label);font-size:44px;color:rgba(255,255,255,.18);letter-spacing:.1em}
.pcard .info{padding:14px 16px;display:flex;flex-direction:column;gap:12px;flex:1}
.listo{display:flex;align-items:center;gap:12px}
.anillo{--p:0;width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--acc) calc(var(--p)*1%),var(--line-2) 0);display:grid;place-items:center;flex:none}
.anillo span{width:42px;height:42px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;font-weight:600}
.barras{display:flex;height:6px;border-radius:6px;overflow:hidden;background:var(--line-2);flex:1}
.barras i{display:block;height:100%}
.leyenda{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.leyenda span{display:inline-flex;align-items:center;gap:5px}
.nuevo-p{border:1.5px dashed var(--line-2);background:none;box-shadow:none;display:grid;place-items:center;min-height:290px;color:var(--muted);cursor:pointer;border-radius:var(--r)}
.nuevo-p:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-soft)}
.nuevo-p svg{width:34px;height:34px}

/* cabecera del proyecto */
.hero{position:relative;height:178px;background:var(--panel-3) center/cover;border-bottom:1px solid var(--line)}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,8,15,.94) 0%,rgba(4,8,15,.62) 55%,rgba(4,8,15,.25))}
.hero .dentro{position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;gap:20px;padding:22px 26px;color:#fff}
.hero h1{font-size:28px;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.hero .meta{color:#c4d6e2;font-size:13px;margin-top:4px}
.hero .cambiar{position:absolute;top:14px;right:16px;z-index:2}
.tabs{display:flex;gap:2px;padding:0 20px;border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:3;overflow-x:auto}
.tab{padding:13px 14px 11px;border:0;background:none;color:var(--muted);cursor:pointer;font-weight:500;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.tab svg{width:16px;height:16px}
.tab:hover{color:var(--ink)} .tab.on{color:var(--ink);border-bottom-color:var(--acc)}
.tab .n{font-family:var(--f-mono);font-size:10.5px;padding:0 6px;border-radius:10px;background:var(--warn-bg);color:var(--warn)}
.seccion{padding:22px 26px 60px}

/* ---------- banco ---------- */
.barra-qa{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.buscar{position:relative;flex:1;min-width:220px}
.buscar svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
.buscar input{padding-left:34px}
.filtros{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.fchip{padding:5px 11px;border-radius:20px;border:1px solid var(--line-2);background:none;cursor:pointer;font-size:12px;color:var(--ink-2);display:inline-flex;gap:6px;align-items:center}
.fchip:hover{border-color:var(--acc)} .fchip.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc)}
.fchip .c{font-family:var(--f-mono);font-size:10.5px;opacity:.8}
.lote{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:var(--acc-soft);border:1px solid rgba(34,211,238,.3);margin-bottom:10px;flex-wrap:wrap}
.tabla{width:100%;border-collapse:separate;border-spacing:0}
.tabla th{position:sticky;top:0;background:var(--panel);text-align:left;font-family:var(--f-label);text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;color:var(--muted);font-weight:600;padding:10px 10px;border-bottom:1px solid var(--line);z-index:1}
.tabla td{padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tabla tr.qa{cursor:pointer} .tabla tr.qa:hover td{background:var(--hover)}
.tabla tr.sel td{background:var(--acc-soft)}
.tabla .q{font-weight:500} .tabla .a{color:var(--ink-2);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tabla .cat{font-size:12px;color:var(--muted)}
.corchete{background:var(--warn-bg);color:var(--warn);border-radius:4px;padding:0 3px}

/* ---------- capa lateral y modal ---------- */
.capa{position:fixed;inset:0;background:rgba(2,6,12,.6);backdrop-filter:blur(3px);z-index:40;display:flex;justify-content:flex-end;animation:fade .15s}
.capa.centro{justify-content:center;align-items:center;padding:20px}
.cajon{width:min(640px,100%);height:100%;background:var(--panel);border-left:1px solid var(--line-2);display:flex;flex-direction:column;animation:entra .2s ease-out}
.modal{width:min(720px,100%);max-height:calc(100vh - 40px);background:var(--panel);border:1px solid var(--line-2);border-radius:18px;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:sube .2s ease-out}
.modal.ancho{width:min(920px,100%)}
.cajon .cab,.modal .cab{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line);flex:none}
.cajon .cab h2,.modal .cab h2{flex:1}
.cajon .cuerpo,.modal .cuerpo{flex:1;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.cajon .pie,.modal .pie{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;flex:none}
@keyframes fade{from{opacity:0}} @keyframes entra{from{transform:translateX(30px);opacity:.4}} @keyframes sube{from{transform:translateY(14px);opacity:.4}}
.pasos{display:flex;gap:8px;align-items:center}
.paso{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.paso b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);font-family:var(--f-mono);font-size:11px}
.paso.on{color:var(--ink)} .paso.on b{background:var(--grad);color:#021019;border-color:transparent}
.paso.hecho b{background:var(--good-bg);color:var(--good);border-color:transparent}
.soltar{border:1.5px dashed var(--line-2);border-radius:14px;padding:22px;text-align:center;color:var(--muted);cursor:pointer;transition:all .15s}
.soltar:hover,.soltar.sobre{border-color:var(--acc);background:var(--acc-soft);color:var(--ink)}
.soltar svg{width:26px;height:26px;color:var(--acc)}
.foto-prev{height:150px;border-radius:12px;background:var(--panel-3) center/cover;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--muted);cursor:pointer;position:relative;overflow:hidden}
.foto-prev:hover{box-shadow:var(--glow)}
.vars{display:flex;flex-wrap:wrap;gap:6px}
.var{display:inline-flex;align-items:center;gap:4px;padding:4px 6px 4px 10px;border-radius:20px;background:var(--panel-3);border:1px solid var(--line-2);font-size:12.5px}
.var button{border:0;background:none;color:var(--muted);cursor:pointer;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;padding:0}
.var button:hover{background:var(--crit-bg);color:var(--crit)} .var button svg{width:12px;height:12px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.seg button{border:0;background:none;padding:7px 12px;cursor:pointer;font-size:12.5px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button.on{background:var(--acc-soft);color:var(--acc)}

/* ---------- chat estilo WhatsApp ---------- */
.entrenar{display:grid;grid-template-columns:minmax(360px,1fr) minmax(340px,440px);gap:18px;align-items:start}
.telefono{background:var(--wa);border-radius:20px;border:1px solid var(--line-2);display:flex;flex-direction:column;height:calc(100vh - 290px);min-height:480px;overflow:hidden;box-shadow:var(--shadow)}
.telefono .cab{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel-2);border-bottom:1px solid var(--line)}
.telefono .av{width:36px;height:36px;border-radius:50%;background:var(--panel-3) center/cover;flex:none;border:1px solid var(--line-2)}
.mensajes{flex:1;overflow:auto;padding:16px 14px;display:flex;flex-direction:column;gap:8px;background-image:radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:18px 18px}
.burbuja{max-width:82%;padding:8px 11px 6px;border-radius:10px;font-size:14px;line-height:1.42;position:relative;white-space:pre-wrap;word-wrap:break-word;box-shadow:0 1px 1px rgba(0,0,0,.18)}
.burbuja.cliente{align-self:flex-end;background:var(--wa-out);border-top-right-radius:3px}
.burbuja.bot,.burbuja.asesor{align-self:flex-start;background:var(--wa-in);border-top-left-radius:3px}
.burbuja.asesor{border:1px solid var(--acc)}
:root:not([data-theme="light"]) .burbuja{color:#e9edef}
.burbuja .hora{font-size:10.5px;opacity:.6;margin-left:8px;float:right;margin-top:6px}
.burbuja .meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08);white-space:normal;align-items:center}
.burbuja .meta .chip{font-size:10.5px;cursor:pointer}
.fb{display:inline-flex;gap:2px;margin-left:auto}
.fb button{border:0;background:none;cursor:pointer;opacity:.55;font-size:14px;padding:2px 4px;border-radius:6px;color:inherit}
.fb button:hover,.fb button.on{opacity:1;background:rgba(255,255,255,.08)}
.escribir{display:flex;gap:8px;padding:10px;background:var(--panel-2);border-top:1px solid var(--line)}
.escribir input{border-radius:22px}
.escribir .icono{background:var(--grad);color:#021019;border-radius:50%;flex:none}
.pensando{align-self:flex-start;background:var(--wa-in);padding:10px 14px;border-radius:10px;display:flex;gap:4px}
.pensando i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:bote 1s infinite}
.pensando i:nth-child(2){animation-delay:.15s} .pensando i:nth-child(3){animation-delay:.3s}
@keyframes bote{50%{transform:translateY(-4px);opacity:.5}}
.pregunta-bot{border:1px solid var(--line-2);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--panel-2)}
.pregunta-bot .q{font-weight:600;display:flex;gap:8px}
.pregunta-bot .q svg{width:18px;height:18px;color:var(--acc);flex:none;margin-top:1px}
.lista{display:flex;flex-direction:column}
.lista>.it{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.lista>.it:hover{background:var(--hover)} .lista>.it.on{background:var(--acc-soft)}
.lista>.it:last-child{border-bottom:0}
.conv-layout{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}

/* ---------- uso ---------- */
.medidor{height:10px;border-radius:10px;background:var(--line-2);overflow:hidden}
.medidor i{display:block;height:100%;background:var(--grad);border-radius:10px}
.desglose{display:flex;flex-direction:column;gap:9px}
.desglose .r{display:grid;grid-template-columns:minmax(120px,1.1fr) 2fr 80px;gap:10px;align-items:center;font-size:13px}
.desglose .r .b{height:8px;border-radius:8px;background:var(--line-2);overflow:hidden}
.desglose .r .b i{display:block;height:100%;background:var(--acc);border-radius:8px}
.desglose .r .v{font-family:var(--f-mono);text-align:right;font-size:12.5px}
.columnas{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:10px}
.columnas .c{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.columnas .c i{width:100%;max-width:46px;background:var(--grad);border-radius:6px 6px 2px 2px;min-height:2px}
.columnas .c small{font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:600;color:#fff;flex:none;overflow:hidden;background:var(--acc-2)}
.avatar img{width:100%;height:100%;object-fit:cover}
.menu-u{position:absolute;right:16px;top:54px;background:var(--panel);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.45);padding:6px;min-width:230px;z-index:30}
.menu-u button{width:100%;justify-content:flex-start}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--panel-2);border:1px solid var(--line-2);padding:11px 18px;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.4);z-index:99;font-size:13.5px;max-width:90vw;animation:sube .2s}
.toast.error{border-color:var(--crit);color:var(--crit)}
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(800px 500px at 70% 10%,rgba(34,211,238,.12),transparent 60%),radial-gradient(700px 500px at 10% 90%,rgba(59,130,246,.12),transparent 60%),var(--bg)}
.login .caja{width:min(420px,100%);padding:34px 30px;text-align:center}
.login .logo{width:64px;height:64px;margin:0 auto 14px;border-radius:18px;display:grid;place-items:center;background:#0a1828;border:1px solid #17304a;box-shadow:0 0 40px rgba(34,211,238,.25)}
.login .logo svg{width:40px;height:40px}
.login h1{font-family:var(--f-label);letter-spacing:.16em;font-size:24px}
.spin{width:16px;height:16px;border:2px solid var(--line-2);border-top-color:var(--acc);border-radius:50%;animation:gira .8s linear infinite;display:inline-block;flex:none}
@keyframes gira{to{transform:rotate(360deg)}}
.job{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid rgba(34,211,238,.3);background:var(--acc-soft);margin-bottom:16px}
.hechos{display:flex;flex-direction:column;gap:6px}
.hechos div{padding:7px 10px;border-radius:8px;background:var(--panel-2);font-size:13px;border-left:2px solid var(--acc)}
.hechos div.conf{border-left-color:var(--crit);opacity:.85}
.preview-wa{background:var(--wa);border-radius:12px;padding:12px;border:1px solid var(--line-2)}
code{font-family:var(--f-mono);font-size:12px;background:var(--panel-3);padding:1px 5px;border-radius:5px}
.tabla-u td{vertical-align:middle}

@media (max-width:1100px){.entrenar,.conv-layout{grid-template-columns:1fr}.telefono{height:520px}}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:270px;z-index:50;transform:translateX(-100%);transition:transform .2s}
  .app.menu .side{transform:none;box-shadow:0 0 60px rgba(0,0,0,.6)}
  .hamb{display:inline-grid}
  .top{padding:0 12px}
  .contenido{padding:16px 16px 50px} .seccion{padding:16px 16px 50px}
  .creditos .sep,.creditos .total{display:none}
  .grid2,.grid3{grid-template-columns:1fr}
  .hero .dentro{padding:16px} .hero h1{font-size:22px}
  .tabla .col-a,.tabla .col-c,.tabla .col-u{display:none}
  .desglose .r{grid-template-columns:1fr 1fr 70px}
}