/* ============================================================
   REDES · la matriz de capacidades, pestaña de la vista Marca

   Todo el trabajo de esta hoja es UNO: que un eje apagado por DECISIÓN DEL EQUIPO y uno
   apagado por LÍMITE DE LA API no se puedan confundir. Pintar los dos en gris sería
   mentir — uno se prende con una línea en tools/redes.py y el otro no se prende nunca.

   La diferencia va por TRES canales a la vez, para que ninguno sea el único:
     · forma del borde — sólido (una puerta que se abre) contra punteado (una pared)
     · ícono          — ⏸ pausa contra 🔒 candado
     · color          — ámbar (lo nuestro, revisable) contra tinta apagada (lo de la red)
   El color solo nunca alcanza: en un monitor barato, con daltonismo o en una captura en
   blanco y negro se cae, y ahí la pantalla vuelve a mentir. El borde y el ícono sobreviven
   a los tres casos.

   CÓMO ESTÁ ARMADO, y por qué así: cada tono define CUATRO VARIABLES (--rd-borde,
   --rd-trazo, --rd-piel, --rd-acento) y ni una sola propiedad de pintura. Los componentes
   —celda, leyenda, detalle, bloque, ítem— las consumen con un valor por defecto. La
   primera versión hacía lo obvio (el tono seteaba `border-color` y `border-style` y el
   componente el `border` entero) y NO ANDABA: el shorthand `border:` del componente pisa
   el `border-style` del tono si gana el orden del archivo, así que las dos celdas testigo
   de TikTok terminaban con el MISMO borde sólido gris. Se detectó porque el chequeo compara
   las dos celdas computadas en Chromium. Con variables, la cascada deja de importar y no
   se puede volver a romper moviendo un bloque de lugar.

   Solo tokens de /tokens.css — cero hex hardcodeado.
   `.on` para "seleccionado", nunca `.sel`.
   ============================================================ */

/* ---------- los tonos: cuatro variables, cero pintura ---------- */

/* ANDA. */
.rd-t-si{
  --rd-borde:var(--turquesa-line);
  --rd-trazo:solid;
  --rd-piel:var(--turquesa-dim);
  --rd-acento:var(--turquesa);
}

/* DECISIÓN NUESTRA: ámbar, borde sólido, fondo tibio. Se lee como "esto está esperando
   algo", que es exactamente lo que es: una decisión que se puede revisar. */
.rd-t-decision{
  --rd-borde:var(--ambar);
  --rd-trazo:solid;
  --rd-piel:var(--ambar-dim);
  --rd-acento:var(--ambar);
}

/* LÍMITE DE LA RED: sin fondo, borde PUNTEADO y tinta apagada. El punteado es el canal que
   no depende del color — una pared dibujada, no una puerta cerrada. */
.rd-t-limite{
  --rd-borde:var(--line);
  --rd-trazo:dashed;
  --rd-piel:transparent;
  --rd-acento:var(--ink-3);
}
.rd-t-limite{ color:var(--ink-3); }
.rd-t-limite .rd-ico{ opacity:.72; }

/* Estado que tools/redes.py conoce y esta hoja todavía no. Punteado fino y a la vista: que
   se note que falta clasificarlo, en vez de pasar por "sí" sin que nadie lo mire. */
.rd-t-raro{
  --rd-borde:var(--ambar);
  --rd-trazo:dotted;
  --rd-piel:transparent;
  --rd-acento:var(--ambar);
}

/* ---------- estructura ---------- */

.rd-wrap{ display:flex; flex-direction:column; gap:var(--sp-6); }

.rd-head{ display:flex; align-items:flex-start; gap:var(--sp-4); }
.rd-titulo{ margin:0 0 var(--sp-1); font-size:var(--fs-base); }
.rd-bajada{
  margin:0; max-width:62ch;
  font-size:var(--fs-sm); color:var(--ink-2); line-height:var(--lh-base);
}
.rd-pie{
  margin:0; font-size:var(--fs-xs); color:var(--ink-3); line-height:var(--lh-base);
  max-width:78ch;
}
.rd-wrap code{
  font-family:var(--f-mono); font-size:.92em;
  background:var(--s3); border-radius:var(--r-xs); padding:1px 4px; color:var(--ink-2);
}

