/* Atlas — hoja única, sin build.
 *
 * DIRECCIÓN: sala de control, no "dashboard SaaS oscuro". Densidad alta,
 * monocromo, y el COLOR RESERVADO PARA EL ESTADO: si algo tiene color, es que
 * significa algo. Todo dato numérico va en mono tabular.
 *
 * Sin webfonts a propósito: la CSP es `default-src 'self'` (nada externo carga),
 * y el mono del sistema es el idioma nativo de las herramientas de infra.
 *
 * TOKENS EN TRES NIVELES: primitivo -> semántico -> componente. Los componentes
 * usan SOLO semánticos; así re-tematizar es tocar un bloque, no cien reglas.
 */

/* ---------------------------------------------------- 1. primitivos */
:root {
  --tinta-900:#0c0e11; --tinta-850:#111419; --tinta-800:#161a20;
  --tinta-700:#1d222a; --tinta-600:#272d36; --tinta-500:#39414d;
  --tinta-300:#7e8794; --tinta-200:#a8b1bd; --tinta-100:#dde2e8;

  /* Estados. Apagados a propósito: el neón grita y aquí el rojo tiene que
   * poder aparecer sin que la pantalla parezca una alarma de incendios. */
  --salvia:#5ea87f;      /* vivo */
  --mostaza:#c9a227;     /* tarde */
  --ladrillo:#cf5c4a;    /* caído */
  --indigo:#6f8fd0;      /* acento de interacción, NO de estado */

  --paso-1:4px; --paso-2:8px; --paso-3:12px; --paso-4:16px;
  --paso-5:24px; --paso-6:32px; --paso-7:48px;
  --radio-1:3px; --radio-2:6px;
  --rapido:120ms; --medio:220ms; --curva:cubic-bezier(.2,.7,.3,1);
}

/* ---------------------------------------------------- 2. semánticos */
:root {
  --fondo:var(--tinta-900);
  --superficie:var(--tinta-850);
  --superficie-alta:var(--tinta-800);
  --linea:var(--tinta-700);
  --linea-fuerte:var(--tinta-600);
  --texto:var(--tinta-100);
  --texto-medio:var(--tinta-200);
  --texto-tenue:var(--tinta-300);
  --acento:var(--indigo);

  --estado-vivo:var(--salvia);
  --estado-tarde:var(--mostaza);
  --estado-caido:var(--ladrillo);
  --estado-inerte:var(--tinta-500);

  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace;
}

/* ---------------------------------------------------- 3. base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font:14px/1.5 var(--sans);
  font-feature-settings:"tnum" 1;   /* cifras de ancho fijo: las columnas cuadran */
}
a{color:var(--acento); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-weight:600; margin:0; letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--acento); outline-offset:2px; border-radius:var(--radio-1)}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.tenue{color:var(--texto-tenue)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}

/* ---------------------------------------------------- 4. estructura */
.barra{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:var(--paso-5);
  height:48px; padding:0 var(--paso-5);
  background:color-mix(in srgb,var(--fondo) 88%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);
}
.marca{
  font-family:var(--mono); font-weight:600; font-size:13px;
  letter-spacing:.18em; color:var(--texto);
}
.barra nav{display:flex; gap:var(--paso-4); margin-right:auto; flex-wrap:wrap}
.barra nav a{
  color:var(--texto-tenue); font-size:13px; padding:var(--paso-1) 0;
  border-bottom:1px solid transparent; transition:color var(--rapido) var(--curva);
}
.barra nav a:hover{color:var(--texto-medio); text-decoration:none}
.barra nav a[aria-current="page"]{color:var(--texto); border-bottom-color:var(--acento)}

main{max-width:1180px; margin:0 auto; padding:var(--paso-6) var(--paso-5) var(--paso-7)}

/* El titular: una FRASE, no una fila de tarjetas de KPI. La pantalla responde a
 * "¿está todo bien?", y eso se contesta hablando, no con cuatro cajas iguales. */
.titular{
  font-size:26px; font-weight:400; line-height:1.35; letter-spacing:-.02em;
  margin-bottom:var(--paso-6); max-width:44ch; color:var(--texto-medio);
}
.titular b{font-weight:600; color:var(--texto)}
.titular .malo{color:var(--estado-caido); font-weight:600}

.grupo{margin-bottom:var(--paso-6)}
.grupo > h2{
  display:flex; align-items:center; gap:var(--paso-3);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  color:var(--texto-tenue); margin-bottom:var(--paso-3);
}
.grupo > h2::after{content:""; flex:1; height:1px; background:var(--linea)}

