/* ════════════════════════════════════════════════════════════
   Ominia — DESIGN SYSTEM v5.0
   ════════════════════════════════════════════════════════════ */

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  /* Brand — Violet */
  --color-violet-950: oklch(14% 0.045 288);
  --color-violet-900: oklch(20% 0.065 288);
  --color-violet-800: oklch(28% 0.090 288);
  --color-violet-700: oklch(38% 0.120 288);
  --color-violet-600: oklch(48% 0.155 288);
  --color-violet-500: oklch(56% 0.175 288);
  --color-violet-400: oklch(65% 0.155 288);
  --color-violet-300: oklch(74% 0.120 288);
  --color-violet-200: oklch(83% 0.075 288);
  --color-violet-100: oklch(92% 0.030 288);

  /* Brand — Indigo */
  --color-indigo-950: oklch(14% 0.040 240);
  --color-indigo-900: oklch(20% 0.058 240);
  --color-indigo-800: oklch(28% 0.082 240);
  --color-indigo-700: oklch(38% 0.110 240);
  --color-indigo-600: oklch(48% 0.140 240);
  --color-indigo-500: oklch(57% 0.155 240);
  --color-indigo-400: oklch(67% 0.135 240);
  --color-indigo-300: oklch(76% 0.100 240);
  --color-indigo-200: oklch(84% 0.060 240);

  /* Neutrals — violet-cast */
  --color-neutral-950: oklch(10% 0.006 280);
  --color-neutral-900: oklch(15% 0.006 280);
  --color-neutral-800: oklch(22% 0.006 280);
  --color-neutral-700: oklch(32% 0.006 280);
  --color-neutral-600: oklch(44% 0.006 280);
  --color-neutral-500: oklch(55% 0.006 280);
  --color-neutral-400: oklch(66% 0.006 280);
  --color-neutral-300: oklch(76% 0.006 280);
  --color-neutral-200: oklch(85% 0.005 280);
  --color-neutral-100: oklch(93% 0.004 280);
  --color-neutral-50:  oklch(97% 0.003 280);

  /* Semantic */
  --color-success:        oklch(60% 0.140 175);
  --color-success-subtle: oklch(22% 0.055 175);
  --color-success-muted:  oklch(86% 0.065 175);
  --color-error:          oklch(58% 0.175 10);
  --color-error-subtle:   oklch(22% 0.065 10);
  --color-error-muted:    oklch(86% 0.075 10);
  --color-warning:        oklch(72% 0.155 55);
  --color-warning-subtle: oklch(28% 0.065 55);
  --color-warning-muted:  oklch(90% 0.075 55);
  --color-info:           oklch(62% 0.140 220);
  --color-info-subtle:    oklch(22% 0.055 220);
  --color-info-muted:     oklch(88% 0.060 220);

  /* Semantic aliases */
  --color-bg-base:        var(--color-neutral-950);
  --color-bg-raised:      var(--color-neutral-900);
  --color-bg-overlay:     var(--color-neutral-800);
  --color-border-subtle:  var(--color-neutral-800);
  --color-border-default: var(--color-neutral-700);
  --color-text-primary:   var(--color-neutral-50);
  --color-text-secondary: var(--color-neutral-400);
  --color-text-tertiary:  var(--color-neutral-500);
  --color-text-accent:    var(--color-violet-400);
  --color-text-link:      var(--color-indigo-400);
  --gradient-brand: linear-gradient(110deg, var(--color-violet-500), var(--color-indigo-500));

  /* Fonts */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-ui:      'Geist', sans-serif;

  /* Legacy compat — mapped to new tokens */
  --pulse-amber:   var(--color-violet-500);
  --pulse-amber-2: var(--color-violet-600);
  --pulse-steel:   var(--color-indigo-500);
  --pulse-steel-2: var(--color-indigo-600);
  --neon-green:    var(--color-violet-500);
  --neon-purple:   var(--color-indigo-500);
  --neon-blue:     var(--color-indigo-400);
  --neon-red:      var(--color-error);
  --neon-yellow:   var(--color-warning);
  --neon-pink:     var(--color-violet-400);

  --bg:   var(--color-neutral-950);
  --bg-2: var(--color-neutral-900);
  --bg-3: var(--color-neutral-800);

  --glass-bg:         oklch(97% 0.003 280 / 0.055);
  --glass-bg-raw:     oklch(97% 0.003 280 / 0.045);
  --glass-solid:      var(--color-neutral-900);
  --glass-border:     oklch(97% 0.003 280 / 0.09);
  --glass-border-top: oklch(97% 0.003 280 / 0.16);
  --glass-hover:      oklch(97% 0.003 280 / 0.065);
  --glass-active:     oklch(97% 0.003 280 / 0.10);
  --glass-shine:      oklch(97% 0.003 280 / 0.07);

  --text:       var(--color-neutral-50);
  --text-muted: oklch(97% 0.003 280 / 0.62);
  --text-soft:  oklch(97% 0.003 280 / 0.40);

  --sidebar-bg:     oklch(10% 0.006 280 / 0.96);
  --sidebar-border: oklch(97% 0.003 280 / 0.07);

  --input-bg:     oklch(97% 0.003 280 / 0.04);
  --input-border: oklch(97% 0.003 280 / 0.10);

  --scrollbar: oklch(97% 0.003 280 / 0.10);

  --shadow-xs:     0 1px 3px oklch(0% 0 0 / 0.65);
  --shadow-sm:     0 4px 16px oklch(0% 0 0 / 0.70);
  --shadow-md:     0 8px 36px oklch(0% 0 0 / 0.75);
  --shadow-lg:     0 20px 60px oklch(0% 0 0 / 0.85);
  --shadow-green:  0 8px 32px var(--color-violet-500 / 0.30);
  --shadow-purple: 0 8px 32px var(--color-indigo-500 / 0.26);

  --radius-xs:  0.375rem;
  --radius-sm:  0.5rem;
  --radius:     0.875rem;
  --radius-lg:  1.25rem;
  --radius-xl:  1.625rem;
  --radius-2xl: 2rem;

  --grain-opacity: 0;
}

