/* lpbuild.css — Constructor mode styles (Landing Pages).
 *
 * Referencias collectui (ritmo y jerarquía, NO paleta — tokens --bb-*):
 *   · sidebar e644aca0-7b4d-41a7-beb7-a065ce4a7e17 (@mnowakdesign): filas de
 *     rail quietas; la activa es UN bloque redondeado relleno, todo lo demás
 *     es texto sobre fondo plano.
 *   · settings-page 9b9dc1af-63f3-4c8a-8cf4-f333778addb7 (@Tanjim38): panel
 *     derecho con grupos de campos suaves, label ARRIBA del input, grid de
 *     2 columnas para campos cortos.
 */
.lpb-listwrap { padding: 4px 0 24px; }

.lpb-actions { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }

.lpb-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lpb-table th {
  text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--bb-ink-soft, #6b7280);
  padding: 8px 10px; border-bottom: 1px solid var(--bb-line, #e5e2da);
}
.lpb-table td { padding: 9px 10px; border-bottom: 1px solid var(--bb-line-soft, #efece4); }
.lpb-table tbody tr { cursor: pointer; }
.lpb-table tbody tr:hover { background: var(--bb-hover, rgba(13, 42, 94, .04)); }
.lpb-empty { padding: 24px; text-align: center; color: var(--bb-ink-soft, #6b7280); font-size: 13px; }

/* ---------------------------------------------------------------- buttons */
.lpb-btn {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--bb-line, #d8d4ca);
  background: var(--bb-card, #fff); color: var(--bb-ink, #1c2a3a); cursor: pointer;
}
.lpb-btn:hover { background: var(--bb-hover, rgba(13, 42, 94, .05)); }
.lpb-btn.lpb-big { padding: 10px 18px; }
.lpb-btn.lpb-link { display: inline-flex; align-items: center; text-decoration: none; }
.lpb-ghost {
  font: inherit; font-size: 12px; padding: 3px 8px; border: 0; background: none;
  color: var(--bb-ink-soft, #6b7280); cursor: pointer; border-radius: 6px;
}
.lpb-ghost:hover { background: var(--bb-hover, rgba(13, 42, 94, .06)); color: var(--bb-ink, #1c2a3a); }
.lpb-danger:hover { color: #b3261e; }

/* ------------------------------------------------------------------- head */
.lpb-head {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 0 14px; border-bottom: 1px solid var(--bb-line, #e5e2da); margin-bottom: 16px;
}
/* Meta shrinks, actions never do — "Guardar" wrapping to its own line was the
   measured failure when the live pane took half the width. */
.lpb-head-meta { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.lpb-head-acts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.lpb-head-meta .lpb-field { min-width: 0; flex: 1 1 auto; }
.lpb-head .lpb-field { margin: 0; }
.lpb-head .lpb-field label { display: none; }
.lpb-head input, .lpb-head select {
  font: inherit; font-size: 13.5px; padding: 7px 10px;
  border: 1px solid var(--bb-line, #d8d4ca); border-radius: 8px; background: var(--bb-card, #fff);
  color: var(--bb-ink, #1c2a3a);
}
.lpb-head .lpb-field input { width: 100%; min-width: 0; }
.lpb-head .lpb-field:nth-of-type(1) { flex: 2 1 130px; }   /* nombre */
.lpb-head .lpb-field:nth-of-type(2) { flex: 1 1 90px; }    /* slug */
.lpb-head .lpb-field:nth-of-type(3) { flex: 1 1 110px; }   /* programa */
.lpb-head .lpb-field:nth-of-type(4) { flex: 0 0 auto; }    /* idioma */
.lpb-head input[readonly].lpb-id { background: var(--bb-grey, #f4f2ec); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.lpb-spacer { flex: 1; }
.lpb-tabs { display: flex; gap: 4px; background: var(--bb-grey, #f4f2ec); border-radius: 10px; padding: 3px; }
.lpb-tab {
  font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border: 0;
  background: none; color: var(--bb-ink-soft, #6b7280); cursor: pointer; border-radius: 8px;
}
.lpb-tab.active { background: var(--bb-card, #fff); color: var(--bb-navy, #0D2A5E); box-shadow: 0 1px 3px rgba(13, 42, 94, .12); }

/* ------------------------------------------------------------------- grid */
.lpb-grid { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .lpb-grid { grid-template-columns: 1fr; } }

/* rail — collectui e644aca0: quiet rows, active = filled rounded block */
.lpb-rail { display: flex; flex-direction: column; gap: 2px; }
.lpb-row {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-radius: 9px; cursor: pointer; min-height: 40px;
}
.lpb-row:hover { background: var(--bb-hover, rgba(13, 42, 94, .05)); }
.lpb-row.active { background: var(--bb-navy-soft, rgba(13, 42, 94, .09)); }
.lpb-row.active .lpb-row-t { color: var(--bb-navy, #0D2A5E); font-weight: 700; }
.lpb-row-t { font-size: 13.5px; font-weight: 600; color: var(--bb-ink, #1c2a3a); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.lpb-row-s { flex: 1; font-size: 11.5px; color: var(--bb-ink-soft, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* MEDIDO: `opacity: 0` NO quita los clicks. Con el rail estrecho (preview
   abierto) los tres botones invisibles caían justo en el centro de la fila, así
   que un click "en el nombre de la sección" la REORDENABA — o la borraba — sin
   que se viera nada que apretar. Mismo trap que `.rc-thumb-open` en el Report
   Card. Un control oculto es `pointer-events: none`, siempre. */
.lpb-row-x { display: flex; gap: 0; opacity: 0; pointer-events: none; flex: 0 0 auto; }
.lpb-row:hover .lpb-row-x, .lpb-row.active .lpb-row-x { opacity: 1; pointer-events: auto; }
.lpb-row-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lpb-add { margin-top: 10px; justify-content: center; }

/* pane — collectui 9b9dc1af: soft field groups, label above input */
.lpb-pane {
  background: var(--bb-card, #fff); border: 1px solid var(--bb-line-soft, #efece4);
  border-radius: 12px; padding: 16px 18px;
}
.lpb-sechead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.lpb-block {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  color: var(--bb-navy, #0D2A5E); background: var(--bb-navy-soft, rgba(13, 42, 94, .07));
  padding: 4px 10px; border-radius: 6px;
}
.lpb-block.lpb-miss { color: #b3261e; background: rgba(179, 38, 30, .08); }
.lpb-check { font-size: 12.5px; color: var(--bb-ink-soft, #6b7280); display: flex; align-items: center; gap: 6px; cursor: pointer; }

.lpb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.lpb-fields .lpb-field.wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .lpb-fields { grid-template-columns: 1fr; } }

.lpb-field label {
  display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--bb-ink-soft, #6b7280); margin-bottom: 5px;
}
.lpb-field input, .lpb-field textarea, .lpb-field select {
  width: 100%; font: inherit; font-size: 13.5px; padding: 8px 10px;
  border: 1px solid var(--bb-line, #d8d4ca); border-radius: 8px;
  background: var(--bb-bg, #faf9f6); color: var(--bb-ink, #1c2a3a); resize: vertical;
}
.lpb-field input:focus, .lpb-field textarea:focus {
  outline: 2px solid var(--bb-navy, #0D2A5E); outline-offset: 0; background: var(--bb-card, #fff);
}
.lpb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* items */
.lpb-repeats { margin-top: 16px; border-top: 1px solid var(--bb-line-soft, #efece4); padding-top: 14px; }
.lpb-rep-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lpb-rep-head span { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--bb-ink-soft, #6b7280); }
.lpb-item { border: 1px solid var(--bb-line-soft, #efece4); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--bb-bg, #faf9f6); }
.lpb-item-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.lpb-item-n { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--bb-ink-soft, #6b7280); min-width: 18px; }
.lpb-item .lpb-fields { grid-template-columns: 1fr; }

/* chips + warnings */
.lpb-chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.lpb-chip {
  font-size: 11.5px; font-family: 'JetBrains Mono', monospace; cursor: help;
  border: 1px solid var(--bb-line, #d8d4ca); border-radius: 6px; padding: 3px 9px;
  color: var(--bb-ink-soft, #6b7280); background: var(--bb-bg, #faf9f6);
}
.lpb-warn {
  margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-size: 13px;
  background: rgba(179, 38, 30, .06); color: #8c2b24; border: 1px solid rgba(179, 38, 30, .18);
}
.lpb-err {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; font-size: 13px;
  background: rgba(179, 38, 30, .08); color: #8c2b24; border: 1px solid rgba(179, 38, 30, .25);
}

/* picker */
.lpb-pickwrap {
  position: fixed; inset: 0; z-index: 400; background: rgba(13, 42, 94, .35);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.lpb-pick {
  background: var(--bb-card, #fff); border-radius: 14px; padding: 18px 20px;
  width: min(760px, 100%); max-height: 84vh; overflow-y: auto;
  box-shadow: 0 18px 50px rgba(13, 42, 94, .25);
}
.lpb-pick-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-weight: 700; font-size: 14px; color: var(--bb-ink, #1c2a3a); }
.lpb-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.lpb-tile {
  font: inherit; text-align: left; padding: 10px 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--bb-line, #d8d4ca); background: var(--bb-card, #fff);
  display: flex; flex-direction: column; gap: 3px;
}
.lpb-tile:hover { border-color: var(--bb-navy, #0D2A5E); background: var(--bb-hover, rgba(13, 42, 94, .04)); }
.lpb-tile-l { font-size: 13px; font-weight: 600; color: var(--bb-ink, #1c2a3a); }
.lpb-tile-k { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--bb-ink-soft, #6b7280); }
.lpb-tile-f { font-size: 11px; color: var(--bb-ink-soft, #6b7280); }
.lpb-pick-grid.lpb-dim .lpb-tile { opacity: .55; cursor: default; }
.lpb-pick-sub { font-size: 11.5px; color: var(--bb-ink-soft, #6b7280); margin: 12px 0 8px; }

/* live preview — la columna de la derecha
 *
 * El dock es hermano de #lpbMain y NUNCA se re-renderiza: mover o repintar un
 * iframe lo recarga (parpadeo + pierde el scroll). Por eso el layout es del
 * ROOT, no del contenido: #lpBuildRoot es el grid, y `data-pv` decide si hay
 * una o dos columnas. */
#lpBuildRoot { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
#lpBuildRoot[data-pv="on"] { grid-template-columns: minmax(0, 1fr) minmax(320px, 40%); }
#lpbMain { min-width: 0; }

.lpb-pvdock {
  position: sticky; top: 12px; align-self: start;
  border: 1px solid var(--bb-line-soft, #efece4); border-radius: 12px;
  overflow: hidden; background: #fff;
  box-shadow: 0 2px 10px rgba(13, 42, 94, .06);
}
.lpb-pvdock.hidden { display: none; }
.lpb-iframe { width: 100%; height: calc(100vh - 130px); min-height: 420px; border: 0; display: block; background: #fff; }

/* Con el preview abierto el editor ya no tiene ancho para un rail de 280px
   MÁS un panel de dos columnas: el rail se estrecha y los campos van a una. */
#lpBuildRoot[data-pv="on"] .lpb-grid { grid-template-columns: 168px minmax(0, 1fr); }
#lpBuildRoot[data-pv="on"] .lpb-fields { grid-template-columns: 1fr; }
/* El rail estrecho no puede llevar dos textos por fila: el nombre de la sección
   manda y el bloque se lee en el panel, que es donde se edita. */
#lpBuildRoot[data-pv="on"] .lpb-row-s { display: none; }
#lpBuildRoot[data-pv="on"] .lpb-row-t { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Debajo de 1100px no caben dos columnas de verdad: el preview pasa a ser una
   fila debajo del editor en vez de una tira de 300px ilegible. */
@media (max-width: 1100px) {
  #lpBuildRoot[data-pv="on"] { grid-template-columns: 1fr; }
  #lpBuildRoot[data-pv="on"] .lpb-grid { grid-template-columns: 280px minmax(0, 1fr); }
  .lpb-pvdock { position: static; }
  .lpb-iframe { height: 60vh; }
}
@media (max-width: 900px) {
  #lpBuildRoot[data-pv="on"] .lpb-grid { grid-template-columns: 1fr; }
}

/* El toggle es un tab suelto: prendido = relleno, apagado = fantasma. */
.lpb-pvtoggle {
  border: 1px solid var(--bb-line, #d8d4ca); border-radius: 10px; padding: 6px 14px;
  background: var(--bb-card, #fff);
}
.lpb-pvtoggle.active {
  background: var(--bb-navy, #0D2A5E); color: #fff; border-color: var(--bb-navy, #0D2A5E);
  box-shadow: none;
}

/* export */
.lpb-exp-actions { display: flex; gap: 10px; margin-bottom: 14px; }
.lpb-manual { margin-bottom: 14px; }
.lpb-sub { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8c2b24; margin-bottom: 6px; }
.lpb-manual-row {
  display: flex; gap: 12px; padding: 7px 10px; font-size: 13px;
  border-bottom: 1px solid var(--bb-line-soft, #efece4); align-items: baseline;
}
.lpb-manual-t { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #8c2b24; white-space: nowrap; }
.lpb-notes { margin-bottom: 12px; }
.lpb-note { font-size: 12.5px; color: var(--bb-ink-soft, #6b7280); padding: 3px 0; }
.lpb-json {
  width: 100%; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; line-height: 1.5;
  border: 1px solid var(--bb-line, #d8d4ca); border-radius: 10px; padding: 12px;
  background: var(--bb-grey, #f4f2ec); color: var(--bb-ink, #1c2a3a); resize: vertical;
}