/* ─── PEARL — ultra-light (sidebar blanco + header light, todo en blanco) ─
   Sin tocar el primary (sigue indigo+violet de Cosmic Blue), pero el shell
   completo se vuelve blanco. Tipografía oscura, glow muy contained. ─ */
html[data-abk-variant="pearl"] {
  /* Superficies — TODO blanco/casi blanco */
  --abk-bg:                #ffffff;
  --abk-bg-2:              #fafafa;
  --abk-bg-shell:          #fcfcfd;
  --abk-surface:           #ffffff;
  --abk-surface-2:         #f5f5f7;
  --abk-glass-bg:          rgba(255,255,255,.92);
  --abk-glass-border:      rgba(67,56,202,.12);

  --abk-text-on-shell:     #1e293b;             /* texto OSCURO sobre shell blanco */

  /* Bordes — slate suaves */
  --abk-border-soft:       #f1f5f9;
  --abk-border-section:    #e2e8f0;
  --abk-border-strong:     #cbd5e1;

  --abk-input-bg-soft:     #fafafa;
  --abk-input-border:      #e2e8f0;

  /* Sombras NEUTRAS slate (no tinted) */
  --abk-shadow-1:          0 1px 2px rgba(15,23,42,.04), 0 4px 8px rgba(15,23,42,.04);
  --abk-shadow-2:          0 4px 12px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --abk-shadow-3:          0 8px 20px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  --abk-shadow-modal:      0 20px 50px rgba(15,23,42,.18), 0 8px 16px rgba(15,23,42,.10);

  /* Hero glow muy contained */
  --abk-grad-hero:         radial-gradient(1200px 600px at 70% -10%, rgba(67,56,202,.05), transparent 60%),
                           radial-gradient(900px 500px at 10% 30%, rgba(34,211,238,.03), transparent 60%);
}