/* ── LIGHT MODE ──────────────────────────────────────────── */
body.theme-light {
  --bg:   oklch(97% 0.008 280);
  --bg-2: oklch(94% 0.007 280);
  --bg-3: oklch(91% 0.007 280);

  --glass-bg:         linear-gradient(135deg, oklch(100% 0 0 / 0.88) 0%, oklch(100% 0 0 / 0.68) 100%);
  --glass-bg-raw:     oklch(100% 0 0 / 0.80);
  --glass-solid:      oklch(100% 0 0 / 0.96);
  --glass-border:     var(--color-violet-300 / 0.22);
  --glass-border-top: oklch(100% 0 0 / 0.95);
  --glass-hover:      oklch(100% 0 0 / 0.90);
  --glass-active:     oklch(100% 0 0 / 0.96);
  --glass-shine:      oklch(100% 0 0 / 0.70);

  --text:       var(--color-neutral-950);
  --text-muted: var(--color-neutral-700);
  --text-soft:  var(--color-neutral-500);

  --sidebar-bg:     oklch(93% 0.010 280 / 0.94);
  --sidebar-border: var(--color-violet-300 / 0.30);

  --input-bg:     oklch(100% 0 0 / 0.88);
  --input-border: var(--color-violet-300 / 0.40);

  --scrollbar: oklch(0% 0 0 / 0.12);

  --shadow-xs:     0 1px 4px oklch(20% 0.04 280 / 0.10);
  --shadow-sm:     0 4px 16px oklch(20% 0.04 280 / 0.12);
  --shadow-md:     0 8px 32px oklch(20% 0.04 280 / 0.14);
  --shadow-lg:     0 20px 60px oklch(20% 0.04 280 / 0.20);
  --shadow-green:  0 6px 24px var(--color-violet-500 / 0.20);
  --shadow-purple: 0 6px 24px var(--color-indigo-500 / 0.18);
}

/* ── BASE ─────────────────────────────────────────────────── */
html { height: 100%; }

body {
  font-family: var(--font-ui);
  color: var(--text);
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;

  background-color: var(--color-neutral-950);
  background-image:
    radial-gradient(ellipse 55% 40% at 12% 8%,  oklch(56% 0.175 288 / 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 88% 88%, oklch(57% 0.155 240 / 0.07) 0%, transparent 55%),
    linear-gradient(175deg, oklch(10% 0.006 280) 0%, oklch(12% 0.007 285) 45%, oklch(10% 0.006 280) 100%);
  background-attachment: fixed;
}

body.theme-light {
  background-color: oklch(97% 0.008 280);
  background-image:
    radial-gradient(ellipse 55% 40% at 10% 10%, oklch(56% 0.175 288 / 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 90% 88%, oklch(57% 0.155 240 / 0.05) 0%, transparent 55%),
    linear-gradient(165deg, oklch(97% 0.008 280) 0%, oklch(95% 0.009 282) 50%, oklch(97% 0.008 280) 100%);
  background-attachment: fixed;
}

body::before { display: none; }

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: oklch(56% 0.175 288 / 0.40); }

/* ── AMBIENT GLOW ─────────────────────────────────────────── */
.ambient-light,
.ambient-light-2 { display: none !important; }

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar-glass {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  z-index: 50;
  flex-shrink: 0;
}

.sidebar-glass .nav-label-section {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-soft); padding: 0 1rem;
  margin: 1.5rem 0 0.6rem;
  display: block;
}

.sidebar-glass .text-gray-400,
.sidebar-glass .text-gray-500 { opacity: 0.8; }

