/*! TLV2 — utilities.css (Phase B 100%)
    - Utilidades atómicas y de composición
    - Sin pintar componentes (NO .cta aquí)
*/

/* Display */
:where(main.tlv2-page, .tlv2-modal) .u-flex { display:flex; }
:where(main.tlv2-page, .tlv2-modal) .u-inline-flex { display:inline-flex; }
:where(main.tlv2-page, .tlv2-modal) .u-grid { display:grid; }
:where(main.tlv2-page, .tlv2-modal) .u-inline-grid { display:inline-grid; }
:where(main.tlv2-page, .tlv2-modal) .u-block { display:block; }
:where(main.tlv2-page, .tlv2-modal) .u-inline { display:inline; }
:where(main.tlv2-page, .tlv2-modal) .u-hidden { display:none !important; }

/* Flex/grid helpers */
:where(main.tlv2-page, .tlv2-modal) .u-center { justify-content:center; align-items:center; }
:where(main.tlv2-page, .tlv2-modal) .u-justify-between { justify-content:space-between; }
:where(main.tlv2-page, .tlv2-modal) .u-align-start { align-items:flex-start; }
:where(main.tlv2-page, .tlv2-modal) .u-align-center { align-items:center; }
:where(main.tlv2-page, .tlv2-modal) .u-align-end { align-items:flex-end; }

/* Stacks */
:where(main.tlv2-page, .tlv2-modal) .stack-xs > * + * { margin-block-start: var(--space-1); }
:where(main.tlv2-page, .tlv2-modal) .stack-sm > * + * { margin-block-start: var(--space-2); }
:where(main.tlv2-page, .tlv2-modal) .stack-md > * + * { margin-block-start: var(--space-3); }
:where(main.tlv2-page, .tlv2-modal) .stack-lg > * + * { margin-block-start: var(--space-4); }
:where(main.tlv2-page, .tlv2-modal) .stack-xl > * + * { margin-block-start: var(--space-5); }

/* Gaps (logical) */
:where(main.tlv2-page, .tlv2-modal) .gap-1 { gap: var(--space-1); }
:where(main.tlv2-page, .tlv2-modal) .gap-2 { gap: var(--space-2); }
:where(main.tlv2-page, .tlv2-modal) .gap-3 { gap: var(--space-3); }
:where(main.tlv2-page, .tlv2-modal) .gap-4 { gap: var(--space-4); }
:where(main.tlv2-page, .tlv2-modal) .gap-5 { gap: var(--space-5); }
:where(main.tlv2-page, .tlv2-modal) .gap-6 { gap: var(--space-6); }

/* Padding/Margin (logical) */
:where(main.tlv2-page, .tlv2-modal) .p-0 { padding: 0; }
:where(main.tlv2-page, .tlv2-modal) .p-1 { padding: var(--space-1); }
:where(main.tlv2-page, .tlv2-modal) .p-2 { padding: var(--space-2); }
:where(main.tlv2-page, .tlv2-modal) .p-3 { padding: var(--space-3); }
:where(main.tlv2-page, .tlv2-modal) .p-4 { padding: var(--space-4); }
:where(main.tlv2-page, .tlv2-modal) .p-5 { padding: var(--space-5); }

:where(main.tlv2-page, .tlv2-modal) .px-3 { padding-inline: var(--space-3); }
:where(main.tlv2-page, .tlv2-modal) .py-3 { padding-block:  var(--space-3); }

:where(main.tlv2-page, .tlv2-modal) .mt-0 { margin-block-start: 0; }
:where(main.tlv2-page, .tlv2-modal) .mt-3 { margin-block-start: var(--space-3); }
:where(main.tlv2-page, .tlv2-modal) .mb-3 { margin-block-end: var(--space-3); }

/* Radius/Elevation */
:where(main.tlv2-page, .tlv2-modal) .round-1 { border-radius: var(--radius-1); }
:where(main.tlv2-page, .tlv2-modal) .round-2 { border-radius: var(--radius-2); }
:where(main.tlv2-page, .tlv2-modal) .round-3 { border-radius: var(--radius-3); }

:where(main.tlv2-page, .tlv2-modal) .elev-0 { box-shadow: var(--shadow-0); }
:where(main.tlv2-page, .tlv2-modal) .elev-1 { box-shadow: var(--shadow-1); }
:where(main.tlv2-page, .tlv2-modal) .elev-2 { box-shadow: var(--shadow-2); }
:where(main.tlv2-page, .tlv2-modal) .elev-3 { box-shadow: var(--shadow-3); }
:where(main.tlv2-page, .tlv2-modal) .elev-4 { box-shadow: var(--shadow-4); }
:where(main.tlv2-page, .tlv2-modal) .elev-5 { box-shadow: var(--shadow-5); }

/* Text */
:where(main.tlv2-page, .tlv2-modal) .text-center { text-align:center; }
:where(main.tlv2-page, .tlv2-modal) .text-start { text-align:start; }
:where(main.tlv2-page, .tlv2-modal) .text-end { text-align:end; }
:where(main.tlv2-page, .tlv2-modal) .text-muted { color: var(--role-muted-color); }
:where(main.tlv2-page, .tlv2-modal) .text-lead { font-size: var(--font-size-lg); line-height: var(--line-loose); }

