/* ============================================================
   CTA · el drawer de "comentá X y te mando Y"
   Calcado de metricas.css: mismo drawer, misma cabecera, mismo pie. Lo que cambia es lo
   que la pantalla tiene que dejar ver, y eso son tres bloques que métricas no necesita:
   la palabra reservada, la confirmación de prendido y los misses.

   Solo tokens de /tokens.css — cero hex hardcodeado.
   `.on` para "seleccionado", nunca `.sel`.
   ============================================================ */

.cta-abrir .cta-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--ambar); margin-right:7px; vertical-align:middle;
}

:root{ --cta-ancho: 470px; }

.cta-panel{
  position:fixed; top:0; right:0; height:100vh; width:min(var(--cta-ancho), 100vw);
  background:var(--s1); border-left:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s ease;
  /* Un escalón por encima de --z-drawer-alto: los cinco drawers de la barra de la pieza no
     se cierran entre ellos, y con el mismo z-index gana el que se montó último — que no es
     el que la persona acaba de abrir. Los tres drawers de Zernio comparten este valor y se
     cierran entre ellos por el evento `tr3bol:drawer-abierto`, así que entre ellos no hay
     empate posible. Cuando la etapa 5 unifique los drawers en un solo sistema, esto se
     colapsa en --z-drawer. */
  z-index:calc(var(--z-drawer-alto) + 1);
}
.cta-panel.abierto{ transform:translateX(0); }
@media (prefers-reduced-motion: reduce){ .cta-panel{ transition:none; } }
@media (max-width: 520px){ .cta-panel{ width:100vw; } }

.cta-head{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-6) var(--gut); border-bottom:1px solid var(--line);
}
.cta-head h3{ margin:0; font-size:var(--fs-base); }
/* .spacer se define una sola vez en /base.css. */
.cta-body{ flex:1; overflow-y:auto; padding:var(--sp-6) var(--gut); }
.cta-pie{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-5) var(--gut); border-top:1px solid var(--line);
}

.cta-pieza{
  font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--turquesa-ink);
  background:var(--turquesa-dim); border:1px solid var(--turquesa-line);
  border-radius:var(--r-xs); padding:var(--sp-1) 9px; margin-bottom:var(--sp-5);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.cta-sec{
  margin:var(--sp-6) 0 var(--sp-2); font-size:var(--fs-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.cta-fila{ display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:flex-start; }
.cta-fila > .field{ flex:1 1 180px; min-width:0; }
/* base.css le da width:100% a input y textarea de un .field, pero NO a select: el del lead
   magnet lleva títulos largos ("Guía de capacitores (guia-capacitores)") y sin esto se
   desbordaba fuera de su columna, tapando la de al lado. */
.cta-fila > .field select{ width:100%; }

/* ---------- chips de red ---------- */

.cta-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:var(--sp-1); }
.cta-chip{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s2);
  color:var(--ink-2); padding:5px var(--sp-4); font-size:11.5px; cursor:pointer;
  text-align:left;
}
.cta-chip:hover{ color:var(--ink); border-color:var(--line-soft); }
.cta-chip.on{
  background:var(--turquesa-dim); border-color:var(--turquesa-line); color:var(--ink);
  font-weight:600;
}
/* Las redes que no pueden tener CTA se muestran igual, apagadas y con la etiqueta a la
   vista. Esconderlas haría que "no está" se lea como "todavía no lo hicimos", y la
   respuesta real —Meta es la única que expone el disparador— no cambia nunca. */
.cta-chip.cta-no{ opacity:.55; cursor:not-allowed; }
.cta-chip-et{
  display:block; font-size:9.5px; color:var(--ink-3); font-weight:400; margin-top:1px;
  text-transform:uppercase; letter-spacing:.05em;
}
.cta-motivo{
  font-size:10.5px; color:var(--ink-3); line-height:var(--lh-base); margin-top:var(--sp-2);
  white-space:pre-line;
}
.cta-motivo[hidden]{ display:none; }

.cta-nota{
  font-size:10.5px; color:var(--ink-3); line-height:1.4; margin-top:var(--sp-4);
  border-left:2px solid var(--line); padding-left:var(--sp-4);
}
.cta-pasado{ color:var(--rojo-ink); }

/* ---------- lista de CTAs ---------- */

.cta-lista{ display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-2); }
.cta-item{
  border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--s2);
  padding:9px var(--sp-4); font-size:var(--fs-sm);
}
/* Una CTA prendida le está escribiendo a gente ahora mismo: se distingue de una apagada de
   un vistazo, sin leer la etiqueta. */
