/* Panel de AdCode. Mismo lenguaje visual que el sitio. */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Un solo gris en todo el panel, el neutro. Había tres (#faf9f7 el fondo,
     #f4f3f0 las cajas y #f2f2f3 los rectángulos): los dos primeros tiran a
     crema y el tercero es neutro, y la diferencia entre ellos no significaba
     nada, se leía como suciedad y no como jerarquía. La jerarquía la hace el
     blanco de los paneles contra este gris. */
  --bg: #f2f2f3;
  --surface: #fff;
  --surface-2: #f2f2f3;
  --line: rgba(23,23,23,.1);
  --line-fuerte: rgba(23,23,23,.26);
  --ink: #171717;
  --ink-2: #6c6a67;
  --ink-3: #a3a09b;
  --ok: #1c7a4a;
  --alerta: #c2410c;
  --oro: #b98b2e;
  --r: 16px;
  --rs: 10px;
  /* el gris de los rectángulos y su radio: el armazón entero sale de acá */
  --panel: #f2f2f3;
  --rp: 24px;
  --sombra-card: 0 1px 2px rgba(17,17,20,.04), 0 6px 16px -8px rgba(17,17,20,.1);
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sombra: 0 18px 44px -26px rgba(20,18,15,.4);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  letter-spacing: -.011em; -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--ink); }
h1, h2, h3 { margin: 0; letter-spacing: -.032em; line-height: 1.15; }

.logo { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.05rem; letter-spacing: -.045em; }
.logo svg { width: 1.25rem; height: 1.25rem; }

/* ---------- ingreso ---------- */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.entrada-caja {
  background: var(--surface); border: 1px solid var(--line); border-radius: 26px;
  padding: 2rem; width: min(24rem, 100%); box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: .9rem;
}
.entrada-caja h1 { font-size: 1.5rem; margin: .4rem 0 .6rem; }
.entrada-caja label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--ink-2); }
.entrada-caja input {
  border: 1px solid var(--line); border-radius: var(--rs); padding: .65rem .8rem;
  background: var(--surface-2); outline: none; font-size: .95rem;
}
.entrada-caja input:focus { border-color: var(--ink); background: var(--surface); }
/* la pantalla del acceso vencido usa la misma caja, con texto en vez de campos */
.entrada-nota { color: var(--ink-2); font-size: .9rem; line-height: 1.5; margin: 0 0 .4rem; }
.entrada-caja a.btn { text-align: center; text-decoration: none; }

/* ---------- estructura ---------- */
/* ============================================================
   El armazón

   Todo vive adentro de rectángulos de puntas redondeadas sobre un fondo
   blanco: el menú es uno, la barra de arriba es otro, y el contenido es el
   tercero. Los rectángulos llevan el gris suave y el blanco queda abajo,
   así el ojo separa las zonas sin una sola línea divisoria.
   ============================================================ */
.app {
  display: grid; grid-template-columns: 16rem 1fr;
  gap: .75rem; padding: .75rem; min-height: 100vh; background: #fff;
}

/* ---------- el menú ---------- */
.lat {
  background: var(--panel); border-radius: var(--rp);
  padding: 1.5rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 1.6rem;
  position: sticky; top: .75rem; height: calc(100vh - 1.5rem);
}
.logo { display: flex; align-items: center; gap: .55rem; padding: 0 .5rem; font-size: 1.12rem; font-weight: 700; letter-spacing: -.03em; }
.logo svg { width: 1.5rem; height: 1.49rem; flex: none; }

.menu { display: flex; flex-direction: column; gap: .12rem; }
.menu button {
  border: 0; background: transparent; text-align: left; padding: .58rem .7rem;
  border-radius: 12px; font-size: .89rem; color: var(--ink-2); font-weight: 500;
  display: flex; align-items: center; gap: .65rem; width: 100%;
  transition: background .14s, color .14s;
}
.menu button svg { width: 1.15rem; height: 1.15rem; flex: none; opacity: .8; }
.menu button span { flex: 1; }
.menu button:hover { background: rgba(23,23,23,.045); color: var(--ink); }
.menu button.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--sombra-card); }
.menu button.on svg { opacity: 1; }
.menu-sep { border: 0; border-top: 1px solid var(--line); margin: .7rem .7rem .5rem; }

.pico:empty { display: none; }
.pico {
  font-family: var(--mono); font-size: .64rem; font-style: normal;
  background: var(--alerta); color: #fff; border-radius: 100px; padding: .08rem .4rem;
}

.lat-pie { margin-top: auto; display: flex; flex-direction: column; gap: .9rem; }
.lat-cta {
  background: var(--surface); border-radius: 16px; padding: 1rem .9rem;
  display: flex; flex-direction: column; gap: .3rem; text-align: center;
  box-shadow: var(--sombra-card);
}
.lat-cta b { font-size: .86rem; }
.lat-cta span { font-size: .74rem; color: var(--ink-3); line-height: 1.4; margin-bottom: .45rem; }
.lat-cta .btn { width: 100%; border-radius: 100px; font-size: .82rem; padding: .5rem; }

.salir {
  border: 0; background: none; color: var(--ink-3); font-size: .82rem;
  display: flex; align-items: center; gap: .6rem; padding: .3rem .7rem; text-align: left;
}
.salir svg { width: 1.05rem; height: 1.05rem; }
.salir:hover { color: var(--ink); }

/* ---------- el tronco: barra arriba, contenido abajo ---------- */
.tronco { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }

.barra {
  background: var(--panel); border-radius: var(--rp);
  padding: .7rem .8rem .7rem 1rem; display: flex; align-items: center; gap: .8rem;
}
/* el buscador manda: es lo primero que alguien va a usar para no perderse
   en el scroll */
.barra-busca {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem;
  background: var(--surface); border-radius: 100px; padding: .6rem 1rem;
  box-shadow: var(--sombra-card);
}
.barra-busca svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--ink-3); }
.barra-busca input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: .92rem; }
.barra-busca input::placeholder { color: var(--ink-3); }
.barra-busca kbd {
  font-family: var(--mono); font-size: .68rem; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 6px; padding: .12rem .35rem; flex: none;
}

.barra-acts { display: flex; align-items: center; gap: .5rem; flex: none; }
.ico-btn {
  position: relative; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%;
  background: var(--surface); box-shadow: var(--sombra-card);
  display: grid; place-items: center; color: var(--ink-2); transition: color .14s;
}
.ico-btn svg { width: 1.15rem; height: 1.15rem; }
.ico-btn:hover { color: var(--ink); }
.ico-punto {
  position: absolute; top: .55rem; right: .62rem; width: .45rem; height: .45rem;
  border-radius: 50%; background: var(--alerta); border: 2px solid var(--surface);
}
.avatar {
  width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; flex: none;
  background: var(--ink); color: #fff; font-size: .82rem; font-weight: 600;
  display: grid; place-items: center; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.cont {
  background: var(--panel); border-radius: var(--rp);
  padding: 1.9rem 1.9rem 3rem; flex: 1; min-width: 0;
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; padding: .5rem; gap: .5rem; }
  .lat { position: static; height: auto; }
  .lat-pie { margin-top: 1rem; }
  .cont { padding: 1.2rem 1.1rem 2.4rem; }
  .barra-busca kbd { display: none; }
}

/* ---------- piezas ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid transparent; border-radius: 100px; padding: .55rem 1.05rem;
  font-size: .86rem; font-weight: 600; transition: opacity .2s, background .2s, border-color .2s;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { opacity: .88; }
.btn-ghost { border-color: var(--line-fuerte); background: var(--surface); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: .35rem .75rem; font-size: .78rem; }
.btn-peligro { border-color: var(--alerta); color: var(--alerta); background: var(--surface); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.cab h1 { font-size: 1.75rem; }
.cab p { color: var(--ink-2); margin: .3rem 0 0; font-size: .9rem; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Lo que entró desde la última visita. Va en la cabecera y no en la fila de
   pestañas a propósito: lo nuevo no es una sección con vida propia, es un
   filtro que se prende sobre la que ya estás mirando. */
.chip-nuevos {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; padding: .42rem .85rem;
  background: var(--surface); color: var(--ink-2); font-size: .82rem;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.chip-nuevos b {
  background: var(--ink); color: var(--surface); border-radius: 999px;
  padding: .05rem .42rem; font-size: .76rem;
}
.chip-nuevos:hover { border-color: var(--ink); color: var(--ink); }
.chip-nuevos.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }

.tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.tarjeta h3 { font-size: 1.05rem; margin-bottom: .7rem; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .8rem; }
.dato { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; }
.dato .n { font-size: 1.9rem; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.dato .t { font-size: .78rem; color: var(--ink-3); margin-top: .25rem; }
.dato .sub { font-size: .74rem; color: var(--ink-2); margin-top: .4rem; }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
tbody tr:hover { background: var(--surface-2); }
.tabla-caja { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tabla-scroll { overflow-x: auto; }

.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .18rem .5rem; border-radius: 100px; border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap;
}
.chip.ok { background: var(--ink); color: #fff; border-color: transparent; }
.chip.oro { background: #fdf6e6; color: var(--oro); border-color: rgba(185,139,46,.3); }
.chip.alerta { background: #fdf0e8; color: var(--alerta); border-color: rgba(194,65,12,.25); }
.chip.verde { background: #e8f5ee; color: var(--ok); border-color: rgba(28,122,74,.25); }

.campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.campo label { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.campo input, .campo select, .campo textarea {
  border: 1px solid var(--line); border-radius: var(--rs); padding: .55rem .7rem;
  background: var(--surface-2); outline: none; font-size: .9rem; width: 100%;
}
.campo textarea { font-family: var(--mono); font-size: .82rem; line-height: 1.6; resize: vertical; min-height: 6rem; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--ink); background: var(--surface); }
.campo .ayuda { font-size: .74rem; color: var(--ink-3); }
.fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; }

.vacio { text-align: center; padding: 3rem 1rem; color: var(--ink-3); }
.vacio b { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: .35rem; }

/* ============================================================
   Producción
   ============================================================ */

/* captura, siempre a la vista */
.captura {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 1.1rem; margin-bottom: 1.4rem; box-shadow: 0 2px 10px -6px rgba(20,18,15,.14);
}
.captura-zona {
  display: flex; align-items: center; gap: 1.1rem;
  border: 2px dashed var(--line-fuerte); border-radius: var(--r);
  padding: 1.1rem 1.3rem; transition: border-color .2s, background .2s;
}
.captura-zona.encima { border-color: var(--ink); background: var(--surface-2); }
.captura-ico {
  width: 2.9rem; height: 2.9rem; border-radius: 100px; background: var(--surface-2);
  display: grid; place-items: center; flex-shrink: 0; color: var(--ink-2);
}
.captura-ico svg { width: 1.4rem; height: 1.4rem; }
.captura-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.captura-txt b { font-size: 1rem; letter-spacing: -.02em; }
.captura-txt span { font-size: .82rem; color: var(--ink-3); }
.captura-o {
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin: .9rem 0 .7rem;
}
.captura-o::before, .captura-o::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.captura-enlace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: .5rem; }
@media (max-width: 720px) { .captura-enlace { grid-template-columns: 1fr; } .captura-zona { flex-wrap: wrap; } }
.captura-enlace input {
  border: 1px solid var(--line); border-radius: 100px; padding: .55rem .95rem;
  background: var(--surface-2); outline: none; font-size: .86rem;
}
.captura-enlace input:focus { border-color: var(--ink); background: var(--surface); }
.captura-prog { margin-top: .8rem; font-size: .8rem; color: var(--ink-2); }

/* el flujo con los conteos */
.flujo { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .4rem; margin-bottom: 1.3rem; overflow-x: auto; }
@media (max-width: 860px) { .flujo { grid-auto-columns: minmax(6.5rem, 1fr); } }
.etapa {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r);
  padding: .7rem .6rem; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  transition: border-color .18s, background .18s, transform .18s; min-width: 0;
}
.etapa:hover { border-color: var(--line-fuerte); transform: translateY(-1px); }
.etapa-n { font-size: 1.35rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; color: var(--ink-3); }
.etapa.con .etapa-n { color: var(--ink); }
.etapa-t { font-size: .74rem; color: var(--ink-2); text-align: left; line-height: 1.25; }
.etapa.on { background: var(--ink); border-color: var(--ink); }
.etapa.on .etapa-n, .etapa.on .etapa-t { color: #fff; }

/* las tarjetas de trabajo */
.prods { display: grid; gap: .6rem; }
.prod {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: .8rem; display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; gap: 1rem;
  align-items: center; transition: border-color .18s, box-shadow .18s;
}
.prod:hover { border-color: var(--line-fuerte); box-shadow: 0 4px 16px -10px rgba(20,18,15,.3); }
@media (max-width: 700px) {
  .prod { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .prod .prod-acts { grid-column: 1 / -1; }
}
.prod-mini { width: 100%; aspect-ratio: 9/16; border-radius: 8px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); }
.prod-mini.sin { display: grid; place-items: center; color: var(--ink-3); }
.prod-mini.sin svg { width: 1.2rem; height: 1.2rem; }
.prod-info { min-width: 0; }
.prod h4 { margin: 0 0 .25rem; font-size: 1rem; letter-spacing: -.025em; }
.prod .meta { font-size: .74rem; color: var(--ink-3); display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.prod .meta a { text-decoration: underline; text-underline-offset: 2px; }
.prod-sig { font-size: .78rem; color: var(--ink-2); margin-top: .3rem; }
.prod-acts { display: flex; gap: .4rem; flex-wrap: wrap; }

.estado {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .07em; text-transform: uppercase;
  padding: .16rem .48rem; border-radius: 100px; border: 1px solid var(--line); color: var(--ink-2);
}
.estado-ingresado { background: #fdf0e8; color: var(--alerta); border-color: rgba(194,65,12,.22); }
.estado-analizado, .estado-generado { background: #fdf6e6; color: var(--oro); border-color: rgba(185,139,46,.28); }
.estado-listo { background: var(--ink); color: #fff; border-color: transparent; }
.estado-publicado { background: #e8f5ee; color: var(--ok); border-color: rgba(28,122,74,.25); }
.estado-analizando, .estado-generando { background: var(--surface-2); }

/* la guía del estado vacío */
.guia { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1.8rem; }
.guia h3 { font-size: 1.15rem; margin-bottom: 1.1rem; }
.guia-pasos { list-style: none; counter-reset: g; margin: 0; padding: 0; display: grid; gap: .9rem; }
.guia-pasos li {
  counter-increment: g; display: grid; grid-template-columns: 1.85rem minmax(0, 1fr);
  gap: .85rem; align-items: start;
}
.guia-pasos li > div { min-width: 0; }
.guia-pasos li::before {
  content: counter(g); width: 1.85rem; height: 1.85rem; border-radius: 100px;
  background: var(--surface-2); border: 1px solid var(--line);
  display: grid; place-items: center; font-family: var(--mono); font-size: .74rem; font-weight: 700;
}
.guia-pasos b { display: block; font-size: .95rem; letter-spacing: -.02em; }
.guia-pasos span { font-size: .86rem; color: var(--ink-2); line-height: 1.5; }
.guia-pie { margin: 1.4rem 0 0; font-size: .86rem; color: var(--ink-3); }

/* chequeos del sistema */
.chequeos { display: grid; gap: .6rem; }
.chequeo {
  display: grid; grid-template-columns: .7rem 1fr; gap: .8rem; align-items: start;
  border: 1px solid var(--line); border-radius: var(--rs); padding: .85rem 1rem; background: var(--surface-2);
}
.chequeo-punto { width: .7rem; height: .7rem; border-radius: 100px; margin-top: .35rem; background: var(--ink-3); }
.chequeo.ok .chequeo-punto { background: var(--ok); }
.chequeo.falta .chequeo-punto { background: var(--alerta); }
.chequeo b { display: block; font-size: .92rem; }
.chequeo span { display: block; font-size: .82rem; color: var(--ink-2); line-height: 1.5; }
.chequeo-fix { margin-top: .35rem; color: var(--alerta) !important; }

.tiras { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .3rem; }
.tiras img { height: 5.5rem; border-radius: 8px; border: 1px solid var(--line); flex-shrink: 0; }

.barra-prog { height: .35rem; background: var(--surface-2); border-radius: 100px; overflow: hidden; margin: .5rem 0; }
.barra-prog span { display: block; height: 100%; background: var(--ink); transition: width .3s; }

/* ---------- modal ---------- */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(20,18,15,.5); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 1.2rem; z-index: 50;
}
.modal {
  background: var(--surface); border-radius: 22px; box-shadow: var(--sombra);
  width: min(52rem, 100%); max-height: 92vh; overflow-y: auto; padding: 1.6rem;
}
.modal-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; }
.modal-cab h2 { font-size: 1.35rem; }
.cerrar { border: 0; background: var(--surface-2); border-radius: 100px; width: 2rem; height: 2rem; font-size: 1.1rem; line-height: 1; color: var(--ink-2); }
.cerrar:hover { background: var(--line); color: var(--ink); }
.modal-pie { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.2rem; flex-wrap: wrap; }
/* "Descargar .md" partido en dos renglones se lee como dos botones */
.modal-pie .btn { white-space: nowrap; }
.modal-pie .btn svg { width: .9rem; height: .9rem; flex: none; }

/* ---------- avisos ---------- */
.aviso { border-radius: var(--rs); padding: .7rem .9rem; font-size: .85rem; margin: 0; }
.aviso { background: #fdf0e8; color: var(--alerta); }
.aviso.info { background: var(--surface-2); color: var(--ink-2); }
.aviso.ok { background: #e8f5ee; color: var(--ok); }

.toast {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translate(-50%, 5rem);
  background: var(--ink); color: #fff; padding: .65rem 1.15rem; border-radius: 100px;
  font-size: .85rem; font-weight: 600; z-index: 80; opacity: 0;
  transition: transform .35s cubic-bezier(.2,.85,.25,1), opacity .3s; box-shadow: var(--sombra);
  max-width: calc(100vw - 2rem);
}
.toast.ver { transform: translate(-50%, 0); opacity: 1; }
.toast.mal { background: var(--alerta); }

code { font-family: var(--mono); font-size: .84em; background: var(--surface-2); padding: .05em .3em; border-radius: 4px; }
.mono { font-family: var(--mono); }
.sec { margin-bottom: 1.8rem; }
.sec > h2 { font-size: 1.15rem; margin-bottom: .8rem; }

/* el atributo hidden tiene que ganarle al display de las clases */
[hidden] { display: none !important; }


/* ============================================================
   Radar, con el mismo lenguaje que la biblioteca del sitio
   ============================================================ */
.cats { display: flex; gap: .4rem; flex-wrap: wrap; }
.cat {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: var(--rs); padding: .7rem .5rem; cursor: pointer; min-width: 5.4rem;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  transition: border-color .18s, background .18s, color .18s, transform .18s;
}
.cat:hover { border-color: var(--line-fuerte); color: var(--ink); transform: translateY(-2px); }
.cat.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.cat-ico svg { width: 1.3rem; height: 1.3rem; display: block; }
.cat-t { font-size: .74rem; font-weight: 500; letter-spacing: -.01em; }

.fila-filtros { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.buscador {
  flex: 1 1 18rem; min-width: 0; border: 1px solid var(--line); background: var(--surface);
  border-radius: 100px; padding: .62rem 1.15rem; font: inherit; font-size: .86rem; color: var(--ink);
}
.buscador:focus { outline: none; border-color: var(--ink); }
.fila-filtros select { max-width: 13rem; }

/* la tarjeta: el video manda, el texto va encima */
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
/* el renglón de abajo de la grilla: cuántos se ven de cuántos hay, y el aviso
   mientras entra la tanda siguiente */
.rmas { text-align: center; padding: 1.5rem 1rem .5rem; color: var(--ink-3); font-size: .85rem; }
/* el corte entre lo buscado y lo parecido. Ocupa la fila entera de la grilla,
   si no el navegador lo mete en una columna como si fuera otra tarjeta */
.rcorte { grid-column: 1 / -1; display: flex; align-items: baseline; gap: .6rem;
  margin: 1.25rem 0 .25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.rcorte b { font-size: .95rem; color: var(--ink); }
.rcorte span { font-size: .8rem; color: var(--ink-3); }
.rcard { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.rcard:hover { transform: translateY(-4px); }
.rcard-media {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line);
}

/* ---------- la barra de administración ----------
   Todo lo que es trabajo de la casa vive acá y en ningún otro lado: traer
   anuncios, mandarlos a curar, moverlos entre bandejas. Va arriba de todo,
   más apagada y más chica que el contenido, para que se lea como andamio y no
   como parte del producto. Cuando existan los perfiles se esconde entera. */
.barra-admin {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .5rem .75rem; margin-bottom: 1.25rem;
  background: var(--surface-2); border: 1px dashed var(--line-fuerte);
  border-radius: var(--rs);
}
.barra-admin .ba-et {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); padding-right: .25rem;
}
.barra-admin .ba-acciones { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.seg.mini a { padding: .3rem .7rem; font-size: .76rem; }

/* El selector de formato usa el mismo control segmentado que el orden (.seg
   chico) y vive en la misma fila. Antes tenía un indicador propio que se
   deslizaba por debajo: se lo comía el ancho variable de las opciones y se
   movía distinto que el resto de la pantalla, así que se fue. Un solo
   comportamiento para los dos grupos. */

/* ---------- mural de imágenes ----------
   Un estático puede ser cuadrado, vertical o panorámico. Recortarlo a 9:16
   como si fuera un video le come la mitad de la pieza. Acá cada uno ocupa el
   alto que le toca, con filas de 2px y un span por tarjeta que calcula
   filasDelMural() en panel.js. El orden por puntaje se mantiene, que es lo que
   un mural por columnas (css columns) se llevaría puesto. */
/* el mural sale del flujo del grid: cada pieza se posiciona sola con
   transform, que es lo único que no obliga al navegador a rehacer el layout */
.rgrid-mural { display: block; position: relative; }
.rgrid-mural .rcard {
  position: absolute; top: 0; left: 0;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
  /* Apagar la transición acá es obligatorio, no una preferencia. .rcard trae
     una transición de transform para el hover, y transicionar un transform
     armado con var() deja el valor trabado en el punto de partida cuando las
     variables cambian: las quince piezas quedaban apiladas en el origen.
     Además la colocación no es una animación, nadie tiene que ver las tarjetas
     volando desde la esquina cada vez que entra. */
  transition: none;
  will-change: transform;
}
/* el hover levanta la pieza sin perder dónde estaba parada. El salto es
   instantáneo por lo de arriba, y a cuatro píxeles no se nota la diferencia */
.rgrid-mural .rcard:hover { transform: translate3d(var(--x, 0px), calc(var(--y, 0px) - 4px), 0); }
.rgrid-mural .rcard-media { aspect-ratio: var(--prop, 9 / 16); }
.rgrid-mural .rcard-media .rcard-img { object-fit: contain; background: var(--surface-2); }
.rcard:hover .rcard-media { box-shadow: var(--sombra); border-color: var(--line-fuerte); }
.rcard-media video,
.rcard-media .rcard-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcard-sin {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: .72rem; font-family: var(--mono);
}
/* el nombre, debajo de la pieza y sobre fondo plano. Una línea: si no entra,
   se corta, porque dos líneas mueven de lugar todo lo que está abajo en el
   mural y no aportan nada que no resuelva abrir el anuncio */
.rcard-pie { padding: .5rem .15rem 0; pointer-events: none; }
.rcard-pie h3 {
  margin: 0; font-size: .84rem; font-weight: 600; line-height: 1.3;
  letter-spacing: -.01em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* los dos datos que sí van encima de la pieza, porque son los que deciden si
   vale la pena mirarla. Van como material translúcido y no como una pastilla
   negra: dejan ver la textura de abajo y se leen sobre cualquier creativo */
/* Los tres iban posicionados por separado sobre la misma franja, así que con
   un dato largo se montaban uno encima del otro. En una fila no se pueden
   pisar, y el que cede es el dato, que es el que menos importa de los tres. */
.rcard-franja {
  position: absolute; top: .6rem; left: .6rem; right: .6rem; z-index: 2;
  display: flex; align-items: center; gap: .3rem;
}
.rcard-dato {
  background: rgba(12,12,13,.55); color: #fff; border-radius: 100px;
  padding: .2rem .6rem; font-family: var(--mono); font-size: .62rem;
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255,255,255,.14);
  /* cede primero y se recorta con puntos suspensivos */
  min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rcard-flojo {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  background: rgba(170,60,40,.8); color: #fff; border-radius: 100px;
  padding: .18rem .55rem; font-family: var(--mono); font-size: .6rem;
}

/* los botones aparecen recién al pasar el mouse, como en el sitio.
   Con ellos entra un velo suave, y solo entonces: el degradé permanente se fue
   justamente para que la pieza se vea limpia mientras nadie la está tocando */
.rcard-media::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
  opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 3;
}
.rcard:hover .rcard-media::after { opacity: 1; }
.rcard-acts {
  position: absolute; left: .5rem; right: .5rem; bottom: .5rem; z-index: 4;
  display: flex; gap: .3rem; opacity: 0; transform: translateY(6px);
  transition: opacity .2s, transform .2s;
}
.rcard:hover .rcard-acts { opacity: 1; transform: none; }
.rcard-acts .btn { flex: 1; justify-content: center; }
.rcard-acts .btn:not(.btn-primary) { flex: 0 0 2rem; padding: .3rem 0; background: rgba(255,255,255,.92); color: #111; border-color: transparent; }
/* El marcador de la agencia es el único botón de su tarjeta, así que ocupa el
   ancho entero en vez de quedar como un cuadradito perdido a la izquierda. */
.rcard-acts .guardar {
  flex: 1 !important; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
}
.rcard-acts .guardar svg { width: .9rem; height: .9rem; flex: 0 0 auto; }
/* guardado: el marcador se rellena, igual que en cualquier red social */
.rcard-acts .guardar.on { background: var(--ink) !important; color: var(--surface) !important; }
.rcard-acts .guardar.on svg { fill: currentColor; }
/* el press se siente en el momento, no al soltar */
.rcard-acts .guardar:active { transform: scale(.96); }
.rcard-listo {
  position: absolute; left: .6rem; bottom: .6rem; z-index: 4;
  background: var(--ok); color: #fff; border-radius: 100px;
  padding: .2rem .6rem; font-family: var(--mono); font-size: .6rem;
}

/* la curaduría: el puntaje del curador sobre la tarjeta y su veredicto abajo.
   El fondo del puntaje viene inline desde el JS: semáforo continuo rojo→verde */
.rcard-puntaje {
  /* el último de la fila, pegado a la derecha */
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .28rem;
  border-radius: 100px; padding: .2rem .6rem .2rem .5rem;
  font-family: var(--mono); font-size: .7rem; font-weight: 700; color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.rcard-puntaje svg { width: .8rem; height: .8rem; display: block; }
.rcard-top-tag {
  /* en la fila, entre el dato y el puntaje. Nunca se encoge: es lo que la
     tarjeta tiene para decir. */
  flex: 0 0 auto;
  background: linear-gradient(135deg, #D4A94C, #B98B2E); color: #fff;
  border-radius: 100px; padding: .18rem .7rem;
  font-family: var(--mono); font-size: .62rem; font-weight: 800; letter-spacing: .12em;
  box-shadow: 0 2px 10px rgba(185,139,46,.5);
}
/* Las Top y las buenas se marcaban con un anillo de color alrededor de la
   pieza. Ensuciaba la grilla y competía con el propio anuncio, así que se
   fue: el puntaje y la etiqueta TOP ya dicen lo mismo sin pintar el borde. */
/* el filtro Top: el único con brillo propio, porque es el que importa */
.chip-top {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .38rem .85rem; border-radius: 100px; text-decoration: none;
  font-size: .82rem; font-weight: 600; white-space: nowrap;
  color: var(--oro); background: var(--surface);
  border: 1px solid rgba(185,139,46,.35);
  animation: top-late 2.6s ease-in-out infinite;
  transition: transform .15s;
}
.chip-top svg { width: .82rem; height: .82rem; }
/* como botón (el de curar en la pantalla de buscar) no hereda el reset de los
   <a>, así que se le saca el fondo de sistema y el cursor queda de mano */
button.chip-top { cursor: pointer; font-family: inherit; }
/* el Curar de cada tarjeta: mismo dorado, tamaño de los botones chicos */
.btn-curar { color: var(--oro); border-color: rgba(185,139,46,.4); font-weight: 600; }
.btn-curar:hover:not(:disabled) { background: rgba(185,139,46,.1); }
.chip-top b { font-family: var(--mono); font-size: .72rem; opacity: .8; }
.chip-top:hover { transform: translateY(-1px); }
.chip-top.on {
  background: linear-gradient(135deg, #c99b38, #b98b2e);
  color: #fff; border-color: transparent; animation: none;
  box-shadow: 0 3px 14px rgba(185,139,46,.45);
}
@keyframes top-late {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185,139,46,.3); }
  50% { box-shadow: 0 0 14px 1px rgba(185,139,46,.45); }
}
@media (prefers-reduced-motion: reduce) { .chip-top { animation: none; } }

/* los instrumentos del curador dentro de sus cards blancas */
.v-anillo { width: 4rem; height: 4rem; flex: 0 0 auto; }
.v-anillo-fondo { fill: none; stroke: rgba(20,18,15,.09); stroke-width: 4.5; }
.v-anillo-valor { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.v-anillo-num { font-family: var(--mono); font-weight: 800; font-size: 18px; }
.v-cura-nivel { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 1.05rem; line-height: 1; }
.v-cura-sub { font-family: var(--mono); font-size: .55rem; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-3); }
.v-cura-fama { margin-left: auto; align-self: flex-start; font-style: normal; font-family: var(--mono);
  font-size: .58rem; letter-spacing: .06em; color: #a03c28; background: rgba(194,65,12,.09);
  padding: .2rem .5rem; border-radius: 100px; }
/* las dimensiones como barras: legibles sin saber leer un gráfico, con el
   color de su propia nota y degradé para que tengan cuerpo */
.v-barras { display: flex; flex-direction: column; gap: .55rem; }
.v-barra { display: grid; grid-template-columns: 5.2rem 1fr 1.1rem; align-items: center; gap: .65rem; }
.v-barra-t { font-size: .74rem; color: var(--ink-2); }
.v-barra-riel {
  position: relative; height: 8px; border-radius: 100px;
  background: rgba(17,17,20,.055);
  box-shadow: inset 0 1px 2px rgba(17,17,20,.07);
}
.v-barra-riel i {
  position: absolute; inset: 0 auto 0 0; border-radius: 100px;
  background: linear-gradient(90deg, var(--c), var(--c2));
  transform-origin: left; animation: barra-crece .65s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes barra-crece { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.v-barra-n { font-family: var(--mono); font-size: .72rem; font-weight: 700; text-align: right; color: var(--ct); }
.v-cura-eyebrow {
  font-family: var(--mono); font-size: .55rem; text-transform: uppercase;
  letter-spacing: .18em; color: var(--ink-3); display: block; margin-bottom: .45rem;
}
.v-cura-vered p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--ink); }
/* cuántas adaptaciones le quedan a la agencia este mes. Va debajo de los
   botones y no al lado del costo: son dos números de cosas distintas */
.vp-cupo { margin: .5rem 0 0; font-size: .8rem; color: var(--ink-3); }
.vp-cupo b { color: var(--ink-2); }
/* ============================================================
   La mesa de trabajo de Producción
   ============================================================
   El mismo lenguaje visual que la ficha del sitio público: eyebrow en mono
   sobre título, paneles con borde y aire, y los números del render grandes.

   El orden importa tanto como el estilo. Primero lo que adapta el prompt
   (las fotos, la duración) y recién después el prompt. Leerlo sin saber que
   se puede cambiar es leerlo dos veces: una para entenderlo y otra para
   adaptarlo. */
.mesa-cab { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; }
.mesa-volver {
  display: inline-flex; align-items: center; gap: .3rem; text-decoration: none;
  color: var(--ink-2); font-size: .84rem; padding: .4rem .8rem .4rem .5rem;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  transition: color .18s ease-out, border-color .18s ease-out;
}
.mesa-volver:hover { color: var(--ink); border-color: var(--line-fuerte); }
.mesa-volver:active { transform: scale(.97); }
.mesa-volver svg { width: .85rem; height: .85rem; transform: rotate(90deg); }
.mesa-cab .chip-nuevos { margin-left: auto; }

.mesa { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.mesa-video { position: sticky; top: 1rem; }
.mesa-video video, .mesa-video img {
  width: 100%; border-radius: 18px; background: #000; display: block; box-shadow: var(--v-sombra);
}
.mesa-ayuda { color: var(--ink-3); font-size: .78rem; line-height: 1.5; margin: .6rem 0 0; }
.mesa-trabajo { display: flex; flex-direction: column; min-width: 0; }

/* el título, con la escala de una portada y no la de un renglón de tabla */
.mesa-titulo { margin-bottom: 1.2rem; }
.mesa-titulo h1 { font-size: 2.1rem; letter-spacing: -.03em; line-height: 1.1; }
.mesa-marca { font-size: .92rem; color: var(--ink-2); margin-top: .35rem; }
.mesa-marca b { color: var(--ink); font-weight: 600; }
.mesa-datos {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin-top: .55rem; font-size: .84rem; color: var(--ink-2);
}
.mesa-datos i { font-style: normal; opacity: .4; }

/* ---------- paneles ---------- */
.panel {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  padding: 1.3rem; margin-bottom: 1rem;
}
/* El tinte del sitio, el mismo que ahí lleva la regla de adaptación. Va en un
   solo panel de la pantalla, el de las fotos que hay que conseguir: es lo
   primero que hace falta y en gris sobre gris se pasaba de largo. Poniéndolo
   en dos, ninguno destaca. */
.panel-tinte {
  background: var(--surface);
  border-color: var(--line);
}
/* las tarjetas de adentro van translúcidas para que el degradé se vea pasar
   por debajo, en vez de taparlo con seis rectángulos opacos */
/* blancos y no translúcidos: al 62% el degradé los teñía y los seis cuadros
   quedaban de un lila sucio distinto en cada columna */
.panel-tinte .ref-cuadro {
  background: #fff;
  border-color: rgba(23,23,23,.06);
  box-shadow: 0 1px 2px rgba(17,17,20,.04);
}
.panel-tinte .panel-nota { color: var(--ink-2); }
/* el eyebrow y el título son una sola cosa y van juntos a la izquierda; lo que
   se separa a la derecha son las acciones, si las hay */
.panel-cab { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap; }
.panel-cab > .eyebrow, .panel-cab > h3 { flex: 1 1 100%; }
.panel-cab > div:first-child { margin-right: auto; }
.panel-cab .panel-acciones { margin-left: auto; }
.panel-cab h3 { font-size: 1.12rem; letter-spacing: -.015em; }
.eyebrow {
  display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: .25rem;
}
.panel-intro { margin: 0 0 .9rem; font-size: .88rem; line-height: 1.6; color: var(--ink-2); }
.panel-nota { margin: .85rem 0 0; font-size: .76rem; line-height: 1.55; color: var(--ink-3); }
.panel-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.panel-acciones .btn { display: inline-flex; align-items: center; gap: .35rem; }
.panel-acciones .btn svg { width: .9rem; height: .9rem; }
.btn-soft { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.btn-soft:hover { border-color: var(--line-fuerte); }
.btn-soft.ok { background: var(--ink); color: var(--surface); border-color: transparent; }

/* ---------- lo que hay que subir ---------- */
/* auto-fill y no auto-fit: con un solo asset, auto-fit le da la fila entera y
   el recuadro de subir, que va en 3:2, se estira a media pantalla de alto */
.assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; }
.asset {
  border: 1px solid var(--line); border-radius: var(--rs); padding: .95rem;
  background: var(--surface-2); display: flex; flex-direction: column; gap: .7rem;
}
.asset.cargada { border-color: var(--ok, #1D8A4E); }
.asset-cab { display: flex; align-items: flex-start; gap: .6rem; }
.asset-ico { flex: 0 0 auto; color: var(--ink-3); margin-top: .05rem; }
.asset-ico svg { width: 1.25rem; height: 1.25rem; display: block; }
.asset.cargada .asset-ico { color: var(--ok, #1D8A4E); }
.asset-txt { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.asset-txt b { font-size: .88rem; letter-spacing: -.015em; }
.asset-txt span { font-size: .76rem; color: var(--ink-3); line-height: 1.45; }
.asset-slot { font-family: var(--mono); font-size: .62rem; color: var(--ink-3); }
.asset-slot code { background: var(--surface-3, var(--surface)); border-radius: 4px; padding: .05rem .3rem; }
/* el recuadro de subir: la proporción fija hace que todas las tarjetas midan
   lo mismo aunque el texto de arriba tenga una línea más */
.asset .slot {
  width: 100%; aspect-ratio: 3 / 2; margin-top: auto; cursor: pointer;
  border-radius: var(--rs); border: 1.5px dashed var(--line-fuerte);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); background: var(--surface); overflow: hidden;
  transition: border-color .16s, color .16s;
}
.asset .slot:hover { border-color: var(--ink); color: var(--ink); }
.asset .slot-vacio { display: flex; align-items: center; gap: .4rem; font-size: .8rem; }
.asset .slot-vacio svg { width: 1.05rem; height: 1.05rem; }
.asset .slot-prev { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- la duración ---------- */
/* sin línea ni sangría arriba: la traía de cuando vivía dentro del bloque de
   las fotos y necesitaba separarse. Ahora es un panel propio y la caja ya es
   la separación */
.dur-bloque { margin: 0; padding: 0; }
.dur-bloque .eyebrow { margin-bottom: .8rem; }
.dur-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.dur-n { display: flex; align-items: baseline; gap: .4rem; }
.dur-n b { font-size: 2.2rem; letter-spacing: -.045em; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; }
.dur-n span { font-size: .84rem; color: var(--ink-3); }
.dur-cuenta { font-family: var(--mono); font-size: .68rem; color: var(--ink-3); display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.dur-cuenta b { color: var(--ink); font-weight: 500; }
.dur-cuenta i { font-style: normal; opacity: .4; }
.dur-bloque input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 1.1rem;
  background: transparent; cursor: pointer; display: block; margin: 0;
}
.dur-bloque input[type=range]::-webkit-slider-runnable-track {
  height: .3rem; border-radius: 100px; background: var(--surface-2); border: 1px solid var(--line);
}
.dur-bloque input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.1rem; height: 1.1rem; border-radius: 100px; margin-top: -.44rem;
  background: var(--ink); border: 2px solid var(--surface); box-shadow: 0 1px 6px -1px rgba(0,0,0,.35);
  transition: transform .14s;
}
.dur-bloque input[type=range]:active::-webkit-slider-thumb { transform: scale(1.14); }
.dur-escala { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .58rem; color: var(--ink-3); margin-top: .3rem; letter-spacing: .06em; }
.dur-aviso { margin: .75rem 0 0; font-size: .82rem; color: var(--ink-3); line-height: 1.5; }

.mesa-acciones { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.mesa-acciones .btn-lg { width: 100%; justify-content: center; padding: .9rem 1.3rem; border-radius: 999px; font-size: .95rem; }
.vp-estado { margin: .8rem 0 0; font-size: .84rem; color: var(--ink-2); line-height: 1.5; }
.vp-estado.mal { color: var(--mal, #B4342A); }
/* lo que el modelo vio en las fotos. Va en su propia caja porque es la parte
   que hay que leer entera antes de copiar el prompt */
.vp-nota {
  margin: .6rem 0 0; padding: .6rem .8rem;
  font-size: .82rem; line-height: 1.5; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--alerta); border-radius: var(--rs);
}

/* ---------- formato de salida ---------- */
.formats { display: flex; gap: .5rem; flex-wrap: wrap; }
.fmt {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--rs);
  padding: .7rem .85rem; display: flex; align-items: center; gap: .6rem;
  flex: 1 1 9rem; text-align: left; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.fmt:hover { border-color: var(--line-fuerte); }
/* el borde no cambia nunca: cambiando de gris a negro, el botón elegido pesa
   distinto que los otros dos y la fila deja de leerse pareja. Lo que dice cuál
   está elegido es el fondo y el recuadro de la proporción, que se pinta */
.fmt.on { background: var(--surface-2); }
.fmt:active { transform: scale(.985); }
/* el recuadro con la proporción real: se entiende antes de leer el nombre */
.fmt-box { border: 2px solid currentColor; border-radius: 3px; flex-shrink: 0; color: var(--ink-3); }
/* el elegido rellena su recuadro. Con el borde igual en los tres y el fondo
   casi igual, tenía que haber una señal que se vea de lejos, y la más honesta
   es la proporción misma */
.fmt.on .fmt-box { color: var(--ink); background: var(--ink); }
.fmt.on .fmt-txt b { font-weight: 650; }
.fmt-9-16 { width: .85rem; height: 1.5rem; }
.fmt-1-1 { width: 1.2rem; height: 1.2rem; }
.fmt-16-9 { width: 1.7rem; height: .96rem; }
/* los dos formatos de anuncio que no existen en video */
.fmt-4-5 { width: 1.2rem; height: 1.5rem; }
.fmt-1-91-1 { width: 1.7rem; height: .89rem; }

/* Las fotos que hay que llevar, en cuadros y no en filas.

   En una lista de seis filas, cada una con su párrafo, la sección medía media
   pantalla y había que leerla entera para saber qué hacía falta. En cuadros se
   barre de un vistazo: el icono dice qué tipo de foto es, el título cuál, y el
   detalle queda abajo en chico para el que lo necesite. */
.refs-grid {
  list-style: none; margin: .8rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem;
}
.ref-cuadro {
  display: flex; flex-direction: column; gap: .3rem;
  padding: .85rem .9rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--rs);
}
.ref-ico { color: var(--ink-3); margin-bottom: .1rem; }
.ref-ico svg { width: 1.5rem; height: 1.5rem; display: block; stroke-width: 1.5; }
.ref-cuadro b { font-size: .88rem; letter-spacing: -.015em; }
.ref-cuadro b code {
  font-family: var(--mono); font-size: .72rem; color: var(--oro);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 5px; padding: .05rem .28rem; margin-right: .2rem;
}
/* el detalle es del modelo y puede venir largo: tres líneas y el resto queda
   en el title, para no volver a estirar la sección */
.ref-cuadro > span {
  font-size: .76rem; color: var(--ink-3); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* los textos que van escritos sobre un anuncio estático */
.textos-pieza { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .45rem; }
.textos-pieza li {
  font: 600 .95rem/1.35 var(--sans);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--oro);
  border-radius: var(--rs); padding: .55rem .75rem;
}
.fmt-txt { display: flex; flex-direction: column; line-height: 1.25; }
.fmt-txt b { font-size: .84rem; letter-spacing: -.02em; }
.fmt-txt small { font-size: .7rem; color: var(--ink-3); }

/* ---------- el prompt ---------- */
.remix-fields { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-bottom: .9rem; }
/* La etiqueta se decía dos veces, arriba en gris y adentro de placeholder. Se
   queda la de adentro, y la de arriba sigue existiendo solo para el lector de
   pantalla: el campo se reconoce por el cuadro de color de su icono. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.field-caja {
  display: flex; align-items: stretch; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--rs);
  transition: border-color .16s;
}
.field-ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 2.1rem; background: var(--surface); color: rgb(var(--vc));
  border-right: 1px solid rgb(var(--vc) / .22);
}
/* el trazo va más grueso que en el resto del panel: en blanco sobre color y a
   este tamaño, la línea de 1.6 se deshace */
.field-ico svg { width: 1rem; height: 1rem; display: block; stroke-width: 2.3; }
.field-caja:focus-within { border-color: rgb(var(--vc) / .55); }
/* el borde y el fondo los pone la caja: el input adentro no lleva ninguno de
   los dos, o se dibujan dos rectángulos uno adentro del otro */
.field input {
  width: 100%; min-width: 0; background: none; border: 0;
  padding: .58rem .72rem; color: var(--ink);
  font-family: inherit; font-size: .86rem; outline: none;
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus { border-color: var(--ink); background: var(--surface); }
.prompt-box {
  font-family: var(--mono); font-size: .8rem; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--rs);
  padding: 1.05rem 1.1rem; color: var(--ink);
  max-height: 30rem; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(20,18,15,.16) transparent;
}
/* lo que falta cambiar, en coral; lo que ya se escribió, apagado y firme */
/* Un color por variable, el mismo en su campo y en el prompt.

   Con nueve variables todas del mismo coral, encontrar dónde cae [TIEMPO_2]
   era leerse el prompt entero. Ocho tonos alcanzan: más empiezan a parecerse
   entre sí y el color deja de servir para distinguir. */
/* Los ocho matices van repartidos en el círculo y ordenados alternando frío y
   cálido, así dos campos vecinos de la grilla nunca caen en la misma familia.
   Una tanda anterior tenía tres tonos entre los 13 y los 60 grados, y personaje,
   precio y garantía se leían como el mismo marrón.

   Cada color viene en dos versiones: --vp es el pastel que va de fondo en el
   prompt, y --vc el tono pleno del icono y de la letra encima de ese pastel.
   El par está calculado para que el pleno se lea sobre su propio pastel y
   también sobre el blanco del cuadro del icono. */
.v0 { --vc: 177 37 37; --vp: 252 202 202; }    /* rojo */
.v1 { --vc: 34 114 135; --vp: 202 242 252; }   /* cian */
.v2 { --vc: 131 106 33; --vp: 252 239 202; }   /* oro */
.v3 { --vc: 6 76 239; --vp: 202 217 252; }     /* azul */
.v4 { --vc: 73 122 31; --vp: 225 252 202; }    /* lima */
.v5 { --vc: 115 6 239; --vp: 225 202 252; }    /* violeta */
.v6 { --vc: 31 122 77; --vp: 202 252 227; }    /* verde */
.v7 { --vc: 167 42 125; --vp: 252 202 235; }   /* rosa */

/* La variable en el prompt se pinta igual que el cuadro de su campo: mismo
   fondo sólido y el mismo blanco encima. Con el fondo lavado eran el mismo
   tono pero no se leían como la misma cosa. */
.prompt-box mark {
  background: rgb(var(--vp)); color: rgb(var(--vc));
  font-weight: 700; padding: .02rem .25rem; border-radius: 4px;
}
/* lo ya completado pierde el color y se vuelve gris: contra ocho pasteles, lo
   que falta por llenar es lo único que sigue teniendo color */
.prompt-box mark.hecha {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink); font-weight: 600;
}

/* ---------- ficha del render ---------- */
.ficha-render {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  border-radius: var(--rs); overflow: hidden; background: var(--line);
}
.ficha-render > div { background: var(--surface-2); padding: .8rem .9rem; }
.ficha-render span { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .28rem; }
.ficha-render b { font-size: .9rem; font-weight: 600; letter-spacing: -.015em; }

@media (max-width: 1000px) {
  .mesa { grid-template-columns: minmax(0, 1fr); }
  .mesa-video { position: static; max-width: 18rem; }
  .ficha-render { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Las dos transcripciones
   ============================================================
   Lo que devuelve el modelo es texto plano con estructura: títulos de parte y
   líneas que empiezan con el segundo en que pasa algo. Volcado en un bloque
   corrido se lee como un log; con la estructura a la vista se lee como un
   documento, que es lo que la agencia está pagando por tener.

   El tamaño de párrafo es el mismo del resto del visor y el interlineado va
   holgado: son bloques largos y se leen de corrido, no se escanean. */
.v-trans {
  margin: 0; font-size: .84rem; line-height: 1.6; color: var(--ink-2);
  max-height: 24rem; overflow-y: auto; word-break: break-word;
  display: flex; flex-direction: column; gap: .3rem;
  scrollbar-width: thin; scrollbar-color: rgba(20,18,15,.16) transparent;
}
.v-trans p { margin: 0; }

/* El título de cada parte. Va con peso y en el color fuerte, con aire arriba
   para que se lea como el arranque de una sección y no como una línea más. */
.v-trans .tr-t {
  display: block; font-size: .7rem; font-weight: 600; color: var(--ink);
  letter-spacing: .01em; margin: .75rem 0 .15rem;
}
.v-trans .tr-t:first-child { margin-top: 0; }

/* Una línea de tiempo. El segundo va en una columna fija a la izquierda para
   poder recorrerla con la vista sin leer cada renglón entero. */
.v-trans .tr-l { display: flex; gap: .55rem; align-items: baseline; }
.v-trans .tr-seg {
  flex: 0 0 2.6rem; font-family: var(--mono); font-size: .68rem; font-weight: 500;
  color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums;
}
/* la acotación de audio, lo que no es diálogo */
.v-trans .tr-nota { color: var(--ink-3); font-style: italic; }

/* El copiar vive en el encabezado del acordeón. Flotando sobre el texto tapaba
   la barra de scroll del propio bloque. Solo el icono: al lado del título, la
   palabra "Copiar" compite con él.

   Y aparece recién cuando la sección está abierta. Con la sección cerrada
   ofrecía copiar un texto que no está a la vista, y dejaba dos iconos
   compitiendo en el encabezado cuando el que importa es el chevron. */
.v-acc:not([open]) .v-copiar { display: none; }
.v-copiar {
  border: 0; background: none; cursor: pointer; padding: .25rem;
  margin: -.25rem 0 -.25rem 0;
  display: inline-flex; color: var(--ink-3); border-radius: 8px;
  animation: copiar-entra .22s cubic-bezier(.32,.72,0,1);
  transition: color .18s ease-out, background-color .18s ease-out;
}
/* el mismo gesto con el que se abre la sección: entra con ella, no aparte */
@keyframes copiar-entra { from { opacity: 0; transform: scale(.86); } }
@media (prefers-reduced-motion: reduce) { .v-copiar { animation: none; } }
.v-copiar svg { width: .95rem; height: .95rem; }
.v-copiar:hover { color: var(--ink); background: var(--surface-2); }
.v-copiar:active { transform: scale(.92); transition: none; }
/* la confirmación es el propio icono poniéndose en verde, sin mover nada de
   lugar: cambiar el texto del botón desplazaba el chevron de al lado */
.v-copiar.ok { color: #1D8A4E; }
.v-bajar { width: 100%; justify-content: center; margin-top: .2rem; }

.vp-vacio { display: flex; flex-direction: column; gap: .55rem; align-items: stretch; margin: 0; padding: 0; }
.vp-vacio .btn { justify-content: center; padding: .85rem 1rem; border-radius: 100px; font-size: .92rem; }
.vp-vacio p { margin: 0; text-align: center; }
.btn-xs { font-size: .72rem; padding: .34rem .6rem; }
.chk { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
.tabs { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: .6rem; }
.tabs .tab { padding: .38rem .8rem; border-radius: 100px; font-size: .82rem; color: var(--ink-2); white-space: nowrap; }
.tabs .tab:hover { background: var(--surface-2); color: var(--ink); }
.tabs .tab.on { background: var(--ink); color: var(--bg); }
.tabs .tab b { font-family: var(--mono); font-size: .72rem; opacity: .75; margin-left: .2rem; }

/* ============================================================
   El visor: la sala de proyección. La luz del propio anuncio
   (una copia desenfocada del video) pinta la pieza entera, y los
   instrumentos de curaduría viven sobre vidrio oscuro. Una sola
   superficie continua: el video no es un bloque aparte.
   Las variables se redefinen acá para que todo lo de adentro
   (incluido el bloque del prompt) pase solo a modo oscuro. */
.visor { position: fixed; inset: 0; z-index: 200; background: rgba(10,10,12,.72);
  display: flex; align-items: center; justify-content: center; padding: 1.4rem; backdrop-filter: blur(16px); }
.visor-caja {
  --v-card: #fff; --v-sombra: 0 2px 4px rgba(17,17,20,.03), 0 10px 30px rgba(17,17,20,.07);
  position: relative; width: min(1100px, 96vw); height: min(880px, 92vh);
  border-radius: 32px; overflow: hidden; background: #f1f1f3; color: var(--ink);
  box-shadow: 0 40px 120px rgba(0,0,0,.5);
  animation: visor-entra .34s cubic-bezier(.2,.9,.3,1);
}
@keyframes visor-entra { from { opacity: 0; transform: scale(.965) translateY(12px); } }
/* el halo del anuncio: una copia del video, borrosa y saturada, apenas más
   grande que el marco. Crea atmósfera alrededor del video y no tiñe la caja */
/* El resplandor ocupa TODO el contenedor del video, no el marco del video:
   colgado del marco nunca podía pasar de sus bordes y quedaba un rectángulo
   apagado alrededor. La máscara de tres paradas es la que concentra la luz
   en el centro (donde está el cuadro) y la disuelve hacia las esquinas. */
.v-ambi {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* el orden importa: contrast bajo y brightness alto suben el piso (un video
     negro deja de ensuciar la caja) y recién después satura, que es lo que
     recupera el matiz del anuncio */
  filter: blur(64px) contrast(.34) brightness(2) saturate(5);
  opacity: .88; z-index: 0; pointer-events: none;
  /* closest-side: la elipse toca los cuatro lados, así la luz llega a cero
     justo en el borde del área del video y no se mete debajo del panel */
  -webkit-mask-image: radial-gradient(ellipse closest-side at center, #000 0 34%, rgba(0,0,0,.5) 74%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at center, #000 0 34%, rgba(0,0,0,.5) 74%, transparent 100%);
}
.v-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 26.5rem; height: 100%; }
/* min-height 0 en las dos celdas: sin esto la grilla no deja que el panel
   se encoja y el overflow nunca se activa (el pie quedaba fuera de la caja) */
.v-cine, .v-panel { min-height: 0; }
/* el padding le da lugar al halo: sin aire, se corta contra el panel */
.v-cine { position: relative; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 3.3rem 2.9rem; }
/* el marco se ajusta al video (sin barras negras) y hospeda su capa de datos */
/* El marco toma la proporción exacta del video (el JS le pasa el aspect-ratio
   al cargar la metadata), así en un video cuadrado o apaisado la tarjeta no
   queda más alta que la imagen: el aire sobra afuera, nunca adentro. */
/* El JS le da el tamaño exacto en píxeles (el encaje del video en el espacio
   disponible). Ni aspect-ratio ni max-* alcanzan: con el ancho fijo no se
   achica en verticales, y con el alto fijo no se achica en apaisados. */
.v-marco {
  position: relative; z-index: 1; display: block; margin: auto;
  width: 100%; height: 100%;
}
.v-cine #vVideo,
.v-cine #vImagen {
  display: block; width: 100%; height: 100%; object-fit: contain;
  border-radius: 28px; background: transparent;
  box-shadow: 0 2px 8px rgba(17,17,20,.1), 0 18px 50px rgba(17,17,20,.22);
}
/* el glow de fondo también funciona con un estático: es la misma pieza
   ampliada y desenfocada, así que la atmósfera sale del propio creativo */
img.v-ambi { object-fit: cover; }
.v-chips { position: absolute; top: .85rem; left: .85rem; display: flex; gap: .35rem; pointer-events: none; }
.v-chip {
  background: rgba(12,12,14,.55); backdrop-filter: blur(14px); color: #fff;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .08em;
  padding: .25rem .55rem; border-radius: 100px;
}
/* el truco del anuncio vive sobre el video, que es donde pasa. Calza a la
   misma distancia de los tres bordes y se va solo a los seis segundos. */
.v-truco-pill {
  position: absolute; left: .8rem; right: .8rem; bottom: .8rem;
  display: flex; gap: .65rem; align-items: center;
  background: rgba(255,255,255,.92); backdrop-filter: blur(22px) saturate(1.5);
  border-radius: 100px; padding: .6rem 1.35rem .6rem .6rem;
  box-shadow: 0 6px 26px rgba(20,18,15,.2);
  font-size: .76rem; line-height: 1.4; color: var(--ink); cursor: pointer;
  /* entra y sale por transición, no por animación: un fill-mode mal cerrado
     deja el translate pegado y la pill no calza con el borde */
  opacity: 0; transform: translateY(14px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.9,.3,1);
}
.v-truco-pill.entro { opacity: 1; transform: translateY(0); }
.v-truco-pill.fue { opacity: 0; transform: translateY(10px); pointer-events: none; }
.v-truco-pill b { display: block; font-family: var(--mono); font-size: .54rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-3); margin-bottom: .12rem; font-weight: 500; }
.v-truco-pill span:last-child { min-width: 0; }
.v-truco-ico { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 100px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.v-truco-ico svg { width: 1rem; height: 1rem; }
/* Arriba iguala al padding del cine (el título arranca a la altura del borde
   del video) y a la derecha también, para que el aire contra el borde de la
   caja sea el mismo de los dos lados. */
.v-panel {
  position: relative; display: flex; flex-direction: column; gap: .65rem;
  /* el padding derecho descuenta la barra de scroll (que siempre reserva su
     lugar) para que el aire real iguale al del lado del video */
  padding: 3.3rem 2.4rem 2rem 1.5rem; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin; scrollbar-color: rgba(20,18,15,.18) transparent;
}
/* El panel es flex en columna y con scroll. Sin flex-shrink:0 los hijos se
   reparten el alto disponible en vez de apilarse: con pocas tarjetas no se
   nota, y al sumar las dos transcripciones todas se aplastaron a dos píxeles.
   Una tarjeta mide lo que mide su contenido y el panel scrollea, que es lo
   que la barra de scroll de acá al lado promete. */
.v-card {
  background: var(--v-card); border-radius: 20px; padding: .95rem 1.05rem;
  box-shadow: var(--v-sombra); flex: 0 0 auto;
}
.v-head { padding: .1rem 2rem .5rem .1rem; }
.v-marca { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
/* las señales como chips blancos: el mismo material que las cards */
.v-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }
.v-pill {
  background: var(--v-card); border-radius: 100px; padding: .3rem .7rem;
  font-size: .71rem; color: var(--ink-2); box-shadow: var(--v-sombra); white-space: nowrap;
}
.v-pill b { color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: .73rem; }
/* los días en pauta como objeto, con el hito adelante y el riel de remate */
.v-pauta { margin-top: .7rem; display: flex; align-items: center; gap: .6rem; padding-left: .15rem; }
.v-pauta-riel { position: relative; flex: 1; height: 3px; border-radius: 100px; background: rgba(17,17,20,.09); }
.v-pauta-riel i { position: absolute; inset: 0 auto 0 0; border-radius: 100px; background: linear-gradient(90deg, var(--ink-3), var(--ink)); }
.v-pauta-txt { font-family: var(--mono); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.v-score { display: flex; align-items: center; gap: .85rem; }
.v-score.es-top { box-shadow: var(--v-sombra), inset 0 0 0 1.5px rgba(185,139,46,.4); }
.v-score.es-top .v-anillo { filter: drop-shadow(0 0 12px rgba(185,139,46,.35)); }
.v-score.es-fuera .v-cura-nivel { opacity: .85; }
.v-score-t { display: flex; flex-direction: column; gap: .18rem; }
.v-truco p { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--ink-2); }
/* veredicto y copy comparten cabecera: uno abierto, el otro plegado */
/* ============================================================
   Los acordeones del visor
   ============================================================
   El título usa la tipografía del cuerpo con peso, no el mono desvaído de
   antes: la jerarquía se arma con peso y tamaño juntos, y un título de sección
   tiene que verse como un título y no como una nota al pie.

   El tracking es chico y positivo porque el texto es chico. A este tamaño las
   letras necesitan aire; a tamaños grandes sería al revés. */
/* sin overflow:hidden acá. El panel del visor es flex en columna, y con
   overflow oculto el acordeón deja de respetar el alto de su contenido (el
   min-height:auto del flex item pasa a 0) y se aplasta a una línea. El
   redondeo del hover se resuelve en el summary, que es quien se pinta. */
.v-acc { padding: 0; }
.v-acc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  /* el gap chico junta el copiar con el chevron: son los dos controles de la
     sección y se leen como un par, no como dos cosas sueltas */
  padding: .78rem 1.05rem; gap: .45rem; border-radius: inherit;
  /* el color de fondo va sin transición al apretar: el press tiene que verse
     en el mismo frame, y una transición de entrada lo retrasa */
  transition: background-color .18s ease-out;
}
/* abierto, el summary deja de redondear abajo para no cortar el cuerpo */
.v-acc[open] summary { border-radius: inherit inherit 0 0; }
.v-acc summary::-webkit-details-marker { display: none; }
.v-acc summary:hover { background: var(--surface-2); }
/* el press se siente al apretar, no al soltar */
.v-acc summary:active { background: var(--surface-2); transition: none; }

.v-acc-t {
  display: inline-flex; align-items: center; gap: .55rem; min-width: 0;
}
.v-acc-t b {
  font-size: .84rem; font-weight: 600; letter-spacing: .005em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* el icono de cada sección: cinco bloques iguales se distinguen de un vistazo
   por el icono, y leyéndolos si no lo tienen */
.v-acc-t > svg {
  width: 1.05rem; height: 1.05rem; flex: 0 0 auto; color: var(--ink-3);
  transition: color .18s ease-out;
}
.v-acc[open] .v-acc-t > svg, .v-acc summary:hover .v-acc-t > svg { color: var(--ink); }

/* el chevron gira con la curva de iOS, no con un ease genérico */
.v-acc summary > svg:last-child {
  width: .85rem; height: .85rem; color: var(--ink-3); flex: 0 0 auto;
  transition: transform .32s cubic-bezier(.32,.72,0,1), color .18s ease-out;
}
.v-acc[open] summary > svg:last-child { transform: rotate(180deg); color: var(--ink-2); }
.v-acc summary:hover > svg:last-child { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .v-acc summary > svg:last-child { transition: color .18s ease-out; }
}
.v-acc-cuerpo { padding: 0 1.05rem 1rem; display: flex; flex-direction: column; gap: .7rem; }
/* pre-wrap: el copy de Meta trae párrafos y listas, y así se leen como en el anuncio */
.v-acc-cuerpo p { margin: 0; font-size: .8rem; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; }
.v-vered-txt { font-size: .84rem !important; line-height: 1.55; color: var(--ink) !important; }
.v-link { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-fuerte); align-self: flex-start; padding-bottom: .12rem; }
.v-link:hover { color: var(--ink); border-color: var(--ink); }
/* las flechas del visor: mismo material que el botón de cerrar, afuera de la
   caja para no taparle nada al video */
.visor-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 210;
  width: 2.6rem; height: 2.6rem; border-radius: 100px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(10px);
  display: grid; place-items: center; transition: background .15s, transform .15s;
}
.visor-nav:hover { background: rgba(255,255,255,.28); }
.visor-nav svg { width: 1.2rem; height: 1.2rem; }
/* van pegadas al borde de la caja, que mide min(1100px, 96vw) y está centrada */
.visor-nav.izq { left: calc(50% - min(550px, 48vw) - 3.6rem); }
.visor-nav.der { right: calc(50% - min(550px, 48vw) - 3.6rem); }
.visor-nav.der svg { transform: rotate(180deg); }
/* si no hay lugar afuera, se meten adentro sobre el fondo del visor */
@media (max-width: 1260px) {
  .visor-nav.izq { left: 1rem; }
  .visor-nav.der { right: 1rem; }
  .visor-nav { background: rgba(20,18,15,.45); }
}
.visor-x { position: absolute; top: 1.2rem; right: 1.2rem; z-index: 3; width: 2.2rem; height: 2.2rem;
  border-radius: 100px; border: 0; cursor: pointer; color: var(--ink);
  background: #fff; box-shadow: var(--v-sombra); transition: transform .15s; }
.visor-x:hover { transform: scale(1.08); }
@media (max-width: 900px) {
  .v-grid { grid-template-columns: 1fr; grid-template-rows: 44vh 1fr; }
  .v-cine { padding: 1rem 1rem 0; }
}
/* el bloque del prompt entra al mismo sistema de cards blancas */
.visor-caja .vp, .visor-caja .vp-armar {
  border: 0; margin: 0; padding: .95rem 1.05rem;
  background: var(--v-card); border-radius: 20px; box-shadow: var(--v-sombra);
}
.visor-caja .vp-vacio { border: 0; }
.visor-caja .vp-cab h4 { font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.visor-caja .vp-texto { background: #f4f4f6; border: 0; border-radius: 14px; max-height: 15rem; }
.visor-caja .vp-ref { border-radius: 14px; }
.visor-caja .vp-acciones .btn { border-radius: 100px; }
.visor-caja ::-webkit-scrollbar { width: 8px; }
.visor-caja ::-webkit-scrollbar-thumb { background: rgba(20,18,15,.16); border-radius: 100px; }
.visor-caja ::-webkit-scrollbar-track { background: transparent; }

/* control segmentado, en vez de pestañas subrayadas y selects nativos */
.seg-fila { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.seg {
  display: inline-flex; gap: .15rem; padding: .22rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 100px;
}
.seg a {
  padding: .4rem .85rem; border-radius: 100px; font-size: .82rem; font-weight: 500;
  color: var(--ink-3); white-space: nowrap; text-decoration: none;
  transition: background .18s, color .18s;
}
.seg a:hover { color: var(--ink); }
.seg a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.seg a b { font-family: var(--mono); font-size: .68rem; font-weight: 400; opacity: .55; margin-left: .15rem; }
.seg.chico a { padding: .34rem .7rem; font-size: .76rem; }

.btn-fino {
  border: 0; background: none; cursor: pointer; padding: .4rem .2rem;
  font-size: .78rem; color: var(--ink-3); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line-fuerte);
}
.btn-fino:hover { color: var(--ink); }
/* los pedidos de las agencias: es lo primero que conviene mirar de la barra,
   así que no va subrayado y gris como el resto sino como una pastilla llena */
.btn-fino.destacado {
  background: var(--ink); color: var(--surface); text-decoration: none;
  border-radius: 999px; padding: .3rem .7rem; font-weight: 500;
}
.btn-fino.destacado:hover { color: var(--surface); opacity: .85; }
.fila-filtros { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
/* el formato abre la fila, con un poco más de aire que lo separe del orden */
.fila-filtros #segFormato { margin-right: .3rem; }


/* los desplegables no traen la caja gris del sistema */
select {
  appearance: none; -webkit-appearance: none;
  padding: .5rem 2rem .5rem .8rem;
  border: 1px solid var(--line); border-radius: 100px;
  background: var(--surface) no-repeat right .7rem center/.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a3a09b' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  font: inherit; font-size: .84rem; color: var(--ink); cursor: pointer;
}
select:hover { border-color: var(--line-fuerte); }
select:focus { outline: none; border-color: var(--ink); }

/* ============================================================
   Buscar anuncios: una decisión por fila, etiqueta a la izquierda
   ============================================================ */
.buscar-radar {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.br-cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.br-cab h3 { margin: 0 0 .2rem; font-size: .98rem; font-weight: 650; letter-spacing: -.01em; }
.br-cab p { margin: 0; font-size: .81rem; color: var(--ink-2); max-width: 46ch; line-height: 1.45; }
.br-x {
  flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--ink-3);
}
.br-x svg { width: 1rem; height: 1rem; }
.br-x:hover { background: rgba(23,23,23,.06); color: var(--ink); }

.br-fila {
  display: grid; grid-template-columns: 9rem 1fr; gap: 1.2rem; align-items: start;
  padding: .95rem 1.3rem; border-bottom: 1px solid var(--line);
}
.br-et { font-size: .82rem; font-weight: 550; color: var(--ink); padding-top: .5rem; }
.br-ctrl { min-width: 0; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.br-nota { margin: 0; font-size: .74rem; color: var(--ink-3); line-height: 1.4; }
.br-input {
  width: 100%; max-width: 26rem; padding: .55rem .9rem;
  border: 1px solid var(--line); border-radius: 100px;
  font: inherit; font-size: .85rem; background: var(--surface); color: var(--ink);
}
.br-input:focus { outline: none; border-color: var(--ink); }
.br-input::placeholder { color: var(--ink-3); }

.br-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.3rem; border-bottom: 0;
}
.br-pie .ayuda { margin: 0; }

/* opciones: el checkbox sigue adentro, escondido */
.opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.opt {
  position: relative; display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .85rem; border: 1px solid var(--line); border-radius: 100px;
  font-size: .81rem; background: var(--surface); color: var(--ink-2);
  cursor: pointer; user-select: none;
  transition: background .16s, color .16s, border-color .16s;
}
.opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.opt:hover { border-color: var(--line-fuerte); color: var(--ink); }
.opt:has(:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.opt:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.opt-ico { display: grid; place-items: center; }
.opt-ico svg { width: .92rem; height: .92rem; display: block; }

@media (max-width: 720px) {
  .br-fila { grid-template-columns: 1fr; gap: .5rem; }
  .br-et { padding-top: 0; }
}

/* una fila que quedó de lado por otra decisión */
.br-fila.apagada .opts { opacity: .38; pointer-events: none; }
.br-fila.apagada .br-et { color: var(--ink-3); }

.rcard { cursor: pointer; }

/* ============================================================
   El prompt dentro del visor
   ============================================================ */
.visor-caja.con-prompt { max-width: 62rem; }
.visor-caja.con-prompt .visor-info { max-height: 78vh; overflow-y: auto; }

.vp { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.vp-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.vp-cab h4 { margin: 0; font-size: .86rem; font-weight: 650; }
.vp-texto {
  margin: 0; padding: .85rem 1rem; max-height: 17rem; overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--rs);
  font-family: var(--mono); font-size: .74rem; line-height: 1.6; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
}
.vp-vars { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.vp-vars span {
  padding: .2rem .5rem; border-radius: 100px; background: var(--surface-2);
  border: 1px solid var(--line); font-family: var(--mono); font-size: .64rem; color: var(--ink-2);
}
.vp-nota { margin: .6rem 0 0; font-size: .78rem; color: var(--ink-2); line-height: 1.5; }
.vp-vacio { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-3); }

.vp-armar { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.vp-dur { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.vp-dur label { font-size: .8rem; font-weight: 550; }
.vp-dur input[type="range"] { flex: 1; min-width: 9rem; accent-color: var(--ink); }
.vp-dur output { font-family: var(--mono); font-size: .8rem; min-width: 2.4rem; }
.vp-nativa { font-size: .72rem; color: var(--ink-3); }

/* Grilla y no flex-wrap: con flex, el largo del texto decide el ancho de cada
   campo y las filas quedan disparejas, con uno solo colgando abajo. En grilla
   todos miden lo mismo y las alturas se emparejan solas. */
.vp-refs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .5rem; margin-top: .8rem;
}
.vp-refs-t { grid-column: 1 / -1; font-size: .76rem; color: var(--ink-2); }
/* ya no es un campo para subir: es la lista de lo que hay que llevar */
.vp-ref {
  display: flex; flex-direction: column; gap: .12rem;
  padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: var(--rs);
  background: var(--surface-2);
}
.vp-ref b { font-size: .76rem; font-weight: 600; }
.vp-ref b code {
  font-family: var(--mono); font-size: .68rem; color: var(--oro);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px; padding: .02rem .25rem; margin-right: .15rem;
}
.vp-ref em { font-size: .68rem; color: var(--ink-3); font-style: normal; line-height: 1.4; }

.vp-acciones { display: flex; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }
.vp-estado { margin: .6rem 0 0; font-size: .76rem; color: var(--ink-2); min-height: 1rem; }
.vp-estado.mal { color: var(--alerta); }
.vp-costo { align-self: center; font-size: .74rem; color: var(--ink-3); font-family: var(--mono); }

/* ============================================================
   La máquina buscando
   ============================================================ */
.maquina {
  display: grid; grid-template-columns: 11.5rem 1fr; gap: 1.6rem;
  padding: 1.3rem 1.4rem 1.5rem; align-items: center;
}
.mq-radar {
  position: relative; width: 10.5rem; height: 10.5rem; border-radius: 50%;
  background:
    radial-gradient(circle, rgba(185,139,46,.06), transparent 65%),
    radial-gradient(circle, rgba(23,23,23,.03), transparent 75%);
}
.mq-anillo { position: absolute; inset: 0; border: 1px solid rgba(23,23,23,.15); border-radius: 50%; }
.mq-anillo.a2 { inset: 17%; opacity: .75; }
.mq-anillo.a3 { inset: 34%; opacity: .5; }
.mq-cruz {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(23,23,23,.07), rgba(23,23,23,.07)) 50% 0/1px 100% no-repeat,
    linear-gradient(rgba(23,23,23,.07), rgba(23,23,23,.07)) 0 50%/100% 1px no-repeat;
}
.mq-barrida {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(185,139,46,.4), rgba(185,139,46,.08) 55deg, transparent 80deg);
  animation: mq-girar 2.8s linear infinite;
}
@keyframes mq-girar { to { transform: rotate(360deg); } }
.mq-centro {
  position: absolute; left: 50%; top: 50%; width: .5rem; height: .5rem; margin: -.25rem;
  border-radius: 50%; background: var(--ink);
}
.mq-blip {
  position: absolute; width: .42rem; height: .42rem; margin: -.21rem;
  border-radius: 50%; background: var(--oro);
  box-shadow: 0 0 0 3px rgba(185,139,46,.16);
  animation: mq-pop .5s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes mq-pop { from { transform: scale(0); } 60% { transform: scale(1.7); } to { transform: scale(1); } }

.mq-datos { min-width: 0; }

/* El orden de lectura del bloque, de arriba abajo y de más a menos peso:
   dónde va la búsqueda, qué está pasando ahora, qué significa ese paso,
   cuánto falta, cuántos van, con qué términos, y el detalle en la bitácora.
   Un solo texto grande por vez, nada en columnas angostas. */
.mq-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-bottom: .55rem;
}
.mq-etapa {
  margin: 0; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--oro); min-width: 0;
}
/* cancelando deja de ser el rótulo de un paso y pasa a ser un aviso */
.mq-etapa.cortando { color: var(--alerta); }

/* el renglón que manda: el término y el mercado que se están mirando ahora */
.mq-titulo {
  margin: 0 0 .3rem; font-size: 1.35rem; font-weight: 650; letter-spacing: -.028em;
  line-height: 1.2; text-wrap: balance;
}
/* y debajo, la explicación del paso en curso. Solo la de ese paso */
.mq-que { margin: 0; font-size: .82rem; color: var(--ink-2); line-height: 1.45; }

.mq-nums { display: flex; gap: 2.4rem; flex-wrap: wrap; }
.mq-num b {
  display: block; font-size: 1.9rem; font-weight: 750; letter-spacing: -.04em;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.mq-num span { font-size: .72rem; color: var(--ink-3); }
.mq-barra { height: 4px; background: var(--surface-2); border-radius: 4px; margin: 1.1rem 0 1rem; overflow: hidden; }
.mq-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ink), var(--oro)); border-radius: 4px; transition: width .7s ease; }
/* la bitácora bajó de seis renglones a tres: está para el que quiere seguir
   el detalle, no para competir con el paso en curso */
.mq-feed {
  font-family: var(--mono); font-size: .66rem; color: var(--ink-3);
  display: flex; flex-direction: column; gap: .15rem; min-height: 2.6rem; justify-content: flex-end;
  margin-top: .7rem;
}
.mq-feed p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-feed p::before { content: '· '; color: var(--oro); }
.mq-nota { margin: 0; font-size: .72rem; color: var(--ink-3); }
/* la nota y el botón de cancelar comparten renglón, con el botón contra el
   borde derecho. En pantalla angosta se apilan y el botón queda entero, que
   es el que se toca con el pulgar */
.mq-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; margin-top: .8rem; flex-wrap: wrap;
}
.mq-cancelar[hidden] { display: none; }

/* la búsqueda te sigue a donde vayas */
.pill-barrido {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 90;
  display: inline-flex; align-items: center; gap: .55rem;
  border: 0; background: var(--ink); color: #fff;
  padding: .55rem 1.1rem; border-radius: 100px;
  font: 500 .78rem var(--sans); cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  animation: pill-entra .3s ease both;
}
.pill-barrido b { font-variant-numeric: tabular-nums; }
.pill-barrido:hover { transform: translateX(-50%) translateY(-1px); }
@keyframes pill-entra { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } }
.pb-punto { width: .5rem; height: .5rem; border-radius: 50%; background: var(--oro); animation: pb-late 1.3s ease infinite; }
@keyframes pb-late { 50% { opacity: .25; } }

@media (max-width: 720px) {
  .maquina { grid-template-columns: 1fr; }
  .mq-radar { margin: 0 auto; }
}

/* el resto que el filtro de señal dura deja afuera: se muestra para que el
   número del botón no parezca un recorte arbitrario */
.btn-nota { opacity: .55; font-weight: 400; }

/* ---------- el segundo eje: el producto detrás del anuncio ----------
   Un catálogo sin idea puede ser una pieza pobre y una señal de mercado
   excelente. Va en su propia tarjeta para que nadie lo lea como si fuera
   una nota más del eje creativo. */
.v-producto { display: flex; flex-direction: column; gap: .5rem; }
.v-prod-cab { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.v-prod-cab b { font-family: var(--mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.v-prod-que { font-size: .92rem; font-weight: 600; margin: 0; }
.v-prod-riel { height: 6px; border-radius: 100px; background: rgba(17,17,20,.08); overflow: hidden; }
.v-prod-riel i { display: block; height: 100%; border-radius: 100px; }
.v-prod-pie { font-size: .74rem; color: var(--ink-3); margin: 0; line-height: 1.4; }

/* ---------- Radar: la pantalla de buscar anuncios ----------
   Nace vacía por diseño, así que el peso visual lo lleva el buscador, el
   barrido animado del fondo y la promesa de lo que va a traer. */
.radar-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 2rem;
  padding: 3.6rem 2.6rem 2.8rem; text-align: center; box-shadow: var(--sombra);
}
/* el ancho del campo manda: las opciones que se abren debajo se cuelgan de la
   misma medida para que las dos cajas compartan borde izquierdo y derecho */
.radar-frente { position: relative; z-index: 1; --ancho-busca: 40rem; }

/* el barrido: anillos concéntricos y una aguja que da vueltas. Va detrás de
   todo, tenue, y se apaga solo si el sistema pide menos movimiento */
.radar-onda {
  position: absolute; left: 50%; top: 42%; translate: -50% -50%;
  width: min(46rem, 130%); aspect-ratio: 1; pointer-events: none; z-index: 0;
  mask-image: radial-gradient(circle at center, #000 0 48%, transparent 76%);
}
.radar-onda span {
  position: absolute; inset: 0; margin: auto; border-radius: 50%;
  border: 1px solid rgba(23,23,23,.09);
}
.radar-onda span:nth-child(1) { width: 26%; height: 26%; }
.radar-onda span:nth-child(2) { width: 48%; height: 48%; }
.radar-onda span:nth-child(3) { width: 72%; height: 72%; }
.radar-onda span:nth-child(4) { width: 96%; height: 96%; }
.ro-eje {
  position: absolute; inset: 0; margin: auto; width: 96%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(23,23,23,.08) 30%, rgba(23,23,23,.08) 70%, transparent);
}
.ro-barrido {
  position: absolute; inset: 0; border-radius: 50%;
  /* la aguja se desvanece hacia afuera además de hacia atrás, si no el cono
     llega al borde del panel y se lee como una mancha en la esquina */
  background: conic-gradient(from 0deg,
    rgba(185,139,46,.22) 0deg, rgba(185,139,46,.07) 22deg, transparent 55deg, transparent 360deg);
  mask-image: radial-gradient(circle at center, #000 0 42%, rgba(0,0,0,.35) 68%, transparent 88%);
  animation: radar-gira 6.5s linear infinite;
}
@keyframes radar-gira { to { rotate: 360deg; } }
/* los pulsos que salen del centro, uno detrás del otro */
.radar-onda span:nth-child(2) { animation: radar-pulso 5.5s ease-out infinite; }
.radar-onda span:nth-child(3) { animation: radar-pulso 5.5s ease-out 1.5s infinite; }
.radar-onda span:nth-child(4) { animation: radar-pulso 5.5s ease-out 3s infinite; }
@keyframes radar-pulso {
  0% { opacity: 0; scale: .55; }
  22% { opacity: 1; }
  100% { opacity: 0; scale: 1.12; }
}
@media (prefers-reduced-motion: reduce) {
  .ro-barrido { animation: none; }
  .radar-onda span { animation: none !important; }
}

.radar-eyebrow {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--oro);
}
.radar-hero h1 { font-size: 2.1rem; margin: .5rem 0 .6rem; text-wrap: balance; }
.radar-frente > p { max-width: 34rem; margin: 0 auto; color: var(--ink-2); line-height: 1.55; }

.radar-busca { display: flex; gap: .6rem; max-width: var(--ancho-busca); margin: 2rem auto 0; }
.radar-busca input {
  flex: 1; min-width: 0; padding: .95rem 1.2rem; border-radius: 100px;
  border: 1px solid var(--line-fuerte); background: var(--surface); font-size: 1rem;
}
.radar-busca input:focus { outline: 2px solid var(--oro); outline-offset: 1px; }
.radar-busca .btn { border-radius: 100px; padding-inline: 1.6rem; }

.radar-como {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.4rem; margin-top: 2.8rem; text-align: left;
}
.rc-paso { display: flex; gap: .8rem; align-items: flex-start; }
.rc-paso b {
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--surface);
  font-family: var(--mono); font-size: .78rem;
}
.rc-paso span { font-size: .86rem; color: var(--ink-2); line-height: 1.5; }

/* Lo que el buscador entendió, adentro de la máquina mientras busca y arriba
   de los resultados cuando termina. Sin esto una búsqueda que trae poco no se
   puede diagnosticar: no se sabe qué preguntó. */
.plan { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.plan-que { margin: 0; font-size: .9rem; color: var(--ink-2); }
.plan-nota { color: var(--ink-3); font-size: .8rem; }
.plan-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
/* .chip ya existe como etiqueta genérica en otras partes del panel, en mono y
   mayúsculas. Acá el texto es el término tal cual se escribe, así que además
   del tamaño se pisan esas tres propiedades para no heredarlas. */
.plan .chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .35rem .3rem .7rem; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--line); font-size: .82rem;
  font-family: inherit; text-transform: none; letter-spacing: normal; color: var(--ink);
}
.plan .chip em {
  font-style: normal; font-family: var(--mono); font-size: .68rem;
  color: var(--ink-3); text-transform: uppercase;
}
/* el conteo va aparte del idioma: si los pisara el mismo elemento, nunca se
   ve por qué el término dice "sourdough loaf" y cuántas piezas trajo a la
   vez. Vacío hasta que hay un número real, así antes de que termine la
   búsqueda el chip no miente mostrando un cero que todavía no es tal */
.plan .chip-n { font-style: normal; font-family: var(--mono); font-size: .68rem; color: var(--ink-3); }
.plan .chip-n:empty { display: none; }
/* en cero se nota por dos lados, no solo por el número: el fondo del chip
   cambia y el conteo pasa a un color de alerta */
.plan .chip.vacio { background: var(--surface-2); border-color: transparent; }
.plan .chip.vacio .chip-n { color: var(--alerta); font-weight: 700; }
.plan .chip-x {
  border: 0; background: none; color: var(--ink-3); line-height: 1;
  padding: .1rem .3rem; border-radius: 100px; font-size: .95rem;
}
.plan .chip-x:hover { color: var(--ink); background: rgba(23,23,23,.06); }

/* la vitrina necesita aire: pegada al panel de arriba se leía como parte de él */
.radar-vitrina { margin-top: 2.4rem; }
.rv-cab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.rv-cab h2 { font-size: 1.15rem; margin: 0; }

@media (max-width: 700px) {
  .radar-hero { padding: 2.4rem 1.4rem 1.8rem; }
  .radar-hero h1 { font-size: 1.6rem; }
  .radar-busca { flex-direction: column; }
  .radar-onda { width: 150%; }
}


/* ---------- las opciones de la búsqueda ----------
   Aparecen recién cuando hay algo escrito. Antes de eso son ruido, y después
   son la diferencia entre traer lo que sirve y quemar diez minutos. */
/* Van en una bandeja propia, con el mismo ancho que el buscador de arriba.
   Sueltas sobre el blanco del hero se leían como cinco rótulos apilados en el
   medio de la nada, y encima más anchas que el campo que las abre.

   Adentro, dos grupos de filas: dónde se busca y qué se trae. Lo que tiene
   dos o tres opciones se toca en el lugar; lo que tiene trece vive detrás de
   un menú y la fila muestra en qué quedó. */
.radar-opts {
  width: 100%; max-width: var(--ancho-busca); margin: 1.6rem auto 0;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 1.5rem; padding: 1.3rem;
  display: flex; flex-direction: column; gap: 1.5rem;
  animation: opts-entra .3s cubic-bezier(.32,.72,0,1);
}
@keyframes opts-entra { from { opacity: 0; translate: 0 -8px; scale: .99; } }
/* el hero centra todo, y acá adentro nada va centrado: los rótulos y los
   grupos se alinean a la izquierda o se leen como pies de foto del bloque
   anterior en vez de como el título del que viene */
.radar-opts, .radar-opts * { text-align: left; }

.og { display: flex; flex-direction: column; gap: .45rem; }
.og-t {
  font-family: var(--mono); font-size: .68rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  padding-left: .95rem;
}
.og-caja {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 1.1rem; overflow: hidden;
}
/* el pie explica el grupo entero, no una fila suelta: el texto largo adentro
   de la lista rompía el ritmo de las filas */
.og-pie {
  margin: .15rem 0 0; padding: 0 .95rem;
  font-size: .78rem; letter-spacing: .002em; color: var(--ink-3); line-height: 1.5;
}

/* una decisión por fila: qué es a la izquierda, en qué quedó a la derecha.
   3rem de alto para que el área tocable pase los 44px de un dedo */
.fila-op {
  display: flex; align-items: center; gap: 1rem; width: 100%;
  min-height: 3rem; padding: .55rem .95rem;
  background: none; border: 0; color: inherit; font: inherit; position: relative;
}
/* el separador arranca donde arranca el texto, no en el borde: así se lee
   como una lista y no como celdas sueltas */
.fila-op + .fila-op::before {
  content: ''; position: absolute; left: .95rem; right: 0; top: 0;
  height: 1px; background: var(--line);
}
.fila-et { font-size: .92rem; font-weight: 500; flex: none; }
.fila-btn { cursor: pointer; text-align: left; transition: background .12s ease; }
.fila-btn:hover { background: rgba(23,23,23,.028); }
/* la respuesta va en el apretón, no cuando se suelta */
.fila-btn:active { background: rgba(23,23,23,.06); }
.fila-btn:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }
.fila-val {
  margin-left: auto; color: var(--ink); font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* el valor por defecto se dice en gris: sirve saber que nadie lo tocó */
.fila-val.es-defecto { color: var(--ink-3); }
.fila-chev { width: .7rem; height: .7rem; flex: none; color: var(--ink-3); }

/* los segmentos se van contra la derecha, en línea con los valores de las
   otras filas, y miden lo que miden sus opciones */
.fila-op .seg { margin-left: auto; flex-wrap: wrap; row-gap: .15rem; }
/* el deslizador de cantidad: el número va a la derecha, con ancho fijo para
   que no salte el layout entre 20 y 150 */
.ro-rango { display: flex; align-items: center; gap: .9rem; flex: 1; margin-left: auto; }
.ro-rango input { flex: 1; min-width: 0; accent-color: var(--ink); }
.ro-rango b {
  font-family: var(--mono); font-size: .95rem; min-width: 2.4rem;
  font-variant-numeric: tabular-nums; text-align: right;
}
.ro-lanzar {
  width: 100%; border-radius: 100px; padding: .85rem; font-size: .95rem;
  text-align: center; transition: transform .12s ease;
}
.ro-lanzar:active { transform: scale(.985); }

/* ---------- el menú de una fila ----------
   Capa superior nativa, así que no lo recorta el overflow del hero ni pelea
   con el z-index de nadie. Material translúcido para que se lea como una capa
   flotando encima y no como otro bloque más de la página. */
.pop {
  position: fixed; inset: auto; margin: 0; padding: 0; border: 0;
  width: min(21rem, calc(100vw - 2rem));
  max-height: min(26rem, 70vh); overflow: hidden;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--line); border-radius: 1.1rem;
  box-shadow: 0 26px 60px -22px rgba(20,18,15,.42), 0 2px 10px rgba(20,18,15,.06);
  color: var(--ink);
}
.pop:popover-open { display: flex; }
.pop-chico { width: min(14rem, calc(100vw - 2rem)); }
/* materializa: entra creciendo desde el control que lo abrió, con el desenfoque
   apareciendo junto con la escala, no un fundido plano */
@media (prefers-reduced-motion: no-preference) {
  .pop {
    transition: opacity .18s ease, scale .26s cubic-bezier(.32,.72,0,1),
                translate .26s cubic-bezier(.32,.72,0,1),
                overlay .26s allow-discrete, display .26s allow-discrete;
    opacity: 0; scale: .96; translate: 0 -.35rem;
  }
  .pop:popover-open { opacity: 1; scale: 1; translate: 0; }
  @starting-style { .pop:popover-open { opacity: 0; scale: .96; translate: 0 -.35rem; } }
}
@media (prefers-reduced-motion: reduce) {
  .pop { transition: opacity .12s linear, overlay .12s allow-discrete, display .12s allow-discrete; opacity: 0; }
  .pop:popover-open { opacity: 1; }
  @starting-style { .pop:popover-open { opacity: 0; } }
  .radar-opts { animation: none; }
}

/* el buscador y el pie flotan sobre la lista que scrollea, así que llevan su
   propio material: sin él se leía la lista pasando por debajo del texto */
.pop-busca {
  display: flex; align-items: center; gap: .5rem; flex: none;
  padding: .6rem .85rem; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.pop-busca svg { width: .95rem; height: .95rem; flex: none; color: var(--ink-3); }
.pop-busca input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: .9rem; }
.pop-lista { overflow-y: auto; overscroll-behavior: contain; padding: .3rem; flex: 1; }
.pop-grupo {
  margin: .5rem 0 .15rem; padding: 0 .55rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.pop-op {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  min-height: 2.5rem; padding: .45rem .55rem; border: 0; border-radius: .7rem;
  background: none; color: inherit; font: inherit; font-size: .9rem;
  text-align: left; cursor: pointer; transition: background .12s ease;
}
.pop-op:hover:not([disabled]) { background: rgba(23,23,23,.05); }
.pop-op:active:not([disabled]) { background: rgba(23,23,23,.09); }
.pop-op:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }
.pop-op[disabled] { opacity: .38; cursor: default; }
.pop-tx { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pop-tx em { font-style: normal; font-size: .74rem; color: var(--ink-3); line-height: 1.35; }
.pop-ok { width: 1rem; height: 1rem; flex: none; margin-left: auto; opacity: 0; }
.pop-op[aria-selected="true"] .pop-ok { opacity: 1; }
.pop-todos { align-items: flex-start; padding-top: .55rem; padding-bottom: .55rem; }
.pop-todos .pop-ok { margin-top: .15rem; }
.pop-vacio { margin: .6rem .55rem; font-size: .85rem; color: var(--ink-3); }
.pop-pie {
  flex: none; margin: 0; padding: .55rem .85rem;
  border-top: 1px solid var(--line); font-size: .74rem;
  letter-spacing: .002em; color: var(--ink-3); line-height: 1.4;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

/* sin transparencia: material sólido, mismo peso visual */
@media (prefers-reduced-transparency: reduce) {
  .pop, .pop-busca, .pop-pie {
    background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .pop, .pop-busca, .pop-pie { background: var(--surface); backdrop-filter: none; }
  .pop { border-color: var(--ink); }
  .fila-op + .fila-op::before, .og-caja { border-color: var(--line-fuerte); }
  .fila-val, .og-pie, .pop-pie { color: var(--ink-2); }
}

@media (max-width: 700px) {
  .radar-opts { padding: 1rem; gap: 1.2rem; }
  /* en pantalla angosta el control baja a su propia línea, con el rótulo
     ocupando la de arriba. Las filas con menú siguen en una sola línea */
  .fila-op { flex-wrap: wrap; gap: .5rem .8rem; }
  .fila-op:not(.fila-btn) > .fila-et { flex-basis: 100%; }
  .fila-op .seg { margin-left: 0; }
  .ro-rango { margin-left: 0; flex-basis: 100%; }

  /* En el teléfono el menú deja de colgar de la fila y se apoya abajo, cerca
     del pulgar. Colgando arriba quedaba a media pantalla del dedo y tapaba
     justo la fila que se estaba tocando. Pisa lo que calcula el anclaje. */
  .pop, .pop-chico {
    left: .75rem !important; right: .75rem;
    top: auto !important; bottom: max(.75rem, env(safe-area-inset-bottom));
    width: auto; max-height: 62vh;
    transform-origin: bottom center !important;
  }
}
/* y entra desde abajo, que es de donde viene */
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .pop { translate: 0 1.25rem; scale: .99; }
  .pop:popover-open { translate: 0; scale: 1; }
  @starting-style { .pop:popover-open { translate: 0 1.25rem; scale: .99; } }
}

/* ---------- el historial ----------
   Una fila por término y las piezas hacia el costado. Es la forma de tener
   veinte búsquedas a la vista sin veinte pantallas de scroll vertical. */
.hist { margin-top: 2.4rem; display: flex; flex-direction: column; gap: 2rem; }
.hist-titulo { font-size: 1.15rem; margin: 0; }
.hf-cab { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .7rem; }
.hf-cab h3 { font-size: 1rem; margin: 0; text-transform: capitalize; }
.hf-n { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }
.hf-cab .v-link { margin-left: auto; font-size: .8rem; }

.hf-tira {
  display: flex; gap: .7rem; overflow-x: auto; overflow-y: hidden;
  padding-bottom: .5rem; scroll-snap-type: x proximity;
  /* el scroll horizontal se nota solo al pasar por encima */
  scrollbar-width: thin; scrollbar-color: var(--line-fuerte) transparent;
}
.hf-tira::-webkit-scrollbar { height: 6px; }
.hf-tira::-webkit-scrollbar-thumb { background: var(--line); border-radius: 100px; }
.hf-tira:hover::-webkit-scrollbar-thumb { background: var(--line-fuerte); }

.hcard {
  position: relative; flex: none; width: 8.6rem; aspect-ratio: 9/14;
  border-radius: 14px; overflow: hidden; background: var(--ink);
  scroll-snap-align: start; text-decoration: none; color: #fff;
  box-shadow: var(--sombra-card); transition: transform .16s;
}
.hcard:hover { transform: translateY(-2px); }
.hcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* sin anillo dorado, igual que en la grilla de la Biblioteca */
.hc-dias {
  position: absolute; top: .4rem; left: .4rem; font-family: var(--mono); font-size: .62rem;
  background: rgba(0,0,0,.62); backdrop-filter: blur(6px); padding: .1rem .35rem; border-radius: 6px;
}
.hc-pt {
  position: absolute; top: .4rem; right: .4rem; font-family: var(--mono); font-size: .62rem;
  font-weight: 700; color: #fff; padding: .1rem .35rem; border-radius: 6px;
}
.hc-pie {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .5rem .45rem;
  font-size: .7rem; line-height: 1.25;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hf-mas {
  flex: none; width: 5.6rem; aspect-ratio: 9/14; border-radius: 14px;
  border: 1px dashed var(--line-fuerte); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .15rem; text-decoration: none;
  color: var(--ink-2); transition: border-color .16s, color .16s;
}
.hf-mas:hover { border-color: var(--ink); color: var(--ink); }
.hf-mas span { font-family: var(--mono); font-size: .95rem; }
.hf-mas em { font-style: normal; font-size: .68rem; color: var(--ink-3); }

@media (max-width: 700px) {
  .hcard { width: 7.2rem; }
}

/* Un término que no se llegó a buscar no es lo mismo que uno que buscó y no
   trajo nada. Se atenúa apenas, sin la marca de vacío, porque no falló */
.chip.sin-usar { opacity: .5; }
.chip.sin-usar .chip-n { display: none; }

/* ---------- las marcas de los cuatro pasos ----------
   Antes cada paso traía su título y su explicación, los cuatro a la vez, en
   cuatro columnas angostas de letra diminuta. Ahora el nombre y la explicación
   del paso en curso viven arriba (.mq-etapa y .mq-que) y esto queda como lo
   que es: cuatro marcas que dicen por dónde va la cosa, sin texto. El nombre
   de cada una sigue disponible al pasar el mouse y para quien lee la pantalla
   con un lector. */
.mq-marcas { display: flex; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.mq-marcas li { display: block; }
.mq-marcas li b {
  display: grid; place-items: center;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-3);
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  transition: background .3s, color .3s;
}
.mq-marcas li b::after { content: attr(data-n); }
.mq-marcas li.hecho b { background: var(--ok); color: #fff; }
.mq-marcas li.hecho b::after { content: '✓'; }
.mq-marcas li.ahora b {
  background: var(--ink); color: var(--surface);
  box-shadow: 0 0 0 0 rgba(185,139,46,.5); animation: mq-late 1.8s ease-out infinite;
}
@keyframes mq-late { 70% { box-shadow: 0 0 0 .5rem rgba(185,139,46,0); } }

/* el nombre del paso viaja en la marca para el lector de pantalla, sin
   ocupar lugar en la pantalla de nadie */
.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* el sistema pide menos movimiento: se apagan la aguja del radar, los puntos
   que aparecen, el latido de la marca y el deslizamiento de la barra */
@media (prefers-reduced-motion: reduce) {
  .mq-barrida { animation: none; }
  .mq-blip { animation: none; }
  .mq-marcas li.ahora b { animation: none; }
  .mq-barra i { transition: none; }
  .pb-punto { animation: none; }
}

/* los términos del plan, adentro de la máquina: son parte de contar qué se
   está haciendo, no una caja aparte */
.mq-plan:empty { display: none; }
.mq-plan { margin: .9rem 0 .2rem; }
.mq-plan .plan { gap: .45rem; margin-bottom: 0; }
.mq-plan .plan-que { font-size: .78rem; }
.mq-plan .plan .chip { font-size: .74rem; padding: .18rem .55rem; }

/* La máquina dentro del buscador. Comparte el ancho del campo, como las
   opciones, así el bloque de arriba se lee siempre igual de ancho. */
.radar-frente .maquina {
  width: 100%; max-width: var(--ancho-busca); margin: 1.6rem auto 0;
  grid-template-columns: 9.5rem 1fr; gap: 1.2rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 1.5rem; text-align: left;
  animation: opts-entra .3s cubic-bezier(.32,.72,0,1);
}
.radar-frente .maquina * { text-align: left; }
.radar-frente .mq-radar { width: 9rem; height: 9rem; }

/* ---------- lo que trajo la búsqueda ----------
   Las mismas tarjetas de la Biblioteca, abajo del encabezado contraído. */
.res { margin-top: 2.4rem; }
.res-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.res-cab h2 { font-size: 1.3rem; }
.res-cab p { color: var(--ink-2); margin: .3rem 0 0; font-size: .86rem; }
.res-cab .btn { text-decoration: none; }
.res .plan { margin-bottom: 1.2rem; }

/* el aviso de curaduría pendiente: solo aparece cuando la búsqueda trajo más
   candidatos de los que se curan solos, o cuando se cortó por presupuesto */
.aviso-curar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--rs); padding: .9rem 1.1rem; margin-bottom: 1.2rem;
}
.aviso-curar p { margin: 0; font-size: .88rem; color: var(--ink-2); }
.aviso-curar b { color: var(--ink); }

@media (max-width: 720px) {
  .radar-frente .maquina { grid-template-columns: 1fr; }
  /* en angosto el rótulo y las marcas se apilan, y el título baja lo justo
     para no comerse tres renglones */
  .mq-cab { align-items: center; gap: .5rem; }
  .mq-titulo { font-size: 1.15rem; }
  .mq-nums { gap: 1.6rem; }
  .mq-num b { font-size: 1.7rem; }
}

/* ---------- llevar el anuncio a otro producto ---------- */
/* dos columnas y no tres: la pregunta que escribe el redactor es una frase
   entera y en tres columnas se corta a la mitad */
.ad-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .75rem; }
.ad-campos .field label { text-transform: none; font-family: var(--sans); font-size: .82rem; letter-spacing: -.01em; color: var(--ink); margin-bottom: .35rem; }
.ad-ancho { grid-column: 1 / -1; }
.ad-acciones { margin-top: .9rem; }
.ad-acciones .btn { width: 100%; justify-content: center; }
.panel-tinte .field-caja { background: #fff; border-color: rgba(23,23,23,.08); }

/* ---------- para cuál de tus productos ----------
   Una sola cosa que elegir, agrupada por marca. Reemplaza al formulario que
   preguntaba una cosa por cada variable del anuncio. */
.ad-elegir { display: flex; flex-direction: column; gap: .45rem; }
.ad-elegir label { font-size: .82rem; font-weight: 600; letter-spacing: -.01em; }
.ad-elegir select {
  width: 100%; border: 1px solid rgba(23,23,23,.12); border-radius: var(--rs);
  background: #fff; padding: .8rem .9rem; font-size: .95rem; outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c6a67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.1rem;
  padding-right: 2.6rem;
}
.ad-elegir select:focus { border-color: var(--ink); }
.ad-elegir .panel-nota { margin-top: .15rem; }

/* ============================================================
   Las marcas de la agencia
   ============================================================
   Dos pantallas con la misma información y distinto propósito. El alta va de a
   una pregunta por vez, con la pregunta grande y una sola cosa que tocar: es lo
   que hace que se complete en vez de postergarse. La lista es la de después, y
   ahí lo que importa es ver de un vistazo qué hay cargado y qué falta. */

.marca-entrada {
  max-width: 32rem; margin: 4rem auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  animation: marca-entra .32s cubic-bezier(.32,.72,0,1);
}
.marca-entrada h1 { font-size: 2rem; letter-spacing: -.04em; }
.marca-entrada p { color: var(--ink-2); font-size: 1rem; line-height: 1.55; margin: 0 0 .9rem; }
.marca-tarda { font-size: .78rem; color: var(--ink-3); margin-top: .6rem; }

/* el botón que empieza y el que sigue: el mismo, así el gesto se repite */
.paso-seguir { padding: .75rem 2.2rem; font-size: .95rem; }

@keyframes marca-entra { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }

/* ---------- una pregunta por pantalla ---------- */
.paso { max-width: 34rem; margin: 0 auto; padding-top: 3.5rem; }
.paso-barra { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.paso-barra span { display: block; height: 100%; background: var(--ink); border-radius: 3px; transition: width .35s cubic-bezier(.32,.72,0,1); }
.paso-caja {
  margin-top: 3rem; display: flex; flex-direction: column; align-items: flex-start;
  animation: marca-entra .28s cubic-bezier(.32,.72,0,1);
}
.paso-caja h1 { font-size: 2rem; letter-spacing: -.04em; margin-bottom: .5rem; }
.paso-ayuda { color: var(--ink-2); font-size: .95rem; line-height: 1.55; margin: 0; }
/* sin caja: una línea abajo y el texto grande, para que el campo se lea como
   la continuación de la pregunta y no como un formulario */
#pasoValor {
  width: 100%; margin-top: 2rem; border: 0; border-bottom: 1px solid var(--line-fuerte);
  background: none; outline: none; padding: .6rem 0; font-size: 1.3rem; letter-spacing: -.02em;
  transition: border-color .18s;
}
#pasoValor::placeholder { color: var(--ink-3); }
#pasoValor:focus { border-bottom-color: var(--ink); }
.paso-acts { display: flex; align-items: center; gap: .8rem; margin-top: 2rem; }
.paso-atras {
  border: 0; background: none; color: var(--ink-3); font-size: .82rem; padding: .4rem 0; margin-top: 1.6rem;
}
.paso-atras:hover { color: var(--ink); }

/* ---------- lo que ya está cargado ---------- */
.marca-lista { display: grid; gap: 1rem; }
.marca {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--rp);
  padding: 1.3rem 1.4rem;
}
.marca-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.marca-txt { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.marca-cab h3 { font-size: 1.2rem; }
.marca-txt span { font-size: .82rem; color: var(--ink-3); }
.marca-acts { display: flex; align-items: center; gap: .4rem; flex: none; flex-wrap: wrap; }
.marca-borrar:hover { color: var(--alerta); border-color: rgba(194,65,12,.35); }

.marca-prods { display: grid; gap: .5rem; margin: 1.1rem 0 .9rem; }
.marca-prod {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--surface-2); border-radius: var(--r); padding: .8rem 1rem;
}
.marca-prod b { font-size: .95rem; letter-spacing: -.02em; }
/* el dato del que salen los rótulos, a la vista y sin abrir nada */
.marca-tiempo {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .22rem .6rem;
  white-space: nowrap;
}
.marca-falta { font-size: .78rem; color: var(--alerta); }
.marca-sin { font-size: .84rem; color: var(--ink-3); margin: 1rem 0 .9rem; }

@media (max-width: 720px) {
  .paso { padding-top: 2rem; }
  .paso-caja h1 { font-size: 1.6rem; }
  .marca-prod { align-items: flex-start; }
}

/* ============================================================
   Lo que ya adaptaste
   ============================================================
   Iba pegado a la grilla de anuncios, sin nada que separara una cosa de la
   otra, y era una tabla que no se podía abrir. Ahora tiene aire propio y cada
   fila devuelve el prompt que la agencia ya pagó. */
.sec-aparte { margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.sec-nota { margin: -.5rem 0 1rem; font-size: .86rem; color: var(--ink-2); }

.hechos { display: grid; gap: .5rem; }
.hecho {
  display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: .7rem .9rem; transition: border-color .15s, box-shadow .15s;
}
.hecho:hover { border-color: var(--line-fuerte); box-shadow: var(--sombra-card); }
.hecho-mini {
  width: 2.6rem; height: 3.4rem; flex: none; border-radius: 8px; object-fit: cover;
  background: var(--surface-2); border: 1px solid var(--line);
}
.hecho-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.hecho-txt b { font-size: .95rem; letter-spacing: -.02em; }
.hecho-txt span { font-size: .78rem; color: var(--ink-3); }
.hecho-ver { flex: none; font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
.hecho:hover .hecho-ver { color: var(--ink); }

@media (max-width: 720px) {
  .hecho-ver { display: none; }
}

/* ============================================================
   Tu equipo · el multiusuario del plan Agencia
   ============================================================
   Una lista y nada más. Lo único que el dueño viene a hacer acá es ver quién
   está adentro, sumar a alguien o sacarlo, y las tres cosas se resuelven de un
   vistazo si la pantalla no tiene nada más. */
.eq-marco { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rp); padding: 1.3rem 1.4rem; }
.eq-cuenta { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.eq-cuenta b { font-family: var(--mono); font-size: 1.5rem; letter-spacing: -.03em; }
.eq-cuenta span { font-size: .84rem; color: var(--ink-3); }

.eq-lista { display: grid; gap: .5rem; margin-top: 1rem; }
.eq-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--surface-2); border-radius: var(--r); padding: .8rem 1rem;
}
/* la invitación sin contestar es un lugar reservado, no una persona: se ve que
   está y se ve que todavía no llegó */
.eq-espera { background: transparent; border: 1px dashed var(--line); }
.eq-quien { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.eq-ini {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line);
  font-family: var(--mono); font-size: .82rem; letter-spacing: -.02em;
}
.eq-ini-vacia { color: var(--ink-3); }
.eq-txt { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.eq-txt b { font-size: .95rem; letter-spacing: -.02em; }
.eq-txt span { font-size: .78rem; color: var(--ink-3); }
.eq-acts { display: flex; align-items: center; gap: .4rem; flex: none; flex-wrap: wrap; }
.eq-tag {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .22rem .6rem;
  white-space: nowrap;
}

/* ---------- entrar con Google ---------- */
.entrada-google { display: flex; flex-direction: column; gap: .7rem; margin-top: .3rem; }
.entrada-o {
  text-align: center; font-size: .78rem; color: var(--ink-3); position: relative;
}
.entrada-o::before, .entrada-o::after {
  content: ''; position: absolute; top: 50%; width: calc(50% - 1.1rem); height: 1px; background: var(--line);
}
.entrada-o::before { left: 0; }
.entrada-o::after { right: 0; }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-fuerte); font-weight: 500;
}
.btn-google:hover { border-color: var(--ink); background: var(--surface-2); }

/* ---------- ver como agencia ---------- */
.ver-agencia {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .5rem .7rem; border: 0; border-radius: var(--rs);
  background: none; color: var(--ink-2); font: inherit; font-size: .85rem;
  cursor: pointer; text-align: left;
}
.ver-agencia svg { width: 1.05rem; height: 1.05rem; flex: none; }
.ver-agencia:hover { background: var(--surface-2); color: var(--ink); }
.ver-agencia.on { background: var(--ink); color: var(--surface); }
.ver-agencia.on:hover { background: var(--ink); color: var(--surface); }

/* ---------- las claves del MCP ---------- */
.claves-lista { display: flex; flex-direction: column; gap: .5rem; margin: .8rem 0 1rem; }
.clave-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--rs);
}
.clave-fila .ayuda { display: block; margin-top: .15rem; }