/* Set de monitoreo Grafana — hoja de estilo única
   Paleta fija del proyecto. No improvisar colores. */
:root{
  --bg:#0F1319; --panel:#171C25; --panel2:#1E242F; --line:#2A323E;
  --ink:#E8EDF3; --ink2:#98A3B3; --ink3:#6E7889;
  --amber:#F2A93B; --green:#4CC96A; --slate:#6B7788; --red:#E5484D; --blue:#5AA9E6;
  --hdr:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-size:15.5px;line-height:1.55;
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%}
.wrap{max-width:1360px;margin:0 auto;padding:0 22px}
.saltar{position:absolute;left:-999px;top:0;background:var(--amber);color:#12161D;padding:10px 16px;
  border-radius:0 0 8px 0;font-weight:700;z-index:200}
.saltar:focus{left:0}

/* ---------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:90;background:rgba(15,19,25,.97);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.hdr-in{max-width:1360px;margin:0 auto;padding:0 22px;height:var(--hdr);display:flex;align-items:center;gap:20px}
.marca{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.marca svg{width:32px;height:32px;flex:0 0 auto}
.marca svg rect{fill:#1E242F}
.marca svg path{stroke:var(--amber);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.marca span{display:flex;flex-direction:column;line-height:1.2}
.marca b{font-size:15px;letter-spacing:-.2px}
.marca i{font-style:normal;font-size:11px;color:var(--ink3)}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav>a,.nav>button{background:none;border:0;color:var(--ink2);font-size:13.5px;font-weight:600;
  padding:9px 13px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap}
.nav>a:hover,.nav>button:hover{color:var(--ink);background:var(--panel2)}
.nav>a.act,.nav>button.act{color:var(--amber)}
.nav>button svg{width:9px;height:9px;transition:transform .18s}
.nav>button[aria-expanded=true] svg{transform:rotate(180deg)}
.nav>button[aria-expanded=true]{color:var(--amber);background:var(--panel2)}

/* mega menú */
.mega{border-top:1px solid var(--line);background:var(--panel);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.mega-in{max-width:1360px;margin:0 auto;padding:20px 22px 24px;display:grid;
  grid-template-columns:repeat(6,1fr);gap:8px 20px}
.mega h4{margin:0 0 9px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--amber)}
.mega h4 a{display:block}
.mega h4 a:hover{text-decoration:underline}
.mega ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.mega li a{display:block;font-size:12.5px;color:var(--ink2);padding:4px 7px;border-radius:6px;
  line-height:1.35;border-left:2px solid transparent}
.mega li a:hover{color:var(--ink);background:var(--panel2)}
.mega li a.t{border-left-color:var(--green)}
.mega li a.p{border-left-color:var(--amber)}
.mega li a.x{border-left-color:var(--slate)}
.mega-pie{grid-column:1/-1;border-top:1px solid var(--line);margin-top:6px;padding-top:12px;
  display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--ink3)}
.mega-pie b{color:var(--ink2)}

/* hamburguesa */
.burger{display:none;background:none;border:1px solid var(--line);border-radius:9px;width:42px;height:38px;
  cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;flex:0 0 auto}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.22s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* cajón móvil */
.velo{position:fixed;inset:0;background:rgba(6,9,13,.72);z-index:95}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(390px,90vw);background:var(--panel);z-index:96;
  border-left:1px solid var(--line);overflow-y:auto;padding:16px 0 40px}
