/* ============================================================
   DESIGN SYSTEM — Capa de consistencia global
   ============================================================
   Este archivo NO redefine componentes existentes: los refuerza
   y rellena los huecos para que toda la plataforma comparta las
   mismas reglas (botones, inputs, focus, badges, estados vacíos).
   Se carga DESPUÉS de style.css y dashboard.css.

   Identidad visual, colores y branding se mantienen intactos:
   todo se apoya en los design tokens de :root.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. BOTONES — Estados unificados para TODAS las variantes
   ──────────────────────────────────────────────────────────── */

/* Foco accesible consistente (WCAG) en cualquier botón.
   Anillo blanco translúcido neutro (no cyan) para que no aparezca
   un borde de color a un lado del botón antes de interactuar. */
.btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}
/* Estado disabled unificado */
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}
/* Micro-interacción de click consistente */
.btn:active { transform: translateY(0) scale(0.98); }

/* Botón ADVERTENCIA (faltaba en el sistema) */
.btn-warning {
  background: var(--color-warning);
  color: #1a1206;
  border-color: var(--color-warning);
  font-weight: 700;
}
.btn-warning:hover {
  background: #fbbf24;
  border-color: #fbbf24;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.32);
  transform: translateY(-1px);
}

/* Asegurar que success/warning/danger comparten la misma altura
   y comportamiento que primary/secondary */
.btn-success,
.btn-warning,
.btn-danger {
  transition:
    background-color 180ms var(--ease-out-expo),
    border-color 180ms var(--ease-out-expo),
    transform 80ms ease-out,
    box-shadow 180ms ease-out;
}
.btn-success:active,
.btn-warning:active,
.btn-danger:active { transform: scale(0.98); }

/* ────────────────────────────────────────────────────────────
   2. INPUTS — Foco unificado en todos los controles de formulario
   ──────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
select,
textarea {
  transition:
    border-color 160ms var(--ease-out-expo),
    box-shadow 160ms var(--ease-out-expo),
    background 160ms var(--ease-out-expo);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 0, 80, 0.12);
}
/* Placeholder consistente */
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
/* Estado disabled de inputs */
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ────────────────────────────────────────────────────────────
   3. FOCO ACCESIBLE GLOBAL — enlaces y elementos interactivos
   ──────────────────────────────────────────────────────────── */
a:focus-visible,
[role="button"]:focus-visible,
.btn-icon:focus-visible,
.lead-tab:focus-visible,
summary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ────────────────────────────────────────────────────────────
   4. ICONOGRAFÍA — tamaño y grosor consistentes
   ──────────────────────────────────────────────────────────── */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}
.icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;              /* grosor uniforme en todos los iconos */
}
/* Tamaño por defecto de icono dentro de botones */
.btn .icon { width: 18px; height: 18px; }
.btn-sm .icon { width: 16px; height: 16px; }
.btn-lg .icon { width: 20px; height: 20px; }

/* ────────────────────────────────────────────────────────────
   5. TAMAÑOS TÁCTILES (accesibilidad móvil, mínimo 44x44)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .btn,
  .btn-icon,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  select {
    min-height: 44px;
  }
}

/* ────────────────────────────────────────────────────────────
   6. ESTADO VACÍO — componente unificado (.empty)
   Refuerza el estilo existente para que sea consistente
   ──────────────────────────────────────────────────────────── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-7) var(--space-5);
  color: var(--text-secondary);
}
.empty .icon,
.empty > svg {
  width: 48px;
  height: 48px;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);   /* centrado ya lo da align-items del flex */
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty h3 { text-align: center; margin: 0 0 var(--space-2); }
.empty p { margin: 0 0 var(--space-2); text-align: center; max-width: 42ch; }
.empty p strong { color: var(--text-primary); font-size: 1.05rem; }
.empty .muted { color: var(--text-muted); font-size: 0.9rem; }
.empty .btn { margin-top: var(--space-4); }
.empty-sm { padding: var(--space-5) var(--space-4); }

/* ────────────────────────────────────────────────────────────
   7. REDUCE MOTION — respetar preferencia de accesibilidad
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ────────────────────────────────────────────────────────────
   8. SKELETON LOADING — sistema unificado de placeholders
   Da sensación de velocidad mientras cargan datos.
   Uso: <div class="skeleton skeleton-text"></div>
   ──────────────────────────────────────────────────────────── */