.rejilla{display:grid; gap:var(--paso-3); grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* ---------------------------------------------------- 5. tarjeta de nodo */
.nodo{
  display:block; background:var(--superficie); border:1px solid var(--linea);
  border-radius:var(--radio-2); padding:var(--paso-4);
  color:inherit; transition:border-color var(--rapido) var(--curva),
                           background var(--rapido) var(--curva);
}
.nodo:hover{border-color:var(--linea-fuerte); background:var(--superficie-alta); text-decoration:none}
.nodo__cabecera{display:flex; align-items:baseline; gap:var(--paso-2); margin-bottom:var(--paso-1)}
.nodo__nombre{font-size:15px; font-weight:600; margin-right:auto}
.nodo__meta{
  font-family:var(--mono); font-size:11.5px; color:var(--texto-tenue);
  margin-bottom:var(--paso-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* El punto de estado. Único sitio, junto al pulso, donde entra el color. */
.punto{width:7px; height:7px; border-radius:50%; flex:none; background:var(--estado-inerte)}
.es-vivo .punto{background:var(--estado-vivo); box-shadow:0 0 0 3px color-mix(in srgb,var(--estado-vivo) 18%,transparent)}
.es-tarde .punto{background:var(--estado-tarde)}
.es-caido .punto{background:var(--estado-caido); box-shadow:0 0 0 3px color-mix(in srgb,var(--estado-caido) 18%,transparent)}
.etiqueta-estado{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--texto-tenue)}
.es-vivo .etiqueta-estado{color:var(--estado-vivo)}
.es-tarde .etiqueta-estado{color:var(--estado-tarde)}
.es-caido .etiqueta-estado{color:var(--estado-caido)}

/* Medidores. Barra fina, sin número gigante: lo que importa es la comparación
 * entre nodos de un vistazo, no el decimal exacto. */
.medidores{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--paso-3); margin-bottom:var(--paso-3)}
.medidor__nombre{font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--texto-tenue); text-transform:uppercase}
.medidor__valor{font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums}
.medidor__pista{height:2px; background:var(--linea-fuerte); border-radius:1px; margin-top:var(--paso-1); overflow:hidden}
.medidor__relleno{height:100%; background:var(--texto-tenue); transition:width var(--medio) var(--curva)}
.medidor__relleno.alto{background:var(--estado-tarde)}
.medidor__relleno.critico{background:var(--estado-caido)}

/* ---- FIRMA: la barra de pulso ------------------------------------------
 * 48 marcas, una por cada media hora de las últimas 24. Marca alta = latido
 * recibido (y su altura, la carga); hueco = silencio. De un vistazo se ve si
 * una máquina estuvo intermitente, que es la avería que un porcentaje
 * instantáneo esconde. Es lo que distingue este panel de un dashboard genérico.
 */
.pulso{display:flex; align-items:flex-end; gap:1px; height:22px; margin-top:var(--paso-3)}
.pulso__marca{flex:1; min-width:1px; background:var(--linea-fuerte); border-radius:.5px; height:2px}
.pulso__marca[data-vivo]{background:color-mix(in srgb,var(--estado-vivo) 55%,var(--tinta-600))}
.pulso__marca[data-vivo].carga-alta{background:var(--estado-tarde)}

/* ---------------------------------------------------- 6. ficha y tablas */
.ficha{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr); gap:var(--paso-5); align-items:start}
@media (max-width:860px){.ficha{grid-template-columns:1fr}}

.panel{background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio-2); padding:var(--paso-4); margin-bottom:var(--paso-3)}
.panel > h3{
  font-size:11px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--texto-tenue); margin-bottom:var(--paso-3); font-weight:600;
}

.datos{display:grid; grid-template-columns:auto 1fr; gap:var(--paso-2) var(--paso-4); font-size:13px}
.datos dt{color:var(--texto-tenue); white-space:nowrap}
.datos dd{margin:0; font-family:var(--mono); font-size:12.5px; word-break:break-word}

table{width:100%; border-collapse:collapse; font-size:13px}
th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--texto-tenue); font-weight:600; padding:0 var(--paso-3) var(--paso-2) 0;
  border-bottom:1px solid var(--linea);
}
td{padding:var(--paso-2) var(--paso-3) var(--paso-2) 0; border-bottom:1px solid var(--linea)}
tr:last-child td{border-bottom:none}
td.mono, th.mono{font-family:var(--mono); font-size:12px}

