/* MANO A MÁQUINA — util.css (utilidades estilo Tailwind, SOLO excepciones).
   Escrita a mano, sin npm/CDN/Tailwind (regla stdlib de G8). Nomenclatura
   Tailwind mapeada a la escala de tokens.css. Presupuesto: ~60 clases.
   Si la misma combinación de utilidades se repite en 2+ sitios de un
   componente, ha dejado de ser excepción: promuévela a base.css. */

/* ---- layout: display / flex ---- */
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.block{display:block}
.hidden{display:none}
.flex-col{flex-direction:column}
.flex-row{flex-direction:row}
.flex-wrap{flex-wrap:wrap}
.flex-nowrap{flex-wrap:nowrap}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.items-baseline{align-items:baseline}
.items-stretch{align-items:stretch}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-start{justify-content:flex-start}

/* ---- gap ---- */
.gap-1{gap:var(--sp-1)} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)}
.gap-4{gap:var(--sp-4)} .gap-5{gap:var(--sp-5)} .gap-6{gap:var(--sp-6)}
.gap-8{gap:var(--sp-8)} .gap-10{gap:var(--sp-10)}

/* ---- texto ---- */
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.uppercase{text-transform:uppercase}
.font-display{font-family:var(--font-display)}
.font-heading{font-family:var(--font-heading)}
.font-body{font-family:var(--font-body)}
.font-data{font-family:var(--font-data);font-variant-numeric:tabular-nums}
.tabular{font-variant-numeric:tabular-nums}

/* ---- tamaño tipográfico (escala de tokens) ---- */
.text-11{font-size:var(--fs-11)} .text-12{font-size:var(--fs-12)}
.text-13{font-size:var(--fs-13)} .text-14{font-size:var(--fs-14)}
.text-15{font-size:var(--fs-15)} .text-16{font-size:var(--fs-16)}
.text-17{font-size:var(--fs-17)} .text-18{font-size:var(--fs-18)}

/* ---- ancho ---- */
.w-full{width:100%}
.max-w-58{max-width:58ch}
.max-w-62{max-width:62ch}
.max-w-64{max-width:64ch}

/* ---- opacidad / color semántico ---- */
.dim{opacity:.7}
.faint{opacity:.5}
.pos{color:var(--verde)}
.neg{color:var(--rojo)}

/* ---- espaciado vertical one-off ---- */
.mt-2{margin-top:var(--sp-2)} .mt-4{margin-top:var(--sp-4)}
.mt-6{margin-top:var(--sp-6)} .mt-auto{margin-top:auto}
.mb-2{margin-bottom:var(--sp-2)} .mb-4{margin-bottom:var(--sp-4)}
.px-4{padding-left:var(--sp-4);padding-right:var(--sp-4)}
.py-2{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}