/* ─────────────────────────────────────────────────────────────────────────
   Jano — la hoja de estilo del sitio público.

   Marca: obsidiana y pátina. El obsidiana es el mismo lienzo que usa la
   aplicación (#0c0d0b), así que la web y el producto se reconocen como la
   misma cosa.

   🔴 La elevación se construye con BORDES DE 1 PX, no con sombras. Sobre un
   fondo casi negro una sombra no se ve —no hay nada más oscuro debajo— y lo
   único que consigue es ensuciar los bordes. La escalera de superficies va
   por luminosidad y por línea.

   ⚠️ Tipografía del sistema a propósito. Una fuente de Google en la portada
   de un producto cuyo argumento es «tus datos no salen de tu servidor» es una
   contradicción que el visitante técnico nota. Además quita una petición a un
   tercero y el primer renderizado no espera a nadie.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --obsidiana: #0c0d0b;
  --superficie: #131513;
  --superficie-alta: #191c19;
  --linea: #262a26;
  --linea-viva: #39403a;

  --texto: #e8eae8;
  --texto-suave: #9aa39b;
  /* 🔴 Medido, no elegido a ojo: #6b746d daba 3.56:1 sobre la superficie clara
     y AA pide 4.5:1 para texto normal. Falla en los tiempos del registro, en
     los pies de figura y en las etiquetas de los bloques de codigo — texto
     pequeño, que es justo donde mas duele. */
  --texto-tenue: #878f88;

  --patina: #5fd3c4;
  --patina-honda: #2a8d84;
  --bronce: #f59145;
  --alarma: #f87171;

  --ancho: 1120px;
  --sans:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono:
    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--obsidiana);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* El resplandor de pátina detrás del héroe. Un solo gradiente muy suave: es
   lo único decorativo de la página y por eso no compite con nada. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      60rem 32rem at 50% -8rem,
      rgba(95, 211, 196, 0.09),
      transparent 70%
    ),
    radial-gradient(
      40rem 24rem at 85% 8rem,
      rgba(245, 145, 69, 0.05),
      transparent 70%
    );
  z-index: 0;
}

a {
  color: var(--patina);
  text-decoration-color: rgba(95, 211, 196, 0.35);
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: var(--patina);
}

:focus-visible {
  outline: 2px solid var(--patina);
  outline-offset: 3px;
  border-radius: 4px;
}

.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--superficie-alta);
  border: 1px solid var(--linea-viva);
  padding: 0.6rem 1rem;
  border-radius: 8px;
}

/* ─── Cabecera ─────────────────────────────────────────────────────────── */
.cabecera {
  position: relative;
  z-index: 1;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 1.4rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--texto);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
}
.marca img {
  display: block;
}
.cabecera nav {
  display: flex;
  gap: 1.6rem;
  font-size: 0.93rem;
}
.cabecera nav a {
  color: var(--texto-suave);
  text-decoration: none;
}
.cabecera nav a:hover {
  color: var(--texto);
}

/* ─── Héroe ────────────────────────────────────────────────────────────── */
main {
  position: relative;
  z-index: 1;
}

