:root{--bg:#0b0f17;--card:#131a26;--card2:#1b2433;--bord:#253044;--tx:#eaf0f7;--mut:#8d9ab0;--az:#3b82f6;--ve:#22c55e;--am:#f59e0b;--ro:#ef4444;--gr:#64748b}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;color:var(--tx);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg) radial-gradient(900px 520px at 50% -160px,#1d2f55 0%,rgba(11,15,23,0) 70%) no-repeat;padding:0 12px 70px}
a{color:#8ec5ff;text-decoration:none}
.gris{color:var(--mut)}
.ancho{max-width:680px;margin:0 auto}
/* cabecera */
header{display:flex;gap:10px;align-items:center;padding:14px 0 8px}
header img{width:44px;height:44px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.marca{flex:1;line-height:1.15;min-width:0}
.marca b{display:block;font-size:19px;letter-spacing:.5px}
.marca small{color:var(--mut);font-size:13px}
.salir{padding:7px 12px;border-radius:10px;background:var(--card2);border:1px solid var(--bord);color:#fca5a5;font-size:13px;white-space:nowrap}
button,.wa{padding:12px 16px;border-radius:12px;border:0;background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;text-align:center;box-shadow:0 4px 12px rgba(37,99,235,.3)}
button:active,.wa:active{transform:translateY(1px)}
button:disabled{opacity:.6;cursor:default}
.wa{background:linear-gradient(180deg,#25d366,#16a34a);box-shadow:0 4px 12px rgba(22,163,74,.3)}
.chico{padding:8px 12px;font-size:13px;white-space:nowrap}
/* resumen */
.resumen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 10px}
.cifra{background:var(--card);border:1px solid var(--bord);border-radius:14px;padding:10px 8px;text-align:center}
.cifra b{display:block;font-size:26px;line-height:1.1}
.cifra span{font-size:12px;color:var(--mut)}
.cifra.roja b{color:#fca5a5}
.acciones{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:0 0 6px}
.info{margin:0;font-size:13px;line-height:1.4}
/* buscador */
.campo{display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:12px;border:1px solid var(--bord);background:var(--card)}
.campo:focus-within{border-color:var(--az);box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.campo input{flex:1;min-width:0;border:0;background:transparent;color:#fff;font-size:16px;padding:11px 0;outline:0}
.buscar{position:sticky;top:0;z-index:5;margin:8px 0 2px;background:rgba(19,26,38,.96);backdrop-filter:blur(8px)}
/* tarjetas por proveedor */
.grupo{position:relative;background:var(--card);border:1px solid var(--bord);border-radius:16px;padding:12px 14px 10px 18px;margin:10px 0;box-shadow:0 8px 24px rgba(0,0,0,.25);overflow:hidden}
.grupo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--ro)}
.grupo.otras::before{background:var(--am)}
.grupo.volvieron::before{background:var(--ve)}
.top{display:flex;gap:8px;align-items:center}
.nom{flex:1;font-size:18px;font-weight:700;word-break:break-word}
.n{background:rgba(239,68,68,.18);color:#fecaca;border-radius:999px;padding:2px 11px;font-weight:700;font-size:14px}
.otras .n{background:rgba(245,158,11,.18);color:#fde68a}
.sub{margin:0 0 8px;font-size:12px;word-break:break-all}
.botones{display:flex;gap:8px;margin:8px 0 2px}
.botones>*{flex:1}
details summary{cursor:pointer;color:#8ec5ff;font-size:14px;padding:8px 0 2px}
.volvieron details summary{color:#86efac;font-weight:600;padding:2px 0}
.canales{list-style:none;margin:6px 0 0;padding:0}
.canales li{padding:7px 0;border-top:1px solid var(--bord);display:flex;flex-direction:column;gap:1px}
.cn{font-weight:600;word-break:break-word}
.canales small{font-size:12px}
.meta{font-size:12.5px;color:var(--mut)}
.tag{font-size:11px;padding:1px 7px;border-radius:999px;background:#2a3348;color:#cbd5e1;font-weight:600}
.vacio{text-align:center;color:var(--mut);padding:40px 0}
.error,.bien{padding:10px 12px;border-radius:12px;margin:8px 0;font-size:14px}
.error{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.4);color:#fecaca}
.bien{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#bbf7d0}
.pie{font-size:12px;text-align:center;margin-top:18px}
/* aviso de copiado */
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:#16a34a;color:#fff;padding:10px 18px;border-radius:999px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:.25s;pointer-events:none;z-index:9}
#toast.on{opacity:1;transform:translate(-50%,0)}
/* entrar */
.centro{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px 12px}
.login{width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--bord);border-radius:20px;padding:28px 24px;box-shadow:0 20px 60px rgba(0,0,0,.45);text-align:center}
.login .logo{width:84px;height:84px;border-radius:22px;margin:0 auto 4px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.login h1{margin:0;font-size:24px;letter-spacing:1px}.login .sub{margin:-8px 0 8px;font-size:14px}
.login label{text-align:left;font-size:13px;color:var(--mut);display:flex;flex-direction:column;gap:4px}
.login input{width:100%;padding:12px;border-radius:12px;border:1px solid var(--bord);background:var(--bg);color:#fff;font-size:16px;outline:0}
.login input:focus{border-color:var(--az);box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.login button{margin-top:4px}