/* ============================================================================
   Layer1 SOC — sistema de componentes.
   ============================================================================
   **Acá NO hay ni un solo color literal.** Todos salen de `tokens.css`, que es
   la única fuente (ver la cabecera de ese archivo). Un hex suelto en este
   archivo es una fuga: reintroduce las dos-fuentes-de-color que se cerraron el
   21/08 y el diseñador deja de poder cambiar el tema desde un solo lado.

   Qué cambió al pasar a la gama Layer One, además de los valores
   --------------------------------------------------------------
   La paleta anterior era cyberpunk: gradientes y `box-shadow` de neón en casi
   todos los controles. La gama Layer One es PLANA (`--primary` lleno,
   `--accent` para acentos, borde `--accent-border` para la acción con énfasis
   sin llenar). Así que se retiraron los gradientes y los glows. **No es un
   bug: es la paleta.** Quedó anotado acá porque es exactamente el tipo de
   cambio que alguien reporta como regresión.
   ========================================================================= */

/* ---------- Escala tipográfica ----------
   **Acá se aplica la única perilla de tamaño de la plataforma.** Todo lo demás
   —la escala de Tailwind y las clases de abajo— está en `rem`, o sea derivado
   de esta línea. Un `font-size` en px en este archivo o en una plantilla es la
   misma fuga que un hex suelto: deja de escalar y nadie se entera hasta que
   alguien pide zoom. Ver la nota de `--l1-fs-base` en `tokens.css`. */
html { font-size: var(--l1-fs-base); }

body { background: var(--c-bg); color: var(--c-text); }


/* ---------- Logo ---------- */
.logo-glow { filter: none; }

/* ---------- Navegación ---------- */
.nav-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .8rem; border-radius: var(--l1-radio-ctrl); color: var(--c-text-2);
  transition: background .15s, color .15s, box-shadow .15s;
}
.nav-link:hover { background: rgb(var(--l1-accent) / .08); color: var(--c-text); }
.nav-link svg { color: var(--c-muted); opacity: .9; }
.nav-active {
  background: rgb(var(--l1-accent) / .10);
  color: var(--c-accent);
  box-shadow: inset 3px 0 0 var(--c-accent);
}
.nav-active svg { color: var(--c-accent); opacity: 1; }

/* ---------- Cards / contenedores ---------- */
.card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--l1-radio-card);
  padding: 1.1rem 1.2rem;
  transition: border-color .2s;
}
.card:hover { border-color: var(--c-border-2); }

/* Barra lateral de acento en KPIs / tarjetas destacadas */
.card-accent { position: relative; overflow: hidden; }
.card-accent::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.accent-cyan::before   { background: var(--c-accent); }
.accent-violet::before { background: var(--c-border-2); }

/* ---------- KPIs ---------- */
.kpi-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted); }
.kpi-value {
  font-family: var(--l1-mono);
  font-size: 1.95rem; font-weight: 700; line-height: 1.1; margin: .2rem 0 .3rem; color: var(--c-text);
}
.mono { font-family: var(--l1-mono); }

/* ---------- Botones ---------- */
/* Lleno, con texto blanco: la acción principal de la pantalla. */
.btn-primary {
  background: var(--c-primary);
  color: var(--c-on-primary); font-weight: 600; padding: .5rem .9rem; border-radius: var(--l1-radio-ctrl);
  font-size: .875rem; border: 1px solid var(--c-primary);
  transition: filter .15s, transform .05s;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.35); }

/* Acción con ÉNFASIS SIN LLENAR (doc 61 §1, `--accent-bg`): pesa más que un
   `btn-ghost` y menos que la acción que enciende drops. */
.btn-violet {
  background: rgb(var(--l1-accent) / .08); border: 1px solid var(--c-accent-border);
  color: var(--c-accent-soft); font-weight: 600; padding: .45rem .8rem;
  border-radius: var(--l1-radio-ctrl); font-size: .875rem;
  transition: background .15s, border-color .15s;
}
.btn-violet:hover { background: rgb(var(--l1-accent) / .14); border-color: var(--c-accent); }

.btn-ghost {
  background: var(--c-card-2); border: 1px solid var(--c-border); color: var(--c-text-2);
  padding: .45rem .8rem; border-radius: var(--l1-radio-ctrl); font-size: .875rem;
  transition: border-color .15s, background .15s, color .15s;
}
.btn-ghost:hover { background: var(--c-border); border-color: var(--c-border-2); color: var(--c-text); }

/* Acciones destructivas / de alto impacto (modal de confirmación) */
.btn-danger {
  background: var(--c-primary); border: 1px solid var(--c-accent-soft);
  color: var(--c-on-primary); font-weight: 600; padding: .5rem .9rem; border-radius: var(--l1-radio-ctrl);
  font-size: .875rem; transition: filter .15s;
}
.btn-danger:hover { filter: brightness(1.08); }
.btn-danger:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.35); }

