/* Panel de contenido — Farmacia Navas 22 */
:root{
  --verde:#0f766e; --verde-osc:#115e59; --verde-claro:#ccfbf1;
  --tinta:#0f172a; --gris:#64748b; --linea:#e2e8f0; --fondo:#f6f8f9; --blanco:#fff;
  --rojo:#b91c1c; --ambar:#b45309; --ambar-claro:#fef3c7;
  --radio:12px; --sombra:0 1px 3px rgba(15,23,42,.07), 0 6px 20px rgba(15,23,42,.05);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
a{color:var(--verde)}

/* ---------- login ---------- */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100svh; padding:20px}
.login{
  background:var(--blanco); padding:36px 32px; border-radius:16px; box-shadow:var(--sombra);
  width:100%; max-width:340px; text-align:center;
}
.login-logo{font-size:44px; line-height:1}
.login h1{margin:10px 0 2px; font-size:22px}
.login .sub{margin:0 0 22px; color:var(--gris); font-size:14px}
.login input{
  width:100%; padding:12px 14px; border:1px solid var(--linea); border-radius:10px;
  font-size:16px; margin-bottom:14px;
}
.login button{
  width:100%; padding:12px; border:0; border-radius:10px; background:var(--verde);
  color:#fff; font-size:16px; font-weight:600; cursor:pointer;
}
.login button:hover{background:var(--verde-osc)}
.error{color:var(--rojo); font-size:14px; margin:0 0 12px}

/* ---------- cabecera ---------- */
.top{
  background:var(--blanco); border-bottom:1px solid var(--linea);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 24px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:12px}