.skeleton-text,
.skeleton-title,
.skeleton-avatar,
.skeleton-line,
.skeleton-btn,
.skeleton-thumb {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 100%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
  display: block;
}
.skeleton-text  { height: 12px; width: 100%; margin-bottom: var(--space-2); }
.skeleton-text:last-child { margin-bottom: 0; }
.skeleton-text.short { width: 60%; }
.skeleton-text.tiny  { width: 35%; }
.skeleton-title { height: 20px; width: 45%; margin-bottom: var(--space-3); }
.skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.skeleton-line  { height: 1px; width: 100%; }
.skeleton-btn   { height: 40px; width: 120px; border-radius: var(--radius-pill); }
.skeleton-thumb { width: 100%; aspect-ratio: 16/10; border-radius: var(--radius-md); }

/* Skeleton de fila de tabla (para tablas que cargan por AJAX) */
.skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.skeleton-row .skeleton-text { margin: 0; }

/* Skeleton de card completa (dashboard, comunidad) */
.skeleton-card {
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.skeleton-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.skeleton-card-head .skeleton-text { margin: 0; }

/* Contenedor que se oculta cuando el contenido real llega */
[data-skeleton].is-loaded { display: none; }

/* ────────────────────────────────────────────────────────────
   9. ESTADO VACÍO DENTRO DE TABLAS — centrado correcto
   Cuando un .empty vive dentro de un <td> (fila "no hay datos"),
   el layout responsive del td (flex + text-align:right) lo
   descentra. Forzamos centrado real en todos los breakpoints.
   ──────────────────────────────────────────────────────────── */
.data-table td .empty,
td .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}
/* Anular el layout flex del td responsive para la celda que
   contiene el estado vacío (no debe partirse en label/valor) */
.data-table td:has(.empty) {
  display: block !important;
  text-align: center !important;
}
.data-table td:has(.empty)::before {
  display: none !important;   /* sin etiqueta data-label en filas vacías */
}
.data-table td .empty .icon,
td .empty .icon {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.data-table td .empty p,
td .empty p {
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ════════════════════════════════════════════════════════════
   10. JERARQUÍA TIPOGRÁFICA FORMAL
   Aplica la escala de tipos a los elementos y clases compartidas
   sin reescribir el markup de cada página. Da ritmo y consistencia.
   ════════════════════════════════════════════════════════════ */
.page-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.page-subtitle {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  line-height: var(--lh-snug);
}
.widget-title,
.widget-head h3,
.widget-card > h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
/* Labels en mayúsculas (secciones de sidebar, th, eyebrows) */
.kpi-label,
.stat-card-label,
.filter-field label,
.data-table thead th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-label);   /* legibilidad AA garantizada a 12px */
}
/* Cifras grandes: line-height ajustado para que no "floten" */
.kpi-value,
.stat-card-value,
.biz-card-num,
.system-card-value {
  font-weight: var(--fw-extra);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════
   11. ELEVACIÓN Y SUPERFICIES REFINADAS
   Da profundidad premium a las tarjetas mediante sombras suaves
   en dos capas + realce interior sutil. Aplicado a clases
   compartidas, propaga a toda la plataforma de una vez.
   ════════════════════════════════════════════════════════════ */
.widget-card,
.stat-card,
.filter-panel,
.kpi {
  box-shadow: var(--elevation-2), var(--surface-highlight);
  transition: box-shadow var(--tx-base), border-color var(--tx-base), transform var(--tx-base);
}
/* Realce sutil al pasar el cursor sobre tarjetas interactivas */
.widget-card:hover {
  box-shadow: var(--elevation-3), var(--surface-highlight);
}
/* Popovers, dropdowns y menús: superficie más opaca + sombra profunda */
.autocomplete-list,
.notif-panel,
.presence-menu,
.dropdown-menu {
  box-shadow: var(--elevation-4);
}
/* Modales y drawers: máxima elevación */
.admin-modal-content,
.drawer-panel,
.post-modal-content {
  box-shadow: var(--elevation-4), var(--surface-highlight);
}

/* ════════════════════════════════════════════════════════════
   12. REFINAMIENTO DE PRIMITIVOS — botones, badges, inputs
   Pule el detalle sin cambiar la identidad ni los colores.
   ════════════════════════════════════════════════════════════ */

/* Botones: micro-elevación y feedback táctil más pulido */
.btn {
  transition: transform var(--tx-fast), box-shadow var(--tx-fast),
              background var(--tx-fast), border-color var(--tx-fast), opacity var(--tx-fast);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.005em;
}
.btn-primary {
  box-shadow: var(--elevation-1);
}
.btn-primary:hover {
  box-shadow: var(--elevation-2), 0 0 20px rgba(255, 0, 80, 0.25);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary:hover,
.btn-ghost:hover { transform: translateY(-1px); }

/* Badges: tipografía y forma consistentes en todas las variantes */
.badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  padding: 0.28rem 0.65rem;
  line-height: 1.2;
}

/* Inputs y selects: foco premium con anillo suave */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"],
select, textarea {
  transition: border-color var(--tx-fast), box-shadow var(--tx-fast), background var(--tx-fast);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="search"]:focus, input[type="date"]:focus,
select:focus, textarea:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(0, 242, 234, 0.12);
}