.cta-item.cta-viva{ border-color:var(--turquesa-line); background:var(--turquesa-dim); }
.cta-item-top{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.cta-item-sub{ font-size:var(--fs-micro); color:var(--ink-3); margin-top:3px; }
.cta-palabra-chip{
  font-family:var(--f-mono); font-weight:600; color:var(--ink);
  background:var(--s3); border-radius:var(--r-xs); padding:2px 7px;
}
.cta-lead{ color:var(--ink-2); font-size:var(--fs-xs); }
/* Un lead magnet archivado, en borrador o que no está en el catálogo NO puede verse igual
   que uno vigente: la automatización sigue prendida y sigue mandando ese DM. Ámbar y con la
   palabra escrita al lado ("· archivado"), nunca una celda vacía. */
.cta-lead-alerta{ color:var(--ambar-ink); }
.cta-estado-local{
  font-size:var(--fs-micro); letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:var(--r-xs); padding:2px 7px; color:var(--ink-3);
  white-space:nowrap;
}
.cta-acciones{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3); }
.cta-acciones button{ font-size:var(--fs-xs); padding:4px 9px; }

/* Un desacuerdo entre lo que dice Zernio y lo que dice nuestra tabla no se corrige solo: se
   muestra. Por eso tiene color de aviso y ocupa lugar. */
.cta-alerta{
  margin-top:var(--sp-3); border:1px solid var(--ambar); background:var(--ambar-dim);
  border-radius:var(--r-xs); padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-xs); color:var(--ink); line-height:1.45; white-space:pre-line;
}

/* ---------- confirmación de prendido ---------- */

/* El único bloque del drawer con borde rojo. No es alarmismo: apretar el botón de acá
   arranca DMs a personas reales, y es la única acción del panel que no se puede deshacer. */
.cta-confirmar{
  margin-top:var(--sp-6); border:1px solid var(--rojo); border-radius:var(--r-sm);
  background:var(--s2); padding:var(--sp-5) var(--sp-6);
}
.cta-confirmar[hidden]{ display:none; }
.cta-confirmar p{
  margin:0 0 var(--sp-4); font-size:var(--fs-sm); color:var(--ink); line-height:var(--lh-base);
}
.cta-confirmar input{ width:100%; font-family:var(--f-mono); }
.cta-confirmar-err{ margin-top:var(--sp-2); font-size:var(--fs-xs); color:var(--rojo-ink); }
.cta-confirmar-err[hidden]{ display:none; }

/* ---------- logs y misses ---------- */

.cta-logs{ margin-top:var(--sp-2); display:flex; flex-direction:column; gap:var(--sp-2); }
.cta-logs[hidden]{ display:none; }
.cta-logs-titulo{ font-size:var(--fs-xs); color:var(--ink-2); }

/* LOS MISSES VAN ARRIBA Y CON PESO PROPIO. Un log vacío tiene dos explicaciones opuestas
   —no comentó nadie, o comentaron 40 y ninguna matcheó— y los logs no las distinguen,
   porque un comentario que no matchea no genera fila. Este bloque es lo único que contesta
   "¿por qué no anduvo?", así que no puede estar abajo del todo ni plegado. */
.cta-misses{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s2);
  padding:var(--sp-4) var(--sp-5);
}
.cta-misses-hay{ border-color:var(--ambar); background:var(--ambar-dim); }
.cta-misses-cab{ font-size:var(--fs-sm); color:var(--ink); font-weight:600; }
.cta-misses-expl{
  font-size:10.5px; color:var(--ink-2); line-height:1.45; margin-top:var(--sp-1);
}
.cta-miss{
  display:flex; gap:var(--sp-2); align-items:baseline; flex-wrap:wrap;
  margin-top:var(--sp-2); padding-top:var(--sp-2); border-top:1px solid var(--line-soft);
  font-size:var(--fs-xs);
}
.cta-miss-txt{ color:var(--ink); flex:1 1 220px; min-width:0; }
.cta-miss-veto{ color:var(--ambar-ink); font-size:var(--fs-micro); }
.cta-miss-cuando{ color:var(--ink-3); font-size:var(--fs-micro); font-family:var(--f-mono); }

.cta-log{
  display:flex; align-items:baseline; gap:var(--sp-2); flex-wrap:wrap;
  border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--s2);
  padding:6px var(--sp-4); font-size:var(--fs-xs);
}
.cta-log-estado{
  font-family:var(--f-mono); font-size:var(--fs-micro); text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-3); border:1px solid var(--line);
  border-radius:var(--r-xs); padding:1px 6px; white-space:nowrap;
}
.cta-log-sent .cta-log-estado{
  color:var(--turquesa-ink); border-color:var(--turquesa-line); background:var(--turquesa-dim);
}
.cta-log-failed .cta-log-estado{ color:var(--rojo-ink); border-color:var(--rojo); }
.cta-log-pending .cta-log-estado,
.cta-log-gated .cta-log-estado{ color:var(--ambar-ink); border-color:var(--ambar); }
.cta-log-txt{ color:var(--ink-2); flex:1 1 200px; min-width:0; }
.cta-log-cuando{ color:var(--ink-3); font-size:var(--fs-micro); font-family:var(--f-mono); }
.cta-log-err{ width:100%; color:var(--rojo-ink); font-size:var(--fs-micro); margin-top:3px; }

