:root{
  --bg:#0e1420; --panel:#151d2c; --panel-2:#1b2536; --border:#26324a;
  --text:#e7ecf5; --muted:#8896ad; --brand:#3b82f6; --brand-2:#2563eb;
  --ok:#1f9d67; --ok-bg:#0f2a20; --err:#d9534f; --err-bg:#2c1618;
  --warn:#d99a2b; --warn-bg:#2c2413; --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:14.5px; line-height:1.5;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
small{color:var(--muted)}

/* ---------- Layout ---------- */
.app{display:flex; min-height:100vh}
.sidebar{
  width:240px; background:var(--panel); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:20px 14px; position:sticky; top:0; height:100vh;
}
.brand{display:flex; gap:10px; align-items:center; margin-bottom:26px; padding:0 6px}
.brand-mark{
  width:38px; height:38px; border-radius:9px; background:linear-gradient(135deg,var(--brand),#8b5cf6);
  display:grid; place-items:center; font-weight:700; letter-spacing:.5px;
}
.brand-text{font-weight:600; line-height:1.15}
.sidebar nav{display:flex; flex-direction:column; gap:4px; flex:1}
.sidebar nav a{
  color:var(--muted); padding:9px 12px; border-radius:8px; font-weight:500;
}
.sidebar nav a:hover{background:var(--panel-2); color:var(--text); text-decoration:none}
.sidebar nav a.active{background:var(--brand-2); color:#fff}
.sidebar-foot{border-top:1px solid var(--border); padding-top:14px}
.who{display:flex; flex-direction:column; gap:4px; margin-bottom:10px; padding:0 6px}
.logout{display:block; padding:8px 12px; color:var(--muted); border-radius:8px}
.logout:hover{background:var(--panel-2); text-decoration:none}

.content{flex:1; min-width:0; padding:26px 34px}
.topbar{margin-bottom:20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.topbar h1{margin:0; font-size:22px; font-weight:650}

/* ---------- Panel superior de cron (HUD) ---------- */
.cron-hud{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:8px 12px}
.cron-hud .hud-item{display:flex; flex-direction:column; line-height:1.25; padding:0 10px; border-left:1px solid var(--border)}
.cron-hud .hud-item:first-child{border-left:none}
.cron-hud .hud-state{flex-direction:row; align-items:center; gap:7px; font-weight:600}
.cron-hud .hud-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted)}
.cron-hud strong{font-size:14px; font-variant-numeric:tabular-nums}
.cron-hud .hud-count strong{font-size:17px; color:var(--text)}
.cron-hud .hud-secs{font-size:11px; color:var(--muted)}
.hud-dot{width:10px; height:10px; border-radius:50%; background:var(--muted); flex:none}
.hud-dot.stopped{background:var(--err)}
.hud-dot.active{background:var(--ok); box-shadow:0 0 0 0 rgba(31,157,103,.6); animation:pulse 2.2s infinite}
.hud-dot.running{background:var(--brand); animation:pulse 1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(59,130,246,.5)}70%{box-shadow:0 0 0 7px rgba(59,130,246,0)}100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}}
@media(max-width:760px){ .cron-hud{width:100%} }