.rd-aviso{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s2);
  padding:var(--sp-4) var(--sp-5); font-size:var(--fs-sm); color:var(--ink-2);
  line-height:var(--lh-base);
  /* La ayuda de la key de Zernio viene multilínea desde el server (zernio._ayuda_key):
     sin pre-wrap las tres líneas se pegan en un párrafo ilegible. */
  white-space:pre-wrap;
}
.rd-aviso.err{ border-color:var(--rojo); color:var(--ink); }
.rd-aviso.ok{ border-color:var(--turquesa-line); color:var(--ink); }
.rd-aviso[hidden]{ display:none; }

/* El candado es un emoji y lo pinta la fuente de emojis (el color de acá no lo toca); la
   pausa es un glifo de texto y sí toma el acento. Van al mismo tamaño y en negrita para que
   el de texto no se vea como una rayita al lado del de color. */
.rd-ico{
  font-size:var(--fs-base); line-height:1; font-weight:700;
  color:var(--rd-acento, var(--ink-2));
}

.rd-http{
  font-family:var(--f-mono); font-size:var(--fs-micro);
  border:1px solid var(--line); border-radius:var(--r-xs);
  padding:1px var(--sp-2); color:var(--ink-3); white-space:nowrap;
}

/* ---------- leyenda ---------- */

/* Las tres fichas de la leyenda se pintan con las MISMAS variables que las celdas, así que
   son una muestra fiel y no un dibujito que se puede desincronizar de la grilla. */
.rd-leyenda{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.rd-ley{
  display:flex; align-items:center; gap:var(--sp-3);
  border:1px var(--rd-trazo, solid) var(--rd-borde, var(--line));
  background:var(--rd-piel, var(--s2));
  border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4); flex:1 1 260px; min-width:0;
}
.rd-ley-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.rd-ley-txt b{ font-size:var(--fs-xs); }
.rd-ley-txt span{ font-size:var(--fs-micro); color:var(--ink-3); line-height:var(--lh-tight); }

/* ---------- la grilla ---------- */

/* La tabla no se achica hasta volverse ilegible: abajo de su ancho mínimo scrollea sola,
   adentro de su caja. La página nunca scrollea de costado. */
.rd-scroll{ overflow-x:auto; }
.rd-grilla{
  border-collapse:separate; border-spacing:var(--sp-2);
  width:100%; min-width:660px;
}
.rd-grilla th{ text-align:left; font-weight:600; vertical-align:bottom; padding:0 var(--sp-2); }
.rd-grilla thead th{ padding-bottom:var(--sp-2); }
.rd-esq{ width:1%; }
.rd-eje{
  display:block; font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink);
}
.rd-eje-label{
  display:block; font-size:var(--fs-micro); color:var(--ink-3); font-weight:400;
  line-height:var(--lh-tight); max-width:15ch;
}
.rd-red{ font-size:var(--fs-sm); color:var(--ink); white-space:nowrap; }
.rd-td{ padding:0; }

.rd-cel{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  width:100%; min-height:52px; text-align:left; cursor:pointer;
  border:1px var(--rd-trazo, solid) var(--rd-borde, var(--line));
  background:var(--rd-piel, var(--s2));
  border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-xs);
}
/* El hover marca el borde con el acento del tono en vez de aclarar el fondo: sobre la
   celda de límite, que no tiene fondo, un brightness() no se ve. */
.rd-cel:hover{ box-shadow:0 0 0 1px var(--rd-acento, var(--ink-3)) inset; }
.rd-cel:focus-visible{ outline:2px solid var(--turquesa); outline-offset:2px; }
.rd-cel.on{ box-shadow:0 0 0 2px var(--turquesa) inset; }
.rd-cel-txt{ font-weight:600; }
/* La fecha de la decisión se ve SIN abrir nada: es lo que la vuelve revisable en vez de
   folclore. Las celdas de límite de la red no tienen fecha porque no hubo decisión. */
.rd-desde{
  font-family:var(--f-mono); font-size:var(--fs-micro); color:var(--rd-acento, var(--ink-3));
  font-weight:400;
}

/* ---------- detalle de una celda ---------- */

