:root {
  color-scheme: dark;
  --fondo: #05060a;
  --panel: #0c111b;
  --panel-alto: #111826;
  --borde: #253043;
  --borde-suave: #192232;
  --tinta: #e7f7ff;
  --muted: #8493a7;
  --cian: #27d9ff;
  --violeta: #8f68ff;
  --rojo: #ff5c7a;
  --ambar: #ffc760;
  --verde: #5ee6a8;
  --apagado: #687487;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--fondo); }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 76% -16%, rgb(95 70 190 / 28%), transparent 34rem),
    linear-gradient(115deg, transparent 0 64%, rgb(39 217 255 / 3%) 64% 64.15%, transparent 64.15%),
    var(--fondo);
  color: var(--tinta);
  font: 15px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }
.shell { width: min(1180px, 100%); margin: 0 auto; padding: 22px 28px 34px; }

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--borde);
}

.marca { font-size: 24px; font-weight: 780; letter-spacing: -.055em; text-decoration: none; }
.baliza { display: inline-block; width: 10px; height: 10px; margin-right: 11px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 20px var(--cian); }
nav { display: flex; gap: 5px; }
nav a { min-height: 44px; padding: 11px 13px; border-radius: 7px; color: var(--muted); text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { color: var(--tinta); background: rgb(19 27 42 / 88%); }
.salir { margin: 0; }
.salir button { min-height: 44px; padding: 10px 13px; color: var(--muted); border: 0; background: transparent; }

.aviso-global { margin: 18px 0; padding: 12px 15px; border-left: 3px solid var(--ambar); background: rgb(255 199 96 / 8%); color: #ffe3ad; }
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 54px; padding: 72px 0 56px; }
.hero h1, .encabezado-página h1 { margin: 0; font-weight: 760; letter-spacing: -.075em; }
.hero h1 { max-width: 720px; font-size: clamp(46px, 7.2vw, 86px); line-height: .91; }
.hero > div > p, .encabezado-página > p, .encabezado-página > div > p { max-width: 52ch; margin: 25px 0 0; color: var(--muted); font-size: 17px; }
.haz { position: relative; min-height: 230px; border-left: 1px solid #35435b; }
.haz::before { position: absolute; top: 23px; left: -4px; width: 7px; height: 76px; background: linear-gradient(var(--cian), var(--violeta)); box-shadow: 0 0 30px rgb(39 217 255 / 70%); content: ""; }
.haz dl { margin: 23px 0 0 34px; }
.haz dt { color: var(--muted); }
.haz dd { margin: 0 0 25px; font-size: 33px; font-weight: 720; letter-spacing: -.04em; }

.bloque { margin: 0 0 62px; }
.titulo-bloque { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.titulo-bloque h2, .panel h2, .lista h2 { margin: 0; font-size: 18px; letter-spacing: -.025em; }
.titulo-bloque p { margin: 0; color: var(--muted); }
.señales { border-top: 1px solid var(--borde); }
.fila-señal { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(100px, 1.2fr) 130px; align-items: center; gap: 24px; min-height: 88px; border-bottom: 1px solid var(--borde-suave); }
.fila-señal h3 { margin: 0; font-size: 16px; }
.fila-señal p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.trazo { position: relative; height: 3px; overflow: hidden; background: #1c2635; }
.trazo::after { position: absolute; inset: 0 16% 0 0; background: linear-gradient(90deg, var(--estado), color-mix(in srgb, var(--estado), var(--violeta) 45%)); box-shadow: 0 0 12px var(--estado); content: ""; }
.fila-señal strong { color: var(--estado); text-align: right; font-size: 14px; }
.fila-señal strong i, .píldora i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.estado-correcto { --estado: var(--verde); }
.estado-fallo, .estado-rojo { --estado: var(--rojo); }
.estado-aviso { --estado: var(--ambar); }
.estado-desconocido, .estado-apagado { --estado: var(--apagado); }

.tabla-wrap { max-width: 100%; overflow-x: auto; border-top: 1px solid var(--borde); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 15px 13px; border-bottom: 1px solid var(--borde-suave); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: 12px; font-weight: 620; }
td a { color: var(--tinta); font-weight: 650; text-decoration-color: rgb(39 217 255 / 45%); text-underline-offset: 4px; }
.píldora { display: inline-flex; align-items: center; width: max-content; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--estado, var(--muted)), transparent 65%); border-radius: 999px; color: var(--estado, var(--muted)); background: color-mix(in srgb, var(--estado, var(--muted)), transparent 92%); font-size: 12px; font-style: normal; white-space: nowrap; }
.protegido { --estado: var(--cian); }
.vacío { color: var(--muted); }

.encabezado-página { padding: 66px 0 42px; border-bottom: 1px solid var(--borde); }
.encabezado-página h1 { font-size: clamp(44px, 7vw, 76px); line-height: 1; }
.con-estado { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.volver { display: inline-block; margin-bottom: 12px; color: var(--cian); text-decoration: none; }
.rejilla-bitacora { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; padding: 38px 0; }
.lista h2 { margin-bottom: 12px; }
.entrada { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 13px 4px; border-bottom: 1px solid var(--borde-suave); text-decoration: none; }
a.entrada:hover strong { color: var(--cian); }
.entrada span { display: grid; }
.entrada small, .entrada em { color: var(--muted); font-size: 13px; font-style: normal; }
.rejilla-ficha { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; padding: 28px 0 50px; align-items: start; }
.columna { display: grid; gap: 20px; }
.panel { min-width: 0; padding: 22px; border: 1px solid var(--borde-suave); background: linear-gradient(145deg, rgb(17 24 38 / 88%), rgb(8 12 20 / 78%)); }
.panel h2 { margin-bottom: 16px; }
pre, code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
pre { max-width: 100%; margin: 0; overflow: auto; color: #c8d8e6; font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
code { color: #c4b6ff; }

.hallazgos { padding: 28px 0 58px; }
.hallazgo { --estado: var(--ambar); display: grid; grid-template-columns: 4px 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--borde-suave); }
.hallazgo .marca-estado { background: var(--estado); box-shadow: 0 0 18px color-mix(in srgb, var(--estado), transparent 30%); }
.hallazgo h2 { margin: 0; font-size: 17px; }
.hallazgo p { margin: 4px 0 13px; color: var(--muted); font-size: 12px; }
.hallazgo code { display: block; width: fit-content; max-width: 100%; padding: 8px 10px; overflow-wrap: anywhere; background: #090d14; border: 1px solid var(--borde-suave); }
.estado-vacío { display: grid; justify-items: center; padding: 90px 20px; text-align: center; }
.estado-vacío h2 { margin: 25px 0 3px; }
.estado-vacío p { margin: 0; color: var(--muted); }
.órbita { width: 72px; height: 72px; border: 1px solid #34435d; border-radius: 50%; box-shadow: inset 0 0 24px #27d9ff1f; }
.órbita::after { display: block; width: 8px; height: 8px; margin: -4px auto 0; border-radius: 50%; background: var(--verde); box-shadow: 0 0 16px var(--verde); content: ""; }
.rejilla-inventario { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 28px 0 50px; }
.rejilla-inventario .ancho { grid-column: 1 / -1; }

.acceso { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
.acceso-panel { width: min(460px, 100%); padding: 34px; }
.acceso-panel h1 { margin: 36px 0 8px; font-size: 38px; letter-spacing: -.05em; }
.formulario { display: grid; gap: 18px; margin-top: 24px; }
.formulario label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
input { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--tinta); border: 1px solid var(--borde); border-radius: 6px; background: #070b12; font: inherit; }
button { min-height: 44px; padding: 10px 16px; color: #071017; border: 0; border-radius: 6px; background: linear-gradient(100deg, var(--cian), var(--violeta)); font: inherit; font-weight: 750; cursor: pointer; }
.error-login { padding: 10px 12px; color: #ffd8df; border-left: 3px solid var(--rojo); background: rgb(255 92 122 / 8%); }
.rejilla-cuenta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 28px 0 50px; }
.acciones-cuenta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.codigos { columns: 2; padding: 18px; background: #070b12; }

footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; border-top: 1px solid var(--borde); color: var(--muted); font-size: 12px; }

@media (max-width: 760px) {
  .shell { padding: 16px 18px 28px; }
  .cabecera { align-items: flex-start; }
  nav { display: grid; grid-template-columns: 1fr 1fr; }
  nav a { min-height: 40px; padding: 8px; }
  .hero { grid-template-columns: 1fr; gap: 30px; padding: 48px 0 42px; }
  .hero h1 { font-size: clamp(44px, 15vw, 62px); }
  .haz { min-height: 160px; }
  .fila-señal { grid-template-columns: 1fr auto; gap: 12px; padding: 16px 0; }
  .trazo { grid-column: 1 / -1; grid-row: 2; }
  .titulo-bloque { display: block; }
  .titulo-bloque p { margin-top: 5px; }
  .rejilla-bitacora, .rejilla-ficha, .rejilla-inventario { grid-template-columns: 1fr; gap: 26px; }
  .rejilla-inventario .ancho { grid-column: auto; }
  .con-estado { align-items: flex-end; }
}

@media (max-width: 430px) {
  .cabecera { display: block; }
  nav { margin-top: 15px; }
  .hero h1 { letter-spacing: -.065em; }
  .encabezado-página { padding-top: 44px; }
  .con-estado { display: block; }
  .con-estado > .píldora { margin-top: 18px; }
  footer { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

.sensor{display:inline-flex;align-items:center;gap:.5rem;margin:.15rem .9rem .15rem 0;white-space:nowrap}
.sensor small{opacity:.6}

/* ---- Estado: inventario de despliegues (mismo lenguaje: líneas finas, puntos y barras) ---- */
.texto-correcto { --estado: var(--verde); color: var(--verde); }
.texto-aviso { --estado: var(--ambar); color: var(--ambar); }
.texto-fallo { --estado: var(--rojo); color: var(--rojo); }
.estado-cabecera { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr); gap: 40px; align-items: end; padding: 56px 0 34px; }
.estado-cabecera h1 { margin: 0; font-size: clamp(44px, 7vw, 84px); font-weight: 760; letter-spacing: -.07em; line-height: .95; }
.estado-cabecera p { margin: 18px 0 0; color: var(--muted); font-size: 16px; }
.totales { display: flex; gap: 34px; margin: 0; padding-left: 30px; border-left: 1px solid #35435b; }
.totales dt { color: var(--muted); font-size: 13px; }
.totales dd { margin: 2px 0 0; font-size: 34px; font-weight: 720; letter-spacing: -.04em; }
.avisos-operativos { display: grid; margin: 0 0 40px; border-top: 1px solid var(--borde); }
.avisos-operativos a { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--borde-suave); color: #ffe3ad; text-decoration: none; }
.avisos-operativos a:hover { color: var(--tinta); }
.avisos-operativos i { width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 12px var(--ambar); }

.despliegues { margin-bottom: 44px; }
.lista-despliegues { border-top: 1px solid var(--borde); }
.fila-maquina { display: grid; grid-template-columns: minmax(150px, .5fr) minmax(0, 2fr); gap: 26px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--borde-suave); }
.fila-maquina h3, .fila-despliegue h3 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.fila-maquina p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.barras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 26px; }
.barra-metrica { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.barra-metrica progress { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 3px; appearance: none; border: 0; background: #1c2635; }
.barra-metrica progress::-webkit-progress-bar { background: #1c2635; }
.barra-metrica progress::-webkit-progress-value { background: var(--estado, var(--verde)); box-shadow: 0 0 10px var(--estado, var(--verde)); }
.barra-metrica progress::-moz-progress-bar { background: var(--estado, var(--verde)); }
.barra-metrica strong { color: var(--tinta); font-size: 13px; font-variant-numeric: tabular-nums; }

.fila-despliegue { display: grid; grid-template-columns: minmax(200px, 1.1fr) minmax(180px, 1.2fr) minmax(140px, .8fr) auto; gap: 18px 26px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--borde-suave); }
.fila-despliegue h3 { display: inline; }
.fila-despliegue a { text-decoration: none; }
.fila-despliegue .despliegue-identidad a:hover h3 { color: var(--cian); }
.despliegue-identidad p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.despliegue-identidad small, .despliegue-enlaces small, .despliegue-estado small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.despliegue-enlaces { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.despliegue-enlaces a { color: var(--cian); font-weight: 600; }
.despliegue-enlaces a:hover { text-decoration: underline; }
.despliegue-enlaces > span { color: var(--muted); font-size: 13px; }
.despliegue-enlaces small { flex-basis: 100%; }
.botones-fila { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.boton-secundario, button, .formulario button { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--borde); border-radius: 7px; background: transparent; color: var(--tinta); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
.boton-secundario:hover, button:hover { border-color: var(--cian); color: var(--cian); }
.fila-informativa { padding: 16px 4px; border-bottom: 1px solid var(--borde-suave); color: var(--muted); }
.detalles-tecnicos { display: inline-block; margin: 6px 0 30px; color: var(--cian); text-decoration: none; }
.indice-tecnico { display: grid; gap: 0; margin: 26px 0; border-top: 1px solid var(--borde); }
.indice-tecnico a { padding: 18px 4px; border-bottom: 1px solid var(--borde-suave); font-size: 17px; text-decoration: none; }
.indice-tecnico a:hover { color: var(--cian); }
.detalle-despliegue { display: grid; gap: 34px; padding: 32px 0 50px; }
.detalle-despliegue h2 { margin: 0 0 12px; font-size: 18px; }
.datos-lineales { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 14px 0 0; }
.datos-lineales dt { color: var(--muted); }
.datos-lineales dd { margin: 0; }
.formulario { display: grid; gap: 16px; max-width: 520px; }
.formulario label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.formulario input { min-height: 44px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 7px; background: #090d14; color: var(--tinta); font: inherit; }
.formulario input:focus { outline: 2px solid var(--cian); }

@media (max-width: 860px) {
  .shell { padding: 16px 16px 30px; }
  .cabecera { flex-wrap: wrap; gap: 8px; }
  nav { flex-wrap: wrap; }
  .estado-cabecera { grid-template-columns: 1fr; gap: 26px; padding-top: 34px; }
  .totales { padding-left: 0; border-left: 0; }
  .fila-maquina { grid-template-columns: 1fr; gap: 12px; }
  .fila-despliegue { grid-template-columns: 1fr auto; gap: 8px 14px; }
  .despliegue-enlaces { grid-column: 1 / -1; grid-row: 2; }
  .despliegue-estado { grid-column: 1; grid-row: 3; }
  .botones-fila { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .rejilla-bitacora, .rejilla-ficha { grid-template-columns: 1fr; }
}