:root{
  --red:#EA4C4E;
  --red-dark:#C23537;
  --red-tint:#FDEAEA;
  --ink:#14171F;
  --ink-soft:#1E222C;
  --paper:#F6F6F4;
  --card:#FFFFFF;
  --line:#E7E5E0;
  --text:#1E222C;
  --text-mute:#6B6F76;
  --ok:#0F6E56; --ok-tint:#E1F5EE;
  --warn:#854F0B; --warn-tint:#FAEEDA;
  --danger:#A32D2D; --danger-tint:#FCEBEB;
  --info:#185FA5; --info-tint:#E6F1FB;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Inter',-apple-system,Segoe UI,sans-serif; background:var(--paper); color:var(--text); font-size:14px;}
a{color:inherit;}
.app{display:flex; min-height:100vh;}

/* Sidebar */
.sidebar{width:236px; background:var(--ink); color:#fff; display:flex; flex-direction:column; flex-shrink:0; position:fixed; top:0; left:0; bottom:0; z-index:20;}
.brand{display:flex; align-items:center; gap:10px; padding:22px 20px 18px; text-decoration:none; color:#fff;}
.mark{width:30px; height:30px; border-radius:8px; background:var(--red); display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:700; font-size:15px; color:#fff; flex-shrink:0;}
.wordmark{font-family:'Sora',sans-serif; font-weight:600; font-size:15px; letter-spacing:0.5px;}
.wordmark span{display:block; font-family:'Inter',sans-serif; font-weight:400; font-size:9.5px; color:#9b9eaa; letter-spacing:1px; margin-top:1px;}
nav.menu{padding:8px 12px; display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto;}
.nav-item{display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:8px; font-size:13.5px; color:#b7b9c2; text-decoration:none; border-left:3px solid transparent; font-weight:500;}
.nav-item:hover{background:rgba(255,255,255,0.06); color:#fff;}
.nav-item .dot{width:6px; height:6px; border-radius:50%; background:#52555f; flex-shrink:0;}
.nav-item.active{background:rgba(234,76,78,0.14); color:#fff; border-left:3px solid var(--red);}
.nav-item.active .dot{background:var(--red);}
.sidebar-foot{padding:14px 20px; border-top:1px solid #2a2e3a; font-size:10.5px; color:#7d8090;}

/* Main */
.main{margin-left:236px; flex:1; min-width:0;}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 28px; border-bottom:1px solid var(--line); background:var(--card); position:sticky; top:0; z-index:10;}
.top-right{display:flex; align-items:center; gap:14px;}
.top-right > *{margin-left:14px;}
.top-right > *:first-child{margin-left:0;}
.avatar{width:34px; height:34px; border-radius:50%; background:var(--ink-soft); color:#fff; font-family:'Sora',sans-serif; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; text-decoration:none;}
.logout-link{font-size:12.5px; color:var(--text-mute); text-decoration:none;}

.content{padding:26px 28px 60px;}
.head-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:22px;}
h1{font-family:'Sora',sans-serif; font-size:21px; font-weight:600;}
h2{font-family:'Sora',sans-serif; font-size:15px; font-weight:600;}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; padding:9px 16px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--text); cursor:pointer; text-decoration:none;}
.btn:hover{background:var(--paper);}
.btn-primary{background:var(--red); border-color:var(--red); color:#fff;}
.btn-primary:hover{background:var(--red-dark);}
.btn-ghost{border-color:transparent; background:transparent;}
.btn-sm{padding:5px 10px; font-size:12px;}
.btn-danger{color:var(--danger); border-color:var(--danger-tint);}

/* Cards / Panels */
.panel{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:18px;}
.panel-head{padding:16px 18px 12px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line);}
.panel-body{padding:18px;}

/* KPI cards */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px;}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px;}
.kpi-label{font-size:12px; color:var(--text-mute); font-weight:500; margin-bottom:10px;}
.kpi-value{font-family:'Sora',sans-serif; font-size:24px; font-weight:600;}
.kpi-delta{font-size:11.5px; font-weight:500; margin-top:6px; color:var(--ok);}
.kpi-delta.down{color:var(--danger);}
.kpi-delta.mute{color:var(--text-mute);}

/* Tables */
table.data{width:100%; border-collapse:collapse; font-size:13px;}
table.data th{text-align:left; color:var(--text-mute); font-weight:500; font-size:11.5px; text-transform:uppercase; letter-spacing:0.4px; padding:10px 14px; border-bottom:1px solid var(--line);}
table.data td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.data tr:hover td{background:var(--paper);}
.code{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-mute);}

/* Status rail + pills (elemento de identidad visual) */
.row-rail{border-left:3px solid transparent;}
.row-rail.s-warn{border-left-color:#EF9F27;}
.row-rail.s-danger{border-left-color:var(--danger);}
.row-rail.s-info{border-left-color:var(--info);}
.row-rail.s-ok{border-left-color:var(--ok);}
.row-rail.s-mute{border-left-color:#aaa;}
.pill{font-size:11px; font-weight:600; padding:4px 10px; border-radius:20px; white-space:nowrap; display:inline-block;}
.pill.warn{background:var(--warn-tint); color:var(--warn);}
.pill.danger{background:var(--danger-tint); color:var(--danger);}
.pill.info{background:var(--info-tint); color:var(--info);}
.pill.ok{background:var(--ok-tint); color:var(--ok);}
.pill.mute{background:#eee; color:#666;}

/* Forms */
label{display:block; font-size:12.5px; font-weight:500; color:var(--text-mute); margin-bottom:5px;}
input, select, textarea{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; font-family:inherit; background:var(--card); color:var(--text);}
input:focus, select:focus, textarea:focus{outline:2px solid var(--red-tint); border-color:var(--red);}
.field{margin-bottom:14px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}

.alert{padding:11px 14px; border-radius:8px; font-size:13px; margin-bottom:16px;}
.alert-error{background:var(--danger-tint); color:var(--danger);}
.alert-ok{background:var(--ok-tint); color:var(--ok);}

.chip{font-size:12px; font-weight:500; padding:6px 13px; border-radius:20px; border:1px solid var(--line); color:var(--text-mute); background:var(--card); text-decoration:none; display:inline-block;}
.chip.active{background:var(--ink); color:#fff; border-color:var(--ink);}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--ink);}
.login-card{width:340px; background:var(--card); border-radius:14px; padding:32px 28px;}

@media (max-width: 860px){
  .kpis{grid-template-columns:repeat(2,1fr);}
  .grid-2,.grid-3{grid-template-columns:1fr;}
}
@media (max-width: 700px){
  .sidebar{position:fixed; left:0; bottom:0; top:auto; width:100%; height:60px; flex-direction:row; z-index:30;}
  .brand, .sidebar-foot{display:none;}
  nav.menu{flex-direction:row; overflow-x:auto; padding:8px; gap:4px; width:100%;}
  .nav-item{flex-direction:column; gap:3px; font-size:9.5px; border-left:none; border-top:3px solid transparent; white-space:nowrap; padding:6px 10px;}
  .nav-item.active{border-left:none; border-top:3px solid var(--red);}
  .main{margin-left:0; padding-bottom:60px;}
  .content{padding:18px 16px 70px;}
  .topbar{padding:12px 16px;}
  .kpis{grid-template-columns:1fr 1fr; gap:10px;}
  .kpi{padding:13px 14px;}
  .kpi-value{font-size:19px;}
  table.data{display:block; overflow-x:auto; white-space:nowrap;}
}