/* ============================================================================
   PUBLICIDAD con el reporte por anuncio (public/publicidad.js) y las piezas de un prospecto (public/leads-vista.js: la calificacion
   y la linea de datos que comparten la libreta, la ficha y Publicidad). L2b del motor de leads; lienzo aprobado el 28 oct.

   SOLO TOKENS de cuarto-oscuro.css: `paridad-cuarto-oscuro` cuenta este archivo desde el dia uno.
   La tabla hereda el ancho de su COLUMNA, no el de la ventana (con el chat abierto al CRM le tocan ~420 px aunque la ventana mida 1280):
   por eso se parte en renglones con una consulta de CONTENEDOR y no con una de pantalla.
   ============================================================================ */

.pub{ display:flex; flex-direction:column; gap:var(--e-4); }
.pub .pz-cab{ margin-bottom:0; }
.pub-periodo{ display:flex; gap:var(--e-1); flex-wrap:wrap; }
.pub-chip{ min-height:32px; padding:0 var(--e-3); border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio);
  font-family:inherit; font-size:var(--t-texto); white-space:nowrap; cursor:pointer; }
.pub-chip.on{ background:var(--piedra-on); color:var(--tinta); }
@media (hover:hover){ .pub-chip:not(.on):hover{ background:var(--tinte-toque); color:var(--tinta); } }

/* Un bloque flota (16 px) y no lleva raya: la separacion es aire. */
.pub-bloque{ background:var(--piedra); border-radius:var(--r-flota); padding:var(--e-3) var(--e-4) var(--e-4); min-width:0; }
.pub-bloque .pz-cifras{ margin:var(--e-2) 0 var(--e-1); }
.pub-cab{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); min-height:40px; flex-wrap:wrap; }
.pub-bt{ margin:0; font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.pub-meta{ margin:0; font-size:var(--t-meta); color:var(--medio); line-height:1.4; }
.pub-pie{ margin-top:var(--e-2); }
.pub-n{ font-size:var(--t-meta); color:var(--medio); font-variant-numeric:tabular-nums; }
.pub-acc{ margin-top:var(--e-3); }
.pub-pil{ background:var(--piedra-on); color:var(--tinta); text-decoration:none; }
.pub-mas{ margin-top:var(--e-2); font-size:var(--t-meta); }
.pub-abajo{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:var(--e-4); align-items:start; }

/* ---- la tabla por anuncio: rejilla en escritorio, renglones en una columna angosta ---- */
.pub-tabla{ container-type:inline-size; }
.pub-th, .pub-fila{ display:grid; grid-template-columns:minmax(0, 2.6fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr) 24px; column-gap:var(--e-4); align-items:center; }
.pub-th.con-dinero, .pub-fila:has(.con-dinero){ grid-template-columns:minmax(0, 2.6fr) repeat(5, minmax(0, 1fr)) minmax(0, 1.6fr) 24px; }
.pub-th{ padding:var(--e-2) 0; font-size:var(--t-meta); color:var(--medio); }
.pub-th > span:nth-child(n+2):not(:nth-last-child(-n+2)){ text-align:right; }
.pub-celdas{ display:contents; }
.pub-c{ font-size:var(--t-texto); color:var(--tinta); text-align:right; font-variant-numeric:tabular-nums; min-width:0; }
.pub-c.pub-mot-c{ text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pub-c.pub-cero, .pub-apagada .pub-c{ color:var(--apagado); }
.pub-apagada .pz-fila-t{ color:var(--medio); }
.pub-poco{ display:block; font-size:var(--t-meta); color:var(--apagado); }
.pub-resumen{ display:none; font-size:var(--t-meta); color:var(--texto); }
.pub-ir{ display:flex; justify-content:center; color:var(--medio); transform:rotate(-90deg); }
@container (max-width:640px){
  .pub-th{ display:none; }
  .pub-fila, .pub-fila:has(.con-dinero){ display:flex; flex-wrap:wrap; row-gap:var(--e-1); }
  .pub-celdas{ display:none; }
  .pub-resumen{ display:block; order:3; flex-basis:100%; }
  .pub-ir{ margin-left:auto; }
}

/* ---- por que se pierden: nombre, cuantos y una barra (contenido: 4 px) ---- */
.pub-motivos{ display:flex; flex-direction:column; gap:var(--e-3); padding-top:var(--e-1); }
.pub-mot-t{ display:flex; justify-content:space-between; gap:var(--e-2); font-size:var(--t-texto); color:var(--tinta); }
.pub-barra{ display:block; height:6px; margin-top:var(--e-1); border-radius:var(--r); background:var(--piedra-on); overflow:hidden; }
.pub-barra > span{ display:block; width:calc(var(--p) * 1%); height:100%; border-radius:inherit; background:var(--medio); }

/* ---- la tarjeta de los dos pasos, mientras ningun prospecto traiga anuncio ---- */
.pub-guia{ display:flex; flex-direction:column; gap:var(--e-3); padding:var(--e-5); }
.pub-guia-t{ margin:0; font-size:var(--t-sub); font-weight:500; color:var(--tinta); }
.pub-guia-l{ margin:0; max-width:60ch; font-size:var(--t-texto); line-height:1.6; color:var(--texto); }
.pub-pasos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--e-3); }
.pub-pasos li{ display:flex; gap:var(--e-3); align-items:flex-start; max-width:60ch; font-size:var(--t-texto); line-height:1.6; color:var(--texto); }
.pub-paso-n{ flex:none; width:22px; height:22px; margin-top:2px; border-radius:var(--r); background:var(--piedra-on); color:var(--tinta);
  font-size:var(--t-meta); display:flex; align-items:center; justify-content:center; }

/* ---- un prospecto: la calificacion es FORMA (lleno, medio, vacio) y no color; el almagre es solo lo urgente ---- */
.lv-calif{ display:inline-flex; align-items:center; gap:6px; font-size:var(--t-meta); color:var(--medio); white-space:nowrap; }
.lv-calif.lv-sin{ color:var(--apagado); }
.lv-punto{ flex:none; width:9px; height:9px; border-radius:var(--r-pildora); box-sizing:border-box; border:1.5px solid var(--tinta); display:inline-block; }
.lv-punto.lv-caliente{ background:var(--tinta); }
.lv-punto.lv-tibio{ background:linear-gradient(90deg, var(--tinta) 50%, transparent 50%); }
.lv-datos{ display:block; font-size:var(--t-meta); color:var(--texto); line-height:1.5; overflow-wrap:anywhere; }
.lv-falta{ color:var(--apagado); }
.pub-prospecto .lv-calif{ flex:none; }

/* «Lo lleno Grok hoy 10:42 · Deshacer» en la cabecera de «Su boda» (ficha.js, fcLineaAgenteHTML): un renglon de meta, a la derecha del titulo. */
/* Si no cabe junto al titulo (la columna del portal mide ~300 px), baja a su propio renglon, a la derecha: el titulo nunca se parte. */
.fsec-h:has(.fc-lleno){ flex-wrap:wrap; row-gap:2px; }
.fc-lleno{ margin-left:auto; font-size:var(--t-meta); color:var(--medio); white-space:nowrap; }
.fc-lleno .pz-link{ font-size:inherit; }