body.theme-light .sidebar-glass { background: var(--sidebar-bg) !important; }
body.theme-light .sidebar-glass .text-gray-400 { color: var(--color-neutral-600) !important; opacity: 1; }
body.theme-light .sidebar-glass .text-gray-500 { color: var(--color-neutral-500) !important; opacity: 1; }
body.theme-light .sidebar-glass .text-gray-600 { color: var(--color-neutral-700) !important; opacity: 1; }
body.theme-light .sidebar-glass .text-white    { color: var(--color-neutral-950) !important; }
body.theme-light .sidebar-glass .hover\:text-white:hover { color: var(--color-neutral-950) !important; }
body.theme-light .sidebar-glass .hover\:bg-white\/5:hover { background: oklch(0% 0 0 / 0.05) !important; }
body.theme-light .sidebar-glass .bg-white\/5   { background: oklch(0% 0 0 / 0.03) !important; }
body.theme-light .sidebar-glass .border-white\/10 { border-color: var(--color-violet-300 / 0.22) !important; }
body.theme-light .sidebar-glass .border-white\/5  { border-color: var(--color-violet-300 / 0.12) !important; }
body.theme-light .sidebar-glass a { color: var(--color-neutral-600) !important; }
body.theme-light .sidebar-glass a:hover { color: var(--color-neutral-950) !important; }

/* ══════════════════════════════════════════════════════════
   CARD
   ══════════════════════════════════════════════════════════ */
.card-glass {
  background: oklch(97% 0.003 280 / 0.045);
  border: 1px solid oklch(97% 0.003 280 / 0.09);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
  position: relative;
  overflow: hidden;
}

.card-glass:hover {
  box-shadow: var(--shadow-md);
  border-color: oklch(97% 0.003 280 / 0.14);
  transform: translateY(-1px);
}

body.theme-light .card-glass {
  background: oklch(100% 0 0 / 0.90);
  border-color: oklch(74% 0.120 288 / 0.22);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}
body.theme-light .card-glass:hover {
  box-shadow: var(--shadow-md);
  border-color: oklch(74% 0.120 288 / 0.35);
  transform: translateY(-1px);
}

.card-glass.green-glow  { border-color: oklch(56% 0.175 288 / 0.25); }
.card-glass.green-glow:hover  { box-shadow: var(--shadow-sm), 0 8px 32px oklch(56% 0.175 288 / 0.30); }
.card-glass.purple-glow { border-color: oklch(57% 0.155 240 / 0.25); }
.card-glass.purple-glow:hover { box-shadow: var(--shadow-sm), 0 8px 32px oklch(57% 0.155 240 / 0.26); }

/* ── INPUT PREMIUM ────────────────────────────────────────── */
.input-premium {
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 11px 15px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  width: 100%;
}
.input-premium:focus {
  border-color: var(--color-violet-500);
  box-shadow: 0 0 0 3px oklch(56% 0.175 288 / 0.20), inset 0 1px 3px oklch(0% 0 0 / 0.10);
  background: oklch(56% 0.175 288 / 0.04);
}
.input-premium::placeholder { color: var(--text-soft); }
.input-premium:disabled { opacity: 0.5; cursor: not-allowed; }
select.input-premium option { background: var(--glass-solid); color: var(--text); }

body.theme-light .input-premium { color: var(--color-neutral-950); }
body.theme-light .input-premium:focus { background: oklch(56% 0.175 288 / 0.04); }
body.theme-light textarea, body.theme-light .input-premium { color: var(--color-neutral-950); }

/* ── BOTÕES ───────────────────────────────────────────────── */
.btn-primary {
  background: var(--gradient-brand);
  color: var(--color-neutral-50);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  border: none; cursor: pointer;
  border-radius: var(--radius);
  padding: 9px 18px;
  letter-spacing: 0.01em;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.18), 0 2px 8px oklch(56% 0.175 288 / 0.25);
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(transparent, oklch(100% 0 0 / 0.10));
  opacity: 0; transition: opacity 0.2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px oklch(56% 0.175 288 / 0.30); }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: translateY(0); }

.btn-purple {
  background: var(--gradient-brand);
  color: var(--color-neutral-50);
  font-family: var(--font-ui);
  font-weight: 600;
  border: none; cursor: pointer;
  border-radius: var(--radius);
  transition: transform 0.2s, box-shadow 0.2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.15);
}
.btn-purple:hover { transform: translateY(-2px); box-shadow: 0 8px 32px oklch(57% 0.155 240 / 0.26); }
.btn-purple:active { transform: translateY(0); }

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--glass-border);
  color: var(--text-muted);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: all 0.2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.btn-outline:hover { border-color: var(--color-violet-500); color: var(--color-violet-400); }