/* ---------- Roles / badges ---------- */
.role{font-size:11px; padding:1px 8px; border-radius:20px; width:max-content}
.role-admin{background:#3b2b57; color:#c9b3f2}
.role-operator{background:#20344d; color:#9fc0ee}
.badge{font-size:11.5px; padding:2px 9px; border-radius:20px; display:inline-block}
.badge-ok{background:var(--ok-bg); color:#57d69b}
.badge-off{background:#2a2f3a; color:#96a1b3}
.badge-warn{background:var(--warn-bg); color:#e6c05a}
.badge-err{background:var(--err-bg); color:#f0a0a0}
.badge-info{background:#1c2c46; color:#8fb6ee}

/* ---------- Timeline de eventos ---------- */
.timeline{list-style:none; margin:0; padding:0}
.timeline li{position:relative; padding:0 0 18px 22px; border-left:2px solid var(--border)}
.timeline li:last-child{border-left-color:transparent}
.timeline .dot{position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--brand)}
.timeline .dot.error{background:var(--err)}
.timeline .dot.submitted,.timeline .dot.notice_sent{background:var(--ok)}
.timeline .dot.dry_run,.timeline .dot.duplicate{background:var(--warn)}
.timeline .ev-time{color:var(--muted); font-size:12px}
.timeline .ev-msg{font-weight:550; margin:2px 0}
.timeline .ev-detail{white-space:pre-wrap; background:var(--panel-2); border:1px solid var(--border);
  border-radius:8px; padding:9px 11px; margin-top:6px; font-size:12.5px; color:#c4cfe0; max-height:260px; overflow:auto}
dl.meta{display:grid; grid-template-columns:180px 1fr; gap:8px 16px; margin:0}
dl.meta dt{color:var(--muted)}
dl.meta dd{margin:0}
.pre-block{white-space:pre-wrap; background:var(--panel-2); border:1px solid var(--border);
  border-radius:8px; padding:12px 14px; font-size:13px}

/* ---------- Cards / grid ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:22px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px}
.card .k{color:var(--muted); font-size:13px; margin-bottom:6px}
.card .v{font-size:26px; font-weight:700}
.panel{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; margin-bottom:20px}
.panel h2{margin:0 0 16px; font-size:16px}

/* ---------- Gráficos ---------- */
.chart-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:20px}
.chart-card h2{margin-top:0}
.chart-wide{grid-column:1 / -1}
.chart-box{position:relative; height:280px}
.chart-wide .chart-box{height:300px}
@media(max-width:860px){ .chart-grid{grid-template-columns:1fr} .chart-wide{grid-column:auto} }

/* ---------- Webmail ---------- */
.mail-folders{display:flex; gap:8px; flex-wrap:wrap}
.folder-pill{padding:6px 13px; border-radius:20px; background:var(--panel-2); border:1px solid var(--border); color:var(--muted); font-size:13px}
.folder-pill:hover{color:var(--text); text-decoration:none}
.folder-pill.active{background:var(--brand-2); border-color:var(--brand-2); color:#fff}
table.mail-list td{padding:11px 12px; border-bottom:1px solid var(--border); cursor:pointer; vertical-align:middle}
table.mail-list thead th{padding:9px 12px; text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); border-bottom:1px solid var(--border)}
table.mail-list tbody tr:hover{background:var(--panel-2)}
.mail-num{width:48px; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; font-size:12.5px}
.mail-proc{width:120px; white-space:nowrap}
.mail-proc a.badge:hover{text-decoration:none; filter:brightness(1.15)}
.mail-actions{width:52px; text-align:center}
.mail-actions .btn{cursor:pointer}
table.mail-list tr.unseen .mail-from a, table.mail-list tr.unseen .mail-subject a{font-weight:700; color:var(--text)}
.mail-list a{color:var(--text)}
.mail-list a:hover{text-decoration:none}
.mail-dot{width:26px; text-align:center}
.dot-new{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--brand)}
.mail-from{width:230px; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mail-subject{color:var(--muted)}
.mail-date{width:140px; text-align:right; color:var(--muted); font-size:12.5px; white-space:nowrap}
.clip{margin-left:6px}
.mail-frame{width:100%; min-height:480px; border:1px solid var(--border); border-radius:8px; background:#fff}
.pager{display:flex; gap:14px; align-items:center; justify-content:center; margin-top:16px}

/* ---------- Tablas ---------- */
table{width:100%; border-collapse:collapse}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--border)}
th{color:var(--muted); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.4px}
tbody tr:hover{background:var(--panel-2)}
.table-wrap{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}

/* ---------- Formularios ---------- */
form .row{margin-bottom:16px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
label{display:block; margin-bottom:6px; font-weight:500; font-size:13.5px}
input[type=text],input[type=password],input[type=email],input[type=number],select{
  width:100%; padding:9px 11px; background:var(--panel-2); border:1px solid var(--border);
  color:var(--text); border-radius:8px; font-size:14px;
}
input:focus,select:focus{outline:none; border-color:var(--brand)}
.hint{color:var(--muted); font-size:12px; margin-top:5px}
.check{display:flex; align-items:center; gap:9px}
.check input{width:auto}
.check label{margin:0}
fieldset{border:1px solid var(--border); border-radius:10px; padding:16px 18px; margin:0 0 18px}
legend{padding:0 8px; color:var(--muted); font-weight:600}

/* ---------- Botones ---------- */
.btn{
  display:inline-block; padding:9px 16px; border-radius:8px; border:1px solid transparent;
  font-size:14px; font-weight:600; cursor:pointer; background:var(--brand-2); color:#fff;
}
.btn:hover{background:var(--brand); text-decoration:none}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--text)}
.btn-ghost:hover{background:var(--panel-2)}
.btn-danger{background:transparent; border-color:#5a2b2b; color:#e88}
.btn-danger:hover{background:var(--err-bg)}
.btn-sm{padding:5px 11px; font-size:12.5px}
.actions{display:flex; gap:10px; align-items:center; margin-top:8px}
.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}

/* ---------- Flash / alertas ---------- */
.flash{padding:11px 15px; border-radius:8px; margin-bottom:14px; font-size:14px; border:1px solid transparent}
.flash-success{background:var(--ok-bg); color:#7ce0ac; border-color:#1f6b4a}
.flash-error{background:var(--err-bg); color:#f0a0a0; border-color:#6b2b2b}
.result-box{padding:11px 14px; border-radius:8px; margin-top:6px; font-size:13.5px; display:none}
.result-box.show{display:block}
.result-ok{background:var(--ok-bg); color:#7ce0ac; border:1px solid #1f6b4a}
.result-err{background:var(--err-bg); color:#f0a0a0; border:1px solid #6b2b2b}
.result-line{margin:3px 0}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:20px}
.login-card{width:100%; max-width:380px; background:var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:34px 30px}
.login-card .brand{justify-content:center; margin-bottom:22px}
.login-card h1{font-size:19px; margin:0 0 4px; text-align:center}
.login-card p.sub{text-align:center; color:var(--muted); margin:0 0 22px; font-size:13px}
.spinner{display:inline-block; width:14px; height:14px; border:2px solid #fff6; border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:760px){
  .app{flex-direction:column}
  .sidebar{width:auto; height:auto; position:static; flex-direction:row; flex-wrap:wrap; gap:10px}
  .sidebar nav{flex-direction:row; flex-wrap:wrap}
  .grid-2{grid-template-columns:1fr}
  .content{padding:20px}
}