/* Tablas: cabecera con más presencia, filas con separación por color sutil */
.data-table thead th {
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
}
.data-table tbody tr {
  transition: background var(--tx-fast);
}

/* Ritmo de espaciado más generoso y consistente en tarjetas */
.widget-card {
  border-radius: var(--radius-lg);
}
.widget-head {
  margin-bottom: var(--space-4);
}

/* Divisores y separadores coherentes */
hr, .divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-5) 0;
}

/* Scroll bars discretas (webkit) — detalle premium */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
  background-clip: padding-box;
}

/* ════════════════════════════════════════════════════════════
   13. UTILIDADES DE ALINEACIÓN DE COLUMNA
   Fuerzan la alineación de una columna concreta (th + td),
   anulando la regla por defecto (1ª col izquierda, resto centro).
   Útil cuando una columna necesita alineación específica.
   ════════════════════════════════════════════════════════════ */
.data-table thead th.col-center,
.data-table tbody td.col-center { text-align: center !important; }
.data-table thead th.col-left,
.data-table tbody td.col-left { text-align: left !important; }
.data-table thead th.col-right,
.data-table tbody td.col-right { text-align: right !important; }
/* .cell-name siempre a la izquierda (contenido rico de la 1ª columna) */
.data-table tbody td.cell-name { text-align: left; }

/* ════════════════════════════════════════════════════════════
   14. CELDA DE ESTADO VACÍO — centrado dentro de tabla
   Cuando un empty state vive en un <td colspan> (fila "sin datos"),
   la regla de "primera columna a la izquierda" lo descentraba.
   .empty-cell fuerza el centrado real en todos los breakpoints.
   ════════════════════════════════════════════════════════════ */
.data-table td.empty-cell {
  text-align: center !important;
  padding: var(--space-6) var(--space-4);
}
.data-table td.empty-cell::before { display: none !important; }  /* sin data-label */
.data-table td.empty-cell .empty {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.data-table td.empty-cell .empty .icon,
.data-table td.empty-cell .empty svg {
  margin-left: auto !important;
  margin-right: auto !important;
}
.data-table td.empty-cell .empty p {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* ════════════════════════════════════════════════════════════
   15. MIS RECURSOS — tarjeta de recurso más profesional (desktop)
   Refina la card existente sin cambiar su markup: icono con
   color, mejor jerarquía y acción alineada abajo.
   ════════════════════════════════════════════════════════════ */
.resources-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 1.15rem !important;
}
.resource-card {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.85rem !important;
  padding: 1.35rem !important;
  box-shadow: var(--elevation-2), var(--surface-highlight);
  transition: transform var(--tx-base), box-shadow var(--tx-base), border-color var(--tx-base) !important;
}
.resource-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--elevation-3), var(--surface-highlight);
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--border-soft));
}
/* Icono en "pastilla" con color de marca */
.resource-card .resource-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  flex-shrink: 0;
}
.resource-card.is-priority .resource-icon {
  background: color-mix(in srgb, var(--color-gold) 15%, transparent);
  color: var(--color-gold);
}
.resource-card .resource-icon .icon { width: 22px; height: 22px; }
.resource-card .resource-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.resource-card .resource-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: 1.3;
}
.resource-card .resource-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.resource-card .resource-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.35rem;
}
/* El botón de descarga ocupa el ancho completo abajo, más presencia */
.resource-card > .btn {
  width: 100%;
  justify-content: center;
  margin-top: 0.25rem;
}

/* ════════════════════════════════════════════════════════════
   16. HEADER PROFESIONAL "Mis Resultados"
   Cabecera con icono en pastilla, título grande y CTA integrado.
   ════════════════════════════════════════════════════════════ */
.results-header {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-primary) 8%, var(--bg-card)),
    var(--bg-card) 60%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-2), var(--surface-highlight);
}
.results-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--gradient-tiktok);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(255, 0, 80, 0.3);
}
.results-header-icon .icon { width: 26px; height: 26px; }
.results-header-text { flex: 1; min-width: 0; }
.results-header-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extra);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin: 0;
  color: var(--text-primary);
}
.results-header-sub {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin: 0.3rem 0 0;
  line-height: 1.5;
}
.results-header-cta { flex-shrink: 0; }
@media (max-width: 640px) {
  .results-header { flex-wrap: wrap; padding: 1.15rem; }
  .results-header-text { flex: 1 1 calc(100% - 68px); }
  .results-header-cta { width: 100%; justify-content: center; margin-top: 0.35rem; }
}