/* ---------- Formularios ---------- */
.field { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; color: var(--c-muted); }
.input {
  background: var(--c-bg-header); border: 1px solid var(--c-border); border-radius: var(--l1-radio-ctrl);
  padding: .5rem .65rem; color: var(--c-text); font-size: .875rem; width: 100%;
  font-family: var(--l1-mono);
}
.input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgb(var(--l1-accent) / .16); }

/* ---------- Badges (rounded-full) ---------- */
.badge {
  display: inline-block; padding: .14rem .6rem; border-radius: 9999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.badge-mikrotik { background: rgb(var(--l1-ok) / .08);    color: var(--c-ok);    border: 1px solid var(--c-ok-border); }
.badge-huawei   { background: rgb(var(--l1-alert) / .10); color: var(--c-alert); border: 1px solid var(--c-danger-border); }
.badge-arista   { background: rgb(var(--l1-info) / .06);  color: var(--c-info);  border: 1px solid var(--c-border-2); }
.badge-unknown  { background: rgb(var(--l1-muted) / .08); color: var(--c-muted); border: 1px solid var(--c-border-2); }
.badge-ok       { background: rgb(var(--l1-ok) / .08);    color: var(--c-ok);    border: 1px solid var(--c-ok-border); }
/* Informativo NEUTRO: el badge que no es un estado (versión de RouterOS, conteo
   de reglas, «fuera del ruleset»). Se llama `violet` por el nombre de la clase,
   que no se renombró; de violeta ya no tiene nada. */
.badge-violet   { background: rgb(var(--l1-info) / .06);  color: var(--c-info);  border: 1px solid var(--c-border-2); }
/* Pendiente / hay que mirarlo. */
.badge-warn     { background: rgb(var(--l1-warn) / .10);  color: var(--c-warn);  border: 1px solid var(--c-warn-border); }
/* Estado MALO medido, distinto de 'unknown': "perdí 18%" y "no sé cuánto perdí" no se
   pintan igual porque no se arreglan igual. */
.badge-bad      { background: rgb(var(--l1-alert) / .10); color: var(--c-alert); border: 1px solid var(--c-danger-border); }

/* ---------- Estados (dots) ---------- */
.dot { width: .6rem; height: .6rem; border-radius: 9999px; display: inline-block; }
.dot-good { background: var(--c-ok); }
.dot-bad  { background: var(--c-alert); }
/* Flujos que PREEXISTEN al alta: llegan, pero no prueban este nodo. Ni verde ni rojo. */
.dot-warn  { background: var(--c-warn); }

/* ---------- Tablas: filas alternadas ---------- */
.tbl-zebra tbody tr:nth-child(odd)  { background: rgb(var(--l1-row) / .55); }
.tbl-zebra tbody tr:hover { background: rgb(var(--l1-accent) / .06); }

/* ---------- Stepper del wizard ---------- */
.step-pill {
  padding: .2rem .6rem; border-radius: 9999px; font-weight: 600;
  border: 1px solid var(--c-border); color: var(--c-muted); background: var(--c-card-2);
}
.step-active { color: var(--c-on-primary); background: var(--c-primary); border-color: var(--c-primary); }

/* ---------- Tabs (detalle de nodo) ---------- */
.tab-btn {
  padding: .55rem 1.1rem; border-radius: 0; color: var(--c-muted); font-weight: 600;
  font-size: .875rem; border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab-btn:hover { color: var(--c-text); }
.tab-active { color: var(--c-accent); border-bottom-color: var(--c-accent); background: transparent; }

/* Sub-solapas (segundo nivel, dentro de Firewall). Se distinguen del primer nivel por
   forma y no por color: píldora en vez de subrayado. Dos niveles subrayados en la misma
   pantalla se leen como dos barras compitiendo por decir dónde estás parado. */
.subtab-btn {
  padding: .3rem .8rem; border-radius: 9999px; font-size: .78rem; font-weight: 600;
  color: var(--c-muted); border: 1px solid transparent; background: transparent;
}
.subtab-btn:hover { color: var(--c-text); }
.subtab-active {
  color: var(--c-accent-soft); background: rgb(var(--l1-accent) / .08);
  border-color: var(--c-accent-border);
}

/* Menú LATERAL de la solapa Firewall (Tanda C, 24/08). Mismo mecanismo `data-subtab` que
   las píldoras horizontales —y por eso comparte `.subtab-active`—, otra forma: en columna,
   alineado a la izquierda y ocupando el ancho lateral que antes quedaba vacío.

   Alineado a la IZQUIERDA y no centrado: una lista de secciones se lee como lista, y siete
   rótulos centrados de distinto largo no dan una columna, dan un zigzag. */
.sidetab-btn {
  padding: .45rem .7rem; border-radius: .5rem; font-size: .8rem; font-weight: 600;
  color: var(--c-muted); border: 1px solid transparent; background: transparent;
  text-align: left; width: 100%;
}
.sidetab-btn:hover { color: var(--c-text); background: rgb(var(--l1-accent) / .04); }

/* Chip «PRÓX.» del tab de Mitigación: dice que la solapa existe y todavía no hace nada. */
.chip-prox {
  font-size: .58rem; font-weight: 700; letter-spacing: .05em; padding: .1rem .45rem;
  border-radius: 9999px; border: 1px solid var(--c-border-2); color: var(--c-muted);
  text-transform: uppercase;
}

/* ---------- Switch ---------- */
.switch { position: relative; display: inline-flex; width: 48px; height: 26px; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--c-card-2); border-radius: 9999px; transition: .2s; border: 1px solid var(--c-border-2); }
.switch .slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: var(--c-text-2); border-radius: 9999px; transition: .2s; }
.switch input:checked + .slider { background: var(--c-primary); border-color: var(--c-primary); }
.switch input:checked + .slider::before { transform: translateX(22px); background: var(--c-on-primary); }

