/* ============================================================
   RESEARCH · la config del research de YouTube, pestaña de la vista Marca

   Esta hoja tiene tres trabajos, y los tres son de jerarquía: en esta pantalla todo es
   "un campo más" salvo dos cosas, y si se ven iguales que el resto la pantalla no sirve.

   1. LA LÍNEA DE LA ÚLTIMA CORRIDA va arriba y con su propia caja, y cambia de color
      cuando hace más de dos días. Es lo único que hace visible que el cron se rompió sin
      entrar a n8n, así que no puede verse como un pie de página. El punto es .hoy-punto
      (index.html), con la misma semántica de color que en Hoy y en las fuentes de un
      dossier: gris = todavía no pasó, turquesa = al día, ámbar = mirá esto. Se reusa la
      CLASE, no se copia el círculo — igual que hace ideas.css.

   2. EL TECHO DIARIO (`max_por_dia`) tiene borde ámbar a la izquierda y su explicación al
      lado, no en un tooltip. Es el único número que impide que el banco se llene solo; al
      lado de "videos por referente", sin nada que los distinga, se lee como el mismo tipo
      de detalle y se sube "por las dudas".

   3. EL MOTIVO DE POR QUÉ EL BOTÓN DE BUSCAR ESTÁ APAGADO se pinta DEBAJO DEL BOTÓN y en
      ámbar. Nunca en un `title`: un motivo que aparece pasando el mouse no existe para el
      que usa teclado, ni para el que mira la pantalla dos segundos.

   Las acciones de cada fila (Sacar) usan .acciones-hover de base.css, que ya trae sus dos
   redes (touch y prefers-reduced-motion). Acá no se vuelve a escribir el patrón.

   Solo tokens de /tokens.css — cero hex hardcodeado.
   ============================================================ */

.rs-wrap{ display:flex; flex-direction:column; gap:var(--sp-6); }
.rs-cuerpo{ display:flex; flex-direction:column; gap:var(--sp-6); }
.rs-cuerpo[hidden]{ display:none; }

.rs-head{ display:flex; align-items:flex-start; gap:var(--sp-4); }
.rs-titulo{ margin:0 0 var(--sp-1); font-size:var(--fs-base); }
.rs-bajada{
  margin:0 0 var(--sp-4); max-width:64ch;
  font-size:var(--fs-sm); color:var(--ink-2); line-height:var(--lh-base);
}
.rs-pie{ margin:var(--sp-2) 0 0; font-size:var(--fs-xs); color:var(--ink-3); }
.rs-vacio{ margin:0; font-size:var(--fs-sm); color:var(--ink-3); }

/* ---------- aviso de arriba ---------- */

.rs-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);
}
.rs-aviso[hidden]{ display:none; }
.rs-aviso p{ margin:0; }
.rs-aviso p + p{ margin-top:var(--sp-3); }
.rs-aviso.err{ border-color:var(--rojo); color:var(--ink); }
.rs-aviso.warn{ border-color:var(--ambar); background:var(--ambar-dim); color:var(--ink); }
/* La ayuda de la key viene multilínea desde el server (youtube._ayuda_key): sin pre-wrap
   las tres líneas se pegan en un párrafo ilegible. Mismo caso que .rd-aviso en redes.css. */
.rs-aviso-detalle{
  font-size:var(--fs-xs); color:var(--ink-2); white-space:pre-wrap;
}

/* ---------- la última corrida ---------- */

.rs-corrida{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s1);
  padding:var(--sp-4) var(--sp-5);
}
.rs-corrida[hidden]{ display:none; }
.rs-corrida-linea{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.rs-corrida-linea b{ font-size:var(--fs-md); color:var(--ink); }
.rs-corrida-txt{
  margin:var(--sp-2) 0 0; max-width:74ch;
  font-size:var(--fs-xs); color:var(--ink-2); line-height:var(--lh-base);
}
.rs-origen{
  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:1px var(--sp-2);
}
.rs-ico{ font-size:var(--fs-base); line-height:1; }

/* La misma semántica de color que .hoy-punto tiene en Hoy. Acá no late nunca: una corrida
   no está "en proceso" desde el punto de vista de esta pantalla, o corrió o no corrió. */
.rs-corrida[data-estado="listo"]{ border-color:var(--turquesa-line); }
.rs-corrida[data-estado="listo"] .hoy-punto{ background:var(--turquesa); }
.rs-corrida[data-estado="alerta"]{ border-color:var(--ambar); background:var(--ambar-dim); }
.rs-corrida[data-estado="alerta"] .hoy-punto{ background:var(--ambar); }
/* "pendiente" se queda con el gris de .hoy-punto: todavía no pasó nada, no hay alarma. */

/* ---------- bloques ---------- */

.rs-bloque{
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-6);
}
.rs-bloque-head{ display:flex; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.rs-bloque-head h4{
  margin:0; font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-2);
}
.rs-cuenta{ font-family:var(--f-mono); font-size:var(--fs-micro); color:var(--ink-3); }
.rs-cuenta.rs-pasado{ color:var(--rojo-ink); }

/* ---------- listas de tópicos y referentes ---------- */

.rs-lista{ display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-4); }
.rs-fila{
  display:flex; align-items:center; gap:var(--sp-3);
  border:1px solid transparent; border-radius:var(--r-sm); padding:2px;
}
.rs-fila:hover{ border-color:var(--line-soft); }
.rs-fila > input{ flex:1 1 240px; min-width:0; }
.rs-fila.rs-corto > input{ border-color:var(--ambar); }

