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

/* Display */
.u-flex{ display:flex; }
.u-inline-flex{ display:inline-flex; }
.u-grid{ display:grid; }
.u-inline-grid{ display:inline-grid; }
.u-block{ display:block; }
.u-inline{ display:inline; }
.u-hidden{ display:none !important; }

/* Flex/grid helpers */
.u-center{ justify-content:center; align-items:center; }
.u-justify-between{ justify-content:space-between; }
.u-align-start{ align-items:flex-start; }
.u-align-center{ align-items:center; }
.u-align-end{ align-items:flex-end; }

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

/* Gaps (logical) */
.gap-1{ gap: var(--space-1); }
.gap-2{ gap: var(--space-2); }
.gap-3{ gap: var(--space-3); }
.gap-4{ gap: var(--space-4); }
.gap-5{ gap: var(--space-5); }
.gap-6{ gap: var(--space-6); }

/* Padding/Margin (logical) */
.p-0{ padding: 0; }
.p-1{ padding: var(--space-1); }
.p-2{ padding: var(--space-2); }
.p-3{ padding: var(--space-3); }
.p-4{ padding: var(--space-4); }
.p-5{ padding: var(--space-5); }

.px-3{ padding-inline: var(--space-3); }
.py-3{ padding-block:  var(--space-3); }

.mt-0{ margin-block-start: 0; }
.mt-3{ margin-block-start: var(--space-3); }
.mb-3{ margin-block-end: var(--space-3); }

/* Radius/Elevation */
.round-1{ border-radius: var(--radius-1); }
.round-2{ border-radius: var(--radius-2); }
.round-3{ border-radius: var(--radius-3); }

.elev-0{ box-shadow: var(--shadow-0); }
.elev-1{ box-shadow: var(--shadow-1); }
.elev-2{ box-shadow: var(--shadow-2); }
.elev-3{ box-shadow: var(--shadow-3); }
.elev-4{ box-shadow: var(--shadow-4); }
.elev-5{ box-shadow: var(--shadow-5); }

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

/* Widths */
.w-100{ width:100%; }
.max-w-1200{ max-width: 1200px; }

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

/* Visibilidad */
.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) */
.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) */
.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 */
.cta-group{
  --gap: var(--space-2);
}

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

/* Si el contenedor tiene .align-center, centramos el grupo */
.align-center .cta-group{
  justify-content: center;
}

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

/* TLV2 — Helpers de alineación semántica */
.align-start { text-align: left; }
.align-center { text-align: center; }
.align-end { text-align: right; }

/* Alineación de grupos de CTA (y futuros clusters) */
.align-start .cta-group { justify-content: flex-start; }
.align-center .cta-group { justify-content: center; }
.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;
}