.drawer h3{margin:0;padding:14px 20px 8px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink3)}
.drawer .dl{display:block;padding:11px 20px;font-size:14.5px;font-weight:600;color:var(--ink2);border-bottom:1px solid #212836}
.drawer .dl:hover{color:var(--ink);background:var(--panel2)}
.drawer details{border-bottom:1px solid #212836}
.drawer summary{padding:11px 20px;font-size:14.5px;font-weight:700;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{content:"+";color:var(--amber);font-weight:700;font-size:17px}
.drawer details[open]>summary::after{content:"–"}
.drawer details details summary{padding-left:34px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.drawer details details{border-bottom:0}
.drawer .ds{display:block;padding:8px 20px 8px 48px;font-size:12.5px;color:var(--ink2);
  border-left:2px solid transparent}
.drawer .ds:hover{color:var(--ink);background:var(--panel2)}
.drawer .ds.t{border-left-color:var(--green)}
.drawer .ds.p{border-left-color:var(--amber)}
.drawer .ds.x{border-left-color:var(--slate)}

/* ---------------------------------------------------------- estructura */
main{min-height:70vh;padding:28px 0 70px}
.ruta{display:flex;gap:7px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--ink3);margin-bottom:14px}
.ruta a:hover{color:var(--amber)}
.ruta span{color:var(--ink3)}
h1{margin:0;font-size:30px;font-weight:700;letter-spacing:-.5px;line-height:1.2}
h1 em{font-style:normal;color:var(--amber)}
.lead{margin:9px 0 0;color:var(--ink2);font-size:15px;max-width:78ch}
h2{margin:0 0 4px;font-size:18px;font-weight:700}
h2+.note{margin-top:0}
.note{color:var(--ink2);font-size:13px;margin:0 0 14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:20px 22px;margin-bottom:18px}
.sec{margin-top:30px}
.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.grid2>.card{margin:0}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:11px;margin:22px 0 8px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:13px 16px}
.kpi b{display:block;font-size:27px;font-weight:700;line-height:1.1}
.kpi small{color:var(--ink2);font-size:11px;letter-spacing:.4px;text-transform:uppercase}

/* barras */
.legend{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 14px;font-size:12.5px;color:var(--ink2)}
.legend span{display:flex;align-items:center;gap:6px}
.sw{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.brow{display:grid;grid-template-columns:minmax(120px,168px) 1fr 62px;gap:12px;align-items:center;margin-bottom:11px}
.brow .nm{font-size:12.5px;font-weight:600}
.bar{display:flex;height:20px;border-radius:4px;overflow:hidden;background:#12161D;gap:2px}
.bar>div{height:100%}
.bar>div:first-child{border-radius:4px 0 0 4px}
.bar>div:last-child{border-radius:0 4px 4px 0}
.brow .pc{font-size:12.5px;color:var(--ink2);text-align:right;font-variant-numeric:tabular-nums}
.brow .pc b{color:var(--ink)}

/* tarjetas de flota y sistema */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.tj{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:20px 22px;display:block}
.tj:hover{border-color:var(--amber)}
.tj h3{margin:0 0 5px;font-size:17px}
.tj p{margin:0 0 14px;color:var(--ink2);font-size:13.5px}
.tj .mini{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink3)}
.tj .mini b{font-size:14px;display:block;color:var(--ink)}

/* set */
.sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:13px;align-items:start}
.sc{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--slate);
  border-radius:11px;padding:15px 17px;display:block}
.sc.t{border-left-color:var(--green)} .sc.p{border-left-color:var(--amber)} .sc.x{border-left-color:var(--slate)}
.sc:hover{border-color:var(--amber);border-left-color:var(--amber)}
.sc .t1{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.sc h3{margin:0;font-size:13.5px;font-weight:700;letter-spacing:.2px}
.sc .st{font-size:11px;font-weight:700;white-space:nowrap}
.sc .v{margin:6px 0 0;font-size:12.5px;color:#C6CEDA}
.sc .m{margin:9px 0 0;font-size:11.5px;color:var(--ink3);display:flex;gap:13px;flex-wrap:wrap}
.sc .m b{color:var(--ink2);font-weight:600}

.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-bottom:18px}
.ficha div{background:var(--panel);padding:13px 16px}
.ficha dt{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink3);margin:0 0 4px}
.ficha dd{margin:0;font-size:13.5px;font-weight:600}
.bloque h3{margin:0 0 7px;font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--amber)}
.bloque p{margin:0;font-size:14.5px;color:#C6CEDA;line-height:1.65}

/* galería */
.gal{column-count:2;column-gap:15px}
figure{margin:0 0 15px;break-inside:avoid;-webkit-column-break-inside:avoid;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;overflow:hidden;cursor:zoom-in}
figure:hover{border-color:var(--amber)}
figure img{display:block;width:100%;height:auto;background:#0B0E12}
figcaption{padding:9px 13px 11px;font-size:11.5px;color:var(--ink2);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:10px;align-items:baseline}
figcaption b{color:var(--ink);font-size:12.5px}
figcaption i{font-style:normal;color:var(--ink3);font-size:10.5px}
.vacio{border:1px dashed #39424F;border-radius:11px;padding:34px 22px;text-align:center;color:var(--ink3);font-size:13.5px}
.vacio b{display:block;color:var(--ink2);font-size:14.5px;margin-bottom:5px}

/* tabla */
.buscador{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
input[type=search]{background:var(--panel2);border:1px solid var(--line);border-radius:9px;color:var(--ink);
  font:inherit;font-size:13.5px;padding:9px 13px;min-width:230px;flex:1;max-width:400px}
input[type=search]:focus{outline:2px solid var(--amber);outline-offset:-1px}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:20px;color:var(--ink2);
  font-size:12.5px;font-weight:600;padding:7px 14px;cursor:pointer;display:flex;align-items:center;gap:7px}
.chip.on{color:var(--ink);border-color:currentColor}
.chip.on.t{color:var(--green)} .chip.on.p{color:var(--amber)} .chip.on.x{color:var(--slate)}
.cuenta{margin-left:auto;color:var(--ink3);font-size:12.5px}
.tabla{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:660px}
thead th{background:var(--panel2);color:var(--ink2);text-align:left;font-size:10.5px;letter-spacing:.4px;
  text-transform:uppercase;padding:9px 11px;border-bottom:1px solid var(--line)}
tbody td{padding:10px 11px;border-bottom:1px solid #222833;vertical-align:top;color:#C6CEDA}
tbody tr:hover td{background:#1C222C}
td.k{font-weight:700;color:var(--ink)}
td.s{color:var(--amber);font-weight:600;white-space:nowrap}
td.e{font-weight:700;white-space:nowrap}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px}

/* flujo */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.fs{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:14px 15px}
.fs.hi{border-color:var(--amber);background:#241C10}
.fs b{color:var(--amber);font-size:12.5px}
.fs h3{margin:3px 0 5px;font-size:13.5px}
.fs p{margin:0;font-size:12px;color:var(--ink2);line-height:1.5}

/* pie */
footer{border-top:1px solid var(--line);background:#12161E}
.pie{max-width:1360px;margin:0 auto;padding:30px 22px 22px;display:grid;grid-template-columns:1.4fr 1fr;gap:26px}
.pie b{font-size:14px}
.pie p{margin:7px 0 0;color:var(--ink3);font-size:12.5px;max-width:52ch}
.pie-nav{display:flex;gap:26px;flex-wrap:wrap}
.pie-nav div b{display:block;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--amber);margin-bottom:7px}
.pie-nav a{display:block;font-size:12.5px;color:var(--ink2);padding:2px 0}
.pie-nav a:hover{color:var(--ink)}
.pie-bajo{max-width:1360px;margin:0 auto;padding:12px 22px 26px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink3)}

/* visor */
#lb{position:fixed;inset:0;z-index:120;background:#080B0F;display:none;flex-direction:column}
#lb.on{display:flex}
#lbh{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 18px;
  border-bottom:1px solid var(--line)}
.lbt{min-width:0}
.lbt b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbt i{font-style:normal;font-size:11.5px;color:var(--ink3)}
.lbn{display:flex;gap:7px;flex:0 0 auto}
.lbn button{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:9px;
  width:40px;height:36px;font-size:17px;cursor:pointer}
.lbn button:hover{border-color:var(--amber);color:var(--amber)}
#lbb{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:16px}
#lbi{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in}
#lbb.zoom{align-items:flex-start;justify-content:flex-start}
#lbb.zoom #lbi{max-width:none;max-height:none;width:230%;cursor:zoom-out}

/* ---------------------------------------------------------- adaptable */
@media(max-width:1080px){
  .mega-in{grid-template-columns:repeat(3,1fr)}
  .grid2{grid-template-columns:1fr}
  .flow{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .nav{display:none}
  .burger{display:flex}
  .mega{display:none!important}
  .gal{column-count:1}
  .pie{grid-template-columns:1fr}
  h1{font-size:24px}
  .marca i{display:none}
}
@media(min-width:861px){ .drawer,.velo{display:none!important} }

@media print{
  .hdr,.drawer,.velo,#lb,.buscador,footer{display:none!important}
  body{background:#fff;color:#000}
  .card,figure{border-color:#bbb;background:#fff}
}

/* antetítulo con el grupo del set */
.grp{display:block;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--amber);
  font-weight:700;margin-bottom:3px}
.mega li a em{margin-bottom:1px}
.mega li a{padding:5px 7px}

/* logo de la marca en el header */
.marca .logo{width:36px;height:36px;border-radius:9px;flex:0 0 auto;background:#1F1F1F;
  border:1px solid var(--line);object-fit:contain;padding:4px}

/* diagnóstico escrito para cada captura */
figure .diag{padding:13px 15px 3px;border-top:1px solid var(--line)}
figure .diag h4{margin:0 0 5px;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--amber)}
figure .diag p{margin:0;font-size:13px;color:#C6CEDA;line-height:1.6}

/* ---------------------------------------------------------- acceso al panel */
.engranaje{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:38px;height:38px;border-radius:9px;border:1px solid var(--line);
  color:var(--ink3);background:transparent;transition:color .15s,border-color .15s,background .15s}
.engranaje:hover,.engranaje:focus-visible{color:var(--amber);border-color:var(--amber);background:var(--panel2)}
.engranaje:hover svg{transform:rotate(45deg)}
.engranaje svg{width:18px;height:18px;transition:transform .35s ease}
@media(max-width:860px){ .engranaje{margin-left:auto} }
@media print{ .engranaje{display:none} }