.brand .pill{
  width:40px; height:40px; border-radius:11px; background:var(--verde-claro);
  display:grid; place-items:center; font-size:20px;
}
.brand strong{display:block; font-size:16px}
.brand small{display:block; color:var(--gris); font-size:12px}
.tabs{display:flex; gap:6px; flex-wrap:wrap}
.tabs a{
  padding:7px 14px; border-radius:999px; text-decoration:none;
  color:var(--gris); font-size:14px; font-weight:500;
}
.tabs a.on{background:var(--verde); color:#fff}
.tabs a:hover:not(.on){background:var(--fondo)}
.tabs .salir{color:var(--gris)}

/* ---------- avisos ---------- */
.aviso{padding:11px 24px; font-size:14px}
.aviso.ok{background:var(--verde-claro); color:var(--verde-osc)}
.aviso.trabajando{background:var(--ambar-claro); color:var(--ambar)}
.aviso.mal{background:#fee2e2; color:var(--rojo)}

/* ---------- estructura ---------- */
/* Hasta 90vw en pantallas grandes: con 1040px fijos sobraba medio monitor. */
.wrap{width:100%; max-width:min(90vw, 1900px); margin:0 auto; padding:24px 16px 60px}
h2{margin:0 0 6px; font-size:20px}
.ayuda{color:var(--gris); font-size:14px; margin:0 0 20px}
.vacio{color:var(--gris); text-align:center; padding:50px 20px}

.barra{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap}
.filtros{display:flex; gap:6px; flex-wrap:wrap}
.filtros a{
  padding:6px 13px; border-radius:999px; background:var(--blanco); border:1px solid var(--linea);
  text-decoration:none; color:var(--gris); font-size:13px;
}
.filtros a.on{background:var(--tinta); border-color:var(--tinta); color:#fff}

/* ---------- rejilla de propuestas ---------- */
/* Dos por fila, plegadas en mini-resumen. Al abrir una, ocupa el ancho completo
   para poder editar cómodamente. */
/* Columnas iguales (1fr) y `stretch` por defecto: todas las tarjetas de una misma
   fila salen con el mismo alto y el mismo ancho. */
.rejilla{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:stretch}
.rejilla > .card{display:flex; flex-direction:column}
.rejilla > .card > details{flex:1}
.rejilla > .card:has(details[open]){grid-column:1 / -1}

.card{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:18px;
}
.card.estado-publicado{border-left:4px solid var(--verde)}
.card.estado-descartado{opacity:.6}

/* ---------- resumen plegado ---------- */
summary.resumen{
  display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  list-style:none; position:relative; padding-right:22px;
}
summary.resumen::-webkit-details-marker{display:none}
summary.resumen::after{
  content:"⌄"; position:absolute; right:0; top:-2px;
  color:var(--gris); font-size:18px; line-height:1; transition:transform .15s;
}
details[open] > summary.resumen::after{transform:rotate(180deg)}
details[open] > summary.resumen{
  border-bottom:1px solid var(--linea); padding-bottom:14px; margin-bottom:16px;
}
summary.resumen:hover .resumen-txt strong{color:var(--verde)}
.resumen-txt{min-width:0}
.resumen-txt strong{display:block; font-size:15px; line-height:1.35; margin-bottom:7px}
.resumen-txt small{color:var(--gris); font-size:12px}
.resumen-meta{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px}

.cal{
  width:44px; height:44px; border-radius:10px; background:var(--fondo);
  display:grid; place-items:center; line-height:1; flex:0 0 auto;
}
.cal b{font-size:18px}
.cal span{font-size:11px; color:var(--gris); text-transform:uppercase}
.chip{
  background:var(--verde-claro); color:var(--verde-osc);
  padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600;
}
/* Los chips de tema con data-hueco los pinta el JS con la misma paleta que los
   hashtags; el verde de arriba es el color de reserva mientras no ha corrido.
   El de ancla local va en grafito a propósito: es un marcador, no una categoría,
   y así nunca compite en tono con ningún tema. */
.chip.local{background:#e2e8f0; color:#334155}
.chip.est{background:var(--fondo); color:var(--gris); text-transform:capitalize}

.campo{display:block; margin-bottom:14px}
.campo>span{
  display:flex; align-items:center; gap:10px;
  font-size:12px; font-weight:600; color:var(--gris);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px;
}
.campo input, .campo textarea, .diapo input, .diapo textarea{
  width:100%; padding:9px 11px; border:1px solid var(--linea); border-radius:8px;
  font:inherit; font-size:15px; background:var(--blanco); color:var(--tinta);
}
.campo textarea, .diapo textarea{resize:vertical; line-height:1.5}
.campo input:focus, .campo textarea:focus, .diapo input:focus, .diapo textarea:focus{
  outline:2px solid var(--verde); outline-offset:-1px; border-color:transparent;
}

/* La segunda portada (una con gancho y otra sobria). Va apagada y pegada a la
   que está en uso, para que se lea como «la alternativa» y no como otro campo
   más que rellenar. Las minúsculas del <small> sobreviven al uppercase de arriba. */
.campo-alt{margin-bottom:4px}
.campo-alt>span{color:var(--gris); opacity:.85}
.campo>span small{font-weight:500; text-transform:none; letter-spacing:0; opacity:.8}
.campo-alt input{background:var(--fondo); color:var(--gris)}
.alt-pie{margin:0 0 14px; text-align:right}
button.enlace{
  background:none; border:0; padding:2px 4px; font:inherit; font-size:13px;
  color:var(--verde-osc); cursor:pointer; text-decoration:underline;
}
button.enlace:hover{opacity:.75}

/* Vista previa de hashtags: un color por etiqueta, lo pinta el JS de index.php */
.tags-preview{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px}
.tags-preview:empty{display:none}
.tag-chip{padding:3px 11px; border-radius:999px; font-size:12px; font-weight:600; line-height:1.6}

.diapos{display:grid; gap:10px; margin-bottom:16px}
.diapo{
  position:relative; background:var(--fondo); border-radius:10px; padding:12px 12px 12px 40px;
  display:grid; gap:7px;
}
.diapo .num{
  position:absolute; left:12px; top:14px; width:20px; height:20px; border-radius:50%;
  background:var(--verde); color:#fff; font-size:11px; font-weight:700;
  display:grid; place-items:center;
}
.diapo input{font-weight:600}

.fuente{font-size:13px; color:var(--gris); margin:0 0 16px; padding-top:12px; border-top:1px solid var(--linea)}
.oculto{position:absolute; left:-9999px; width:1px; height:1px}

.card-acciones{display:flex; gap:8px; flex-wrap:wrap}
button{
  padding:9px 15px; border:1px solid var(--linea); border-radius:8px; background:var(--blanco);
  font:inherit; font-size:14px; color:var(--tinta); cursor:pointer;
}
button:hover{background:var(--fondo)}
button.primario{background:var(--verde); border-color:var(--verde); color:#fff; font-weight:600}
button.primario:hover{background:var(--verde-osc)}
button.peligro{color:var(--rojo)}
button.copiar{padding:3px 9px; font-size:11px; text-transform:none; letter-spacing:0; font-weight:500}
button.copiar.todo{padding:9px 15px; font-size:14px}
button.video{border-color:var(--verde); color:var(--verde); font-weight:600}
button.video:hover{background:var(--verde-claro)}

/* ---------- vídeo del carrusel (lo renderiza /proyectos/remotion/) ---------- */
.video-zona{
  margin:14px 0 4px; padding:12px; background:var(--fondo);
  border:1px solid var(--linea); border-radius:10px;
}
/* Vertical 1080x1920: sin tope de alto ocuparía toda la pantalla dentro de la tarjeta. */
.video-zona video{
  display:block; margin:0 auto; max-width:100%; max-height:420px;
  border-radius:8px; background:#000;
}
.video-pie{margin:10px 0 0; text-align:center; font-size:13px; color:var(--gris)}
.video-pie.mal{color:var(--rojo)}

/* ---------- ideas (candidatas de cada búsqueda) ---------- */
.busqueda{margin-bottom:28px}
.busqueda-top{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:0 2px 8px; border-bottom:1px solid var(--linea); margin-bottom:12px;
}
.busqueda-top small{color:var(--gris); font-size:12px}

.idea{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:16px; margin-bottom:10px;
}
/* Banco de ideas: un bloque por tema y, dentro, rejilla de tarjetas. Columnas de
   1fr y `stretch`: todas las tarjetas de una fila salen del mismo alto y ancho. */
/* Cada tema, su propio fondo: el tono se lo pone el JS a partir del mismo hueco
   de color que su chip, así el bloque y la etiqueta van a juego. */
/* Una columna por tema: en pantalla de ordenador se localiza mucho antes un tema
   concreto que teniendo que bajar por bloques apilados. Las columnas se envuelven
   solas cuando no caben, y en móvil queda una sola. */
/* El banco va por DÍAS, no por temas (16-ago-2026): una sección por jornada, la
   última arriba. El tema de cada idea lo dice su chip de color dentro de la
   tarjeta, que es de donde salía el color de las columnas de antes. */
.dia-bloque{
  margin:0 0 18px; padding:14px; border-radius:var(--radio);
  border:1px solid var(--linea); background:var(--blanco);
}
.dia-top{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid rgba(15,23,42,.08);
}
.dia-top h3{margin:0; font-size:17px; letter-spacing:-.01em}
/* La fecha, al lado del «Hoy»/«Ayer» pero sin competir con él. */
.dia-top h3 span{font-weight:500; color:var(--gris); font-size:14px; margin-left:6px}
.dia-top small{color:var(--gris); font-size:13px; margin-left:auto}
.dia-top a{color:inherit}
/* En la rejilla de investigaciones, las ideas se apilan en vertical. */
.rejilla-ideas{display:flex; flex-direction:column; gap:12px}
/* Dentro de un día, en cambio, van en rejilla y de mejor a peor nota. Esta regla
   va DESPUÉS de la de arriba a propósito: las dos clases conviven en el mismo
   div y con el orden al revés el flex se comía la rejilla. `stretch` (el valor
   por defecto de grid) deja las tarjetas de cada fila al mismo alto. */
.rejilla-dia{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:12px;
}
.rejilla-ideas > .idea{display:flex; flex-direction:column; margin:0; padding:13px}
/* El pie se pega abajo para que las tarjetas de una fila cuadren. */
.rejilla-ideas > .idea .idea-pie{margin-top:auto}
/* Plegada, la tarjeta enseña solo nota, estado, titular y fuente. El resumen, el
   ángulo local y el botón aparecen al abrirla —así caben muchas más de un vistazo—. */
.rejilla-ideas .idea h3{font-size:15px; margin:0 0 6px}
.rejilla-ideas .idea-res{font-size:13.5px}
.rejilla-ideas .idea-local{font-size:12.5px; line-height:1.45}
.rejilla-ideas > .idea > details{display:flex; flex-direction:column; height:100%}
.idea-sum{
  display:block; cursor:pointer; list-style:none; position:relative; padding-right:20px;
}
.idea-sum::-webkit-details-marker{display:none}
.idea-sum::after{
  content:"⌄"; position:absolute; right:0; top:-2px; color:var(--gris);
  font-size:17px; line-height:1; transition:transform .15s;
}
details[open] > .idea-sum::after{transform:rotate(180deg)}
.idea-sum:hover h3{color:var(--verde)}
.idea-sum .idea-pie{margin-top:6px}
.idea-detalle{
  margin-top:12px; padding-top:12px; border-top:1px dashed rgba(15,23,42,.12);
}
.idea-detalle form{margin-top:10px}
/* Abierta se expande dentro de su columna; la columna crece y las vecinas
   mantienen su alto porque el grid exterior va a `stretch`. */
.rejilla-ideas > .idea:has(details[open]){box-shadow:var(--sombra)}

/* Publicada DE VERDAD (el post salió a las redes): verde, y solo aquí. El verde
   estaba antes en cualquier idea con post escrito y daba por publicado lo que
   todavía estaba sin revisar. */
.idea.publicada{border-left:4px solid var(--verde); background:var(--verde-claro)}
.chip.est.verde{background:#fff; color:var(--verde-osc); text-transform:none}
/* Ya hay post escrito con ella, esperando revisión en Propuestas: azul, el mismo
   color con el que el panel marca lo que viene de Daniel. */
.idea.usada{border-left:4px solid #6f93c9; background:#f6f9fe}
.chip.est.propuesta{background:#eaf1fb; color:#28518c; text-transform:none}
.chip.est.nopub{text-transform:none}
/* En el banco: viva, esperando turno. Va en ámbar para que no se confunda con
   las descartadas, que son las que ya no van a publicarse. */
.idea.pendiente{border-left:4px solid #d9a441}
.idea.descartada{background:#fbfcfc}
.chip.est.banco{background:#fdf3e0; color:#8a6410; text-transform:none}
/* Fuera de la ventana de actualidad: la noticia es vieja aunque la idea siga en
   el banco. Rojo apagado, no alarma: no está mal, solo caducada. */
.chip.est.vieja{background:#fdeceb; color:#9a342c; text-transform:none}
/* Investigada a mano: la pidió Daniel, no salió de la búsqueda del día. */
.chip.est.mia{background:#eaf1fb; color:#28518c; text-transform:none}

/* Caja para pedir una investigación, arriba del banco. */
.investigar{
  margin:0 0 14px; padding:14px 16px; background:#fff;
  border:1px solid var(--linea); border-radius:12px;
}
.investigar label{display:block; margin:0 0 10px; font-size:.92rem; color:var(--gris)}
.investigar-fila{display:flex; gap:10px; flex-wrap:wrap}
.investigar-fila input{
  flex:1 1 340px; min-width:0; padding:9px 12px;
  border:1px solid var(--linea); border-radius:8px; font:inherit;
}
.investigar-fila button{white-space:nowrap}

/* Veredicto de una investigación ya hecha. Es una tarjeta de idea más: se pliega
   igual y se abre al pulsar, porque desplegadas empujaban el banco fuera de la
   pantalla. Lo único propio es el color del borde según el veredicto. */
.rejilla-invs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px; align-items:stretch; margin-bottom:18px;
}
.rejilla-invs > .idea{display:flex; flex-direction:column; margin:0; padding:13px}
.rejilla-invs > .idea > details{display:flex; flex-direction:column; height:100%}
.rejilla-invs .idea h3{font-size:15px; margin:0 0 6px; overflow-wrap:anywhere}
.rejilla-invs .idea-res{font-size:13.5px}
/* La que se abre pasa a ocupar la fila entera. Si no, las vecinas se estiraban a
   su altura y quedaban dos cajas vacías del alto de los hallazgos. De paso, el
   texto se lee mejor sin pasar de 80 caracteres por línea. */
.rejilla-invs > .idea:has(details[open]){grid-column:1 / -1; box-shadow:var(--sombra)}
.rejilla-invs > .idea:has(details[open]) .idea-res{max-width:80ch}
/* Lo que sacó la investigación, cada cosa con su «Crear post». */
.inv-cands{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px; margin:10px 0 12px}
.inv-cand{
  display:flex; flex-direction:column; gap:4px;
  background:rgba(255,255,255,.75); border:1px solid var(--linea);
  border-radius:10px; padding:10px 12px;
}
.inv-cand-tit{margin:0; font-size:14px; font-weight:600; line-height:1.35}
.inv-cand .crear-post{margin-top:auto; padding-top:6px}
.investigacion{
  border:1px solid var(--linea); border-left-width:4px; border-radius:12px; background:#fff;
}
.investigacion.v-bulo{border-left-color:#c0392b; background:#fdeceb}
.investigacion.v-matizable{border-left-color:#d9a441; background:#fdf3e0}
.investigacion.v-cierto{border-left-color:var(--verde); background:var(--verde-claro)}
.investigacion.v-sinrecorrido{border-left-color:#95a5a6; background:#fbfcfc}
.inv-cab{margin:0 0 6px; font-weight:600}
.inv-txt{margin:0 0 6px; font-size:.93rem}
.inv-pie{margin:0; font-size:.82rem; color:var(--gris)}
.chip.est.vered{text-transform:none; background:#fff}
.idea.pendiente:has(.chip.vieja){border-left-color:#d38b84}
.banco-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin:0 0 14px; padding:12px 14px;
  background:#fdf9f0; border:1px solid #f0e2c8; border-radius:10px;
}
.banco-top strong{font-size:15px}
.banco-top small{color:var(--gris); font-size:13px}
.idea-cab{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px}
/* Una estrella dorada por punto de relevancia (un 9 pinta nueve estrellas), con el
   número al lado: las estrellas se leen de un vistazo, el número no obliga a contarlas. */
.idea-cab .nota{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.idea-cab .estrellas{
  color:#f0b429; font-size:13px; letter-spacing:1px; line-height:1;
  text-shadow:0 1px 0 rgba(180,120,0,.25);
}
.idea-cab .nota b{font-size:12px; color:#92700f; font-weight:700}
.idea h3{margin:0 0 6px; font-size:16px; line-height:1.35}
.idea-res{margin:0 0 8px; font-size:14px; color:#334155}
.idea-local{
  margin:0 0 8px; font-size:13px; color:var(--verde-osc);
  background:var(--verde-claro); padding:6px 10px; border-radius:8px;
}
.idea-pie{margin:0; font-size:12px; color:var(--gris)}
.idea-descarte{
  margin-top:12px; padding-top:12px; border-top:1px dashed var(--linea);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between;
}
.idea-descarte .motivo{margin:0; font-size:13px; color:var(--ambar); flex:1 1 260px}

/* ---------- temas ---------- */
.tabla-temas{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra); padding:16px; overflow-x:auto}
.tabla-temas table{width:100%; border-collapse:collapse; min-width:640px}
.tabla-temas th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--gris); padding:6px 8px; border-bottom:1px solid var(--linea);
}
.tabla-temas td{padding:6px 8px; border-bottom:1px solid var(--fondo)}
.tabla-temas td.c{text-align:center}
.tabla-temas td.mini{font-size:12px; color:var(--gris); white-space:nowrap}
.tabla-temas input[type=text]{
  width:100%; padding:7px 9px; border:1px solid var(--linea); border-radius:7px; font:inherit; font-size:14px;
}
.acciones-fila{margin-top:14px}

.nuevo-tema{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:16px; margin-top:20px; display:grid; gap:10px; max-width:480px;
}
.nuevo-tema h3{margin:0; font-size:15px}
.nuevo-tema input[type=text]{padding:9px 11px; border:1px solid var(--linea); border-radius:8px; font:inherit}
.nuevo-tema .check{font-size:14px; color:var(--gris); display:flex; gap:8px; align-items:center}
.nuevo-tema button{justify-self:start}

@media (max-width:760px){
  .rejilla{grid-template-columns:1fr}
}
@media (max-width:600px){
  .top{padding:12px 16px}
  .card{padding:16px}
  .card-acciones button{flex:1 1 auto}
}
.con-voz{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--gris)}
.con-voz input{margin:0}
.fondo-q{
  width:160px; padding:4px 8px; border:1px solid var(--linea); border-radius:6px;
  font:inherit; font-size:13px;
}

/* Botón «Crear post» del banco: el selector de voz y el de diapositivas van en la
   misma fila que el botón, y envuelven en columna estrecha. */
.crear-post{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px}
.crear-post .fondo-q{width:auto; min-width:110px}
/* En la cabecera del banco, el botón de leer feeds se va a la derecha. */
.banco-top form{margin-left:auto}

/* El campo de fondo admite varias consultas separadas por «+», así que necesita
   más sitio que los otros selectores de la fila. */
.fondo-q.ancho{width:min(340px, 60vw)}

/* ── Acceso al editor desde la tarjeta del post ─────────────────────────── */
.editor-acceso{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:14px 0 4px; padding:12px 14px;
  background:#f4f7fb; border:1px solid #dbe5ef; border-radius:10px;
}
.btn-editor{
  display:inline-block; padding:9px 16px; border-radius:8px; font-weight:700;
  background:var(--tinta,#0e2a4d); color:#fff; text-decoration:none; white-space:nowrap;
}
.btn-editor:hover{opacity:.9}

/* ── Editor de vídeo ────────────────────────────────────────────────────── */
.editor .bloque{
  background:#fff; border:1px solid var(--linea); border-radius:12px;
  padding:18px 20px; margin:0 0 16px;
}
.editor .bloque h2{margin:0 0 4px; font-size:1.1rem}
.editor .bloque.final{border-color:#0e2a4d; background:#f4f7fb}
.editor .ayuda{margin:6px 0 12px}
/* Todas las cajas de una fila con el mismo alto y ancho, como en el resto. */
.rejilla-campos{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; align-items:stretch}
/* 230 y no 200: el botón ↻ se come 44 px de cada caja, y con cinco columnas el
   texto de la consulta se quedaba sin sitio para leerse. */
.rejilla-fondos{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; align-items:stretch; margin-bottom:14px}
/* La caja de fondo y su botón ↻, que propone la búsqueda leyendo esa escena. */
.editor .campo-fila{display:flex; gap:6px; align-items:stretch}
.editor .campo-fila input{flex:1 1 auto; min-width:0}
.editor button.mini{
  flex:0 0 auto; width:38px; padding:0; cursor:pointer; font-size:15px; line-height:1;
  border:1px solid var(--linea); border-radius:8px; background:var(--fondo); color:var(--gris);
}
.editor button.mini:hover{background:var(--blanco); color:var(--tinta); border-color:#9fb4cd}
.editor .campo{display:flex; flex-direction:column; gap:4px; margin:0}
.editor .campo > span{font-size:.82rem; font-weight:600; color:var(--gris)}
.editor .campo select, .editor .campo input[type=text], .editor .campo textarea{
  padding:8px 10px; border:1px solid var(--linea); border-radius:8px; font:inherit; font-size:.92rem;
}
.previa-marca{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px;
  background:#f6f9fc; border:1px dashed #cddcea; border-radius:8px; font-size:.9rem;
}
.previa-marca small{color:var(--gris); font-size:.78rem}
.editor .acciones-fila{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px}

/* ── Guion: lo que se escribe y lo que se dicta ─────────────────────────── */
.guion{
  margin:14px 0; padding:12px 14px;
  background:#f9fbfd; border:1px solid #e2eaf2; border-radius:10px;
}
.guion-cab{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:10px}
.guion-cab small{color:var(--gris); font-size:.8rem}
.guion-linea{
  display:grid; grid-template-columns:130px 1fr; gap:4px 12px;
  padding:7px 0; border-top:1px solid #eaf0f6; font-size:.9rem;
}
.guion-linea:first-of-type{border-top:0}
.guion-etq{font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--gris); padding-top:2px}
.guion-dicho{grid-column:2; font-size:.83rem; color:#0e5a66; background:#e8f6f8;
  border-radius:6px; padding:4px 8px; justify-self:start}
.guion-linea.cambia .guion-txt{color:#4a5568}
@media (max-width:640px){
  .guion-linea{grid-template-columns:1fr}
  .guion-dicho{grid-column:1}
}
.previa-marca.sin-guardar{border-color:#e0a800; background:#fffaf0}
.previa-marca.sin-guardar::after{
  content:'sin guardar — pulsa un botón de abajo'; font-size:.72rem; color:#8a6d3b;
}

/* El guion pasa a ser editable: cada línea es un campo, no un párrafo. */
.guion-campo{display:flex; flex-direction:column; gap:6px; min-width:0}
.guion-campo input[type=text], .guion-campo textarea{
  width:100%; padding:8px 10px; border:1px solid var(--linea); border-radius:8px;
  font:inherit; font-size:.92rem; background:#fff;
}
.guion-campo input[type=text]{font-weight:600}
.guion-campo textarea{resize:vertical}
.guion-fijo{margin:0; padding:8px 10px; background:#eef3f8; border-radius:8px;
  font-size:.9rem; color:#4a5568}
.guion-fijo small{display:block; color:var(--gris); font-size:.75rem; margin-top:2px}
.guion-etq{cursor:default}
label.guion-etq{cursor:pointer}
.guion-pista{font-size:.78rem; color:var(--gris)}

/* Un botón deshabilitado tiene que parecerlo: mientras se genera una locución o
   se renderiza, el botón que lo lanzó se queda en gris y sin cursor de mano. */
button[disabled], .card-acciones button[disabled], .acciones-fila button[disabled]{
  background:#e6eaee !important; border-color:#dbe1e7 !important; color:#8b98a5 !important;
  cursor:not-allowed; box-shadow:none; opacity:1;
}
/* El placeholder del cierre es una pista, no contenido: que no parezca escrito. */
.guion-campo input::placeholder, .guion-campo textarea::placeholder{
  font-weight:400; color:#9aa7b4;
}

/* ── Vídeo en el horno: arriba de la lista y en morado ──────────────────────
   Durante los 15-30 min que dura un render, es la tarjeta que Daniel viene a
   mirar. Se distingue por el borde y por un fondo apenas teñido: colorear la
   tarjeta entera se comería la legibilidad del texto del post. */
.card.en-horno{
  border-color:#8b5cf6;
  box-shadow:0 0 0 1px #8b5cf6, 0 10px 30px rgba(139,92,246,.18);
  background:linear-gradient(180deg,#faf7ff 0%,#fff 120px);
}
.card.en-horno > details > summary .cal{
  background:#f1e9ff; color:#5b21b6;
}
.chip.est.horno{
  background:#8b5cf6; color:#fff; border-color:#8b5cf6;
  animation:horno-late 1.6s ease-in-out infinite;
}
@keyframes horno-late{ 50%{opacity:.55} }
@media (prefers-reduced-motion: reduce){ .chip.est.horno{animation:none} }

/* ---- De dónde salen las noticias (pestaña Temas) --------------------------
   Es una pantalla de repaso: se mira de vez en cuando para ver si falta un
   medio, así que prima que quepa todo de un vistazo sobre que luzca. */
.fuentes{
  margin-top:30px; padding:18px; background:var(--blanco);
  border:1px solid var(--linea); border-radius:var(--radio);
}
.fuentes h3{margin:0 0 4px; font-size:18px}
.fuentes h4{margin:22px 0 4px; font-size:15px; color:var(--marino, #224465)}
.fuentes h4 small{font-weight:400; color:var(--gris); font-size:13px}
.fuentes .ayuda{margin:0 0 6px}
.fuentes .mini{font-size:12.5px}
.tabla-fuentes{width:100%; border-collapse:collapse; margin:10px 0 6px; font-size:13.5px}
.tabla-fuentes th{
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--gris); border-bottom:1px solid var(--linea); padding:6px 8px;
}
.tabla-fuentes td{border-bottom:1px solid rgba(15,23,42,.06); padding:7px 8px; vertical-align:middle}
.tabla-fuentes td.c{text-align:center}
.tabla-fuentes a{color:var(--gris); text-decoration:none; word-break:break-all}
.tabla-fuentes a:hover{text-decoration:underline}
.chips-dominios{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0}
.chips-dominios .chip{font-size:12px}