.btn-danger {
  background: var(--color-error-subtle);
  border: 1.5px solid oklch(30% 0.09 10);
  color: var(--color-error-muted);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-danger:hover { background: oklch(28% 0.085 10); box-shadow: 0 4px 16px oklch(58% 0.175 10 / 0.22); }

/* ── BADGE ────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.badge-green,
.badge-success { background: var(--color-success-subtle); color: var(--color-success-muted); border: 1px solid oklch(28% 0.08 175); }
.badge-purple,
.badge-brand   { background: var(--color-violet-900);     color: var(--color-violet-300);    border: 1px solid var(--color-violet-800); }
.badge-blue,
.badge-info    { background: var(--color-info-subtle);    color: var(--color-info-muted);    border: 1px solid oklch(28% 0.07 220); }
.badge-red,
.badge-error   { background: var(--color-error-subtle);   color: var(--color-error-muted);   border: 1px solid oklch(28% 0.08 10); }
.badge-yellow,
.badge-warning { background: var(--color-warning-subtle); color: var(--color-warning-muted); border: 1px solid oklch(34% 0.08 55); }
.badge-neutral { background: var(--color-neutral-800);    color: var(--color-neutral-400);   border: 1px solid var(--color-neutral-700); }

body.theme-light .badge-green,
body.theme-light .badge-success { color: var(--color-success); }
body.theme-light .badge-purple,
body.theme-light .badge-brand   { color: var(--color-violet-600); }
body.theme-light .badge-blue,
body.theme-light .badge-info    { color: var(--color-info); }
body.theme-light .badge-red,
body.theme-light .badge-error   { color: var(--color-error); }
body.theme-light .badge-yellow,
body.theme-light .badge-warning { color: var(--color-warning); }

/* ── MOBILE HEADER ────────────────────────────────────────── */
.mobile-header {
  display: none;
  position: sticky; top: 0;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--sidebar-border);
  padding: 0.75rem 1.25rem;
  align-items: center; justify-content: space-between;
  z-index: 30;
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
}
.btn-hamburger {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--glass-bg-raw);
  border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text);
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.btn-hamburger:hover { background: var(--glass-hover); border-color: var(--color-violet-500); color: var(--color-violet-400); }

.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: oklch(0% 0 0 / 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 40;
  transition: opacity 0.3s;
}
.sidebar-overlay.active { display: block; }

/* ── TOAST ────────────────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  z-index: 9999; display: flex;
  flex-direction: column; gap: 0.5rem;
  pointer-events: none;
  max-width: calc(100vw - 3rem);
}
.toast {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1.125rem;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 600;
  border: 1px solid oklch(100% 0 0 / 0.10);
  animation: toast-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: auto;
  max-width: 320px;
  box-shadow: var(--shadow-md);
  line-height: 1.4;
  position: relative;
  overflow: hidden;
}
.toast::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.40), transparent);
}
.toast.ok     { background: oklch(56% 0.175 288 / 0.16); color: var(--color-violet-300); border-color: oklch(56% 0.175 288 / 0.35); }
.toast.erro   { background: oklch(58% 0.175 10 / 0.16);  color: var(--color-error-muted);   border-color: oklch(58% 0.175 10 / 0.35); }
.toast.info   { background: oklch(57% 0.155 240 / 0.16); color: var(--color-indigo-300); border-color: oklch(57% 0.155 240 / 0.35); }
.toast.alerta { background: oklch(72% 0.155 55 / 0.16);  color: var(--color-warning-muted); border-color: oklch(72% 0.155 55 / 0.35); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px) scale(0.94); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(24px) scale(0.9); }
}
body.theme-light .toast { border-color: oklch(100% 0 0 / 0.70); }
body.theme-light .toast.ok    { background: oklch(56% 0.175 288 / 0.10); color: var(--color-violet-600); }
body.theme-light .toast.erro  { background: oklch(58% 0.175 10 / 0.10);  color: var(--color-error); }
body.theme-light .toast.info  { background: oklch(57% 0.155 240 / 0.10); color: var(--color-indigo-600); }
body.theme-light .toast.alerta{ background: oklch(72% 0.155 55 / 0.10);  color: var(--color-warning); }

/* ── MODAL ────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: oklch(0% 0 0 / 0.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-box {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  max-width: 460px; width: 100%;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}
.modal-box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, oklch(56% 0.175 288 / 0.50), transparent);
}
body.theme-light .modal-box {
  background: linear-gradient(135deg, oklch(100% 0 0 / 0.94) 0%, oklch(100% 0 0 / 0.78) 100%);
  border-color: oklch(100% 0 0 / 0.90);
  box-shadow: 0 20px 60px oklch(20% 0.04 280 / 0.18), inset 0 1px 0 oklch(100% 0 0 / 0.95);
}

/* ── LIGHT MODE OVERRIDES ─────────────────────────────────── */
body.theme-light .text-white    { color: var(--color-neutral-950) !important; }
body.theme-light .text-gray-100 { color: oklch(20% 0.015 280) !important; }
body.theme-light .text-gray-200 { color: oklch(28% 0.012 280) !important; }
body.theme-light .text-gray-300 { color: oklch(38% 0.010 280) !important; }
body.theme-light .text-gray-400 { color: var(--color-neutral-600) !important; }
body.theme-light .text-gray-500 { color: var(--color-neutral-500) !important; }
body.theme-light .bg-white\/5   { background: oklch(0% 0 0 / 0.03) !important; }
body.theme-light .bg-white\/10  { background: oklch(0% 0 0 / 0.05) !important; }
body.theme-light .border-white\/5   { border-color: oklch(74% 0.120 288 / 0.12) !important; }
body.theme-light .border-white\/10  { border-color: oklch(74% 0.120 288 / 0.28) !important; }
body.theme-light .hover\:bg-white\/5:hover  { background: oklch(0% 0 0 / 0.04) !important; }
body.theme-light .hover\:bg-white\/10:hover { background: oklch(0% 0 0 / 0.06) !important; }

