/* ============================================================
   COMPONENTS — UI primitives consistentes
   ============================================================
   Componentes reutilizables que cualquier módulo usa para
   mantener consistencia visual sin reinventar estilos.

   Patrón naming: .ui-{componente} + .ui-{componente}-{variant}
   ============================================================ */

/* ============================================================
   KPI CARD — La pieza más reutilizada del portal
   ============================================================ */
.ui-kpi-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.ui-kpi {
  position: relative;
  padding: 14px 16px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border-default, rgba(26,26,26,0.10));
  background: var(--bg-surface, #FFFFFF);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ui-kpi-clickable { cursor: pointer; }
.ui-kpi-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(27,58,46,0.06));
}

.ui-kpi-icon {
  position: absolute;
  top: 10px; right: 12px;
  font-size: 16px;
  opacity: 0.45;
}

.ui-kpi-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #595959);
  margin-bottom: 4px;
  line-height: 1.2;
}

.ui-kpi-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary, #1A1A1A);
  letter-spacing: -0.01em;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.ui-kpi-sub {
  font-size: 11px;
  color: var(--text-subtle, #767676);
  margin-top: 4px;
  font-weight: 500;
}

/* Tonos: borde lateral de color + sutil tint de fondo */
.ui-kpi-primary { border-left: 3px solid var(--accent-primary, #1B3A2E); }
.ui-kpi-primary .ui-kpi-value { color: var(--accent-primary, #1B3A2E); }

.ui-kpi-gold { border-left: 3px solid var(--accent-gold, #C9A063); background: linear-gradient(135deg, #FFFFFF 60%, var(--accent-gold-veil, rgba(201,160,99,0.06))); }
.ui-kpi-gold .ui-kpi-value { color: var(--accent-gold-deep, #997336); }

.ui-kpi-success { border-left: 3px solid var(--success, #2D7A50); }
.ui-kpi-success .ui-kpi-value { color: var(--success, #2D7A50); }

.ui-kpi-warn { border-left: 3px solid var(--warning, #B07520); background: var(--warning-soft, rgba(176,117,32,0.12)); }
.ui-kpi-warn .ui-kpi-value { color: var(--warning, #B07520); }

.ui-kpi-danger { border-left: 3px solid var(--danger, #A8311F); background: var(--danger-soft, rgba(168,49,31,0.10)); }
.ui-kpi-danger .ui-kpi-value { color: var(--danger, #A8311F); }

.ui-kpi-info { border-left: 3px solid var(--info, #2D4A6B); }
.ui-kpi-info .ui-kpi-value { color: var(--info, #2D4A6B); }

.ui-kpi-neutral { border-left: 3px solid var(--border-strong, rgba(26,26,26,0.18)); }

/* Versión grande */
.ui-kpi-lg { padding: 20px 22px; min-height: 110px; }
.ui-kpi-lg .ui-kpi-value { font-size: 32px; }
.ui-kpi-lg .ui-kpi-label { font-size: 11px; margin-bottom: 6px; }

/* Delta indicator */
.ui-delta {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.ui-delta-up    { background: rgba(45,122,80,0.12); color: var(--success, #2D7A50); }
.ui-delta-down  { background: rgba(168,49,31,0.12); color: var(--danger, #A8311F); }
.ui-delta-flat  { background: rgba(0,0,0,0.05); color: var(--text-muted, #595959); }

/* ============================================================
   EMPTY STATE — Cuando no hay datos
   ============================================================ */
.ui-empty-state {
  text-align: center;
  padding: 48px 24px;
  max-width: 420px;
  margin: 0 auto;
}
.ui-empty-state .ui-illu {
  width: 160px;
  height: 112px;
  margin: 0 auto 16px;
  display: block;
}
.ui-empty-icon {
  font-size: 56px;
  margin-bottom: 12px;
  opacity: 0.55;
  line-height: 1;
}
.ui-empty-title {
  font-family: var(--font-serif, Georgia);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-primary, #1B3A2E);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.ui-empty-message {
  font-size: 13px;
  color: var(--text-muted, #595959);
  margin: 0 0 18px;
  line-height: 1.55;
}
.ui-empty-cta {
  font-weight: 700;
  padding: 10px 20px;
  font-size: 13px;
}

/* ============================================================
   BADGE — Etiqueta consistente de estado
   ============================================================ */
.ui-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  line-height: 1.5;
}
.ui-badge-neutral { background: var(--bg-subtle, #F0EDE5); color: var(--text-muted, #595959); }
.ui-badge-success { background: rgba(45,122,80,0.14); color: var(--success, #2D7A50); }
.ui-badge-warn    { background: rgba(176,117,32,0.15); color: var(--warning, #B07520); }
.ui-badge-danger  { background: rgba(168,49,31,0.13); color: var(--danger, #A8311F); }
.ui-badge-info    { background: rgba(45,74,107,0.12); color: var(--info, #2D4A6B); }
.ui-badge-gold    { background: var(--accent-gold-soft, rgba(201,160,99,0.14)); color: var(--accent-gold-deep, #997336); }
.ui-badge-primary { background: var(--accent-primary-soft, rgba(27,58,46,0.08)); color: var(--accent-primary, #1B3A2E); }

/* ============================================================
   SECTION HEADER
   ============================================================ */
.ui-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ui-section-title {
  font-family: var(--font-serif, Georgia);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-primary, #1B3A2E);
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.ui-section-subtitle {
  font-size: 13px;
  color: var(--text-muted, #595959);
  margin: 0;
  line-height: 1.4;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  .ui-kpi-value { font-size: 18px; }
  .ui-kpi-lg .ui-kpi-value { font-size: 24px; }
  .ui-empty-state { padding: 32px 16px; }
  .ui-empty-title { font-size: 18px; }
}

/* ============================================================
   TIPOGRAFÍA ESCALADA — tokens consistentes
   ============================================================
   Usar con clases utility para mantener jerarquía sin hardcodes:
     .t-display  → 32px serif, h1 hero
     .t-title    → 24px serif, secciones grandes
     .t-section  → 18px sans, secciones
     .t-body     → 14px sans, párrafos
     .t-small    → 12px sans, metadata
     .t-micro    → 10px sans uppercase, labels/badges
   ============================================================ */
:root {
  /* Font sizes (móvil-first; subir con responsive) */
  --fs-display: 28px;
  --fs-title:   22px;
  --fs-section: 17px;
  --fs-body:    14px;
  --fs-small:   12px;
  --fs-micro:   10px;
  /* Line heights */
  --lh-tight:   1.15;
  --lh-normal:  1.5;
  --lh-loose:   1.7;
  /* Letter spacing */
  --ls-tight:        -0.012em;
  --ls-normal:       0;
  --ls-loose:        0.02em;
  --ls-uppercase:    0.06em;
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}
@media (min-width: 768px) {
  :root {
    --fs-display: 32px;
    --fs-title:   26px;
    --fs-section: 19px;
  }
}

.t-display, h1.t-display { font-family: var(--font-serif); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 700; color: var(--accent-primary); margin: 0; }
.t-title,   h2.t-title   { font-family: var(--font-serif); font-size: var(--fs-title);   line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 700; color: var(--accent-primary); margin: 0; }
.t-section, h3.t-section { font-family: var(--font-sans);  font-size: var(--fs-section); line-height: var(--lh-normal); font-weight: 700; color: var(--accent-primary); margin: 0; }
.t-body      { font-size: var(--fs-body);  line-height: var(--lh-normal); color: var(--text-primary); }
.t-small     { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--text-secondary); }
.t-micro     { font-size: var(--fs-micro); line-height: var(--lh-normal); text-transform: uppercase; letter-spacing: var(--ls-uppercase); font-weight: 700; color: var(--text-muted); }
.t-muted     { color: var(--text-muted); }
.t-subtle    { color: var(--text-subtle); }
.t-tabular   { font-variant-numeric: tabular-nums; }

/* Utility spacing */
.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)}
.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}
.mb-1{margin-bottom:var(--space-1)}.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}.mb-5{margin-bottom:var(--space-5)}

/* Estados invisibles — sr-only utility */
.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;
}