:root{--bg:#0a1628;--bg2:#0f1f38;--card:#132a4a;--line:#1f3a62;--tx:#e8eef7;--mut:#8ea3c0;--or:#ff8a1f;--ok:#2ecc8f;--er:#ff5c5c;--wa:#f5c542}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 0,#183a6b,var(--bg) 70%)}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;max-width:360px;width:100%;text-align:center}
.lcard img{width:150px;height:150px;object-fit:cover;border-radius:50%;border:3px solid var(--or)}.lcard h1{margin:12px 0 0;color:var(--or)}.lcard p{color:var(--mut);margin:4px 0 16px}
input,button{font:inherit;border-radius:10px;padding:12px;border:1px solid var(--line)}input{width:100%;background:var(--bg2);color:var(--tx);margin-bottom:10px}
button{background:var(--or);color:#1a0d00;font-weight:700;border:0;cursor:pointer;width:100%}.ghost{background:transparent;color:var(--mut);border:1px solid var(--line);width:auto;padding:6px 12px}
.err{color:var(--er)!important}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--bg2);border-bottom:1px solid var(--line)}
.top div{flex:1;display:flex;flex-direction:column}.top small{color:var(--mut);font-size:12px}.logo{width:38px;height:38px;border-radius:50%;border:2px solid var(--or)}
#menu{display:none;width:auto;background:none;color:var(--tx);font-size:22px;padding:4px 8px}
#app{display:grid;grid-template-columns:230px 1fr;grid-template-rows:auto 1fr;min-height:100vh}.top{grid-column:1/3}
nav{background:var(--bg2);border-right:1px solid var(--line);padding:12px 8px}nav a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;color:var(--mut);text-decoration:none;margin-bottom:2px}
nav a.on,nav a:hover{background:var(--card);color:var(--tx)}nav a.on{box-shadow:inset 3px 0 var(--or)}nav .n{margin-left:auto;background:var(--er);color:#fff;border-radius:99px;font-size:11px;padding:0 7px}
main{padding:22px;max-width:1150px;width:100%}h2{margin:0 0 4px}.sub{color:var(--mut);margin:0 0 18px;font-size:13px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin-bottom:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}.card h3{margin:0 0 6px;font-size:15px;display:flex;justify-content:space-between;gap:8px}
.big{font-size:30px;font-weight:800;color:var(--or)}.mut{color:var(--mut);font-size:13px}
.b{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap;align-self:flex-start}.ok{background:#2ecc8f22;color:var(--ok)}.er{background:#ff5c5c22;color:var(--er)}.wa{background:#f5c54222;color:var(--wa)}.nc{background:#8ea3c022;color:var(--mut)}
.bar{height:8px;background:var(--bg2);border-radius:9px;overflow:hidden;margin:8px 0}.bar i{display:block;height:100%;background:var(--or)}
table{width:100%;border-collapse:collapse;font-size:14px}td,th{text-align:left;padding:9px 6px;border-bottom:1px solid var(--line)}th{color:var(--mut);font-weight:600;font-size:12px}
.al{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--card);border-left:4px solid var(--mut);margin-bottom:8px}.al.alta{border-color:var(--er)}.al.media{border-color:var(--wa)}.al.info{border-color:#4a90e2}
.empty{text-align:center;padding:30px;color:var(--mut)}.empty img{width:110px;height:110px;border-radius:50%;object-fit:cover;opacity:.85;border:2px solid var(--line)}
.dots span{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:3px}.dots .success{background:var(--ok)}.dots .error{background:var(--er)}.dots .running,.dots .waiting{background:var(--wa)}
.tw{overflow-x:auto}
@media(max-width:800px){#app{grid-template-columns:1fr}#menu{display:block}nav{display:none;position:fixed;top:59px;left:0;right:0;bottom:0;z-index:9;border:0}nav.open{display:block}main{padding:14px}.big{font-size:26px}}
[hidden]{display:none!important}
a.card{color:inherit;text-decoration:none;display:block;transition:.15s}a.card:hover{border-color:var(--or);transform:translateY(-2px)}
.card.er{border-left:4px solid var(--er)}.card.wa{border-left:4px solid var(--wa)}.card h3 em{font-style:normal;color:var(--or);font-weight:800}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:10px 0}.stats div{background:var(--bg2);border-radius:10px;padding:8px 4px;text-align:center}.stats b{display:block;font-size:20px;color:var(--or)}.stats span{font-size:11px;color:var(--mut)}
main>.stats{max-width:640px}.nc-t{color:var(--mut);font-style:italic;font-size:12px;font-weight:400}
.hero{display:flex;gap:14px;align-items:center;margin-bottom:8px}.hero img{width:64px;height:64px;border-radius:50%;border:2px solid var(--or)}
.sec{margin:22px 0 10px;font-size:16px}.back{color:var(--or);text-decoration:none;font-size:13px}
.flow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.tag{font-size:10px;font-weight:800;padding:2px 6px;border-radius:5px}.tag.n8n{background:#ea4b7133;color:#ff7aa0}.tag.make{background:#7b5cff33;color:#b3a2ff}
.acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}button.sm{width:auto;padding:7px 12px;font-size:13px;background:var(--bg2);color:var(--tx);border:1px solid var(--line)}button.sm:hover{border-color:var(--or)}button.sm.alt{color:var(--or)}button.sm.danger{color:var(--er);border-color:#ff5c5c55}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mut)}.dot.success{background:var(--ok)}.dot.error{background:var(--er)}.red{color:var(--er)}
.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:20;padding:20px}.mbox{background:var(--card);border:1px solid var(--or);border-radius:16px;padding:20px;max-width:380px;text-align:center}.mbox img{width:60px;border-radius:50%}.mbox .acts{justify-content:center}.mbox button{width:auto;padding:10px 18px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--ok);padding:10px 16px;border-radius:10px;opacity:0;transition:.3s;z-index:30;pointer-events:none}#toast.show{opacity:1}#toast.bad{border-color:var(--er)}
@media(max-width:800px){.stats b{font-size:17px}.stats span{font-size:10px}}
.kpi{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.kpi .big{font-size:26px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}select{background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;flex:1;min-width:150px}
.row{display:flex;justify-content:space-between;margin:4px 0;border-bottom:1px dashed var(--line);padding-bottom:4px}.al a,td a{color:var(--or)}

/* PWA safe-area */
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.top{padding-top:calc(10px + env(safe-area-inset-top))}main{padding-bottom:calc(22px + env(safe-area-inset-bottom))}.login{padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom))}#toast{margin-bottom:env(safe-area-inset-bottom)}
@media(max-width:800px){nav{top:calc(59px + env(safe-area-inset-top));padding-bottom:env(safe-area-inset-bottom)}main{padding-bottom:calc(14px + env(safe-area-inset-bottom))}}
/* Mando v7: tema claro, tarjetas, filtros */
:root[data-tema="claro"]{--bg:#f4f6fb;--bg2:#ffffff;--card:#ffffff;--line:#dfe5ef;--tx:#14213d;--mut:#5b6b85}
:root[data-tema="claro"] .login{background:radial-gradient(circle at 50% 0,#dbe7ff,var(--bg) 70%)}
.card{transition:transform .15s,box-shadow .15s}.card.it:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.18)}
.kpi .kc{border-top:3px solid var(--line)}.kpi .kc.ok{border-top-color:var(--ok)}.kpi .kc.er{border-top-color:var(--er)}.kpi .kc.wa{border-top-color:var(--wa)}
.grid.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.card.it{display:flex;flex-direction:column;gap:4px}.card.it.eliminado{opacity:.6}.ith{display:flex;justify-content:space-between;align-items:center}
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.filtros input{flex:1 1 220px;margin:0}
.filtros select{font:inherit;border-radius:10px;padding:10px;border:1px solid var(--line);background:var(--bg2);color:var(--tx)}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{width:auto;padding:6px 12px;border-radius:999px;background:transparent;color:var(--mut);border:1px solid var(--line);font-weight:600}.chip.on{background:var(--or);color:#1a0d00;border-color:var(--or)}
.btn{display:inline-block;padding:8px 14px;border-radius:10px;background:var(--or);color:#1a0d00!important;font-weight:700;text-decoration:none;margin:4px 4px 0 0}
.tag.make{background:#6d28d9;color:#fff}.tag.n8n{background:#ea4b71;color:#fff}.tag{padding:2px 8px;border-radius:6px;font-size:12px;font-weight:700}
.tema{font-size:18px;padding:6px 10px}
@media (max-width:600px){.cards{grid-template-columns:1fr}.filtros select{flex:1 1 45%}}