:root{
  --bg:#EEF2F7; --surface:#FFFFFF; --surface-2:#F6F8FB; --line:#D9E0EA;
  --ink:#0E1726; --muted:#5A6678; --faint:#8B96A8;
  --accent:#1F5FD1; --accent-soft:#E3ECFB;
  --ok:#1F8A5B; --ok-soft:#DFF2E8;
  --warn:#D9701A; --warn-soft:#FBEBDD;
  --crit:#C4302A; --crit-soft:#F8E1DF;
  --off:#8B96A8; --off-soft:#ECEFF3;
  --track:#E4E9F0; --nav:#0E1726; --nav-ink:#C9D3E3; --nav-active:#1F5FD1;
  --shadow:0 1px 2px rgba(14,23,38,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0A0F18; --surface:#111927; --surface-2:#0D1420; --line:#223047;
    --ink:#E5EBF4; --muted:#93A0B5; --faint:#66738A;
    --accent:#6B9CF2; --accent-soft:#182843;
    --ok:#4CC38A; --ok-soft:#12291F;
    --warn:#F29A45; --warn-soft:#33230F;
    --crit:#F0655C; --crit-soft:#3A1715;
    --off:#66738A; --off-soft:#18202C;
    --track:#1C273A; --nav:#070B12; --nav-ink:#93A0B5; --nav-active:#6B9CF2;
    --shadow:none;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A0F18; --surface:#111927; --surface-2:#0D1420; --line:#223047;
  --ink:#E5EBF4; --muted:#93A0B5; --faint:#66738A;
  --accent:#6B9CF2; --accent-soft:#182843;
  --ok:#4CC38A; --ok-soft:#12291F;
  --warn:#F29A45; --warn-soft:#33230F;
  --crit:#F0655C; --crit-soft:#3A1715;
  --off:#66738A; --off-soft:#18202C;
  --track:#1C273A; --nav:#070B12; --nav-ink:#93A0B5; --nav-active:#6B9CF2;
  --shadow:none;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg); color:var(--ink); font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:14px; line-height:1.45; margin:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,sans-serif; margin:0; text-wrap:balance}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

