/* ==========================================================================
   Serie de redes · cajas de red y subred, enlaces, piezas, la ficha «Lo que
   se consulta», el marcador y las tiras del artículo.
   El color es el de siempre: azul en curso, verde llega o permite, naranja
   coste o espera, rojo no llega, bloqueado o solapado.
   ========================================================================== */

/* ---------- Diagrama: redes y subredes ---------- */

.caja-red rect { fill: none; stroke: var(--linea); stroke-width: 1; }
.caja-red__titulo { font-size: 9px; font-weight: 500; fill: var(--tinta); }
.caja-red__cidr { font-size: 8px; fill: var(--tinta-suave); }
.lab .caja-red__titulo { font-size: 10px; }
.lab .caja-red__cidr { font-size: 9px; }

.caja-red--internet rect { stroke-dasharray: 2 3; fill: none; }
.caja-red--internet .caja-red__titulo { fill: var(--tinta-suave); }
.caja-red--vpc > rect { fill: var(--activo-fondo); stroke: var(--activo); }
.caja-red--vpc .caja-red__titulo { fill: var(--activo); }
.caja-red--cpd > rect { fill: var(--papel-2); stroke: var(--tinta); stroke-width: 1.2; }
.caja-red--nube2 > rect { fill: rgba(140, 90, 200, 0.08); stroke: #8c5ac8; }
.caja-red--nube2 .caja-red__titulo { fill: #8c5ac8; }
.caja-red--subred > rect { fill: var(--papel); stroke: var(--linea); }
.caja-red--publica > rect { stroke: var(--ok); stroke-dasharray: 5 3; }
.caja-red--publica .caja-red__titulo { fill: var(--ok); }
.caja-red--apagada { opacity: 0.35; }
.caja-red--fallo > rect { stroke: var(--fallo); fill: var(--fallo-fondo); stroke-width: 1.4; }
.caja-red--fallo .caja-red__titulo, .caja-red--fallo .caja-red__cidr { fill: var(--fallo); }
.caja-red--activa > rect { stroke: var(--activo); stroke-width: 1.6; }

/* Enlaces entre redes (sin flecha) */
.enlace line, .enlace path { stroke: var(--linea); stroke-width: 1.2; fill: none; }
.enlace--vpn line { stroke-dasharray: 5 3; }
.enlace--linea line { stroke-width: 3; stroke: var(--tinta-suave); }
.enlace--peering line, .enlace--peering path { stroke: var(--activo); stroke-width: 1; }
.enlace--interconexion line { stroke-width: 3; stroke: #8c5ac8; }
.enlace--tenue line { opacity: 0.25; }
.enlace--caido line { stroke: var(--fallo); stroke-dasharray: 3 3; opacity: 0.8; }
.enlace--oculto { display: none; }
.enlace__rotulo { font-size: 7.5px; fill: var(--tinta-suave); }
.lab .enlace__rotulo { font-size: 8.5px; }
.enlace--caido .enlace__rotulo { fill: var(--fallo); }

/* Piezas de red (gateways, NAT, routers): más pequeñas y sin relleno */
.pieza--red rect { stroke-dasharray: none; fill: var(--papel-2); }
.pieza--red .nodo__nombre { font-size: 9px; }
.pieza--red .nodo__estado { font-size: 7.5px; }
.lab .pieza--red .nodo__nombre { font-size: 10px; }
.lab .pieza--red .nodo__estado { font-size: 8px; }
.pieza .nodo__estado { font-size: 8px; }
.lab .nodo.pieza .nodo__nombre { font-size: 11px; }
.lab .nodo.pieza .nodo__estado { font-size: 8.5px; }
.pieza--apagada { opacity: 0.3; }

/* Rejilla de direcciones de una subred */
.casillas .casilla.casilla--reservada { fill: var(--linea-suave); stroke: var(--linea-suave); }
.rejilla__rotulo { font-size: 7.5px; fill: var(--tinta-suave); }
.rejilla__rotulo--fallo { fill: var(--fallo); font-weight: 500; }
.lab .rejilla__rotulo { font-size: 8.5px; }

/* ---------- Detalle: «Lo que se consulta» ---------- */

.consulta__titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.consulta__filas {
  list-style: none; padding: 0; margin: 0.35rem 0 0;
  font-family: var(--mono); font-size: 0.74rem;
  max-height: 8.5em; overflow-y: auto;
}
.consulta__fila {
  display: grid; grid-template-columns: minmax(7.5em, auto) minmax(0, 1fr) auto; gap: 0 0.8em;
  padding: 0.05rem 0.4rem; margin: 0;
  border-left: 2px solid transparent;
  color: var(--tinta-suave);
}
.consulta__fila:has(.consulta__celda--3) { grid-template-columns: 2.4em minmax(7.5em, auto) minmax(0, 1fr) auto; }
.consulta__celda { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.consulta__fila--bgp .consulta__celda--2 { color: var(--activo); }
.consulta__fila--resto { opacity: 0.75; }
.consulta__fila--gana { color: var(--tinta); font-weight: 500; }
.consulta__fila--ok { background: var(--ok-fondo); border-left-color: var(--ok); color: var(--ok); }
.consulta__fila--fallo { background: var(--fallo-fondo); border-left-color: var(--fallo); color: var(--fallo); }
.consulta__nota { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--tinta-suave); line-height: 1.35; }

/* ---------- Laboratorio ---------- */

.lab .panel__detalle { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.lab .ficha-sim--marcador .ficha-sim__filas { font-size: 0.72rem; }
.lab .consulta__nota { max-height: 4.2em; overflow-y: auto; }
.lab .panel__detalle > .consulta { grid-column: 2; grid-row: 1 / span 3; }
.lab .consulta__filas { max-height: 6.2em; font-size: 0.7rem; }
.lab .consulta__nota { font-size: 0.74rem; }
.lab--solo .consulta__filas { max-height: none; }
.lab .marcador dt { white-space: nowrap; }
.lab .ficha-sim--marcador .ficha-sim__filas { gap: 0 0.8rem; }

/* ---------- Tira del espacio de direcciones (bajo los dos paneles) ---------- */

.tira-dir {
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio);
  background: var(--papel);
  padding: 0.55rem 0.8rem 0.6rem;
  margin-top: 1rem;
}
.lab .tira-dir { margin-top: 0; padding: 0.35rem 0.7rem 0.4rem; flex: none; }
.tira-dir__cabecera {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--tinta-suave);
}
.tira-dir__cabecera strong { color: var(--tinta); font-weight: 500; }
.tira-dir svg { display: block; width: 100%; height: auto; margin-top: 0.35rem; }
.lab .tira-dir svg { max-height: 44px; }
.tira-dir__bloque { fill: var(--papel); stroke: var(--linea-suave); stroke-width: 0.5; }
.tira-dir__bloque--cpd { fill: var(--linea); stroke: var(--linea); }
.tira-dir__bloque--nube { fill: var(--activo-fondo); stroke: var(--activo); stroke-dasharray: 1 1; }
.tira-dir__bloque--vpc { fill: var(--activo); stroke: var(--activo); }
.tira-dir__bloque--solapado { fill: var(--fallo); stroke: var(--fallo); }
.tira-dir__letra { font-family: var(--mono); font-size: 7px; font-weight: 500; fill: var(--papel); }
.tira-dir__leyenda { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; list-style: none; padding: 0; margin: 0.35rem 0 0; font-family: var(--mono); font-size: 0.7rem; color: var(--tinta-suave); }
.tira-dir__leyenda li { margin: 0; display: inline-flex; align-items: center; gap: 0.35rem; }
.tira-dir__muestra { display: inline-block; width: 0.7rem; height: 0.7rem; border: 1px solid var(--linea); }
.tira-dir__muestra--cpd { background: var(--linea); }
.tira-dir__muestra--nube { background: var(--activo-fondo); border-color: var(--activo); border-style: dashed; }
.tira-dir__muestra--vpc { background: var(--activo); border-color: var(--activo); }
.tira-dir__muestra--solapado { background: var(--fallo); border-color: var(--fallo); }
.tira-dir__aviso { color: var(--fallo); }
.lab .tira-dir__leyenda { display: none; }
.lab .tira-dir__cabecera { flex-wrap: nowrap; white-space: nowrap; }
.lab .tira-dir__cabecera > * { overflow: hidden; text-overflow: ellipsis; }
.lab .tira-dir__escala { display: none; }
.lab .tira-dir svg { max-height: 34px; margin-top: 0.25rem; }

/* ---------- Estilo 8 bits ---------- */

.pixel .caja-red rect { rx: 0; stroke-width: 2; }
.pixel .caja-red--internet rect { stroke: #34427a; stroke-dasharray: 4 4; }
.pixel .caja-red--vpc > rect { fill: #0a1540; stroke: #5a7dff; }
.pixel .caja-red--cpd > rect { fill: #1a1c29; stroke: var(--tinta); }
.pixel .caja-red--nube2 > rect { fill: #1e1033; stroke: #c49bff; }
.pixel .caja-red--subred > rect { fill: #05060d; stroke: #34427a; }
.pixel .caja-red--publica > rect { stroke: var(--ok); stroke-dasharray: 4 4; }
.pixel .caja-red--fallo > rect { fill: #3a0b10; stroke: var(--fallo); }
.pixel .caja-red__titulo.rotulo-pixel { fill: var(--tinta); }
.pixel .caja-red--vpc > .rotulo .caja-red__titulo.rotulo-pixel { fill: #8fb3ff; }
.pixel .caja-red--nube2 > .rotulo .caja-red__titulo.rotulo-pixel { fill: #c49bff; }
.pixel .caja-red--publica > .rotulo .caja-red__titulo.rotulo-pixel { fill: var(--ok); }
.pixel .caja-red--fallo .rotulo-pixel { fill: var(--fallo); }
.pixel .caja-red__cidr.rotulo-pixel { fill: var(--tinta-suave); }
.pixel .enlace line { stroke-width: 2; }
.pixel .enlace--linea line, .pixel .enlace--interconexion line { stroke-width: 4; }
.pixel .enlace__rotulo.rotulo-pixel { fill: var(--linea); }
.pixel .enlace--caido .enlace__rotulo.rotulo-pixel { fill: var(--fallo); }
.pixel .pieza--red rect { fill: #1a1c29; stroke: #8fb3ff; }
.pixel .pieza--red .rotulo-pixel { fill: #8fb3ff; }
.pixel .rejilla__rotulo.rotulo-pixel { fill: var(--tinta-suave); }
.pixel .rejilla__rotulo--fallo.rotulo-pixel { fill: var(--fallo); }
.pixel .casillas .casilla.casilla--reservada { fill: #34427a; stroke: #34427a; }
.pixel .tira-dir__bloque { stroke-width: 1; }
.pixel .consulta__filas { font-family: var(--codigo); font-size: 1rem; line-height: 1.15; font-variant-ligatures: none; }
.pixel .consulta__fila--gana { font-weight: 400; }
.pixel .consulta__nota { font-family: var(--codigo); font-size: 1rem; line-height: 1.1; }
.pixel .consulta__fila--ok, .pixel .consulta__fila--fallo { border-left-width: 4px; }
.pixel .lab .tira-dir { order: 1; align-self: stretch; }
.pixel .tira-dir { background: transparent; border: 2px solid #34427a; border-radius: 0; }
.pixel .tira-dir__cabecera { font-family: var(--pixel); font-size: 8px; line-height: 1.6; }
.pixel .tira-dir__bloque--cpd { fill: #6c7aa8; stroke: #6c7aa8; }
.pixel .tira-dir__bloque--nube { fill: #0a1540; stroke: #5a7dff; stroke-dasharray: none; }
.pixel .tira-dir__letra { font-family: var(--pixel); font-size: 6px; font-weight: 400; }

/* Pieza con IP pública: su IP en naranja */
.pieza--publica .nodo__estado { fill: var(--lento); }
.pixel .pieza--publica .nodo__estado.rotulo-pixel { fill: var(--lento); }
.sim__casilla--apagada { opacity: 0.45; }
.enlace--reenvio line { stroke: var(--activo); stroke-dasharray: 2 3; }
.enlace--adjunto line { stroke: var(--linea); stroke-width: 1; }
.enlace--entorno-pro line { stroke: var(--ok); }
.enlace--entorno-pre line { stroke: var(--lento); }
.enlace--entorno-dev line { stroke: var(--fallo); stroke-dasharray: 3 2; }
.caja-red--dev > rect { stroke-dasharray: 3 2; }
.enlace--peering line, .enlace--peering path { opacity: 0.7; }
.enlace--tpv line { stroke-dasharray: 1 3; }
.enlace--directa path { stroke: #8c5ac8; }