.rd-detalle{
  border:1px var(--rd-trazo, solid) var(--rd-borde, var(--line));
  border-left:3px var(--rd-trazo, solid) var(--rd-acento, var(--line));
  background:var(--s2);
  border-radius:var(--r-md);
  padding:var(--sp-5) var(--sp-6);
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.rd-detalle[hidden]{ display:none; }
.rd-det-head{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.rd-det-head b{ font-size:var(--fs-md); color:var(--ink); }
.rd-estado{
  font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase;
  color:var(--rd-acento, var(--ink-2));
}
.rd-det-head button{ font-size:var(--fs-xs); padding:2px var(--sp-3); }
.rd-motivo{
  margin:0; font-size:var(--fs-sm); color:var(--ink-2); line-height:var(--lh-base);
  max-width:74ch;
}
.rd-firma{
  margin:0; font-size:var(--fs-xs); color:var(--rd-acento, var(--ink-3));
  font-family:var(--f-mono);
}
.rd-firma-falta{ color:var(--rojo-ink); font-family:var(--f-ui); line-height:var(--lh-base); }
.rd-glosa{
  margin:0; font-size:var(--fs-xs); color:var(--ink-3); line-height:var(--lh-base);
  max-width:74ch;
}

/* "Qué hacer" es lo que separa las dos maneras de decir que no cuando el color ya no está
   —una captura en blanco y negro, un lector de pantalla—: una dice cómo prenderlo, la otra
   dice que no hay nada que prender. */
.rd-hacer{
  border-left:3px var(--rd-trazo, solid) var(--rd-acento, var(--line));
  padding-left:var(--sp-4);
  display:flex; flex-direction:column; gap:2px;
}
.rd-hacer-tit{
  font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase;
  color:var(--rd-acento, var(--ink-2));
}
.rd-hacer p{
  margin:0; font-size:var(--fs-sm); color:var(--ink-2); line-height:var(--lh-base);
  max-width:74ch;
}

/* ---------- los dos bloques ---------- */

/* Uno al lado del otro cuando entran, uno abajo del otro cuando no. Que estén separados es
   el punto: la lista única "lo que no anda" es justo la que hace que en dos meses nadie
   sepa cuál de todas se podía prender. */
/* align-items:start: los dos bloques casi nunca tienen la misma cantidad de filas (hoy son
   1 y 5), y estirar el corto a la altura del largo deja un rectángulo vacío enorme que se
   lee como "acá falta algo". */
.rd-bloques{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr));
  gap:var(--sp-5); align-items:start;
}
.rd-bloque{
  border:1px var(--rd-trazo, solid) var(--rd-borde, var(--line));
  border-radius:var(--r-md);
  padding:var(--sp-5) var(--sp-6);
  display:flex; flex-direction:column; gap:var(--sp-3);
  /* Fondo neutro a propósito: el tono va en el borde, el ícono y cada ítem. Una tarjeta
     entera lavada en ámbar grita más de lo que el contenido pide. */
  background:var(--s1);
}
.rd-bloque-head{ display:flex; align-items:center; gap:var(--sp-3); }
.rd-bloque-head h4{ margin:0; font-size:var(--fs-md); color:var(--ink); }
.rd-cuenta{
  font-family:var(--f-mono); font-size:var(--fs-micro); color:var(--ink-3);
  border:1px solid var(--line); border-radius:var(--r-xs); padding:0 var(--sp-2);
}
.rd-bloque-bajada{
  margin:0; font-size:var(--fs-xs); color:var(--ink-3); line-height:var(--lh-base);
}
.rd-items{ display:flex; flex-direction:column; gap:var(--sp-3); }
.rd-item{
  border:1px solid var(--line-soft);
  border-left:3px var(--rd-trazo, solid) var(--rd-acento, var(--line-soft));
  border-radius:var(--r-sm); background:var(--s2);
  padding:var(--sp-3) var(--sp-4);
}
.rd-item-head{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.rd-item-head b{ font-size:var(--fs-sm); color:var(--ink); }
.rd-item-eje{ font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink-2); }
.rd-item-motivo{
  margin:var(--sp-1) 0 0; font-size:var(--fs-xs); color:var(--ink-2);
  line-height:var(--lh-base);
}
.rd-vacio{ margin:0; font-size:var(--fs-xs); color:var(--ink-3); }

/* ---------- angosto ---------- */

@media (max-width: 720px){
  .rd-head{ flex-wrap:wrap; }
  .rd-bloques{ grid-template-columns:1fr; }
}