/* ════════════════════════════════════════════════════════════
   17. CHECKBOXES Y RADIOS CON ESTILO PREMIUM
   Reemplaza el control nativo (soso) por uno custom coherente
   con la identidad: caja redondeada, check propio, foco cuidado.
   ════════════════════════════════════════════════════════════ */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border: 2px solid var(--border-strong);
  cursor: pointer;
  position: relative;
  transition: background var(--tx-fast), border-color var(--tx-fast), box-shadow var(--tx-fast);
  vertical-align: middle;
}
input[type="checkbox"] { border-radius: 6px; }
input[type="radio"]   { border-radius: 50%; }

/* Hover: insinúa el color de marca */
input[type="checkbox"]:hover,
input[type="radio"]:hover { border-color: var(--color-primary); }

/* Marcado: relleno con gradiente + check dibujado */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--gradient-tiktok);
  border-color: transparent;
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

/* Foco accesible (teclado) */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 0, 80, 0.25);
}

/* Etiqueta clicable alineada con el control */
label.checkbox-inline,
.form-group > label:has(> input[type="checkbox"]),
.form-group > label:has(> input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  user-select: none;
}

/* ════════════════════════════════════════════════════════════
   18. KPIs REESTRUCTURADOS — jerarquía clara (KPIs de admin)
   Tres destacados grandes con icono + métricas secundarias
   agrupadas por tema, para no amontonar datos "al tuntún".
   ════════════════════════════════════════════════════════════ */
.kpi-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.kpi-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-1);
  transition: transform var(--tx-fast), box-shadow var(--tx-fast);
}
.kpi-hero:hover { transform: translateY(-2px); box-shadow: var(--elevation-2); }
.kpi-hero-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--ic, var(--color-primary)) 15%, transparent);
  color: var(--ic, var(--color-primary));
  flex-shrink: 0;
}
.kpi-hero-icon .icon { width: 26px; height: 26px; }
.kpi-hero-body { min-width: 0; }
.kpi-hero-label { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: var(--fw-medium); }
.kpi-hero-value {
  font-size: var(--fs-2xl); font-weight: var(--fw-extra);
  letter-spacing: var(--tracking-tight); line-height: 1.1; margin: 0.15rem 0;
  color: var(--text-primary);
}
.kpi-hero-sub { font-size: var(--fs-xs); color: var(--text-muted); }

/* Grupos compactos de métricas secundarias */
.kpi-compact-group {
  padding: 1.1rem 1.35rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.kpi-compact-title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-label);
  font-weight: var(--fw-semibold);
  margin-bottom: 0.85rem;
}
.kpi-compact-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem 1.5rem;
}
.kpi-compact {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem 0;
}
.kpi-compact-num {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: 1.15;
}
.kpi-compact-lbl { font-size: var(--fs-sm); color: var(--text-secondary); }

@media (max-width: 900px) {
  .kpi-hero-grid { grid-template-columns: 1fr; }
}
/* Variante compacta: métricas secundarias, más por fila y algo menores */
.kpi-hero-grid-sm { grid-template-columns: repeat(3, 1fr); }
.kpi-hero-grid-sm .kpi-hero { padding: 1.1rem 1.25rem; gap: 0.85rem; }
.kpi-hero-grid-sm .kpi-hero-icon { width: 44px; height: 44px; }
.kpi-hero-grid-sm .kpi-hero-icon .icon { width: 22px; height: 22px; }
.kpi-hero-grid-sm .kpi-hero-value { font-size: var(--fs-xl); }
@media (max-width: 900px) {
  .kpi-hero-grid-sm { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .kpi-hero-grid-sm { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   19. SETTINGS — barra de guardado sticky + secciones pulidas
   ════════════════════════════════════════════════════════════ */
.settings-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding: 1rem 1.35rem;
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-3);
}
.settings-save-hint { font-size: var(--fs-sm); color: var(--text-secondary); }
.settings-section { margin-bottom: 1.25rem; }
.settings-section .widget-head h3 { text-transform: capitalize; }
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem 1.35rem;
}
.settings-grid .form-group-full { grid-column: 1 / -1; }
.settings-grid label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}
.settings-grid label .muted { font-weight: var(--fw-regular); font-size: var(--fs-xs); }
@media (max-width: 640px) {
  .settings-save-bar { flex-direction: column; align-items: stretch; }
  .settings-save-bar .btn { width: 100%; justify-content: center; }
}