/* =================================================================
 * datalab-utilities.css
 * Clases utilitarias canónicas de DataLab — Unitrópico
 *
 * Pareja del datalab-tokens.css. Mientras los tokens son variables,
 * este archivo son clases listas para usar en HTML.
 *
 * Convención de nombres:
 *   .dl-{property}-{value}   ej. .dl-hide, .dl-flex-center, .dl-text-muted
 *
 * Aliases legacy:
 *   Las viejas .ocultar, .resaltar, .loader-container quedan como
 *   alias hasta que F4 termine y se puedan eliminar.
 * ================================================================= */

/* ─── Display & visibility ─────────────────────────────── */
.dl-hide          { display: none !important; }
.dl-show          { display: block !important; }
.dl-show-inline   { display: inline-block !important; }
.dl-show-flex     { display: flex !important; }
.dl-invisible     { visibility: hidden !important; }
.dl-visible       { visibility: visible !important; }

/* ─── Flex helpers ─────────────────────────────────────── */
.dl-flex            { display: flex; }
.dl-flex-center     { display: flex; align-items: center; justify-content: center; }
.dl-flex-between    { display: flex; align-items: center; justify-content: space-between; }
.dl-flex-col        { display: flex; flex-direction: column; }
.dl-gap-1           { gap: var(--dl-space-1); }
.dl-gap-2           { gap: var(--dl-space-2); }
.dl-gap-3           { gap: var(--dl-space-3); }
.dl-gap-4           { gap: var(--dl-space-4); }

/* ─── Spacing helpers ──────────────────────────────────── */
.dl-mt-2 { margin-top: var(--dl-space-2); }
.dl-mt-3 { margin-top: var(--dl-space-3); }
.dl-mt-4 { margin-top: var(--dl-space-4); }
.dl-mt-5 { margin-top: var(--dl-space-5); }
.dl-mb-2 { margin-bottom: var(--dl-space-2); }
.dl-mb-3 { margin-bottom: var(--dl-space-3); }
.dl-mb-4 { margin-bottom: var(--dl-space-4); }
.dl-mb-5 { margin-bottom: var(--dl-space-5); }
.dl-p-3  { padding: var(--dl-space-3); }
.dl-p-4  { padding: var(--dl-space-4); }
.dl-p-5  { padding: var(--dl-space-5); }

/* ─── Tipografía & color helpers ───────────────────────── */
.dl-text-muted   { color: var(--dl-muted); }
.dl-text-green   { color: var(--dl-green-dark); }
.dl-text-gold    { color: var(--dl-gold); }
.dl-text-xs      { font-size: var(--dl-text-xs); }
.dl-text-sm      { font-size: var(--dl-text-sm); }
.dl-text-lg      { font-size: var(--dl-text-lg); }
.dl-font-display { font-family: var(--dl-font-display); }
.dl-font-body    { font-family: var(--dl-font-body); }
.dl-truncate     {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Highlight ─────────────────────────────────────────── */
.dl-highlight {
  background: var(--dl-gold-tint);
  color: var(--dl-green-dark);
  padding: 2px 8px;
  border-radius: var(--dl-radius-sm);
  font-weight: 700;
}

/* ─── Loader genérico ──────────────────────────────────── */
.dl-loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--dl-white);
  z-index: var(--dl-z-modal);
  animation: dlLoaderFade 0.4s var(--dl-ease) forwards;
}

.dl-loader.is-out {
  animation: dlLoaderFadeOut 0.4s var(--dl-ease) forwards;
  pointer-events: none;
}

@keyframes dlLoaderFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dlLoaderFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}

/* ─── Visually-hidden (a11y) ───────────────────────────── */
.dl-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =================================================================
 * Aliases LEGACY — clases con nombres genéricos (sin namespace) que
 * existían antes y se siguen usando en operaciones.html, dashboard,
 * etc. Mantenemos compatibilidad mientras F4 termina la migración.
 * Tras F4, eliminar este bloque.
 * ================================================================= */
.ocultar          { display: none !important; }
.resaltar         { /* placeholder — usar .dl-highlight en código nuevo */ }
.loader-container { /* placeholder — usar .dl-loader en código nuevo */ }