/* Widths */
:where(main.tlv2-page, .tlv2-modal) .w-100 { width:100%; }
:where(main.tlv2-page, .tlv2-modal) .max-w-1200 { max-width: 1200px; }

/* Density toggles (por variables, sin pintar) */
:where(main.tlv2-page, .tlv2-modal) .density--compact { --space-2: 0.4rem; --space-3: 0.6rem; --space-4: 0.8rem; }
:where(main.tlv2-page, .tlv2-modal) .density--comfortable { --space-2: 0.6rem; --space-3: 0.9rem; --space-4: 1.2rem; }

/* Visibilidad */
:where(main.tlv2-page, .tlv2-modal) .only-desktop { display:none; }
@media(min-width: 768px){ .only-desktop{ display:initial; } }
@media(min-width: 768px){ .only-mobile{ display:none !important; } }

/* A11y util — oculta visualmente, accesible a lectores (canónico) */
:where(main.tlv2-page, .tlv2-modal) .tlv2-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* TLV2 — Utility: cluster (grupos horizontales con gap) */
:where(main.tlv2-page, .tlv2-modal) .cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap, var(--space-2));
}

/* Alias semántico para CTAs: mapea a cluster con gap por defecto */
:where(main.tlv2-page, .tlv2-modal) .cta-group {
  --gap: var(--space-2);
}

/* En pantallas mayores, subimos un punto el gap por defecto */
@media (min-width: 768px){
:where(main.tlv2-page, .tlv2-modal) .cta-group { --gap: var(--space-3); }
}

/* Si el contenedor tiene .align-center, centramos el grupo */
:where(main.tlv2-page, .tlv2-modal) .align-center .cta-group {
  justify-content: center;
}

/* Sugerido: evita que el texto del botón se parta en medio (opcional) */
:where(main.tlv2-page, .tlv2-modal) .cta-group .cta { white-space: nowrap; }

/* TLV2 — Helpers de alineación semántica */
:where(main.tlv2-page, .tlv2-modal) .align-start { text-align: left; }
:where(main.tlv2-page, .tlv2-modal) .align-center { text-align: center; }
:where(main.tlv2-page, .tlv2-modal) .align-end { text-align: right; }

/* Alineación de grupos de CTA (y futuros clusters) */
:where(main.tlv2-page, .tlv2-modal) .align-start .cta-group { justify-content: flex-start; }
:where(main.tlv2-page, .tlv2-modal) .align-center .cta-group { justify-content: center; }
:where(main.tlv2-page, .tlv2-modal) .align-end .cta-group { justify-content: flex-end; }

/* ------------------------------------------------------------
   TLV2 — Empty State (constructor)
------------------------------------------------------------ */
body.tlv2-constructor .tlv2-empty-state {
  max-width: 980px;
  margin: 0 auto;
  padding: 56px 24px;
  text-align: center;
}

body.tlv2-constructor .tlv2-empty-kicker {
  display: block;
  margin: 0 0 10px 0;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .75;
}

body.tlv2-constructor .tlv2-empty-title {
  margin: 0 0 14px 0;
  line-height: 1.05;
}

body.tlv2-constructor .tlv2-empty-desc {
  margin: 0;
  line-height: 1.55;
  opacity: .9;
}

body.tlv2-constructor .tlv2-empty-desc + .tlv2-empty-desc {
  margin-top: 10px;
}



/* ------------------------------------------------------------
   TLV2 Constructor UI (Edit/Move tags)
   - Scope: solo en constructor (wrapper no existe en public)
   - Nota: usa OP4 (reorder) y se apaga en NOOP (BOUNDARY/ANCHORED_BLOCK)
------------------------------------------------------------ */
body.tlv2-constructor .tlv2-edit-block-wrapper{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  margin:0 0 12px 0;
  border:1px solid rgba(17,24,39,.12);
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  font-size:12px;
}
body.tlv2-constructor .tlv2-edit-block-wrapper--modal{
  margin:12px 0 0 0;
}
body.tlv2-constructor .tlv2-edit-block-title{
  font-weight:600;
  color:#111827;
}
body.tlv2-constructor .tlv2-edit-block-open-btn{
  height:24px;
  padding:0 10px;
  border-radius:8px;
  border:1px solid #111827;
  background:#111827;
  color:#fff;
  cursor:pointer;
  font-size:12px;
  line-height:1;
}
body.tlv2-constructor .tlv2-edit-block-open-btn:hover{
  opacity:.92;
}
body.tlv2-constructor .tlv2-edit-block-move-btn{
  height:24px;
  width:24px;
  border-radius:8px;
  border:1px solid rgba(17,24,39,.12);
  background:#fff;
  color:#111827;
  cursor:pointer;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
body.tlv2-constructor .tlv2-edit-block-move-btn:hover{
  border-color: rgba(17,24,39,.24);
}
body.tlv2-constructor .tlv2-edit-block-move-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
}


/* PV0F — PageVars Header Button (constructor) */
#tlv2-pagevars-header-wrap{
  position: fixed;
  right: 8px;
  top: 40px; /* ajustado por JS si hay wpadminbar */
  z-index: 999999;
  pointer-events: none;
}
#tlv2-pagevars-header-wrap .tlv2-edit-block-open-btn{
  pointer-events: auto;
}