/* ═══════════════════════════════════════════════════════════
   AIRSOFT CLUB — UTILITIES v1
   Clases utility cortas con prefijo .u- para reemplazar los
   inline styles más repetidos del proyecto.
   Cargar AL FINAL en header.ejs (después de breakpoints.css).
   ─────────────────────────────────────────────────────────── */


/* ── COLORES DE TEXTO ────────────────────────────────────── */
.u-text-accent     { color: var(--accent); }
.u-text-bright     { color: var(--text-bright); }
.u-text-primary    { color: var(--text-primary); }
.u-text-secondary  { color: var(--text-secondary); }
.u-text-dim        { color: var(--text-dim); }
.u-text-warning    { color: var(--warning, #d97706); }
.u-text-danger     { color: #e74c3c; }
.u-text-info       { color: var(--info); }
.u-text-success    { color: var(--accent); }


/* ── DISPLAY ─────────────────────────────────────────────── */
.u-d-none          { display: none; }
.u-d-inline        { display: inline; }
.u-d-inline-block  { display: inline-block; }
.u-d-block         { display: block; }
.u-d-flex          { display: flex; }
.u-d-inline-flex   { display: inline-flex; }
.u-d-grid          { display: grid; }


/* ── FLEX HELPERS ────────────────────────────────────────── */
.u-flex-1          { flex: 1; }
.u-flex-1-min200   { flex: 1; min-width: 200px; }     /* patrón muy repetido en banners */
.u-flex-col        { display: flex; flex-direction: column; }
.u-flex-col-sm     { display: flex; flex-direction: column; gap: 0.4rem; }
.u-flex-col-md     { display: flex; flex-direction: column; gap: 0.6rem; }
.u-flex-row        { display: flex; flex-direction: row; }
.u-flex-wrap       { flex-wrap: wrap; }
.u-items-center    { align-items: center; }
.u-justify-center  { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-flex-shrink-0   { flex-shrink: 0; }


/* ── GAPS ────────────────────────────────────────────────── */
.u-gap-xs  { gap: 0.25rem; }
.u-gap-sm  { gap: 0.4rem; }
.u-gap     { gap: 0.6rem; }
.u-gap-md  { gap: 0.8rem; }
.u-gap-lg  { gap: 1rem; }


/* ── SPACING (margin) ────────────────────────────────────── */
.u-mt-0    { margin-top: 0; }
.u-mt-xs   { margin-top: 0.3rem; }
.u-mt-sm   { margin-top: 0.5rem; }
.u-mt      { margin-top: 0.8rem; }
.u-mt-md   { margin-top: 1rem; }
.u-mt-lg   { margin-top: 1.2rem; }
.u-mt-xl   { margin-top: 1.5rem; }

.u-mb-0    { margin-bottom: 0; }
.u-mb-xs   { margin-bottom: 0.3rem; }
.u-mb-sm   { margin-bottom: 0.5rem; }
.u-mb      { margin-bottom: 0.6rem; }
.u-mb-md   { margin-bottom: 1rem; }
.u-mb-lg   { margin-bottom: 1.2rem; }
.u-mb-xl   { margin-bottom: 1.5rem; }


/* ── TIPOGRAFÍA ──────────────────────────────────────────── */
.u-text-xs       { font-size: 0.72rem; }
.u-text-sm       { font-size: 0.78rem; }
.u-text-base     { font-size: 0.88rem; }
.u-text-md       { font-size: 0.92rem; }
.u-text-lg       { font-size: 1rem; }
.u-text-xl       { font-size: 1.1rem; }

.u-leading       { line-height: 1.6; }
.u-leading-tight { line-height: 1.3; }

.u-text-uppercase{ text-transform: uppercase; }
.u-tracking      { letter-spacing: 1px; }
.u-font-bold     { font-weight: 700; }
.u-font-medium   { font-weight: 500; }


/* ── DECORACIÓN ──────────────────────────────────────────── */
.u-no-underline  { text-decoration: none; }
.u-nowrap        { white-space: nowrap; }


/* ── BORDES ──────────────────────────────────────────────── */
.u-border-l-accent  { border-left: 2px solid var(--accent); }
.u-border-l-warning { border-left: 2px solid var(--warning, #d97706); }
.u-border-l-danger  { border-left: 2px solid #e74c3c; }


/* ── PATRONES COMPUESTOS (los más repetidos del proyecto) ── */

/* Texto narrativo estándar (prose style: 14 ocurrencias) */
.u-prose-body {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Texto secundario menor (ayuda, descripciones) */
.u-prose-help {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/* Subtítulo en mono uppercase (etiquetas tactical) */
.u-label-tactical {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.4rem;
}

/* Caption menor uppercase mono */
.u-caption-mono {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Empty state básico */
.u-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-dim);
}

/* Container del banner header (4 ocurrencias) */
.u-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* Footer-divider compacto */
.u-footer-divider {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-dim);
  text-align: center;
}