/* ── RESPONSIVIDADE MOBILE ────────────────────────────────── */
@media (max-width: 767px) {
  body { flex-direction: column !important; }
  body, body.theme-light { background-attachment: scroll !important; }

  .sidebar-glass {
    position: fixed !important;
    display: flex !important;
    left: 0; top: 0; bottom: 0; height: 100vh;
    width: 280px !important;
    transform: translateX(-100%);
    z-index: 50 !important;
  }
  .sidebar-glass.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 48px oklch(0% 0 0 / 0.70);
  }
  .mobile-header { display: flex !important; }

  #main-content { padding: 1.25rem 1rem !important; }

  .grid-cols-3-auto { grid-template-columns: 1fr !important; }
  .grid-cols-2-auto { grid-template-columns: 1fr !important; }

  .form-row { flex-direction: column !important; }
  .form-row > * { width: 100% !important; }

  .card-glass { border-radius: var(--radius-lg); }

  #toast-container { bottom: 1rem; right: 1rem; left: 1rem; }
  .toast { max-width: 100%; }

  .modal-box { padding: 1.5rem; border-radius: var(--radius-xl); }

  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
  .sidebar-glass { width: 260px !important; }
  .card-glass { border-radius: var(--radius); }
  #main-content { padding: 1rem 0.75rem !important; }
}

/* ── ANIMAÇÕES ────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes pulse-glow-violet {
  0%,100% { box-shadow: 0 0 0 0 oklch(56% 0.175 288 / 0.3); }
  50%     { box-shadow: 0 0 0 8px oklch(56% 0.175 288 / 0); }
}
@keyframes pulse-glow-indigo {
  0%,100% { box-shadow: 0 0 0 0 oklch(57% 0.155 240 / 0.3); }
  50%     { box-shadow: 0 0 0 8px oklch(57% 0.155 240 / 0); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes float-up {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

/* Legacy keyframe aliases */
@keyframes pulse-glow-amber { 0%,100% { box-shadow: 0 0 0 0 oklch(56% 0.175 288 / 0.3); } 50% { box-shadow: 0 0 0 8px oklch(56% 0.175 288 / 0); } }
@keyframes pulse-glow-steel { 0%,100% { box-shadow: 0 0 0 0 oklch(57% 0.155 240 / 0.3); } 50% { box-shadow: 0 0 0 8px oklch(57% 0.155 240 / 0); } }

.animate-fade-up { animation: fadeInUp 0.4s ease forwards; }
.animate-fade    { animation: fadeIn 0.3s ease forwards; }
.animate-float   { animation: float-up 4s ease-in-out infinite; }

/* ── UTILITÁRIOS ──────────────────────────────────────────── */
.gradient-text-green  { color: var(--color-violet-400); }
.gradient-text-purple { color: var(--color-indigo-400); }
.gradient-border {
  border: 1px solid transparent;
  background: linear-gradient(var(--glass-solid),var(--glass-solid)) padding-box,
              linear-gradient(135deg, oklch(56% 0.175 288 / 0.4), oklch(57% 0.155 240 / 0.4)) border-box;
}

/* ── SKELETON LOADER ──────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--glass-bg-raw) 25%, var(--glass-hover) 50%, var(--glass-bg-raw) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

body.sidebar-open { overflow: hidden; }

/* ── SURFACE GLASS ───────────────────────────────────────── */
.surface-glass {
  background: var(--glass-bg-raw);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
}
body.theme-light .surface-glass {
  background: oklch(100% 0 0 / 0.60);
  border-color: oklch(74% 0.120 288 / 0.25);
}

/* ── DIVISOR ─────────────────────────────────────────────── */
.divider-glow {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
  border: none;
  margin: 1.5rem 0;
}

/* ══════════════════════════════════════════════════════════
   TIPOGRAFIA
   ══════════════════════════════════════════════════════════ */

#main-content h1,
#main-content h2,
.syne {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
}

h1, h2, h3 { text-wrap: balance; }

