/* ============================================================
   LEAD MAGNETS · el catálogo de qué se manda por DM, pestaña de la vista Marca

   El trabajo de esta hoja es que los TRES estados de una fila se distingan sin leer:

     · listo     → turquesa, borde sólido. Se puede elegir en una CTA ahora mismo.
     · borrador  → ámbar, borde sólido. Está cargado y todavía no se ofrece.
     · archivado → tinta apagada, borde PUNTEADO y la fila entera atenuada. Salió del
                   selector — pero puede seguir habiendo una automatización prendida que lo
                   manda, y por eso no se esconde: se muestra distinto.

   El color solo no alcanza (monitor barato, daltonismo, captura en blanco y negro), así que
   la diferencia va también por el borde y por la palabra escrita adentro del chip. Es el
   mismo criterio con el que redes.css separa "apagado por decisión" de "no existe".

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

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

/* ---------- encabezado y barra ---------- */

.lm-head{ display:flex; align-items:flex-start; gap:var(--sp-5); }
.lm-titulo{ margin:0 0 var(--sp-2); font-size:var(--fs-lg); }
.lm-bajada{
  margin:0; max-width:70ch;
  font-size:var(--fs-sm); color:var(--ink-2); line-height:var(--lh-base);
}

.lm-toolbar{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  padding-bottom:var(--sp-3); border-bottom:1px solid var(--line-soft);
}
.lm-check{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-sm); color:var(--ink-2); cursor:pointer;
}
.lm-check input{ accent-color:var(--turquesa); }

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

.lm-aviso, .lm-form-aviso{
  padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--s2); color:var(--ink-2);
  font-size:var(--fs-sm); line-height:var(--lh-base);
  /* Los mensajes del backend vienen en varias líneas ("  Qué hacer: …") y ese salto es la
     mitad del mensaje: sin pre-wrap se aplastan en un párrafo ilegible. */
  white-space:pre-wrap;
}
.lm-aviso.ok, .lm-form-aviso.ok{
  border-color:var(--turquesa-line); background:var(--turquesa-dim); color:var(--ink);
}
.lm-aviso.err, .lm-form-aviso.err{
  border-color:var(--rojo); background:rgba(232,48,42,.10); color:var(--ink);
}

/* ---------- formulario ---------- */

.lm-form{
  padding:var(--sp-6); border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--s1); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:var(--sp-3);
}
/* SIN ESTO EL FORMULARIO NO SE CIERRA. El `display:flex` de arriba le gana al
   `display:none` que el navegador le pone a [hidden], así que `el.hidden = true` no lo
   esconde: después de guardar, el panel quedaba abierto arriba de la lista ya actualizada.
   Mismo caso que `.cta-traer[hidden]` en cta.css. */
.lm-form[hidden]{ display:none; }
.lm-form-head{ display:flex; align-items:center; gap:var(--sp-3); }
.lm-form-head h4{ margin:0; font-size:var(--fs-base); }

.lm-fila{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
@media (max-width:900px){ .lm-fila{ grid-template-columns:1fr; } }

.lm-form .field{ margin-bottom:0; }
.lm-form select{ width:100%; }
/* El slug deshabilitado tiene que LEERSE como "esto no se toca", no como "esto se rompió":
   monoespaciada y atenuado, con la ayuda de al lado explicando por qué. */
.lm-form input:disabled{
  font-family:var(--f-mono); color:var(--ink-3); background:var(--s2); cursor:not-allowed;
}
.lm-pasado{ color:var(--rojo-ink); }

.lm-botones-cab{ display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-2); }
.lm-botones{ display:flex; flex-direction:column; gap:var(--sp-2); }
.lm-boton{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto; gap:var(--sp-2); }
.lm-quitar{ white-space:nowrap; }

/* ---------- lista ---------- */

.lm-lista{ display:flex; flex-direction:column; gap:var(--sp-4); }

.lm-vacio{
  padding:var(--sp-9) var(--sp-6); text-align:center;
  color:var(--ink-2); font-size:var(--fs-sm); line-height:var(--lh-base);
  border:1px dashed var(--line); border-radius:var(--r-md);
}

.lm-item{
  padding:var(--sp-5); border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--s1); display:flex; flex-direction:column; gap:var(--sp-3);
}
/* Punteado y atenuado: la fila sigue estando —y tiene que estar, porque puede haber una
   automatización prendida que la mande— pero se lee de una que ya no se ofrece. */
.lm-archivado{ border-style:dashed; opacity:.72; }

.lm-item-top{ display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; }
.lm-slug{
  font-family:var(--f-mono); font-size:var(--fs-sm); color:var(--turquesa-ink);
  padding:2px var(--sp-2); border:1px solid var(--turquesa-line); border-radius:var(--r-xs);
  background:var(--turquesa-dim);
}
.lm-archivado .lm-slug{
  color:var(--ink-3); border-color:var(--line); background:transparent;
}
.lm-item-titulo{ font-size:var(--fs-base); color:var(--ink); }

.lm-estado{
  font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.04em;
  padding:2px var(--sp-2); border-radius:var(--r-xs); border:1px solid var(--line);
  color:var(--ink-3);
}
.lm-e-listo{ color:var(--turquesa-ink); border-color:var(--turquesa-line); background:var(--turquesa-dim); }
.lm-e-borrador{ color:var(--ambar-ink); border-color:var(--ambar); background:var(--ambar-dim); }
.lm-e-archivado{ color:var(--ink-3); border-style:dashed; }

.lm-item-sub{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.lm-tema{
  font-size:var(--fs-xs); color:var(--ink-2);
  padding:1px var(--sp-2); border:1px solid var(--line-soft); border-radius:var(--r-xs);
}
.lm-url{
  font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink-2);
  overflow-wrap:anywhere;
}
.lm-url:hover{ color:var(--turquesa-ink); }

/* El DM se ve entero y con sus saltos: es el texto que va a recibir una persona, y
   recortarlo acá sería esconder justo lo que hay que revisar antes de mandarlo. */
.lm-dm{
  font-size:var(--fs-sm); color:var(--ink-2); line-height:var(--lh-base);
  white-space:pre-wrap;
  padding:var(--sp-3) var(--sp-4); border-left:2px solid var(--line);
  background:var(--s2); border-radius:0 var(--r-xs) var(--r-xs) 0;
}

.lm-item-botones{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.lm-boton-chip{
  font-size:var(--fs-xs); color:var(--ink-2);
  padding:2px var(--sp-3); border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--s2);
}

.lm-acciones{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.lm-meta{ margin-left:auto; font-size:var(--fs-xs); color:var(--ink-3); }

.lm-pie{
  margin:0; font-size:var(--fs-xs); color:var(--ink-3); line-height:var(--lh-base);
  max-width:80ch;
}