.heroe {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 4.5rem 1.5rem 3rem;
  text-align: center;
}
.ojo {
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--patina-honda);
}
.heroe h1 {
  margin: 0;
  font-size: clamp(2.2rem, 6.2vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}
.heroe h1 em {
  font-style: normal;
  color: var(--patina);
}
.entrada {
  max-width: 44rem;
  margin: 1.5rem auto 0;
  color: var(--texto-suave);
  font-size: 1.12rem;
  text-wrap: pretty;
}

.acciones {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 2.2rem 0 0;
}
.boton {
  /* 🔴 La zona táctil nunca baja de 44 px de alto. WCAG 2.2 exige 24×24 como
     mínimo absoluto; 44 es lo que de verdad se acierta con el pulgar. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.3rem;
  border-radius: 10px;
  border: 1px solid var(--linea-viva);
  background: var(--superficie-alta);
  color: var(--texto);
  font: inherit;
  font-weight: 560;
  font-size: 0.97rem;
  text-decoration: none;
  transition:
    border-color 0.15s,
    background 0.15s,
    transform 0.15s;
}
.boton:hover {
  border-color: var(--patina-honda);
  background: #1f231f;
}
.boton:active {
  transform: translateY(1px);
}
/* Una sola píldora primaria por pantalla: si todo grita, nada se oye. */
.boton.primario {
  background: var(--patina);
  border-color: var(--patina);
  color: #05221f;
  font-weight: 650;
}
.boton.primario:hover {
  background: #77dfd2;
  border-color: #77dfd2;
}

/* ─── El registro del héroe ────────────────────────────────────────────── */
.registro {
  max-width: 52rem;
  margin: 3.5rem auto 0;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--superficie);
  overflow: hidden;
  text-align: left;
}
.registro-barra {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--linea);
  background: var(--superficie-alta);
}
.registro-barra span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--linea-viva);
}
.registro-barra b {
  margin-left: 0.7rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.lineas {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.87rem;
}
.lineas li {
  display: grid;
  /* ⚠️ Anchos proporcionales y no `auto`: con `auto` cada fila se reparte el
     espacio a su manera y las columnas no coinciden entre filas — se lee como
     cuatro frases sueltas en vez de como una tabla. */
  grid-template-columns: 10px minmax(0, 1.1fr) minmax(0, 0.7fr) minmax(0, 1.1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--linea);
}
.lineas li:last-child {
  border-bottom: 0;
}
.punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--linea-viva);
}
.punto.trabajando {
  background: var(--patina);
  box-shadow: 0 0 0 3px rgba(95, 211, 196, 0.16);
}
.punto.espera {
  background: var(--bronce);
  box-shadow: 0 0 0 3px rgba(245, 145, 69, 0.16);
}
.equipo {
  color: var(--texto);
  font-weight: 500;
}
.agente {
  color: var(--texto-tenue);
}
.estado {
  color: var(--texto-suave);
}
.estado.trabajando {
  color: var(--patina);
}
.estado.ok {
  color: var(--texto-suave);
}
.estado.espera {
  color: var(--bronce);
}
.estado.error {
  color: var(--alarma);
}
/* Cifras tabulares: sin esto, los tiempos bailan al alinearse en columna. */
.tiempo {
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 6.5rem;
}
.registro figcaption {
  padding: 0.95rem 1.15rem;
  border-top: 1px solid var(--linea);
  background: var(--superficie-alta);
  color: var(--texto-tenue);
  font-size: 0.86rem;
  font-family: var(--sans);
}

/* ─── Bandas de contenido ──────────────────────────────────────────────── */
.banda {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 4rem 1.5rem;
  border-top: 1px solid var(--linea);
}
.banda:first-of-type {
  border-top: 0;
}
.banda h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.banda > .entrada {
  margin-left: 0;
  margin-bottom: 2rem;
}
.sub {
  margin: 3.2rem 0 1.2rem;
  font-size: 1.15rem;
  color: var(--texto-suave);
  font-weight: 600;
}

.rejilla {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
.rejilla.dos {
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .rejilla.dos {
    grid-template-columns: repeat(2, 1fr);
  }
}
.rejilla.tres {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.rejilla article {
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--superficie);
  padding: 1.4rem;
}
.rejilla h3,
.rejilla h4 {
  margin: 0 0 0.55rem;
  font-size: 1.04rem;
  letter-spacing: -0.01em;
}
.rejilla p {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.97rem;
}

/* ─── Bloque de código ─────────────────────────────────────────────────── */
.codigo {
  border: 1px solid var(--linea);
  border-radius: 12px;
  overflow: hidden;
  background: var(--superficie);
}
.codigo-barra {
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--linea);
  background: var(--superficie-alta);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.codigo pre {
  margin: 0;
  padding: 1.2rem;
  overflow-x: auto;
}
.codigo code {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--texto);
  line-height: 1.7;
}
.nota {
  margin: 1rem 0 0;
  color: var(--texto-tenue);
  font-size: 0.92rem;
}
.nota code,
p code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--superficie-alta);
  border: 1px solid var(--linea);
  border-radius: 5px;
  padding: 0.1em 0.4em;
}

