: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}
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}
.chip,.salir{padding:7px 12px;border-radius:999px;background:var(--card2);border:1px solid var(--bord);color:var(--tx);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw}
.salir{border-radius:10px;color:#fca5a5}
/* buscador */
.buscar{position:sticky;top:0;z-index:5;display:flex;gap:8px;padding:8px 0 10px;background:rgba(11,15,23,.92);backdrop-filter:blur(8px)}
.campo{flex:1;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:12px 0;outline:0}
.limpiar{color:var(--mut);font-size:18px;padding:4px}
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)}
/* filtros */
.filtros{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.f{background:var(--card);border:1px solid var(--bord);color:var(--mut);box-shadow:none;padding:7px 12px;border-radius:999px;font-size:13px;white-space:nowrap}
.f b{color:var(--tx);margin-left:4px}
.f.orden{display:inline-flex;align-items:center}.f.orden.on{background:rgba(245,158,11,.15);border-color:var(--am);color:#fcd34d}
.sep{flex:0 0 1px;background:var(--bord);margin:4px 2px}
.resta{font-weight:400;color:var(--mut);font-size:12px;white-space:nowrap}.porvencer .resta{color:#fcd34d}.vencida .resta{color:#fca5a5}
.f.on{background:var(--card2);border-color:var(--az);color:var(--tx)}
.info{margin:0 0 6px;font-size:13px}
/* tarjetas */
.linea{position:relative;background:var(--card);border:1px solid var(--bord);border-radius:16px;padding:14px 16px 14px 20px;margin:10px 0;box-shadow:0 8px 24px rgba(0,0,0,.25);overflow:hidden}
.linea::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gr)}
.linea.ok::before{background:var(--ve)}.linea.porvencer::before{background:var(--am)}.linea.vencida::before,.linea.off::before{background:var(--ro)}
.linea.vencida,.linea.off{opacity:.7}
.top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.user{font-size:20px;font-weight:700;word-break:break-all;flex:1}
.estado{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--card2);color:var(--mut);display:inline-flex;align-items:center;gap:6px}
.estado::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gr)}
.ok .estado{color:#86efac}.ok .estado::before{background:var(--ve)}
.porvencer .estado{color:#fcd34d}.porvencer .estado::before{background:var(--am)}
.vencida .estado,.off .estado{color:#fca5a5}.vencida .estado::before,.off .estado::before{background:var(--ro)}
.tag{font-size:11px;padding:3px 8px;border-radius:999px;background:#2a3348;color:#cbd5e1;font-weight:600}
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:12px 0}
.datos div{background:var(--card2);border-radius:10px;padding:8px 10px;min-width:0}
.datos dt{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px}
.datos dd{margin:2px 0 0;font-weight:600;word-break:break-all}
.msg{background:#0b0f17;border:1px dashed var(--bord);border-radius:12px;padding:12px;margin:0 0 10px;white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:14px;line-height:1.5;color:#d5dde8}
.botones{display:flex;gap:8px}
.botones .copiar,.botones .wa{flex:1}
.wa{background:linear-gradient(180deg,#25d366,#16a34a);box-shadow:0 4px 12px rgba(22,163,74,.3)}
button.ok{background:linear-gradient(180deg,#22c55e,#16a34a)}
.ver{flex:0 0 auto;background:var(--card2);border:1px solid var(--bord);box-shadow:none;padding:12px 14px}
.vacio{text-align:center;color:var(--mut);padding:40px 0}
.error{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.4);color:#fecaca;padding:10px 12px;border-radius:12px;margin:8px 0}
/* 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}
.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}.login .pie{margin:4px 0 0;font-size:13px}