/* ---------------------------------------------------- 7. controles */
.boton{
  display:inline-flex; align-items:center; gap:var(--paso-2);
  font:inherit; font-size:13px; padding:7px 14px; cursor:pointer;
  background:var(--superficie-alta); color:var(--texto);
  border:1px solid var(--linea-fuerte); border-radius:var(--radio-1);
  transition:border-color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.boton:hover{border-color:var(--texto-tenue); text-decoration:none}
.boton--principal{background:var(--acento); border-color:var(--acento); color:#0b0d10; font-weight:600}
.boton--principal:hover{background:color-mix(in srgb,var(--acento) 85%,#fff)}
.boton--peligro{color:var(--estado-caido)}
.boton--peligro:hover{border-color:var(--estado-caido)}
.boton--fino{padding:3px 8px; font-size:12px}

.formulario{display:grid; gap:var(--paso-4); grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.campo{display:flex; flex-direction:column; gap:var(--paso-1)}
.campo--ancho{grid-column:1/-1}
.campo > label{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--texto-tenue)}
.campo > small{color:var(--texto-tenue); font-size:11.5px}
input,select,textarea{
  font:inherit; font-size:13px; padding:8px 10px;
  background:var(--fondo); color:var(--texto);
  border:1px solid var(--linea-fuerte); border-radius:var(--radio-1);
}
input:focus,select:focus,textarea:focus{border-color:var(--acento); outline:none}
textarea{min-height:90px; resize:vertical; font-family:var(--mono); font-size:12.5px}
.acciones{display:flex; gap:var(--paso-2); flex-wrap:wrap; align-items:center; margin-top:var(--paso-4)}

.aviso{
  border:1px solid var(--linea-fuerte); border-left:2px solid var(--estado-tarde);
  background:var(--superficie); border-radius:var(--radio-1);
  padding:var(--paso-3) var(--paso-4); font-size:13px; margin-bottom:var(--paso-4);
  color:var(--texto-medio);
}
.aviso--grave{border-left-color:var(--estado-caido)}
.aviso code{font-family:var(--mono); font-size:12px; color:var(--texto)}

.vacio{
  border:1px dashed var(--linea-fuerte); border-radius:var(--radio-2);
  padding:var(--paso-6); text-align:center; color:var(--texto-tenue); font-size:13px;
}

/* ---------------------------------------------------- 8. acceso */
.acceso{
  min-height:100dvh; display:grid; place-items:center; padding:var(--paso-5);
}
.acceso__caja{width:100%; max-width:400px; text-align:center}
.acceso__marca{
  font-family:var(--mono); font-size:15px; letter-spacing:.3em; font-weight:600;
  margin-bottom:var(--paso-3);
}
.acceso p{color:var(--texto-tenue); font-size:13px; line-height:1.6; margin:0 0 var(--paso-5)}
.acceso .boton{width:100%; justify-content:center; padding:11px}

/* ---------------------------------------------------- 9. mapa de red */
.mapa{width:100%; height:auto; background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio-2)}
.mapa text{font-family:var(--mono); font-size:11px; fill:var(--texto-medio)}
.mapa .zona{fill:none; stroke:var(--linea-fuerte); stroke-dasharray:3 4; rx:8}
.mapa .zona-nombre{font-size:9.5px; letter-spacing:.14em; fill:var(--texto-tenue); text-transform:uppercase}
.mapa .arista{stroke:var(--linea-fuerte); stroke-width:1.5; fill:none}
.mapa .arista[data-tipo="tailscale"]{stroke:var(--acento); stroke-dasharray:none}
.mapa .arista[data-tipo="ssh"]{stroke:var(--tinta-500)}
.mapa .arista[data-tipo="lan"]{stroke:var(--tinta-500); stroke-dasharray:2 3}
.mapa .caja{fill:var(--superficie-alta); stroke:var(--linea-fuerte); rx:4}
.mapa .punto-estado[data-estado="vivo"]{fill:var(--estado-vivo)}
.mapa .punto-estado[data-estado="tarde"]{fill:var(--estado-tarde)}
.mapa .punto-estado[data-estado="caido"]{fill:var(--estado-caido)}
.mapa .punto-estado{fill:var(--estado-inerte)}

.leyenda{display:flex; gap:var(--paso-4); flex-wrap:wrap; font-size:11.5px; color:var(--texto-tenue); margin-top:var(--paso-3)}
.leyenda span{display:inline-flex; align-items:center; gap:var(--paso-2)}
.leyenda i{width:14px; height:2px; display:inline-block; background:var(--linea-fuerte)}
.leyenda i.tailscale{background:var(--acento)}

/* ---------------------------------------------------- 10. bóveda */
.secreto{
  font-family:var(--mono); font-size:13px; letter-spacing:.05em;
  background:var(--fondo); border:1px solid var(--linea-fuerte);
  border-radius:var(--radio-1); padding:var(--paso-2) var(--paso-3);
  display:flex; align-items:center; gap:var(--paso-3); justify-content:space-between;
}
.cerrada{color:var(--texto-tenue); letter-spacing:.25em}