/* ---------- avisos ---------- */

.cta-aviso{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s2);
  padding:9px var(--sp-5); font-size:var(--fs-sm); color:var(--ink-2);
  margin-bottom:var(--sp-5); line-height:1.45;
  /* Los mensajes de automatizaciones.py vienen en varias líneas ("Qué hacer:" abajo del
     motivo). Aplastarlos a un párrafo hace que la línea que dice qué hacer desaparezca en
     el medio, que es exactamente la que hay que leer. */
  white-space:pre-line;
}
.cta-aviso.err{ border-color:var(--rojo); color:var(--ink); }
.cta-aviso.ok{ border-color:var(--turquesa-line); color:var(--ink); }
.cta-aviso[hidden]{ display:none; }
.cta-link{ color:var(--turquesa-ink); font-size:var(--fs-xs); }
/* Un botón dentro del aviso (hoy: "anotar el lead magnet igual"). Se ve como el link de al
   lado y no como un botón primario: es una acción opcional sobre un campo informativo, no
   la acción de la pantalla. */
.cta-link-btn{ font-size:var(--fs-xs); padding:3px 8px; margin-top:var(--sp-2); }

/* "Traer el texto de «X»": aparece solo cuando el DM escrito y el del catálogo difieren.
   Es la salida de la regla de que el server no sustituye texto — el reemplazo lo aprieta
   una persona, y la nota de al lado dice qué pasa si no lo aprieta. */
.cta-traer{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  margin-top:var(--sp-2); padding:var(--sp-3);
  border:1px solid var(--ambar); border-radius:var(--r-sm); background:var(--ambar-dim);
}
.cta-traer[hidden]{ display:none; }
.cta-traer button{ font-size:var(--fs-xs); padding:4px 9px; white-space:nowrap; }
.cta-traer-nota{ font-size:var(--fs-micro); color:var(--ink-2); line-height:1.4; flex:1 1 200px; }

/* "Todavía no está enchufado" no es un error: es un estado esperado mientras los endpoints
   se enchufan por tandas. Gris, no rojo. */
.cta-pendiente{
  border:1px dashed var(--line); border-radius:var(--r-sm); background:transparent;
  padding:9px var(--sp-5); font-size:var(--fs-xs); color:var(--ink-3); line-height:1.45;
}

/* ---------- las palabras que propone el lead magnet (CTA Fase 1) ----------
   La lista PROPONE y no obliga: el campo de texto sigue arriba y sigue mandando. Estos chips
   solo lo completan, y muestran la disponibilidad que el server leyó de `cta_palabras`. */
.cta-palabras-prop{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.cta-palabras-prop[hidden]{ display: none; }
.cta-prop-rotulo{
  font: 600 var(--fs-micro)/1.2 var(--f-mono); color: var(--ink-3);
  letter-spacing: .04em;
}
.cta-prop{
  font: 600 var(--fs-micro)/1 var(--f-mono); letter-spacing: .04em;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  background: var(--s3); color: var(--ink-2); border: 1px solid transparent;
}
.cta-prop:hover:not(:disabled){ color: var(--ink); border-color: var(--line); }
.cta-prop.elegida{
  background: var(--turquesa-dim); color: var(--turquesa-ink); border-color: var(--turquesa);
}
/* Tomada por OTRA pieza: no se puede elegir, y se ve que no se puede. El title dice quién la
   tiene y por qué una palabra manda un solo material. */
.cta-prop.tomada{ opacity: .45; text-decoration: line-through; cursor: not-allowed; }
/* Ya reservada por ESTA pieza: no es un conflicto, es la CTA que ya se armó. */
.cta-prop.propia{ background: var(--s2); color: var(--ink-3); border-style: dashed; }
/* No se pudo leer `cta_palabras`: ni libre ni tomada. Se deja elegible —el 409 al crear es
   la red de seguridad real— pero no se pinta como si estuviera libre. */
.cta-prop.dudosa{ opacity: .7; border-style: dotted; border-color: var(--line); }
.cta-prop-aviso{
  font-size: var(--fs-micro); color: var(--ink-3); flex-basis: 100%;
}