/* ─── Descargas ────────────────────────────────────────────────────────── */
.descargas article {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.descargas .version {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--texto-tenue);
}
.descargas .boton {
  margin-top: auto;
  align-self: flex-start;
}
/* ⚠️ Lo que no está listo se dice, no se esconde ni se pinta como si lo
   estuviera: un botón que lleva a un binario que el sistema rechaza cuesta
   más confianza que una frase honesta. */
.descargas .pendiente {
  border-style: dashed;
  background: transparent;
}
.descargas .pendiente h4 {
  color: var(--texto-suave);
}
.descargas .porque {
  font-size: 0.89rem;
  color: var(--texto-tenue);
}

.cierre .entrada {
  max-width: 48rem;
}

/* ─── Pie ──────────────────────────────────────────────────────────────── */
.pie {
  position: relative;
  z-index: 1;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3.5rem;
  border-top: 1px solid var(--linea);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--texto-tenue);
  font-size: 0.9rem;
}
.pie strong {
  color: var(--texto-suave);
}
.pie nav {
  display: flex;
  gap: 0.6rem;
}
/* 🔴 24x24 como minimo (WCAG 2.2, 2.5.8). Medido: estos dos enlaces salian a
   23 px de alto. Los de DENTRO de una frase —«Termix», «Lex Laboratory»— estan
   exentos por la excepcion de enlace en linea, y por eso no se tocan: darles
   relleno partiria el renglon. */
.pie nav a,
.cabecera nav a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 0.55rem;
  border-radius: 6px;
}
.cabecera nav {
  gap: 0.5rem;
}

/* ─── Estrecho ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
  .heroe {
    padding-top: 2.5rem;
  }
  .cabecera {
    padding: 1rem 1.25rem;
  }
  .cabecera nav {
    gap: 1.1rem;
    font-size: 0.88rem;
  }
  .banda,
  .heroe,
  .pie {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .acciones .boton {
    flex: 1 1 100%;
  }
  /* 🔴 En estrecho la fila de cinco columnas no cabe y el tiempo se salía de
     la ventana. Se reordena a dos filas en vez de dejar que encoja: una tabla
     que desborda no se lee, y una que se parte sí. */
  .lineas li {
    grid-template-columns: 10px 1fr auto;
    row-gap: 0.25rem;
  }
  .lineas .agente {
    grid-column: 2;
  }
  .lineas .estado {
    grid-column: 2;
  }
  .lineas .tiempo {
    grid-row: 1;
    grid-column: 3;
  }
}

/* ─── Impresión ────────────────────────────────────────────────────────── */
@media print {
  body::before {
    display: none;
  }
  body {
    background: #fff;
    color: #111;
  }
}

/* ─── Notas de versión ─────────────────────────────────────────────────── */
.version-cabecera {
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 0.5rem;
}
.version-cabecera h2 {
  font-family: var(--mono);
  font-size: 1.6rem;
  margin-bottom: 0.3rem;
}
.version-fecha {
  margin: 0;
  color: var(--texto-tenue);
  font-size: 0.92rem;
}
.lista {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--texto-suave);
}
.lista li {
  margin-bottom: 0.7rem;
}
.lista li::marker {
  color: var(--patina-honda);
}
.lista strong {
  color: var(--texto);
  font-weight: 600;
}
/* Lo pendiente se marca en bronce, que en el producto significa exactamente
   lo mismo: «esto te está esperando». Una sola señal para un solo trabajo. */
.pendientes li::marker {
  color: var(--bronce);
}

/* Un aviso honesto, no una alarma: bronce —el color de «esto te está
   esperando»— y no rojo, que aquí no hay nada roto. */
.aviso {
  margin: 1rem 0 0;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(245, 145, 69, 0.3);
  border-radius: 10px;
  background: rgba(245, 145, 69, 0.06);
  color: var(--texto-suave);
  font-size: 0.93rem;
}
.aviso strong {
  color: var(--bronce);
}