/* ============================================================
   NÚMEROS (#/produccion/numeros) — Bloque 2C

   El chrome de la pantalla: cabecera, las dos líneas de resultado de «Traer» y la tabla de
   «Publicado desde la app». Lo de adentro de la segunda card lo pinta insights.js con sus
   propias clases (.in-*), que no se tocan.
   ============================================================ */

.nu-wrap{ padding:var(--gut); display:flex; flex-direction:column; gap:var(--sp-7); }

.nu-head{ display:flex; align-items:flex-start; gap:var(--sp-6); flex-wrap:wrap; }
.nu-titulo{ margin:0; font-size:var(--fs-xl); }
.nu-bajada{
  margin:var(--sp-2) 0 0; color:var(--ink-2); font-size:var(--fs-md);
  line-height:var(--lh-base); max-width:78ch;
}
.nu-sello{ color:var(--ink-3); font-size:var(--fs-xs); align-self:center; }

/* ---------- las dos líneas del resultado ---------- */
.nu-lineas{ display:flex; flex-direction:column; gap:var(--sp-3); }
.nu-linea{
  border:1px solid var(--line); border-left-width:3px; border-radius:var(--r-sm);
  padding:var(--sp-4) var(--sp-5); font-size:var(--fs-sm); color:var(--ink-2);
  white-space:pre-wrap; line-height:var(--lh-base);
}
.nu-linea.ok{ border-left-color:var(--turquesa); }
.nu-linea.err{ border-left-color:var(--rojo); }
.nu-linea.info{ border-left-color:var(--e-prog); }

/* ---------- cards ---------- */
.nu-card{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--s1);
  padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4); min-width:0;
}

/* El tablero de insights trae tablas de siete columnas que no entran en 390, y ese ancho es
   suyo desde antes de 2C: cuando era dueño de la vista, corría la página entera. Se contiene
   acá —scroll horizontal adentro de la card— en vez de tocar insights.css, que no es de
   este bloque: la tabla se lee igual y lo de afuera deja de moverse. */
#num-insights{ min-width:0; overflow-x:auto; }
.nu-card-tit{ margin:0; font-size:var(--fs-lg); }
.nu-n{ color:var(--ink-3); font-weight:400; font-size:var(--fs-sm); }
.nu-filtro{ font-size:var(--fs-sm); color:var(--ink-2); }
.nu-aviso{
  border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-4) var(--sp-5);
  font-size:var(--fs-sm); color:var(--ink-2); white-space:pre-wrap;
}
.nu-aviso.err{ border-color:var(--rojo); color:var(--ink); }

.nu-link{
  background:none; border:none; padding:0; font:inherit; cursor:pointer;
  color:var(--turquesa-ink); text-decoration:none;
}
.nu-link:hover{ text-decoration:underline; }

/* ---------- la tabla ---------- */
.nu-tabla{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.nu-tabla th{
  text-align:left; font-weight:600; color:var(--ink-3); font-size:var(--fs-xs);
  padding:var(--sp-2) var(--sp-4); border-bottom:1px solid var(--line);
  text-transform:uppercase; letter-spacing:.04em;
}
.nu-tabla td{ padding:var(--sp-4); border-bottom:1px solid var(--line-soft); color:var(--ink); }
.nu-tabla tbody tr:hover{ background:var(--s2); }
.nu-num{ font-variant-numeric:tabular-nums; }
.nu-dim{ color:var(--ink-3); }

.nu-estado{
  display:inline-block; padding:1px var(--sp-3); border-radius:var(--r-xs);
  font-size:var(--fs-xs); font-weight:600;
  color:var(--et-ink, var(--ink-3)); border:1px solid var(--et, var(--line));
}
.nu-estado[data-estado="programado"]{ --et:var(--e-prog); --et-ink:var(--e-prog-ink); }
.nu-estado[data-estado="en_duda"]{ --et:var(--ambar); --et-ink:var(--ambar-ink); }
.nu-estado[data-estado="publicado"]{ --et:var(--e-num); --et-ink:var(--e-num-ink); }
.nu-estado[data-estado="fallado"]{ --et:var(--rojo); --et-ink:var(--rojo-ink); }

.nu-vacio{ color:var(--ink-2); font-size:var(--fs-md); line-height:var(--lh-base); max-width:78ch; }
.nu-pie{ margin:0; color:var(--ink-3); font-size:var(--fs-xs); line-height:var(--lh-base); max-width:78ch; }

/* 390: mismas siete columnas apiladas, sin esconder ninguna. */
@media (max-width:700px){
  .nu-wrap{ padding:var(--sp-6); }
  .nu-card{ padding:var(--sp-5); }
  .nu-tabla, .nu-tabla thead, .nu-tabla tbody, .nu-tabla tr, .nu-tabla td{ display:block; width:auto; }
  .nu-tabla thead{ display:none; }
  .nu-tabla tr{ border-bottom:1px solid var(--line); padding:var(--sp-4) 0; }
  .nu-tabla td{ border:none; padding:1px 0; }
}