/* ---------- Modal ---------- */
.modal-overlay { background: rgb(var(--l1-bg) / .78); }
.modal-panel {
  background: var(--c-card);
  border: 1px solid var(--c-border-2);
  box-shadow: 0 20px 60px rgb(0 0 0 / .6);
}

/* ---------- Header persistente del Detalle de Nodo ---------- */
/* Vive acá y no en utilidades porque es una pieza con identidad: se pega arriba, es el
   único lugar donde el CPU está SIEMPRE a la vista, y su fondo lo separa del contenido. */
.node-header {
  background: var(--c-bg-header);
  border: 1px solid var(--c-border);
  border-radius: var(--l1-radio-card);
}
.node-avatar {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgb(var(--l1-accent) / .10); border: 1px solid var(--c-border-2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .78rem; color: var(--c-accent-soft);
}
/* La caja de CPU. El borde lo pinta el estado (verde / ámbar / alerta / sin dato) desde
   `router_detail.js`; acá va solo la forma. */
.cpu-box {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  background: var(--c-card-cpu); border: 1px solid var(--c-border); border-radius: var(--l1-radio-card);
}
.cpu-box-ok    { border-color: var(--c-ok-border); }
.cpu-box-warn  { border-color: var(--c-warn-border); }
.cpu-box-alert { border-color: var(--c-danger-border); }
.cpu-num { font-size: 1.35rem; font-weight: 800; line-height: 1; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--c-border-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }
::-webkit-scrollbar-track { background: transparent; }

/* --- Wizard del Flow Analyzer (25/08) --------------------------------------
   Los chips de paso. El color sale de los tokens, igual que todo lo demás: un hex
   suelto acá es la fuga que `tokens.css` vino a cerrar. */
.fa-paso-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  background: var(--c-card-2); color: var(--c-muted);
  border: 1px solid var(--c-border-2);
}
.fa-paso-chip.paso-activo {
  background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary);
}
.fa-paso-chip.paso-hecho {
  background: rgb(var(--l1-ok) / .12); color: var(--c-ok); border-color: var(--c-ok-border);
}
.fa-paso-txt.paso-activo { color: var(--c-text); font-weight: 600; }

/* --- Barra lateral contraída (25/08) ---------------------------------------
   Al contraerse quedan solo los iconos. El rótulo se OCULTA con `display:none` y no con
   `opacity:0`: con opacidad el texto sigue ocupando su ancho y la barra no se angosta.
   El `title` de cada enlace sigue estando, así que el nombre se puede consultar. */
.barra-contraida .barra-texto { display: none; }
.barra-contraida .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
.barra-contraida .nav-link svg { margin: 0; }

/* ---------- Los dos escalones por debajo de `text-xs` ----------
   Reemplazan a los 89 `text-[Npx]` sueltos que no escalaban con nada: subir el
   tamaño base los dejaba exactamente igual de chicos.

   **Van al FINAL del archivo a propósito.** Nueve de esos usos estaban sobre un
   `.badge` y llevaban el `!` de Tailwind (`!text-[10px]`) justamente para ganarle
   al `font-size` de `.badge`, que es más chico. Con la misma especificidad gana
   la regla que va después, así que el orden ACÁ es lo que reemplaza a aquel `!`.
   Si alguien mueve estas dos líneas más arriba, los badges se achican y nadie
   va a saber por qué. */
.text-nota  { font-size: var(--l1-fs-nota); }
.text-micro { font-size: var(--l1-fs-micro); }


/* --- El área de los gráficos (25/08) ----------------------------------------
   Carbón y no negro absoluto: sobre negro puro las series de alto contraste
   "vibran" y cansan la vista en minutos. Es el mismo motivo por el que los NOC
   usan gris muy oscuro y no #000. */
canvas { background: rgb(var(--l1-graf-fondo)); border-radius: .5rem; }

/* --- Filtro de vigencia del padrón (27/08) ----------------------------------
   Botones de un grupo donde UNO está elegido. No es un `btn-primary`: elegir un filtro no
   es una acción de impacto, y pintarlo como tal haría competir visualmente con «Promover»,
   que sí escribe en un equipo. El elegido se marca con el borde y el peso, no con relleno.
   El color sale de los tokens y nunca de un hex: `tokens.css` es la única fuente (DEC-140). */
.filtro-on {
  color: var(--c-text);
  font-weight: 600;
  border-color: var(--c-accent-border);
  background: rgb(var(--l1-accent) / .10);
}