.rs-nota{ font-size:var(--fs-micro); white-space:nowrap; }
.rs-nota-suave{ color:var(--ink-3); }
.rs-nota-mal{ color:var(--ambar-ink); }

.rs-ref > input{ flex:0 1 220px; }
.rs-ref-datos{ display:flex; align-items:center; gap:var(--sp-3); min-width:0; flex:1 1 auto; }
.rs-ref-url{
  color:var(--turquesa-ink); font-size:var(--fs-xs); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rs-ref-url:hover{ text-decoration:underline; }
.rs-id{
  font-family:var(--f-mono); font-size:var(--fs-micro); color:var(--ink-3);
  white-space:nowrap;
}

/* ---------- pegar canales ---------- */

.rs-pegado{ display:flex; flex-direction:column; gap:var(--sp-2); }
.rs-pegado textarea{ width:100%; resize:vertical; font-size:var(--fs-sm); }
.rs-pegado-pie{ display:flex; align-items:center; gap:var(--sp-3); }
.rs-pegado-pie .field-hint-fijo{ margin:0; }

/* Los canales pegados con el arroba y sin el ID. Van en ámbar y no en rojo: no está mal
   lo que pegaste, falta un dato que solo se saca de YouTube. */
.rs-pendientes{
  border:1px solid var(--ambar); background:var(--ambar-dim); border-radius:var(--r-sm);
  padding:var(--sp-4); margin-bottom:var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.rs-pendientes[hidden]{ display:none; }
.rs-pend-ayuda{
  margin:0; max-width:74ch; font-size:var(--fs-xs); color:var(--ink); line-height:var(--lh-base);
}
.rs-pend{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.rs-pend-que{ font-weight:600; font-size:var(--fs-sm); }
.rs-pend a{ color:var(--turquesa-ink); font-size:var(--fs-xs); }
.rs-pend input{ flex:0 1 260px; font-family:var(--f-mono); font-size:var(--fs-xs); }
.rs-pend-error{ flex-basis:100%; font-size:var(--fs-xs); color:var(--rojo-ink); }

/* ---------- límites ---------- */

.rs-limite{ margin-bottom:var(--sp-5); }
.rs-limite label{
  display:block; font-size:var(--fs-xs); color:var(--ink-2); margin-bottom:3px;
}
.rs-limite input{ width:96px; font-family:var(--f-mono); }
.rs-limite-txt{
  margin:var(--sp-2) 0 0; max-width:70ch;
  font-size:var(--fs-xs); color:var(--ink-2); line-height:var(--lh-base);
}

/* EL TECHO DIARIO. La barra ámbar de la izquierda es toda la jerarquía que necesita: dice
   "este número no es como el de arriba" sin gritar. */
.rs-techo{
  border-left:2px solid var(--ambar); padding-left:var(--sp-5);
  margin-bottom:var(--sp-4);
}
.rs-techo label{ color:var(--ambar-ink); }

/* La cuenta viva de lo que hay en pantalla: fuentes, videos por corrida y unidades de
   cuota. En mono porque son números que se comparan con los de arriba. */
.rs-cuentas{
  margin:0; font-family:var(--f-mono); font-size:var(--fs-micro); color:var(--ink-3);
}

/* ---------- guardar ---------- */

.rs-guardar{ display:flex; align-items:center; gap:var(--sp-4); }
.rs-estado{ display:inline-flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-sm); }
.rs-estado-ok{ color:var(--turquesa-ink); }
.rs-estado-ambar{ color:var(--ambar-ink); }
.rs-estado-mal{ color:var(--rojo-ink); }
.rs-estado-exacto{ color:var(--ink-3); font-size:var(--fs-micro); }

/* ---------- buscar ahora ---------- */

.rs-buscar-fila{ display:flex; align-items:center; gap:var(--sp-4); }
.rs-buscando{ font-size:var(--fs-sm); color:var(--ambar-ink); }
.rs-buscando[hidden]{ display:none; }

/* El motivo del botón apagado. Va debajo del botón, en ámbar y siempre visible: es el
   reemplazo deliberado del `title` que nadie lee. */
.rs-motivo{
  margin:var(--sp-3) 0 0; max-width:70ch;
  font-size:var(--fs-sm); color:var(--ambar-ink); line-height:var(--lh-base);
}
.rs-motivo[hidden]{ display:none; }

.rs-res{
  margin-top:var(--sp-5); 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);
}
.rs-res[hidden]{ display:none; }
.rs-res b{ color:var(--ink); font-size:var(--fs-md); }
.rs-res p{ margin:var(--sp-2) 0 0; max-width:74ch; }
.rs-res a{ color:var(--turquesa-ink); }
/* Un 409 de cuota o de key no es un error: es una condición del día o una credencial que
   falta. Ámbar, no rojo — el rojo manda a mirar logs de un servidor que está perfecto. */
.rs-res.warn{ border-color:var(--ambar); background:var(--ambar-dim); }
.rs-res.err{ border-color:var(--rojo); }
.rs-res-detalle{ font-size:var(--fs-xs); color:var(--ink-3); }
.rs-res-techo{ color:var(--ink); }
.rs-res-aviso{ color:var(--ambar-ink); }
.rs-res-fallo-tit{ color:var(--ambar-ink); }
.rs-res-fallos{
  margin:var(--sp-2) 0 0; padding-left:var(--sp-7);
  font-size:var(--fs-xs); color:var(--ink-3);
}
.rs-res-fallos li{ margin-bottom:3px; }