/* ============================================================
   INSIGHTS · qué grabar después (vista #/produccion/insights)

   La hoja tiene un solo trabajo de diseño y es este: que una celda con pocos posteos NO se
   vea como un dato. `.flaca` la apaga entera —número incluido— y le deja el motivo escrito
   al lado. Lo mismo con el bloque "qué NO está en este tablero": va arriba, en ámbar, antes
   que cualquier número, porque un tablero incompleto que no avisa que está incompleto es
   peor que no tener tablero.

   Solo tokens de /tokens.css — cero hex hardcodeado.
   `.on` para "seleccionado", nunca `.sel` (design/ARQUITECTURA-PANTALLA.md).
   ============================================================ */

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

.in-head{ display:flex; align-items:flex-start; gap:var(--sp-4); flex-wrap:wrap; }
.in-titulo{ margin:0 0 var(--sp-1); font-size:var(--fs-base); }
.in-bajada{
  margin:0; max-width:62ch;
  font-size:var(--fs-sm); color:var(--ink-2); line-height:var(--lh-base);
}
.in-sello{ font-size:var(--fs-xs); color:var(--ink-3); white-space:nowrap; align-self:center; }
.in-pie{
  margin:0; font-size:var(--fs-xs); color:var(--ink-3); line-height:var(--lh-base);
  max-width:78ch;
}

.in-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);
  /* Los textos de ayuda del server (zernio._ayuda_key) vienen multilínea: sin pre-wrap las
     tres líneas se pegan en un párrafo ilegible. Mismo motivo que .rd-aviso. */
  white-space:pre-wrap;
}
.in-aviso.err{ border-color:var(--rojo); color:var(--ink); }
.in-aviso.warn{ border-color:var(--ambar); background:var(--ambar-dim); color:var(--ink); }
.in-aviso[hidden]{ display:none; }

/* ---------- lo que falta ---------- */

.in-faltan{
  border:1px solid var(--ambar); border-radius:var(--r-sm); background:var(--ambar-dim);
  padding:var(--sp-4) var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3);
}
.in-faltan[hidden]{ display:none; }
.in-faltan-tit{
  font-size:var(--fs-micro); letter-spacing:.07em; text-transform:uppercase;
  color:var(--ambar-ink);
}
.in-falta{ display:flex; flex-direction:column; gap:2px; }
.in-falta-redes{ font-size:var(--fs-sm); color:var(--ink); font-weight:600; }
.in-falta-txt{
  font-size:var(--fs-xs); color:var(--ink-2); line-height:var(--lh-base);
  white-space:pre-wrap;
}
/* La cuenta que se cayó a mitad de la lectura no es lo mismo que la que falta entera: de
   ésta SÍ entraron posteos, así que los números no están incompletos, están MAL. Rojo y no
   ámbar, que es la misma distinción que hace el aviso de arriba. */
.in-falta-caida{ border-left:2px solid var(--rojo); padding-left:var(--sp-3); }

/* ---------- selectores ---------- */

.in-barra{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.in-seg{
  display:flex; gap:2px; border:1px solid var(--line); border-radius:var(--r-sm); padding:2px;
}
.in-seg button{
  background:transparent; border:none; color:var(--ink-2);
  padding:5px 11px; font-size:var(--fs-sm); border-radius:var(--r-xs); cursor:pointer;
  display:flex; align-items:center; gap:var(--sp-2);
}
.in-seg button:hover{ color:var(--ink); }
.in-seg button.on{ background:var(--s3); color:var(--ink); font-weight:600; }
/* La señal que la red no informa (los guardados de Facebook) queda elegible pero avisando:
   esconderla haría creer que la app no la mide. */
.in-seg button.vacia{ color:var(--ink-3); text-decoration:line-through; }

.in-n{
  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 4px;
}

/* La ventana lleva etiqueta y las otras dos no: "90 días" al lado de "Instagram" y
   "Guardados" no se entiende solo, y de los tres selectores es el único que cambia lo que
   los números SIGNIFICAN en vez de cuáles se muestran. */
.in-vent{ display:flex; align-items:center; gap:var(--sp-2); }
.in-vent-lab{
  font-size:var(--fs-micro); letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap;
}

/* ---------- resumen ---------- */

.in-resumen{ display:flex; gap:var(--sp-4); flex-wrap:wrap; align-items:flex-end; }
.in-kpi{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--s1);
  padding:var(--sp-4) var(--sp-5); min-width:130px;
}
.in-kpi-num{ font-size:var(--fs-xl); color:var(--ink); line-height:1.1; }
.in-kpi-lab{ font-size:var(--fs-micro); color:var(--ink-3); margin-top:2px; }
.in-rango{ font-size:var(--fs-xs); color:var(--ink-3); padding-bottom:var(--sp-3); }

/* ---------- secciones ---------- */

.in-cuerpo{ display:flex; flex-direction:column; gap:var(--sp-8); }
.in-sec{ display:flex; flex-direction:column; gap:var(--sp-4); }
.in-sec-head h4{ margin:0 0 2px; font-size:var(--fs-md); }
.in-sec-head p{
  margin:0; font-size:var(--fs-xs); color:var(--ink-3);
  line-height:var(--lh-base); max-width:78ch;
}

.in-vacio{
  border:1px dashed var(--line); border-radius:var(--r-sm);
  padding:var(--sp-5); font-size:var(--fs-sm); color:var(--ink-3);
  line-height:var(--lh-base);
}

/* ---------- el ranking ---------- */

