/* fase04.css: estilos propios de esta parte. Usa los tokens de temas.css (var(--…)); los componentes comunes están en componentes.css. */

/* Herramientas de red: formulario de consulta en una fila, con el botón alineado abajo con los campos. */
.consulta-red { align-items: flex-end; margin-bottom: 0.8rem; }
.consulta-red .campo { flex: 0 1 auto; }

/* Bloque «En tu terminal»: etiqueta, comando y botón de copiar. */
.comando-red {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr auto;
  gap: 0.4rem 0.8rem;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--borde);
}
.comando-red:last-child { border-bottom: 0; }
.comando-red code { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .comando-red { grid-template-columns: 1fr auto; }
  .comando-red > span { grid-column: 1 / -1; }
}

/* Dentro / fuera, pública / privada, capa bien / capa mal. */
.ok-red { color: var(--ok); font-weight: 600; }
.fuera-red { color: var(--error); font-weight: 600; }

/* Tiempos por fase de /h/cabeceras. */
.barras-tiempo { display: grid; gap: 0.35rem; }
.barra-tiempo { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr 5rem; gap: 0.6rem; align-items: center; }
.barra-tiempo .barra { display: block; height: 0.55rem; border-radius: var(--radio-xs, 3px); background: var(--acento); min-width: 2px; }
.barra-tiempo code { text-align: right; }

/* Mi IP. */
.ip-grande { font-size: 1.6rem; font-weight: 600; letter-spacing: 0.01em; overflow-wrap: anywhere; }

/* Clasificador de IP y RDAP. */
.ficha-ip { padding: 0.5rem 0; border-bottom: 1px solid var(--borde); }
.estado-rdap { padding: 0.25rem 0; }

/* Códigos HTTP: una tarjeta por código con el número grande y el color de su familia. */
.codigo-http { padding: 0.8rem 0; border-bottom: 1px solid var(--borde); }
.codigo-http p { margin: 0.35rem 0; }
.num-http { font-family: var(--mono, monospace); font-size: 1.25rem; }
.codigo-http[data-clase="2"] .num-http { color: var(--ok); }
.codigo-http[data-clase="3"] .num-http { color: var(--info); }
.codigo-http[data-clase="4"] .num-http { color: var(--atencion); }
.codigo-http[data-clase="5"] .num-http { color: var(--error); }

/* Puertos: el aviso de seguridad debajo de la descripción. */
.aviso-puerto { margin-top: 0.3rem; color: var(--atencion); }

/* Generadores de curl: los paneles de salida en rejilla cuando hay sitio. */
.salidas-red { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.salidas-red pre.codigo { max-height: 22rem; overflow: auto; }