/* ── SECTION LABEL ───────────────────────────────────────── */
.section-label {
  font-family: var(--font-ui);
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-bottom: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
body.theme-light .section-label { color: var(--color-neutral-600) !important; }

/* ── CARD GLOW-TOP ───────────────────────────────────────── */
.card-glass.border-t-4 {
  border-top-width: 1px !important;
}
.card-glass.border-t-4.border-green-500 {
  border-color: var(--glass-border) !important;
  box-shadow:
    inset 0 2px 0 0 oklch(56% 0.175 288 / 0.80),
    var(--shadow-sm),
    inset 0 1px 0 var(--glass-border-top),
    inset 0 -1px 0 oklch(0% 0 0 / 0.12);
}
.card-glass.border-t-4.border-green-500:hover {
  box-shadow:
    inset 0 2.5px 0 0 var(--color-violet-500),
    0 0 28px oklch(56% 0.175 288 / 0.10),
    var(--shadow-md),
    inset 0 1px 0 var(--glass-border-top),
    inset 0 -1px 0 oklch(0% 0 0 / 0.15);
}
.card-glass.border-t-4.border-blue-500 {
  border-color: var(--glass-border) !important;
  box-shadow:
    inset 0 2px 0 0 oklch(57% 0.155 240 / 0.80),
    var(--shadow-sm),
    inset 0 1px 0 var(--glass-border-top),
    inset 0 -1px 0 oklch(0% 0 0 / 0.12);
}
.card-glass.border-t-4.border-blue-500:hover {
  box-shadow:
    inset 0 2.5px 0 0 var(--color-indigo-500),
    0 0 28px oklch(57% 0.155 240 / 0.10),
    var(--shadow-md),
    inset 0 1px 0 var(--glass-border-top),
    inset 0 -1px 0 oklch(0% 0 0 / 0.15);
}
.card-glass.border-t-4.border-purple-500 {
  border-color: var(--glass-border) !important;
  box-shadow:
    inset 0 2px 0 0 oklch(57% 0.155 240 / 0.80),
    var(--shadow-sm),
    inset 0 1px 0 var(--glass-border-top),
    inset 0 -1px 0 oklch(0% 0 0 / 0.12);
}
.card-glass.border-t-4.border-purple-500:hover {
  box-shadow:
    inset 0 2.5px 0 0 var(--color-indigo-500),
    0 0 28px oklch(57% 0.155 240 / 0.10),
    var(--shadow-md),
    inset 0 1px 0 var(--glass-border-top),
    inset 0 -1px 0 oklch(0% 0 0 / 0.15);
}

/* ── BTN-PRIMARY SHIMMER ─────────────────────────────────── */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.20), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.btn-primary:hover::before {
  opacity: 1;
  animation: btn-shimmer 0.55s ease forwards;
}
@keyframes btn-shimmer {
  from { left: -75%; }
  to   { left: 130%;  }
}

/* ── COUNT-UP NUMBERS ───────────────────────────────────── */
.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.data-table, .stat-value, [data-numeric] {
  font-variant-numeric: tabular-nums;
}

