/* ==========================================================================
   TEMA PEARL — Dashboard Admin SentidoPRO
   Gruponea @jperezantoni

   Inspiración: Linear, Vercel, Notion
   Sidebar blanca con border sutil, main content gris muy suave,
   tipografía font-weight 300 en labels y descripciones.
   ========================================================================== */

:root[data-dashboard-theme="pearl"],
[data-dashboard-theme="pearl"] {

  /* ─── Sidebar ─── */
  --dash-sidebar-bg: #ffffff;
  --dash-sidebar-border: 0.5px solid #ebebed;
  --dash-sidebar-width: 220px;

  /* Nav items */
  --dash-nav-item-color: #999999;
  --dash-nav-item-weight: 300;
  --dash-nav-item-size: 12px;
  --dash-nav-item-tracking: 0.01em;
  --dash-nav-item-padding: 7px 16px;

  /* Nav item activo */
  --dash-nav-active-color: #111111;
  --dash-nav-active-weight: 400;
  --dash-nav-active-bg: #f3f3f5;
  --dash-nav-active-radius: 0px;

  /* Logo / brand en sidebar */
  --dash-brand-color: #111111;
  --dash-brand-weight: 500;
  --dash-brand-size: 13px;
  --dash-brand-tracking: -0.02em;

  /* Separadores en sidebar */
  --dash-sidebar-divider: 1px solid #ebebed;

  /* Labels de sección */
  --dash-section-label-color: #cccccc;
  --dash-section-label-size: 10px;
  --dash-section-label-weight: 400;
  --dash-section-label-tracking: 0.08em;

  /* ─── Main content ─── */
  --dash-main-bg: #f8f8f9;
  --dash-topbar-bg: #ffffff;
  --dash-topbar-border: 0.5px solid #ebebed;

  /* ─── Títulos de página ─── */
  --dash-page-title-weight: 300;
  --dash-page-title-tracking: -0.03em;
  --dash-page-title-size: 28px;
  --dash-page-title-color: #111111;

  /* Subtítulo / descripción de página */
  --dash-page-sub-weight: 300;
  --dash-page-sub-size: 13px;
  --dash-page-sub-color: #aaaaaa;

  /* Eyebrow text en dashboard */
  --dash-eyebrow-size: 10px;
  --dash-eyebrow-weight: 500;
  --dash-eyebrow-tracking: 0.08em;
  --dash-eyebrow-color: #bbbbbb;
  --dash-eyebrow-transform: uppercase;

  /* ─── Cards de métricas ─── */
  --dash-metric-card-bg: #ffffff;
  --dash-metric-card-border: 0.5px solid #ebebed;
  --dash-metric-card-radius: 8px;
  --dash-metric-card-padding: 16px;

  /* Número de métrica */
  --dash-metric-number-weight: 500;
  --dash-metric-number-size: 24px;
  --dash-metric-number-tracking: -0.03em;
  --dash-metric-number-color: #111111;

  /* Label de métrica */
  --dash-metric-label-weight: 300;
  --dash-metric-label-size: 11px;
  --dash-metric-label-color: #bbbbbb;

  /* Ícono de métrica */
  --dash-metric-icon-radius: 6px;

  /* ─── Widgets ─── */
  --dash-widget-bg: #ffffff;
  --dash-widget-border: 0.5px solid #ebebed;
  --dash-widget-radius: 8px;
  --dash-widget-label-weight: 300;
  --dash-widget-label-size: 10px;
  --dash-widget-label-color: #bbbbbb;
  --dash-widget-label-tracking: 0.08em;
  --dash-widget-value-weight: 400;
  --dash-widget-value-size: 13px;
  --dash-widget-value-color: #111111;
  --dash-widget-sub-weight: 300;
  --dash-widget-sub-size: 11px;
  --dash-widget-sub-color: #bbbbbb;

  /* ─── Tablas ─── */
  --dash-table-header-weight: 400;
  --dash-table-header-size: 11px;
  --dash-table-header-tracking: 0.04em;
  --dash-table-header-color: #999999;
  --dash-table-row-border: 0.5px solid #f0f0f2;
  --dash-table-cell-weight: 300;
  --dash-table-cell-size: 13px;

  /* ─── Botones ─── */
  --dash-btn-primary-radius: 6px;
  --dash-btn-primary-weight: 500;
  --dash-btn-primary-size: 12px;
  --dash-btn-ghost-radius: 6px;
  --dash-btn-ghost-weight: 300;
  --dash-btn-ghost-border: 0.5px solid #dddddd;

  /* ─── Formularios ─── */
  --dash-input-border: 0.5px solid #e0e0e0;
  --dash-input-radius: 6px;
  --dash-input-bg: #ffffff;
  --dash-input-color: #111111;
  --dash-input-weight: 300;
  --dash-label-weight: 400;
  --dash-label-size: 11px;
  --dash-label-tracking: 0.04em;
  --dash-label-color: #888888;
  --dash-label-transform: uppercase;
}


/* ─── Overrides directos para el dashboard Pearl ─── */

[data-dashboard-theme="pearl"] .sidebar,
[data-dashboard-theme="pearl"] [class*="bg-"][class*="h-screen"] {
  background: var(--dash-sidebar-bg) !important;
  border-right: var(--dash-sidebar-border);
  color: #111111;
}

[data-dashboard-theme="pearl"] .sidebar a,
[data-dashboard-theme="pearl"] .sidebar button {
  color: var(--dash-nav-item-color);
  font-weight: var(--dash-nav-item-weight);
  font-size: var(--dash-nav-item-size);
}

[data-dashboard-theme="pearl"] .sidebar a.active,
[data-dashboard-theme="pearl"] .sidebar a[aria-current] {
  color: var(--dash-nav-active-color);
  font-weight: var(--dash-nav-active-weight);
  background: var(--dash-nav-active-bg);
}

[data-dashboard-theme="pearl"] .page-title,
[data-dashboard-theme="pearl"] h1 {
  font-weight: var(--dash-page-title-weight);
  letter-spacing: var(--dash-page-title-tracking);
}

[data-dashboard-theme="pearl"] .main-content {
  background: var(--dash-main-bg);
}