.in-top{ display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:var(--sp-4); }
.in-card{
  display:flex; gap:var(--sp-4); min-width:0;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--s1);
  padding:var(--sp-4);
}
.in-card:hover{ border-color:var(--line-soft); }
.in-mini{
  width:64px; height:64px; flex:none; object-fit:cover;
  border-radius:var(--r-sm); border:1px solid var(--line); background:var(--s3);
}
.in-mini-vacia{ display:block; }
.in-card-cuerpo{ display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; flex:1; }
.in-card-top{ display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; }
.in-valor{ font-size:var(--fs-lg); color:var(--ink); font-family:var(--f-mono); }
.in-veces{ font-size:var(--fs-xs); color:var(--turquesa-ink); white-space:nowrap; }

/* El caption entero y sin recortar: es lo que permite juzgar si la etiqueta de gancho
   acertó, y ese juicio es el único control de calidad que tiene la clasificación. */
.in-caption{
  margin:0; font-size:var(--fs-sm); color:var(--ink-2); line-height:var(--lh-base);
  overflow-wrap:anywhere;
}
.in-card-pie{
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  font-size:var(--fs-micro); color:var(--ink-3);
}
.in-card-pie a{ color:var(--turquesa-ink); text-decoration:none; white-space:nowrap; }
.in-card-pie a:hover{ text-decoration:underline; }
.in-tag{
  border:1px solid var(--line); border-radius:var(--r-xs); padding:1px var(--sp-2);
  color:var(--ink-3); white-space:nowrap;
}
.in-cuando{ white-space:nowrap; }

.in-gancho{
  font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--turquesa-line); background:var(--turquesa-dim);
  color:var(--turquesa-ink); border-radius:var(--r-xs); padding:2px var(--sp-2);
  white-space:nowrap; cursor:help;
}
/* "Sin clasificar" no se disfraza de etiqueta: es la ausencia de una, y tiene que verse
   distinto de un tipo real para que nadie lo cuente como uno. */
.in-gancho.sin{
  border-color:var(--line); background:transparent; color:var(--ink-3);
  text-transform:none; letter-spacing:0; cursor:default;
}

/* ---------- las tablas de agrupamiento ---------- */

.in-tabla{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.in-tabla th{
  text-align:left; font-weight:600; font-size:var(--fs-micro); color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.06em;
  padding:0 var(--sp-4) var(--sp-2) 0; border-bottom:1px solid var(--line); white-space:nowrap;
}
.in-tabla td{
  padding:var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom:1px solid var(--line-soft);
  vertical-align:baseline;
}
.in-celda-lab{ color:var(--ink); }
.in-celda-num{ font-family:var(--f-mono); color:var(--ink); white-space:nowrap; }
.in-celda-veces{ color:var(--turquesa-ink); white-space:nowrap; }
.in-celda-nota{ font-size:var(--fs-micro); color:var(--ink-3); line-height:var(--lh-tight); }

/* ¿PUEDE SER AZAR? Tres pesos y no un semáforo: el color acompaña al texto, que es el que
   dice la cosa. La celda que sale por azar la mitad de las veces se apaga hasta el gris de
   una nota al pie —es el mismo movimiento que `.flaca`: no se esconde, deja de competir. */
.in-celda-azar{ font-size:var(--fs-micro); line-height:var(--lh-tight); max-width:26ch; }
.in-azar{ cursor:help; }
.in-azar.fuerte{ color:var(--turquesa-ink); }
.in-azar.dudoso{ color:var(--ambar-ink); }
.in-azar.ruido{ color:var(--ink-3); }
.in-celda-n{ white-space:nowrap; }

/* LA REGLA QUE JUSTIFICA MEDIA PANTALLA: por debajo del mínimo de posteos, la fila se
   apaga entera. No se esconde —esconderla sería mentir por omisión— pero deja de competir
   visualmente con las que sí son un dato. */
.in-tabla tr.flaca td{ color:var(--ink-3); opacity:.55; }
.in-tabla tr.flaca .in-celda-veces{ color:var(--ink-3); }
.in-tabla tr.flaca .in-celda-nota{ opacity:1; color:var(--ambar-ink); }

/* La cola larga de celdas de un posteo (los temas dejan 40) arranca plegada. No está
   escondida: el botón dice cuántas son y las abre. */
.in-tabla tr.extra{ display:none; }
.in-tabla.abierta tr.extra{ display:table-row; }
.in-tabla tr.in-mas td{ border-bottom:none; padding-top:var(--sp-3); }
.in-tabla tr.in-mas button{
  background:transparent; border:1px solid var(--line); border-radius:var(--r-xs);
  color:var(--ink-3); font-size:var(--fs-xs); padding:3px var(--sp-4); cursor:pointer;
}
.in-tabla tr.in-mas button:hover{ color:var(--ink-2); border-color:var(--line-soft); }

.in-nota{
  margin:0; font-size:var(--fs-xs); color:var(--ink-3); line-height:var(--lh-base);
  max-width:78ch;
}
.in-nota-fuerte{
  border-left:2px solid var(--ambar); padding-left:var(--sp-4); color:var(--ink-2);
}
.in-nota strong{ color:var(--ink-2); }

@media (max-width:700px){
  .in-top{ grid-template-columns:1fr; }
  .in-resumen{ gap:var(--sp-3); }
  .in-kpi{ min-width:110px; flex:1 1 110px; }
}

/* La participación al lado del n: es lo que desarma la lectura al revés del ranking. */
.in-share { margin-left: .4rem; opacity: .65; font-variant-numeric: tabular-nums; }

/* El aviso de volumen va pegado al ranking, no al final: el error de lectura se comete
   arriba, mirando las tarjetas, no abajo mirando la tabla. */
.in-nota-ojo {
  border-left: 3px solid var(--acento, #e8b44a);
  background: color-mix(in srgb, var(--acento, #e8b44a) 8%, transparent);
  padding: .6rem .8rem; border-radius: 0 6px 6px 0; margin-top: .8rem;
}