.app{display:grid; grid-template-columns:220px 1fr; min-height:100%}
.side{background:var(--nav); color:var(--nav-ink); padding:20px 12px; display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh}
.side .logo{font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700; font-size:18px; color:#fff; padding:4px 10px 18px; letter-spacing:.01em}
.nav-btn{display:flex; align-items:center; gap:10px; padding:10px; border-radius:8px; border:0; background:transparent; text-align:left; color:var(--nav-ink); font-weight:500}
.nav-btn svg{width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8}
.nav-btn:hover{background:rgba(255,255,255,.06)}
.nav-btn[aria-current="page"]{background:var(--nav-active); color:#fff}
.nav-btn .count{margin-left:auto; font-size:11px; background:var(--warn); color:#fff; border-radius:999px; padding:1px 7px}
.side .foot{margin-top:auto; font-size:11px; padding:10px; color:var(--faint)}

.main{padding-inline:28px; padding-block:22px 60px; min-width:0}
.top{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:22px}
.top h1{font-size:28px; font-weight:700}
.top .sub{color:var(--muted); font-size:13px; margin-top:2px}
.top-actions{display:flex; gap:10px; align-items:center}
.search input{padding:9px 12px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; width:240px; max-width:100%}
.bell{position:relative; width:40px; height:40px; border-radius:8px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center}
.bell svg{width:19px; height:19px; stroke:var(--ink); fill:none; stroke-width:1.8}
.bell .badge{position:absolute; top:-6px; right:-6px; background:var(--warn); color:#fff; font-size:11px; font-weight:600; border-radius:999px; min-width:20px; height:20px; display:grid; place-items:center; padding:0 5px}
.bell .badge[hidden]{display:none}

.page{display:flex; flex-direction:column; gap:28px}
.page[hidden]{display:none!important}

.srv-group{display:flex; flex-direction:column; gap:12px}
.srv-title{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; border-bottom:2px solid var(--ink); padding-bottom:6px}
.srv-title h2{font-size:19px; font-weight:600}
.srv-title .meta{font-size:12px; color:var(--muted); display:flex; gap:12px; flex-wrap:wrap}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); margin-right:6px; vertical-align:1px}
.dot.off{background:var(--crit)} .dot.warn{background:var(--warn)}

.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
.tile{display:flex; flex-direction:column; gap:10px; padding:14px; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); transition:border-color .15s, transform .15s; position:relative}
a.tile:hover{border-color:var(--accent); transform:translateY(-1px)}
.tile .head{display:flex; align-items:center; gap:10px}
.fav{width:34px; height:34px; border-radius:8px; display:grid; place-items:center; font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700; font-size:15px; color:#fff; flex:none}
.tile .name{font-weight:600; line-height:1.2}
.tile .name[contenteditable="true"]{outline:1px dashed var(--accent); border-radius:4px; padding:0 2px}
.tile .url{font-size:12px; color:var(--muted); word-break:break-all}
.tile .foot{display:flex; justify-content:space-between; align-items:center; gap:8px}
.tag{font-size:11px; font-weight:500; padding:2px 8px; border-radius:999px; border:0; font-family:inherit}
.t-prod{background:var(--ok-soft); color:var(--ok)}
.t-admin{background:var(--accent-soft); color:var(--accent)}
.t-demo{background:var(--warn-soft); color:var(--warn)}
.t-test{background:var(--off-soft); color:var(--muted)}
.state{font-size:12px; color:var(--muted)}
.tile.new{border-style:dashed; border-color:var(--accent); background:var(--surface-2)}
.new-label{position:absolute; top:-9px; right:10px; background:var(--accent); color:#fff; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:999px}
.new-actions{display:flex; gap:6px}
.btn{border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:5px 10px; font-size:12px; font-weight:500}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.danger{color:var(--crit)}

.card{background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow)}
details.card>summary{cursor:pointer; list-style:none; padding:12px 16px; font-weight:600; display:flex; justify-content:space-between; gap:10px}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary .n{font-weight:400; color:var(--muted); font-size:13px}
details.card[open]>summary{border-bottom:1px solid var(--line)}
.tbl-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{text-align:left; padding:8px 16px; border-bottom:1px solid var(--line); white-space:nowrap}
th{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:500}
tr:last-child td{border-bottom:0}
td .btn{padding:3px 8px}
.lib-grid{display:grid; gap:10px}

.srv-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px}
.srv-card{padding:16px; display:flex; flex-direction:column; gap:12px}
.srv-card h3{font-size:18px; display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.srv-card .info{font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:2px}
.meter{display:grid; grid-template-columns:50px 1fr 62px; gap:8px; align-items:center; font-size:12px; color:var(--muted)}
.bar{height:7px; background:var(--track); border-radius:4px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--accent); border-radius:4px}
.bar i.warn{background:var(--warn)} .bar i.crit{background:var(--crit)}
.srv-card .actions{display:flex; gap:8px; margin-top:4px; flex-wrap:wrap}

.bk{padding:16px; display:grid; grid-template-columns:1fr auto; gap:10px 16px; align-items:start}
.bk h3{font-size:17px}
.bk .facts{grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px}
.fact .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.fact .val{font-size:14px; margin-top:2px}
.bk .incl{grid-column:1/-1; font-size:12px; color:var(--muted)}
.pill{font-size:12px; font-weight:500; padding:3px 10px; border-radius:999px; white-space:nowrap}
.p-ok{background:var(--ok-soft); color:var(--ok)} .p-warn{background:var(--warn-soft); color:var(--warn)} .p-crit{background:var(--crit-soft); color:var(--crit)}

.alert{display:grid; grid-template-columns:4px 1fr; overflow:hidden}
.alert .stripe{background:var(--warn)} .alert.crit .stripe{background:var(--crit)}
.alert .body{padding:12px 16px; display:flex; flex-direction:column; gap:4px}
.alert .row{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; justify-content:space-between}
.alert b{font-weight:600}
.alert .where{font-size:12px; color:var(--muted)}
.alert .txt{color:var(--muted); font-size:13px}
.alert details summary{cursor:pointer; font-size:12px; color:var(--accent)}
.alert details ul{margin:6px 0 0; padding-left:18px; font-size:12px; color:var(--muted); columns:2; column-gap:24px}
.sec-h{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:-12px}
.muted{color:var(--muted)}

/* Login / setup (pantalla previa al panel) */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px}
.login-card{
  width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:28px 26px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:16px;
}
.login-card h1{font-size:22px; font-weight:700}
.login-card p.sub{margin:0; color:var(--muted); font-size:13px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:12px; color:var(--muted)}
.field input{
  padding:10px 12px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font:inherit;
}
.field input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.form-error{background:var(--crit-soft); color:var(--crit); border-radius:8px; padding:8px 12px; font-size:13px}
.login-card .btn.primary{justify-content:center; padding:10px 14px; display:flex}

/* Modales */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,15,24,.45); display:flex; align-items:flex-start;
  justify-content:center; padding:40px 16px; overflow-y:auto; z-index:50;
}
.modal{
  width:100%; max-width:620px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow);
}
.modal h2{font-size:20px}
.modal .close{align-self:flex-end; margin-top:-8px}
.modal ol{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:14px}
.modal ol li{padding-left:4px}
.modal ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px}
.modal pre{
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:12px;
  overflow-x:auto; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:12.5px; white-space:pre;
}
.modal code.inline{
  background:var(--surface-2); border-radius:4px; padding:1px 5px; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:12.5px;
}
.modal .hint{color:var(--muted); font-size:13px}

@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .side{position:fixed; bottom:0; left:0; right:0; top:auto; height:auto; flex-direction:row; justify-content:space-around; padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px)); z-index:10}
  .side .logo,.side .foot{display:none}
  .nav-btn{flex-direction:column; gap:3px; font-size:10px; padding:6px 4px; flex:1; align-items:center; position:relative}
  .nav-btn .count{position:absolute; margin:0; transform:translate(12px,-4px); font-size:9px; padding:0 5px}
  .main{padding-inline:16px; padding-block:16px 90px}
  .search input{width:170px}
  .alert details ul{columns:1}
}
@media (prefers-reduced-motion:reduce){ .tile{transition:none} a.tile:hover{transform:none} }