/* ── AVATAR RING ─────────────────────────────────────────── */
.avatar-ring {
  background: var(--gradient-brand);
  padding: 2px;
  border-radius: 50%;
}
.avatar-ring-inner {
  background: var(--glass-solid);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── SIDEBAR NAV — active state ──────────────────────────── */
.sidebar-glass .nav-active-item {
  background: var(--color-violet-900);
  border-radius: var(--radius-sm);
  color: var(--color-violet-300);
}

.sidebar-glass a.border-l-4,
.sidebar-glass a.border-l-3,
.sidebar-glass a[class*="border-l-"] {
  border-left: none !important;
  border-radius: var(--radius-sm) !important;
}

/* ══════════════════════════════════════════════════════════
   TAILWIND UTILITY OVERRIDES
   Remapeia classes hardcoded nas templates EJS
   ══════════════════════════════════════════════════════════ */

/* Verde → Violeta */
.text-green-500                 { color: var(--color-violet-500) !important; }
.text-green-400                 { color: var(--color-violet-400) !important; }
.text-green-300                 { color: var(--color-violet-300) !important; }
.hover\:text-green-400:hover    { color: var(--color-violet-400) !important; }
.hover\:text-green-500:hover    { color: var(--color-violet-500) !important; }
.bg-green-500                   { background-color: var(--color-violet-600) !important; }
.bg-green-500\/10               { background-color: oklch(56% 0.175 288 / 0.10) !important; }
.bg-green-500\/20               { background-color: oklch(56% 0.175 288 / 0.20) !important; }
.border-green-500               { border-color: var(--color-violet-500) !important; }
.hover\:border-green-500:hover  { border-color: var(--color-violet-500) !important; }
.from-green-500\/10             { --tw-gradient-from: oklch(56% 0.175 288 / 0.10) !important; }
.from-green-500                 { --tw-gradient-from: var(--color-violet-600) !important; }
.text-emerald-400               { color: var(--color-violet-400) !important; }
.text-emerald-500               { color: var(--color-violet-500) !important; }
.to-emerald-900                 { --tw-gradient-to: var(--color-violet-950) !important; }

/* Roxo/Índigo → Índigo brand */
.text-purple-500                { color: var(--color-indigo-500) !important; }
.text-purple-400                { color: var(--color-indigo-400) !important; }
.hover\:text-purple-400:hover   { color: var(--color-indigo-400) !important; }
.bg-purple-500\/10              { background-color: oklch(57% 0.155 240 / 0.10) !important; }
.bg-purple-500\/20              { background-color: oklch(57% 0.155 240 / 0.20) !important; }
.border-purple-500              { border-color: var(--color-indigo-500) !important; }
.border-purple-500\/30          { border-color: oklch(57% 0.155 240 / 0.30) !important; }
.from-purple-500                { --tw-gradient-from: var(--color-indigo-500) !important; }
.to-indigo-500                  { --tw-gradient-to: var(--color-indigo-500) !important; }
.to-indigo-900                  { --tw-gradient-to: var(--color-indigo-950) !important; }
.text-indigo-400                { color: var(--color-indigo-400) !important; }

/* Azul → Índigo claro */
.text-blue-400                  { color: var(--color-indigo-300) !important; }
.text-blue-500                  { color: var(--color-indigo-400) !important; }
.bg-blue-500\/10                { background-color: oklch(57% 0.155 240 / 0.10) !important; }
.border-blue-500                { border-color: var(--color-indigo-400) !important; }

/* Vermelho — semântico */
.text-red-500                   { color: var(--color-error) !important; }
.text-red-400                   { color: var(--color-error-muted) !important; }
.bg-red-500\/10                 { background-color: oklch(58% 0.175 10 / 0.10) !important; }
.bg-red-500\/20                 { background-color: oklch(58% 0.175 10 / 0.20) !important; }
.border-red-500                 { border-color: var(--color-error) !important; }

/* Amarelo → Warning */
.text-yellow-400                { color: var(--color-warning-muted) !important; }
.text-yellow-500                { color: var(--color-warning) !important; }
.bg-yellow-500\/10              { background-color: oklch(72% 0.155 55 / 0.10) !important; }
.border-yellow-400              { border-color: oklch(72% 0.155 55 / 0.35) !important; }

/* ══════════════════════════════════════════════════════════
   MOBILE — ADAPTAÇÕES POR PÁGINA
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .audio-item-grid { grid-template-columns: 1fr !important; }
  .audio-right {
    border-left: none !important;
    border-top: 1px solid oklch(97% 0.003 280 / 0.05);
    padding: 1.25rem !important;
  }
  .audio-left { padding: 1.25rem !important; }

  .oraculo-search-bar {
    flex-wrap: wrap !important;
    border-radius: 1rem !important;
    padding: 0.75rem !important;
    gap: 0.5rem;
  }
  #btnOraculo {
    flex: 1 1 100% !important;
    border-radius: 0.75rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    justify-content: center !important;
    margin-left: 0 !important;
  }
  .oraculo-mic-btn { flex-shrink: 0; }

  .ominia-box { padding: 1.75rem 1.25rem !important; }
  .ominia-box h2 { font-size: 1.75rem !important; }
  .ominia-box p { font-size: 0.8125rem !important; }

  .relative.pl-8 { padding-left: 2.25rem !important; }
  .timeline-line { left: 10px !important; }

  .flex.items-center.gap-6 > .w-24 { width: 4rem !important; height: 4rem !important; font-size: 1.25rem !important; }

  .flex.flex-wrap.gap-3.mb-10 { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; }
  .flex.flex-wrap.gap-3.mb-10 > button { flex-shrink: 0; }

  .flex.flex-wrap.gap-2.mb-4 { gap: 0.375rem !important; }
  .tag-info { font-size: 10px; padding: 4px 8px; }

  .flex.flex-wrap.gap-2.mt-4 { gap: 0.375rem !important; }
  .btn-acao-top { font-size: 9px !important; padding: 6px 10px !important; }

  a.btn-primary.whitespace-nowrap { width: 100% !important; justify-content: center; }

  .card-glass.p-8.border-l-4 { padding: 1.25rem !important; }

  .audio-item-grid .audio-right { border-top: 1px solid oklch(97% 0.003 280 / 0.06) !important; }
}

@media (max-width: 767px) {
  #secaoQuadrantes .flex.justify-end.gap-4 {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #secaoQuadrantes .flex.justify-end.gap-4 > button {
    width: 100% !important;
    justify-content: center !important;
  }
  #secaoSoap .flex.justify-end.gap-4 {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #secaoSoap .flex.justify-end.gap-4 > button {
    width: 100% !important;
    justify-content: center !important;
  }
  .border-dashed.rounded-2xl { min-height: 200px !important; }
  .card-glass.p-7 { padding: 1.25rem !important; }
  #secaoQuadrantes .flex.items-center.justify-between.mb-5 { flex-wrap: wrap; gap: 0.75rem; }
}

@media (max-width: 640px) {
  .flex.gap-4.mb-8 { flex-direction: column !important; }
  .flex.gap-4.mb-8 > button { width: 100% !important; }
}

@media (max-width: 767px) {
  #main-content h1.text-4xl { font-size: 2rem !important; }
  .grid.grid-cols-2 { gap: 0.75rem !important; }
}

/* ── Pensamento Profundo ────────────────────────────────────────────────────── */
.dt-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.875rem;
}
.dt-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.dt-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem 0.375rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid oklch(56% 0.175 288 / 0.22);
  background: oklch(56% 0.175 288 / 0.05);
  color: oklch(62% 0.07 288);
  font-family: var(--font-ui, 'Geist', sans-serif);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}