/* Pearl shell overrides — sidebar/header en blanco con tinte violet sutil */
html[data-abk-variant="pearl"] {
  --sidebar-bg:           linear-gradient(180deg, #ffffff 0%, #fafaff 60%, #f3f0ff 100%) !important;
  --sidebar-hover:        #4338ca !important;
  --sidebar-icon:         #4338ca !important;
  --header-bg:            rgba(255,255,255,.92) !important;
  --header-border:        #e2e8f0 !important;
  --header-shadow:        rgba(67,56,202,.06) !important;
  --main-bg:              #fafafa !important;
}

/* ─── PEARL refinement — UX pro pulido ─── */
html[data-abk-variant="pearl"] .sidebar ul li,
html[data-abk-variant="pearl"] .sidebar ul li.menu-external > a {
  color: #1e293b;
  font-weight: 600;
}
html[data-abk-variant="pearl"] .sidebar ul li:hover,
html[data-abk-variant="pearl"] .sidebar ul li.menu-external > a:hover {
  color: #312e81;
  background: rgba(67,56,202,.06);
  border-left-color: #4338ca;
}
html[data-abk-variant="pearl"] .sidebar ul li.active {
  color: #ffffff;
  background: linear-gradient(135deg, #312e81 0%, #4c1d95 50%, #1e3a8a 100%);
  border-left-color: transparent;
  box-shadow:
    0 4px 14px rgba(30,27,75,.30),
    inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-abk-variant="pearl"] .sidebar ul li svg,
html[data-abk-variant="pearl"] .sidebar ul li.menu-external > a svg { stroke: #475569; }
html[data-abk-variant="pearl"] .sidebar ul li:hover svg,
html[data-abk-variant="pearl"] .sidebar ul li.menu-external > a:hover svg { stroke: #4338ca; filter: none; }
html[data-abk-variant="pearl"] .sidebar ul li.active svg { stroke: #ffffff; }
html[data-abk-variant="pearl"] .sidebar { box-shadow: 1px 0 0 #e2e8f0, 0 4px 16px rgba(15,23,42,.04); }
html[data-abk-variant="pearl"] .sidebar::before,
html[data-abk-variant="pearl"] .sidebar::after { display: none; }

/* Pearl LIGHT: status-strip + header texto oscuro.
   Scoped a :not([data-theme="dark"]) — sin esto la strip se quedaba blanca
   en pearl+dark y rompía la estética GitHub-graphite del modo oscuro. */
html[data-abk-variant="pearl"]:not([data-theme="dark"]) .status-strip {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}
html[data-abk-variant="pearl"]:not([data-theme="dark"]) .svc-name { color: #475569; }
html[data-abk-variant="pearl"]:not([data-theme="dark"]) .svc-indicator {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
html[data-abk-variant="pearl"]:not([data-theme="dark"]) .svc-indicator.svc-clickable:hover {
  background: #faf7ff;
  border-color: #4338ca;
}
html[data-abk-variant="pearl"]:not([data-theme="dark"]) .header-user {
  color: #1e293b;
}
/* Pearl LIGHT: header brand + fecha. Por default `.brand` y `.header-date`
   son `color:#fff` (porque el header es oscuro en otras variantes). En
   pearl light el header es blanco-lavanda, así que el blanco quedaba
   invisible. Forzamos slate-800 para legibilidad. */
html[data-abk-variant="pearl"]:not([data-theme="dark"]) .main-header .brand,
html[data-abk-variant="pearl"]:not([data-theme="dark"]) .main-header .header-date,
html[data-abk-variant="pearl"]:not([data-theme="dark"]) .main-header #jsUserName {
  color: #1e293b !important;
}
html[data-abk-variant="pearl"]:not([data-theme="dark"]) .theme-toggle {
  background: rgba(67,56,202,.08);
  border-color: rgba(67,56,202,.22);
  color: #312e81;
}
html[data-abk-variant="pearl"]:not([data-theme="dark"]) .theme-toggle:hover {
  background: rgba(67,56,202,.15);
  border-color: rgba(67,56,202,.42);
}

/* Pearl LIGHT: badges del status-strip con buen contraste sobre fondo blanco */
html[data-abk-variant="pearl"]:not([data-theme="dark"]) .svc-badge.badge-ok       { background: #047857; color: #fff; }
html[data-abk-variant="pearl"]:not([data-theme="dark"]) .svc-badge.badge-fail     { background: #b91c1c; color: #fff; }
html[data-abk-variant="pearl"]:not([data-theme="dark"]) .svc-badge.badge-prod     { background: #047857; color: #fff; }
html[data-abk-variant="pearl"]:not([data-theme="dark"]) .svc-badge.badge-sandbox  { background: #b45309; color: #fff; }

/* Pearl DARK: GitHub-graphite. Strip gris oscuro, indicators con bg surface,
   borders sutiles azulados, accent azul GitHub (#58a6ff). Sin tints violet. */
html[data-theme="dark"][data-abk-variant="pearl"] .status-strip {
  background: linear-gradient(180deg, #161b22 0%, #0d1117 100%);
  border-bottom: 1px solid rgba(110,118,129,.25);
}
html[data-theme="dark"][data-abk-variant="pearl"] .svc-name { color: #9198a1; }
html[data-theme="dark"][data-abk-variant="pearl"] .svc-indicator {
  background: #1c2129;
  border: 1px solid rgba(110,118,129,.30);
  color: #c9d1d9;
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
html[data-theme="dark"][data-abk-variant="pearl"] .svc-indicator.svc-clickable:hover {
  background: #21262d;
  border-color: rgba(88,166,255,.55);
}
html[data-theme="dark"][data-abk-variant="pearl"] .header-user {
  color: #e6edf3;
}
html[data-theme="dark"][data-abk-variant="pearl"] .theme-toggle {
  background: rgba(88,166,255,.10);
  border-color: rgba(88,166,255,.28);
  color: #c9d1d9;
}
html[data-theme="dark"][data-abk-variant="pearl"] .theme-toggle:hover {
  background: rgba(88,166,255,.18);
  border-color: rgba(88,166,255,.50);
  color: #f0f6fc;
}
/* Pearl DARK: badges con bg sólido + un pelo más saturados para destacar
   sobre el graphite (#161b22). Texto blanco igual que en light. */
html[data-theme="dark"][data-abk-variant="pearl"] .svc-badge.badge-ok       { background: #2ea043; color: #fff; }
html[data-theme="dark"][data-abk-variant="pearl"] .svc-badge.badge-fail     { background: #da3633; color: #fff; }
html[data-theme="dark"][data-abk-variant="pearl"] .svc-badge.badge-prod     { background: #2ea043; color: #fff; }
html[data-theme="dark"][data-abk-variant="pearl"] .svc-badge.badge-sandbox  { background: #d29922; color: #1c2129; }

/* Pearl: body glow casi invisible. (Los orbs ya no aplican: son exclusivos de
   Cosmic Blue — ver _effects.css `html[data-abk-variant] .abk-orbs`.) */
html[data-abk-variant="pearl"] body::after { opacity: .03; }

/* ─── PEARL DARK — SOBRIO: graphite/slate puro, sin nada de violet vivo
   El user pidió que la versión dark de Pearl sea más sobria (la Light gustó
   pero la Dark se parecía demasiado a Original con sus acentos violet).
   Resultado: paleta neutral pure-graphite con accents apenas grises-cool,
   sin glows, sin tints violet. Mood "Visual Studio Code dark+" minimal pro.
   ─── */
html[data-theme="dark"][data-abk-variant="pearl"] {
  --abk-bg:                #0d1117;            /* GitHub-dark base */
  --abk-bg-2:              #161b22;
  --abk-bg-shell:          #010409;            /* casi negro puro */
  --abk-surface:           #161b22;
  --abk-surface-2:         #1c2129;
  --abk-text:              #e6edf3;
  --abk-text-soft:         #9198a1;
  --abk-text-muted:        #6e7681;
  --abk-text-on-shell:     #e6edf3;
  --abk-text-heading:      #e6edf3;            /* títulos blancos puros (sin tint violet) */
  --abk-border-soft:       rgba(110,118,129,.16);
  --abk-border-section:    rgba(110,118,129,.30);
  --abk-border-strong:     rgba(110,118,129,.50);
  --abk-input-bg:          #0d1117;
  --abk-input-border:      rgba(110,118,129,.40);

  /* Sombras NEUTRAS sin tint violet — solo black drop */
  --abk-shadow-1:          0 1px 2px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.30);
  --abk-shadow-2:          0 4px 16px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.30);
  --abk-shadow-3:          0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
  --abk-shadow-modal:      0 20px 50px rgba(0,0,0,.75), 0 8px 16px rgba(0,0,0,.40);

  /* Hero glow: imperceptible, casi negro plano */
  --abk-grad-hero:         radial-gradient(1200px 600px at 70% -10%, rgba(110,118,129,.05), transparent 60%);
}
html[data-theme="dark"][data-abk-variant="pearl"] {
  /* Shell: gradient slate plana, sin violet */
  --sidebar-bg:           linear-gradient(180deg, #0d1117 0%, #161b22 100%) !important;
  --header-bg:            rgba(13,17,23,.96) !important;
  --header-border:        rgba(110,118,129,.25) !important;
  --header-shadow:        rgba(0,0,0,.45) !important;
  --main-bg:              #010409 !important;
  --sidebar-hover:        #58a6ff !important;   /* azul GitHub para acento, no violet */
  --sidebar-icon:         #9198a1 !important;
}
/* Items: graphite con hover azul cool, active gradient slate (no violet) */
html[data-theme="dark"][data-abk-variant="pearl"] .sidebar ul li {
  color: #c9d1d9;
  font-weight: 600;
}
html[data-theme="dark"][data-abk-variant="pearl"] .sidebar ul li:hover {
  color: #f0f6fc;
  background: rgba(110,118,129,.12);
  border-left-color: rgba(88,166,255,.55);
  text-shadow: none;
}
html[data-theme="dark"][data-abk-variant="pearl"] .sidebar ul li:hover svg { stroke: #58a6ff; }
html[data-theme="dark"][data-abk-variant="pearl"] .sidebar ul li.active {
  /* Active: gradient slate puro, sin violet, con accent azul sobrio */
  background: linear-gradient(135deg, #1f2937 0%, #374151 50%, #1c2129 100%);
  color: #ffffff;
  border-left: 3px solid #58a6ff;
  box-shadow:
    0 4px 14px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.05);
}
/* PEARL — h1 con línea minimal violet sólido (sin gradient elaborado);
   cards con borde más definido (detalle minimal) */
html[data-abk-variant="pearl"] .abk-h1::after {
  background: #4338ca;
  box-shadow: none;
  height: 2px;
}
html[data-abk-variant="pearl"] .abk-card {
  border-width: 1px;
  border-color: #e2e8f0;
}
html[data-abk-variant="pearl"] .abk-card:hover {
  border-color: #4338ca;
  box-shadow: 0 4px 14px rgba(15,23,42,.06);
  transform: none;        /* sin lift — minimal */
}


/* ===== IDENTIDAD: color de ACCIÓN (primary ramp) por tema — light + dark.
   Cascada a botones, links, focus, tabs activos, contorno del h1, badges. ===== */
html[data-abk-variant="pearl"]:not([data-theme="dark"]) {
  --abk-primary:           #4f46e5;
  --abk-primary-2:         #4338ca;
  --abk-primary-3:         #6366f1;
  --abk-primary-deep:      #3730a3;
  --abk-primary-soft:      #c7d2fe;
  --abk-primary-ink:       #ffffff;
  --abk-primary-glow:      rgba(79,70,229,.30);
  --abk-text-on-primary:   #ffffff;
  --abk-text-link:         #4338ca;
}
html[data-theme="dark"][data-abk-variant="pearl"] {
  --abk-primary:           #818cf8;
  --abk-primary-2:         #6366f1;
  --abk-primary-3:         #a5b4fc;
  --abk-primary-deep:      #4f46e5;
  --abk-primary-soft:      #c7d2fe;
  --abk-primary-ink:       #0d1117;
  --abk-primary-glow:      rgba(129,140,248,.40);
  --abk-text-on-primary:   #0d1117;
  --abk-text-link:         #a5b4fc;
}

/* IDENTIDAD: focus de inputs/controles por tema */
html[data-abk-variant="pearl"]:not([data-theme="dark"]) { --abk-input-border-focus: #4f46e5; --abk-input-ring: rgba(79,70,229,.28); }
html[data-theme="dark"][data-abk-variant="pearl"] { --abk-input-border-focus: #818cf8; --abk-input-ring: rgba(129,140,248,.35); }

/* Pearl LIGHT: títulos slate-indigo (identidad Notion/Linear) */
html[data-abk-variant="pearl"]:not([data-theme="dark"]) { --abk-text-heading: #312e81; --abk-text-heading-soft: #4338ca; }