.dt-pill:hover {
  border-color: oklch(56% 0.175 288 / 0.42);
  color: oklch(74% 0.13 288);
}
.dt-pill:has(input:checked) {
  border-color: oklch(56% 0.175 288 / 0.75);
  background: oklch(56% 0.175 288 / 0.20);
  color: oklch(88% 0.155 288);
  box-shadow: 0 0 0 3px oklch(56% 0.175 288 / 0.15), 0 0 18px oklch(56% 0.175 288 / 0.30), inset 0 1px 0 oklch(97% 0.003 280 / 0.10);
}
.dt-spark {
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.2s;
}
.dt-pill:has(input:checked) .dt-spark {
  opacity: 1;
  filter: drop-shadow(0 0 3px oklch(56% 0.175 288 / 0.70));
}
.dt-text-on { display: none; }
.dt-pill:has(input:checked) .dt-text-off { display: none; }
.dt-pill:has(input:checked) .dt-text-on  { display: inline; }
.dt-tooltip-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.dt-info-icon {
  flex-shrink: 0;
  color: oklch(55% 0.06 280);
  cursor: help;
  transition: color 0.15s;
}
.dt-tooltip-wrap:hover .dt-info-icon { color: oklch(72% 0.13 288); }
.dt-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: oklch(12% 0.035 288);
  border: 1px solid oklch(56% 0.175 288 / 0.28);
  color: oklch(78% 0.04 280);
  font-family: var(--font-ui, 'Geist', sans-serif);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 50;
  box-shadow: 0 8px 36px rgba(0,0,0,0.75);
}
.dt-tooltip-wrap:hover .dt-tooltip { opacity: 1; }
.dt-hint {
  font-family: var(--font-ui, 'Geist', sans-serif);
  font-size: 0.6875rem;
  color: oklch(80% 0.13 55);
  text-align: center;
  letter-spacing: 0.01em;
}
body.theme-light .dt-pill {
  border-color: oklch(56% 0.175 288 / 0.30);
  background: oklch(56% 0.175 288 / 0.06);
  color: oklch(42% 0.12 288);
}
body.theme-light .dt-pill:has(input:checked) {
  border-color: oklch(56% 0.175 288 / 0.55);
  background: oklch(56% 0.175 288 / 0.10);
  color: oklch(40% 0.155 288);
  box-shadow: 0 0 12px oklch(56% 0.175 288 / 0.12);
}
body.theme-light .dt-tooltip {
  background: oklch(98% 0.005 280);
  border-color: oklch(56% 0.175 288 / 0.22);
  color: oklch(30% 0.05 280);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* ── Modal de Notificações ──────────────────────────────────────────────────── */
#notifModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9990;
  align-items: center;
  justify-content: center;
}
#notifModal.open { display: flex; }
#notifOverlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#notifPanel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: #111;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  overflow: hidden;
  animation: notif-slide-in 0.22s ease;
  margin: 1rem;
}
@keyframes notif-slide-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.notif-title {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #9ca3af;
}
.notif-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.notif-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
#listaNotif {
  overflow-y: auto;
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}
#listaNotif .notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  cursor: pointer;
  transition: background 0.12s, opacity 0.2s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
#listaNotif .notif-item:last-child { border-bottom: none; }
#listaNotif .notif-item:hover { background: rgba(255,255,255,0.04); }
#listaNotif .notif-item.notif-lida { opacity: 0.38; }
.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.notif-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.notif-titulo {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-msg  { font-size: 11px; color: #9ca3af; line-height: 1.4; }
.notif-data { font-size: 10px; color: #6b7280; margin-top: 2px; }
.notif-empty {
  padding: 2.5rem 1.25rem;
  text-align: center;
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
}
.notif-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.notif-footer button {
  font-size: 11px;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}
.notif-footer button:hover { color: #fff; }

/* ── Modal notificações — tema claro ────────────────────────────────────────── */
body.theme-light #notifPanel {
  background: oklch(99% 0.003 280);
  border-color: oklch(74% 0.120 288 / 0.25);
  box-shadow: 0 24px 64px oklch(20% 0.04 280 / 0.18);
}
body.theme-light .notif-title  { color: var(--color-neutral-600); }
body.theme-light .notif-close  { color: var(--color-neutral-500); }
body.theme-light .notif-close:hover { background: oklch(0% 0 0 / 0.04); color: var(--color-neutral-950); }
body.theme-light .notif-header { border-color: oklch(0% 0 0 / 0.08); }
body.theme-light #listaNotif .notif-item { border-color: oklch(0% 0 0 / 0.06); }
body.theme-light #listaNotif .notif-item:hover { background: oklch(0% 0 0 / 0.03); }
body.theme-light .notif-titulo { color: var(--color-neutral-950); }
body.theme-light .notif-msg    { color: var(--color-neutral-500); }
body.theme-light .notif-data   { color: var(--color-neutral-400); }
body.theme-light .notif-empty  { color: var(--color-neutral-500); }
body.theme-light .notif-footer { border-color: oklch(0% 0 0 / 0.08); }
body.theme-light .notif-footer button:hover { color: var(--color-neutral-950); }