/* ══════════════════════════════════════════════════════
   FLOW — Design System v4 "Apex"
   Font: Space Grotesk (UI + montos/títulos)
   Base: Materialize CSS 1.0.0
   Referencia visual: ejemplos/estilo/ (tema gris/negro neutro,
   sidebar y navbar siempre oscuros, igual en light y dark mode)
   ══════════════════════════════════════════════════════ */

/* ── Design tokens (light) ────────────────────────── */
:root {
  --brand:          #16A34A;
  --brand-dark:     #15803D;
  --brand-deeper:   #14532D;
  --brand-light:    #F0FDF4;
  --brand-muted:    rgba(22,163,74,0.10);
  --brand-accent:   #D4A017;

  --dm-bg:          #FAFAFA;
  --dm-surface:     #FFFFFF;
  --dm-surface2:    #F4F4F5;
  --dm-border:      #E4E4E7;
  --dm-divider:     #ECECEE;
  --dm-text1:       #18181B;
  --dm-text2:       #52525B;
  --dm-text3:       #8E8E96;
  --dm-shadow:      rgba(24,24,27,0.06);
  --dm-shadow-md:   rgba(24,24,27,0.09);
  --dm-modal:       #FFFFFF;
  --dm-input:       transparent;

  --radius-xs:      4px;
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      14px;
  --radius-xl:      20px;

  --shadow-xs:  0 1px 2px rgba(24,24,27,0.04);
  --shadow-sm:  0 1px 3px rgba(24,24,27,0.04), 0 2px 8px rgba(24,24,27,0.05);
  --shadow-md:  0 2px 8px rgba(24,24,27,0.05), 0 6px 20px rgba(24,24,27,0.07);
  --shadow-lg:  0 4px 16px rgba(24,24,27,0.07), 0 12px 36px rgba(24,24,27,0.09);

  --cat-neg-bg:     #FEF2F2;
  --cat-neg-brd:    #FECACA;
  --cat-neg-txt:    #B91C1C;
  --cat-pos-bg:     #F0FDF4;
  --cat-pos-brd:    #BBF7D0;
  --cat-pos-txt:    #15803D;
  --chart-grid:     rgba(0,0,0,0.06);
  --chart-text:     #8E8E96;

  /* El sidebar es siempre "casi negro", igual en light y dark — es la identidad
     visual del template de referencia, no un tema que cambia con el modo. */
  --sidebar-bg:     #0A0A0A;
  --sidebar-brand:  #000000;
  --sidebar-text:   rgba(255,255,255,0.75);
  --sidebar-active-bg: rgba(22,163,74,0.16);
  --sidebar-active-txt: #4ADE80;
  --sidebar-active-accent: #22C55E;
  --sidebar-section: rgba(255,255,255,0.42);

  --transition-fast: 0.15s ease;
  --transition-std:  0.22s ease;
  --transition-slow: 0.35s ease;
}

/* ── Design tokens (dark) ─────────────────────────── */
body.dark-mode {
  --dm-bg:         #0A0A0A;
  --dm-surface:    #131313;
  --dm-surface2:   #1C1C1E;
  --dm-border:     #2A2A2D;
  --dm-divider:    #232325;
  --dm-text1:      #FAFAFA;
  --dm-text2:      #A1A1AA;
  --dm-text3:      #71717A;
  --dm-shadow:     rgba(0,0,0,0.55);
  --dm-shadow-md:  rgba(0,0,0,0.70);
  --dm-modal:      #131313;
  --dm-input:      #131313;
  --cat-neg-bg:    #2C1517;
  --cat-neg-brd:   #5C2328;
  --cat-neg-txt:   #F87171;
  --cat-pos-bg:    #0F2416;
  --cat-pos-brd:   #1F5B34;
  --cat-pos-txt:   #4ADE80;
  --chart-grid:    rgba(255,255,255,0.07);
  --chart-text:    #A1A1AA;
  /* Sidebar queda igual que en light — ver comentario arriba */
  --brand:          #22C55E;
  --brand-dark:     #16A34A;
  --brand-accent:   #E6BC59;
}

/* ── Dark mode: sidebar siempre con colores claros ── */
/* El sidebar es siempre oscuro, el dark-mode no debe hacerlo más oscuro */
body.dark-mode .sidenav li > a,
body.dark-mode .sidenav li > a i,
body.dark-mode .sidenav .collapsible-header,
body.dark-mode .sidenav .collapsible-header i.material-icons,
body.dark-mode .sidenav .collapsible-body li > a,
body.dark-mode .sidenav .collapsible-body li > a i {
  color: var(--sidebar-text) !important;
}
body.dark-mode .sidenav li.active > a,
body.dark-mode .sidenav li.active > a i,
body.dark-mode .sidenav li.active > a i.material-icons { color: var(--sidebar-active-txt) !important; }
body.dark-mode .sidenav .collapsible li.active > .collapsible-header { color: var(--sidebar-active-txt) !important; }
body.dark-mode .sidenav li.subheader,
body.dark-mode .sidenav li.sidebar-section { color: var(--sidebar-section) !important; }

/* ── Materialize brand override — paleta Evoris ──────
   Materialize trae su propio teal fijo (#16A34A/#15803D). Estos overrides
   retinen TODOS los botones/chips/textos .teal existentes a la paleta nueva
   sin tocar ninguna vista — mismo mecanismo que .btn.teal.darken-2 ya usa
   en cientos de lugares del proyecto. */
.teal-text { color: #16A34A !important; }
.btn.teal,
.btn-flat.teal,
.chip.teal,
.badge.teal,
.card.teal,
.progress .teal { background-color: #22C55E !important; }

.teal.lighten-1 { background-color: #4ADE80 !important; }
.teal.lighten-2 { background-color: #86EFAC !important; }
.teal.lighten-3 { background-color: #BBF7D0 !important; }
.teal.lighten-4 { background-color: #DCFCE7 !important; }
.teal.lighten-5 { background-color: #F0FDF4 !important; }

.teal-text.text-darken-1 { color: #16A34A !important; }
.btn.teal.darken-1,
.btn-flat.teal.darken-1,
.chip.teal.darken-1,
.card.teal.darken-1 { background-color: #16A34A !important; }

.teal-text.text-darken-2 { color: #15803D !important; }
.btn.teal.darken-2,
.btn-flat.teal.darken-2,
.chip.teal.darken-2,
.card.teal.darken-2,
.badge.teal.darken-2 { background-color: #15803D !important; }

.teal-text.text-darken-3 { color: #14532D !important; }
.btn.teal.darken-3,
.btn-flat.teal.darken-3,
.chip.teal.darken-3,
.card.teal.darken-3 { background-color: #14532D !important; }

.teal-text.text-darken-4 { color: #052e16 !important; }
.btn.teal.darken-4,
.card.teal.darken-4 { background-color: #052e16 !important; }

/* Estados hover/focus de Materialize que referencian el teal por defecto */
.btn.teal:hover, .btn.teal.darken-1:hover { background-color: #15803D !important; }
.btn.teal.darken-2:hover { background-color: #14532D !important; }
.btn.teal.darken-3:hover { background-color: #052e16 !important; }
input:not([type]):focus:not([readonly]) + label,
input[type=text]:not(.browser-default):focus:not([readonly]) + label,
input[type=email]:not(.browser-default):focus:not([readonly]) + label,
input[type=password]:not(.browser-default):focus:not([readonly]) + label,
input[type=date]:not(.browser-default):focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label { color: #16A34A !important; }
input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) { border-bottom: 1px solid #16A34A !important; box-shadow: 0 1px 0 0 #16A34A !important; }
.select-wrapper input.select-dropdown:focus { border-bottom: 1px solid #16A34A !important; }
[type="checkbox"].filled-in:checked + span:not(.lever)::after { background-color: #15803D !important; border-color: #15803D !important; }
[type="radio"]:checked + span::after,
[type="radio"].with-gap:checked + span::before,
[type="radio"].with-gap:checked + span::after { border-color: #16A34A !important; }
[type="radio"].with-gap:checked + span::after,
[type="radio"]:checked + span::after { background-color: #16A34A !important; }
.switch label input[type=checkbox]:checked + .lever { background-color: #BBF7D0 !important; }
.switch label input[type=checkbox]:checked + .lever::after { background-color: #15803D !important; }
.tabs .indicator { background-color: #16A34A !important; }
.tabs .tab a.active, .tabs .tab a:focus.active { color: #15803D !important; }
.pagination li.active { background-color: #16A34A !important; }
.dropdown-content li > a, .dropdown-content li > span { color: #15803D !important; }

/* ── Base ─────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  background: var(--dm-bg);
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--dm-text1);
}

/* Custom scrollbar (Webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--dm-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--dm-text3); }

/* ── Page load animation ──────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.content-wrapper {
  animation: fadeInUp 0.38s ease both;
}

/* ── Sidebar ──────────────────────────────────────── */
.sidenav {
  width: 240px;
  background: var(--sidebar-bg);
  overflow-y: auto;
  border-right: none;
}

.sidenav .sidebar-brand {
  padding: 18px 16px 14px;
  background: var(--sidebar-brand);
  display: block;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sidenav .sidebar-brand a {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff !important;
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: none !important;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* SVG logo */
.flow-logo {
  flex-shrink: 0;
  display: block;
  transition: transform var(--transition-std);
}
.sidenav .sidebar-brand a:hover .flow-logo {
  transform: scale(1.07) rotate(-2deg);
}

/* Brand wordmark */
.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}
.bw-flow {
  font-weight: 800;
  color: #fff;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}
.bw-core {
  font-weight: 300;
  color: #86EFAC;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
}

.sidenav li > a {
  color: var(--sidebar-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 0 14px !important;
  height: 42px !important;
  line-height: 42px !important;
  font-size: 0.87rem !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  margin: 1px 10px !important;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease !important;
  letter-spacing: -0.005em !important;
}
.sidenav li > a i {
  font-size: 1.2rem !important;
  line-height: 42px !important;
  /* Sin opacity reducida — el ícono debe leerse del mismo color que el texto del ítem,
     si no queda apagado y "no se nota" junto al nombre. !important es necesario:
     Materialize define ".sidenav li>a>i.material-icons{color:rgba(0,0,0,.54)}" con
     más especificidad (2 clases) que este selector (1 clase), así que sin !important
     gana el negro de Materialize y el ícono queda desalineado del color del texto. */
  color: inherit !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0;
}

.sidenav li > a:hover {
  background: rgba(255,255,255,0.07) !important;
  color: #fff !important;
}

.sidenav li.active > a {
  background: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-txt) !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 0 var(--sidebar-active-accent) !important;
}
.sidenav li.active > a i { opacity: 1; color: inherit !important; }

.sidenav li.subheader,
.sidenav li.sidebar-section {
  padding: 20px 18px 6px !important;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(156,163,175,0.75) !important;
  height: auto !important;
  line-height: 1.2 !important;
  font-weight: 700;
  pointer-events: none;
  user-select: none;
}
.sidenav li.sidebar-section.collapsible-section {
  pointer-events: auto;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
  margin: 0 8px;
  transition: background .15s ease;
}
.sidenav li.sidebar-section.collapsible-section:hover {
  background: rgba(255,255,255,0.04);
}
.sidenav li.sidebar-subsection {
  padding: 14px 18px 6px 26px !important;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(156,163,175,0.7) !important;
  height: auto !important;
  line-height: 1.2 !important;
  font-weight: 700;
  pointer-events: none;
  user-select: none;
  border-left: none;
  margin-left: 0;
}
.sidenav li.sidebar-subsection.collapsible-subsection {
  pointer-events: auto;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  overflow: hidden;
  /* Barra indicadora del mismo color (verde de marca) que la del ítem activo —
     un solo lenguaje visual de "indicador" en vez de dos colores distintos */
  background: rgba(255,255,255,0.035) !important;
  border-left: 3px solid rgba(34,197,94,0.35) !important;
  margin: 10px 10px 3px 10px !important;
  padding: 8px 10px 8px 12px !important;
  border-radius: 0 8px 8px 0 !important;
}
.sidenav li.sidebar-subsection.collapsible-subsection:hover {
  color: rgba(255,255,255,0.85) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* Marca "Nuevo" — privilegio activado recientemente que el usuario aún no visitó.
   Se apaga solo al entrar a la página que ese privilegio habilita. */
.sidenav li.nav-badge-new > a::after {
  content: 'Nuevo';
  margin-left: auto;
  flex-shrink: 0;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: var(--brand-accent);
  color: #1a1a1a;
  padding: 2px 7px;
  border-radius: 10px;
}
/* Punto discreto en secciones/subsecciones colapsadas que contienen un ítem nuevo */
.sidenav li.nav-badge-new-parent::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-accent);
  margin-left: 6px;
  flex-shrink: 0;
}

/* Ítems hijo: claramente dentro del padre */
.sidenav li.sidebar-sub-item > a {
  padding-left: 20px !important;
  font-size: .84rem !important;
  margin-left: 20px !important;
  margin-right: 10px !important;
  border-left: 2px solid rgba(34,197,94,0.16) !important;
  border-radius: 8px !important;
  height: 38px !important;
  line-height: 38px !important;
}
.sidenav li.sidebar-sub-item > a:hover {
  border-left-color: rgba(34,197,94,0.45) !important;
}
.sidenav li.sidebar-sub-item.active > a {
  border-left-color: var(--sidebar-active-accent) !important;
  box-shadow: none !important;
}
/* Último ítem del grupo: margen inferior para separar del siguiente grupo */
.sidenav li.sidebar-sub-last {
  margin-bottom: 8px !important;
}

.sidenav li.divider {
  background: rgba(255,255,255,0.06) !important;
  margin: 4px 0 !important;
}

/* ── Sidebar connection info ──────────────────────────────────── */
.sidenav li.sidebar-conn-item { height: auto !important; }
.sidebar-conn-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
}
.sidebar-conn-label {
  display: block; font-size: 10px; color: rgba(183,201,188,0.65);
  text-transform: uppercase; letter-spacing: .05em; line-height: 1;
  margin-bottom: 3px;
}
.sidebar-conn-host {
  font-size: 12px; font-weight: 700; color: #86EFAC;
  font-family: 'Courier New', monospace; word-break: break-all;
}
.sidebar-conn-copy {
  padding: 4px !important; margin: 0 !important; flex-shrink: 0;
  background: rgba(255,255,255,0.06) !important; border-radius: 6px !important;
}
.sidebar-conn-copy i { font-size: 16px !important; line-height: 1; }
@media (max-width: 992px) { .sidenav li.sidebar-conn-item { display: none !important; } }

/* ── Sidebar toggle button (justo debajo del logo) ── */
#li-sidebar-toggle {
  height: auto !important;
  display: flex !important;
  padding: 8px 10px !important;
}
#btn-sidebar-toggle {
  width: 100%;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  color: var(--sidebar-text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  opacity: .8;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}
#btn-sidebar-toggle:hover { background: rgba(255,255,255,0.09) !important; opacity: 1; }
#btn-sidebar-toggle i { font-size: 1.05rem !important; color: var(--sidebar-text); flex-shrink: 0; }
#icon-sidebar-toggle { transition: transform .22s ease; }
.sidebar-toggle-label { font-size: .72rem; font-weight: 600; letter-spacing: .02em; }

/* ── sec-hidden: items ocultos por colapso de sección (no por privilegios) ── */
.sec-hidden { display: none; }
/* En modo mini se muestran como iconos (los privilege-hidden tienen style inline y no tienen esta clase) */
body.sidenav-mini .sidenav li.sec-hidden:not(.sidebar-section):not(.sidebar-subsection):not(.divider):not(.sidebar-conn-item):not(.sidebar-ciclo-card-item) {
  display: block !important;
}

/* ── Sidebar mini (icon-only) mode ── */
.sidenav { transition: width .22s ease; }
@media only screen and (min-width: 993px) {
  nav,
  main.main-content { transition: padding-left .22s ease; }
  body.sidenav-mini nav,
  body.sidenav-mini main.main-content { padding-left: 68px !important; }
}
body.sidenav-mini .sidenav { width: 68px !important; overflow: hidden; }
body.sidenav-mini .sidenav .sidebar-brand { padding: 14px 0 !important; }
body.sidenav-mini .sidenav .sidebar-brand a { padding: 0 !important; justify-content: center; }
body.sidenav-mini .sidenav .sidebar-brand a span { display: none !important; }
body.sidenav-mini .sidenav li.sidebar-section,
body.sidenav-mini .sidenav li.sidebar-subsection,
body.sidenav-mini .sidenav li.divider,
body.sidenav-mini .sidenav li.sidebar-conn-item,
body.sidenav-mini .sidenav li.sidebar-ciclo-card-item { display: none !important; }
body.sidenav-mini #li-sidebar-toggle {
  padding: 4px 0 !important;
  justify-content: center;
}
body.sidenav-mini .sidebar-toggle-label { display: none; }
body.sidenav-mini .sidenav li > a {
  font-size: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
  overflow: hidden;
  padding: 0 !important;
  margin: 1px 10px !important;
  border-radius: 10px !important;
  width: 48px;
  height: 44px !important;
  line-height: 44px !important;
}
body.sidenav-mini .sidenav li > a i.material-icons {
  font-size: 1.35rem !important;
  margin: 0 !important;
  line-height: 44px !important;
}
body.sidenav-mini #icon-sidebar-toggle { transform: rotate(180deg); }
body.sidenav-mini #btn-sidebar-toggle {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  opacity: 1 !important;
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.22) !important;
}
body.sidenav-mini #btn-sidebar-toggle i.material-icons {
  font-size: 1.35rem !important;
}
body.sidenav-mini #btn-sidebar-toggle:hover { background: rgba(255,255,255,.16) !important; }

.sidenav .sidebar-footer a {
  color: rgba(183,201,188,0.7) !important;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidenav .sidebar-footer a i.right { margin-left: auto; opacity: 0.6; font-size: 1rem; }

/* ── Sidenav collapsible ──────────────────────────── */
.sidenav li:has(> ul.collapsible) { padding: 0 !important; }
.sidenav .collapsible {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.sidenav .collapsible > li { padding: 0 !important; }
.sidenav .collapsible-header {
  color: var(--sidebar-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 16px 0 18px !important;
  height: 44px !important;
  min-height: unset !important;
  line-height: 44px !important;
  font-size: 0.875rem !important;
  font-weight: 450 !important;
  border-radius: 0 24px 24px 0 !important;
  margin-right: 10px !important;
  border: none !important;
  background: transparent !important;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidenav .collapsible-header i.material-icons {
  width: auto !important;
  font-size: 1.15rem !important;
  line-height: 44px !important;
  margin-right: 0 !important;
  display: inline-flex !important;
  text-align: unset !important;
  opacity: 0.8;
}
.sidenav .collapsible-header i.right {
  margin-left: auto !important;
  font-size: 1rem !important;
  transition: transform 0.25s ease;
  opacity: 0.6;
}
.sidenav .collapsible li.active > .collapsible-header i.right { transform: rotate(180deg); }
.sidenav .collapsible-header:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}
.sidenav .collapsible li.active > .collapsible-header {
  color: var(--sidebar-active-txt) !important;
  background: var(--sidebar-active-bg) !important;
  font-weight: 600 !important;
}
.sidenav .collapsible-body {
  background: rgba(0,0,0,0.2) !important;
  border: none !important;
  padding: 4px 0 !important;
}
.sidenav .collapsible-body ul { margin: 0; padding: 0; list-style: none; }
.sidenav .collapsible-body li > a {
  color: var(--sidebar-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 16px 0 44px !important;
  height: 40px !important;
  line-height: 40px !important;
  font-size: 0.85rem !important;
  border-radius: 0 22px 22px 0 !important;
  margin-right: 10px !important;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidenav .collapsible-body li > a i.material-icons {
  width: auto !important;
  font-size: 1rem !important;
  line-height: 40px !important;
  margin-right: 0 !important;
}
.sidenav .collapsible-body li > a:hover,
.sidenav .collapsible-body li.active > a {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
}

/* ── Main layout ──────────────────────────────────── */
@media only screen and (min-width: 993px) {
  nav { padding-left: 240px; }
  main.main-content { padding-left: 240px; }
}

/* ── Top navbar ───────────────────────────────────── */
nav {
  /* El navbar es siempre oscuro, igual que el sidebar — misma identidad visual
     en los dos, sin depender del tema claro/oscuro de la página. */
  background: var(--sidebar-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: none !important;
}
/* Materialize colorea nav/brand-logo/sidenav-trigger en blanco por defecto,
   asumiendo un navbar oscuro — como ahora el navbar siempre es oscuro (igual
   que el sidebar), estos colores ya no dependen del tema de la página. */
nav .brand-logo,
nav a.sidenav-trigger i { color: #fff !important; }
nav .brand-logo .bw-flow { color: #fff !important; }
nav .brand-logo .bw-core { color: var(--brand) !important; }

nav ul.right li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 0.875rem;
  color: var(--sidebar-text);
  transition: background var(--transition-fast);
}
nav ul.right li > a i { font-size: 1.3rem; line-height: inherit; color: var(--sidebar-text); }
nav ul.right li > a i.right { font-size: 1rem; margin-left: 0; }
nav ul.right li > a:hover { background: rgba(255,255,255,0.08); border-radius: var(--radius-md); }

/* Perfil activo: nombre bajo el email en el trigger de usuario */
.nav-user-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 140px;
  overflow: hidden;
}
.nav-user-info #sidebar-email {
  font-size: .83rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--dm-text1);
}
#nav-perfil-badge {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
  line-height: 1;
  margin-top: 1px;
}

/* Avatar — verde sólido con iniciales blancas, funciona igual sobre navbar claro u oscuro */
.user-nav-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* User dropdown */
#dropdown-user-nav {
  min-width: 250px;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--shadow-lg) !important;
  padding: 0 !important;
}
.user-menu-header {
  padding: 18px 16px 16px;
  background: linear-gradient(135deg, #052e16, #14532D);
  pointer-events: none;
  user-select: none;
}
.user-menu-header strong {
  display: block;
  font-size: .88rem;
  color: #fff;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 10px;
}
.user-menu-subrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-menu-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: 2px solid rgba(255,255,255,.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}
#user-menu-perfil {
  font-size: .78rem;
  color: rgba(255,255,255,.85);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Nivel de logros — antes vivía como pill en la barra superior, ahora en el espacio restante de esta fila */
.user-menu-logro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 700;
  color: #E6BC59;
}
.user-menu-logro i.material-icons { font-size: 13px; }
.user-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 16px !important;
  height: 44px !important;
  font-size: .875rem !important;
  color: var(--dm-text2) !important;
  transition: background var(--transition-fast) !important;
  font-family: 'Space Grotesk', sans-serif !important;
}
.user-menu-item i {
  font-size: 1.1rem !important;
  color: #14532D !important;
  flex-shrink: 0 !important;
}
.user-menu-item:hover { background: var(--dm-surface2) !important; }
.user-menu-logout { color: #C62828 !important; }
.user-menu-logout i { color: #C62828 !important; }
.user-menu-logout:hover { background: #FFF5F5 !important; }
#dropdown-user-nav li.divider {
  margin: 3px 12px !important;
  background: var(--dm-border) !important;
}

/* ── Content wrapper ──────────────────────────────── */
.content-wrapper {
  padding: 24px 22px 48px;
  max-width: 1600px;
}

/* ── Page header ──────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.page-header h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--dm-text1);
  letter-spacing: -0.025em;
}
.page-header h4 i { color: var(--brand); }

/* ── Cards (base) ─────────────────────────────────── */
.card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--dm-border);
  box-shadow: var(--shadow-sm) !important;
  background: var(--dm-surface);
  transition: box-shadow var(--transition-std), transform var(--transition-std), border-color var(--transition-std);
}

/* Hover lift for content cards (not stat/insight cards) */
.card:not(.stat-card):not(.insight-card):not(.login-card):hover {
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(22,163,74,0.18);
  transform: translateY(-2px);
}

.card .card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dm-text1);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.card .card-title i { color: var(--brand); font-size: 1.15rem; }

/* ── Stat cards ───────────────────────────────────── */
.stat-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 0 0 10px;
}
.stat-cards-row .card {
  margin: 0;
}

/* Acciones rápidas admin */
.adm-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.stat-card .card-content { padding: 16px 18px; }
.stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.92;
  margin: 0 0 6px;
}
.stat-label i { font-size: 0.95rem; }
.stat-value {
  margin: 4px 0 0;
  font-size: 1.45rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
}
.stat-sub {
  margin: 3px 0 0;
  font-size: 0.73rem;
  opacity: 0.8;
  font-weight: 450;
}

/* ── Tables ───────────────────────────────────────── */
.responsive-table { overflow-x: auto; }

/* ── Selects e inputs inline en tablas (admin panel) ── */
.sel-estado-usuario {
  font-size: 11px;
  border: 1px solid var(--dm-border);
  border-radius: 4px;
  padding: 2px 4px;
  height: 26px;
  width: 110px;
  background: var(--dm-surface2);
  color: var(--dm-text2);
}
.inp-exp-usuario, .inp-exp-perfil {
  font-size: 11px;
  border: 1px solid var(--dm-border);
  border-radius: 4px;
  padding: 2px 4px;
  height: 26px;
  background: var(--dm-surface2);
  color: var(--dm-text2);
}
.inp-exp-vencida { border-color: #e53935 !important; }

table {
  border-collapse: separate;
  border-spacing: 0;
}

table thead tr {
  background: var(--dm-surface2);
}
table thead tr th:first-child { border-radius: var(--radius-sm) 0 0 0; }
table thead tr th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }

table th {
  color: var(--dm-text3);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  padding: 11px 16px;
  border-bottom: 1.5px solid var(--dm-border);
  background: var(--dm-surface2);
}
table td {
  font-size: 0.875rem;
  color: var(--dm-text1);
  padding: 11px 16px;
  border-bottom: 1px solid var(--dm-divider);
  vertical-align: middle;
  transition: background var(--transition-fast);
}
table.striped tbody tr:hover td {
  background: var(--dm-surface2);
}
table.striped > tbody > tr:nth-child(odd) { background: transparent; }

/* Row slide-in animation */
@keyframes rowEnter {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
table tbody tr {
  animation: rowEnter 0.25s ease both;
}

/* ── Chips / badges ───────────────────────────────── */
.chip {
  font-size: 0.73rem;
  font-weight: 600;
  height: 22px;
  line-height: 22px;
  padding: 0 10px;
  border-radius: 11px;
  display: inline-block;
  letter-spacing: 0.02em;
}
.chip-pendiente { background: #FFF4E5; color: #B25C00; border: 1px solid #FFD591; }
.chip-pagado    { background: #F0FFF4; color: #1A7035; border: 1px solid #95E1A8; }
.chip-gasto     { background: #EBF4FF; color: #1A4D8A; border: 1px solid #93C5FD; }
.chip-deuda     { background: #FFF0F6; color: #8B1A4A; border: 1px solid #F9A8D4; }

/* ── Paginación de tablas (Flow.crearPaginacion) ──── */
.flow-pag-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.flow-pag-size-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--dm-text3);
  font-weight: 500;
}
.flow-pag-size-select {
  width: auto !important;
  height: 30px !important;
  border: 1px solid var(--dm-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0 8px !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  color: var(--dm-text1) !important;
  background: var(--dm-surface) !important;
  cursor: pointer;
}
.flow-pag-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.flow-pag-summary {
  font-size: .78rem;
  color: var(--dm-text3);
  font-weight: 500;
  white-space: nowrap;
  margin-right: 2px;
}
.flow-pag-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--dm-border);
  background: var(--dm-surface);
  color: var(--dm-text2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  padding: 0;
}
.flow-pag-btn i { font-size: 1.1rem; line-height: 1; }
.flow-pag-btn:hover:not(:disabled) {
  background: var(--brand-light);
  border-color: var(--brand);
  color: var(--brand-dark);
}
.flow-pag-btn:disabled {
  opacity: .4;
  cursor: default;
}
body.dark-mode .flow-pag-btn:hover:not(:disabled) {
  background: rgba(30,132,73,0.18);
  border-color: var(--brand);
  color: #86EFAC;
}

/* ── Filter bar ───────────────────────────────────── */
.filter-bar { display: flex; gap: 5px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filter-btn {
  border-radius: var(--radius-xl) !important;
  padding: 0 14px;
  font-size: 0.8rem;
  height: 32px;
  line-height: 32px;
  font-weight: 500;
  transition: all var(--transition-fast);
  font-family: 'Space Grotesk', sans-serif !important;
}
.filter-btn:hover { transform: translateY(-1px); }
.filter-btn.active {
  background: var(--brand-muted) !important;
  color: var(--brand-dark) !important;
  font-weight: 600;
  box-shadow: 0 0 0 1.5px rgba(22,163,74,0.35);
}

.filter-select {
  height: 32px;
  padding: 0 28px 0 12px;
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--dm-border);
  background: var(--dm-surface);
  color: var(--dm-text2);
  font-size: 0.8rem;
  font-weight: 500;
  font-family: 'Space Grotesk', sans-serif;
  cursor: pointer;
  outline: none;
  align-self: center;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238896A8' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.filter-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-muted);
}
.filter-input {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: var(--radius-xl) !important;
  border: 1.5px solid var(--dm-border) !important;
  box-shadow: none !important;
  color: var(--dm-text1);
  font-size: 0.8rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  outline: none;
  background: var(--dm-surface);
  width: 145px;
  margin-bottom: 0 !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.filter-input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-muted) !important;
}
.filter-input::placeholder { color: var(--dm-text3); }

/* ── Buttons ──────────────────────────────────────── */
.btn, .btn-flat, .btn-large, .btn-small {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  border-radius: var(--radius-md) !important;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast) !important;
}
.btn:active, .btn-large:active { transform: scale(0.97) !important; }
.btn:hover  { box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; transform: translateY(-1px); }

/* ── Loading ──────────────────────────────────────── */
.loading-row { margin: 8px 0; }
.loading-row .progress { height: 3px; border-radius: 2px; overflow: hidden; }
.hidden { display: none !important; }

/* Skeleton shimmer */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg,
    var(--dm-surface2) 25%,
    var(--dm-border)   50%,
    var(--dm-surface2) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.5s infinite linear;
}

/* Number flash on update */
@keyframes valFlash {
  0%   { color: inherit; }
  20%  { color: #14532D; }
  100% { color: inherit; }
}
.val-flash { animation: valFlash 1.2s ease; }

/* Success row flash */
@keyframes rowSuccess {
  0%   { background: rgba(22,163,74,0.18); }
  100% { background: transparent; }
}
.row-success { animation: rowSuccess 1.5s ease forwards; }

/* ── Doughnut chart wrapper ───────────────────────── */
.chart-donut-wrapper { max-width: 260px; margin: 8px auto 0; }

/* ── Filas de gráficos del dashboard: igualar alto entre columnas ──
   Materialize .row/.col no igualan altura (cada card mide según su
   propio contenido) — sin esto, la card de gráfico con más contenido
   (ej. "Tendencia") queda más alta que su vecina ("Distribución"),
   dando un layout visiblemente desparejo. */
.dash-chart-row { display: flex; flex-wrap: wrap; }
.dash-chart-row > .col { display: flex; }
.dash-chart-row > .col > .card { flex: 1; margin-bottom: 0; display: flex; flex-direction: column; }
.dash-chart-row > .col > .card > .card-content { flex: 1; display: flex; flex-direction: column; }

/* ── Disponible card (dashboard) ──────────────────── */
#card-disponible .card-content { padding: 22px 24px; }
/* Firma "Ledger" — gradiente de 3 paradas oscuro→verde→dorado pálido,
   igual al hero card de movil/ (ux-movil.md), portado a la web. Solo en
   el estado positivo (teal.darken-3) — negativo/warning quedan planos. */
#card-disponible.teal.darken-3,
#card-disponible-ajustado.teal.darken-3 {
  background: linear-gradient(135deg, #15803D, #16A34A 55%, #E8CE95) !important;
}
.disponible-formula {
  background: rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: .85rem;
}
.formula-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  opacity: .92;
}
.formula-row.formula-minus { opacity: .75; }
.formula-row.formula-result {
  border-top: 1px solid rgba(255,255,255,.3);
  margin-top: 5px;
  padding-top: 7px;
  font-weight: 700;
  font-size: .96rem;
  opacity: 1;
}

/* ── Saldo items (dashboard) ──────────────────────── */
.saldo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--dm-divider);
  transition: background var(--transition-fast);
}
.saldo-item:last-child { border-bottom: none; }
.saldo-name  { font-size: 0.875rem; color: var(--dm-text2); font-weight: 450; }
.saldo-amount { font-weight: 700; font-size: 0.95rem; font-feature-settings: 'tnum'; }

/* ── Modals ───────────────────────────────────────── */
.modal {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  max-height: 90vh !important;
  /* NO display aquí — Materialize controla show/hide con display:none/block */
}
/* Solo cuando está abierto aplicamos flex para habilitar scroll interno */
.modal.open {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.modal .modal-content {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.modal .modal-footer {
  flex-shrink: 0 !important;
}
.modal .modal-content h5 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dm-text1);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.modal .modal-content h5 i { color: var(--brand); }
.modal-large { max-height: 90% !important; width: 70% !important; }
@media (max-width: 600px) { .modal-large { width: 96% !important; } }
.red-text:not(:empty) { font-size: 0.85rem; margin: 4px 0; }

/* ── Modal perfiles ───────────────────────────────── */
.perfil-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  margin-bottom: 5px;
}
.perfil-row:not(.perfil-row--activo):hover { background: #E8F5E9; }
.perfil-row--activo { background: #F1F8E9; cursor: default; }
.perfil-row i.material-icons { color: #14532D; flex-shrink: 0; }
.perfil-row--activo i.material-icons { color: #2E7D32; }
.perfil-row__info { flex: 1; min-width: 0; }
.perfil-row__info strong { display: block; font-size: 0.9rem; color: var(--dm-text1); font-weight: 600; }
.perfil-row__info span { display: block; font-size: 0.78rem; color: var(--dm-text3); margin-top: 1px; }

/* ── Login ────────────────────────────────────────── */
.login-body {
  background: linear-gradient(135deg, #00332F 0%, #006061 45%, #14532D 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-container { width: 100%; max-width: 440px; padding: 16px; }
.login-card {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  margin: 0;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid rgba(255,255,255,0.08);
}
.login-card .card-header {
  padding: 32px 28px 22px;
  text-align: center;
}
.login-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(255,255,255,0.15);
  margin-bottom: 12px;
}
.login-logo-wrap svg { display: block; }
.login-card .card-header i { font-size: 2.6rem; display: block; margin-bottom: 4px; }
.login-card .card-header h4 {
  margin: 4px 0 6px;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.login-card .card-header p { margin: 0; font-size: 0.875rem; opacity: 0.82; }
.login-card .card-content { padding: 24px 28px 28px; }
.btn-block { width: 100%; margin-top: 8px; }
.error-msg   { min-height: 18px; font-size: 0.82rem; margin: 6px 0; }
.success-msg { min-height: 18px; font-size: 0.82rem; margin: 6px 0; }
.tabs .indicator { background-color: var(--brand) !important; }
.tabs .tab a { color: var(--dm-text3); font-family: 'Space Grotesk', sans-serif; }
.tabs .tab a:focus, .tabs .tab a.active { color: var(--brand) !important; }

/* ── Tabs del panel admin: íconos + badge de pendientes ── */
.admin-panel-tabs { background: transparent; }
.admin-panel-tabs .tab a {
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  font-size: .84rem;
  font-weight: 500;
}
.admin-panel-tabs .tab a i.material-icons.left {
  margin: 0;
  font-size: 1.1rem;
}
.tab-badge {
  display: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--cat-neg-txt, #A6503B);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.tab-badge.show { display: inline-block; }

/* ── Notification badge ───────────────────────────── */
.notif-badge {
  position: absolute;
  top: 7px;
  right: 5px;
  background: #E53935;
  color: #fff;
  border-radius: 50%;
  font-size: .6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--brand-dark);
  transition: transform .2s ease;
}
@keyframes notifPulse {
  0%   { transform: scale(1); background: #E53935; }
  40%  { transform: scale(1.6); background: #ff1744; }
  100% { transform: scale(1); background: #E53935; }
}
.notif-badge--new {
  animation: notifPulse .6s ease forwards;
}

/* ── Notifications dropdown ───────────────────────── */
#dropdown-notif {
  min-width: 330px;
  max-width: 370px;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--shadow-lg) !important;
  padding: 0 !important;
}
#dropdown-notif li.notif-header-li,
#dropdown-notif li.notif-body-li,
#dropdown-notif li.notif-footer-li {
  min-height: 0 !important;
  padding: 0 !important;
  cursor: default !important;
}
.notif-menu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #052e16, #15803D);
  pointer-events: none;
  user-select: none;
}
.notif-menu-header i { color: #fff; font-size: 1.2rem; }
.notif-menu-header > span:first-of-type {
  flex: 1;
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
}
.notif-header-unread {
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
}
#notif-list-dropdown { max-height: 300px; overflow-y: auto; }
.notif-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--dm-divider);
  transition: background var(--transition-fast);
  cursor: pointer;
}
.notif-item:hover { background: var(--dm-surface2); }
.notif-item--unread { background: rgba(86,179,120,.07); }
.notif-item--unread:hover { background: rgba(86,179,120,.12); }
.notif-item__icon {
  flex-shrink: 0; margin-top: 1px; width: 32px; height: 32px; border-radius: 10px;
  background: rgba(30,132,73,.08);
  display: flex; align-items: center; justify-content: center;
}
.notif-item__icon i { font-size: 1.1rem; color: var(--dm-text3); }
.notif-item--unread .notif-item__icon i { color: var(--brand); }
.notif-item__body { flex: 1; min-width: 0; }
.notif-item__titulo-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.notif-item__titulo { font-size: .875rem; font-weight: 600; color: var(--dm-text1); line-height: 1.3; }
.notif-item__preview { font-size: .78rem; color: var(--dm-text3); line-height: 1.4; }
.notif-item__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #E53935; margin-top: 6px; }
.notif-perfil-badge {
  display: inline-block; font-size: .66rem; font-weight: 700; color: #14532D;
  background: rgba(30,132,73,.12); border-radius: 20px; padding: 1px 8px;
  letter-spacing: .02em; white-space: nowrap; flex-shrink: 0;
}
.notif-empty { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 32px 16px; color: var(--dm-text3); }
.notif-empty i { font-size: 2.4rem; }
.notif-empty span { font-size: .82rem; }
.notif-placeholder { display: block; padding: 16px; color: var(--dm-text3); font-size: .85rem; text-align: center; }
.notif-footer-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 16px !important;
  font-size: .82rem !important;
  color: var(--brand-dark) !important;
  font-weight: 600 !important;
  border-top: 1px solid var(--dm-border) !important;
  transition: background var(--transition-fast) !important;
  font-family: 'Space Grotesk', sans-serif !important;
}
.notif-footer-link i { font-size: 1rem !important; color: var(--brand-dark) !important; }
.notif-footer-link:hover { background: var(--brand-light) !important; }

/* ── Navbar stat bar ──────────────────────────────── */
#nav-stats-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 0;
  z-index: 1;
}
.nav-stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 64px;
  cursor: default;
  transition: background var(--transition-fast);
  color: #fff;
  flex-shrink: 0;
}
.nav-stat-item:hover { background: rgba(255,255,255,0.06); }
.nav-stat-item i { font-size: 18px; opacity: .55; flex-shrink: 0; color: #fff; }
.nav-stat-texts { display: flex; flex-direction: column; line-height: 1.15; }
.nav-stat-val {
  font-size: .875rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  font-feature-settings: 'tnum';
  letter-spacing: -0.02em;
}
.nav-stat-label { font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,0.45); }
.nav-stat-sep { width: 1px; height: 28px; background: rgba(255,255,255,0.10); flex-shrink: 0; }
.nav-ciclo-estados-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.nav-ciclo-chip {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  font-size: .62rem; font-weight: 700; padding: 5px 2px;
  line-height: 1.1; border-radius: 7px;
  letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .25s, color .25s;
}
.nav-ciclo-chip-ok   { background: rgba(74,222,128,.18);  color: #86EFAC; }
.nav-ciclo-chip-pend { background: rgba(251,146,60,.20);  color: #FDBA74; }
.nav-ciclo-chip-none { background: rgba(255,255,255,.06); color: rgba(255,255,255,.4); }
/* Label "Iniciar Ciclos": oculto por defecto, visible+parpadeante cuando el indicador es accionable */
.nav-ciclo-iniciar-label { display: none; }
#nav-stat-ciclo.ciclo-nav-accionable .nav-ciclo-estados-row { display: none; }
#nav-stat-ciclo.ciclo-nav-accionable .nav-ciclo-iniciar-label {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  color: #052e16; background: #4ADE80;
  padding: 8px 10px; border-radius: 8px;
  animation: ciclo-chip-blink 1.5s ease-in-out infinite;
}
@keyframes ciclo-chip-blink { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ── Card de ciclo dentro del sidebar (bajo "Dashboard") ── */
.sidenav li.sidebar-ciclo-card-item {
  height: auto !important;
  padding: 4px 10px 10px !important;
  margin: 0 !important;
}
.sidebar-ciclo-card {
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(160deg, rgba(86,179,120,.14), rgba(86,179,120,.04));
  border: 1px solid rgba(86,179,120,.22);
  border-radius: 12px;
  padding: 12px 13px;
  cursor: default;
  transition: background .2s, border-color .2s;
}
.sidebar-ciclo-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; overflow: hidden; }
.sidebar-ciclo-card-icowrap {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
}
.sidebar-ciclo-card-icowrap i.material-icons {
  font-size: 17px !important; line-height: 1 !important; margin: 0 !important;
  color: var(--sidebar-text);
}
.sidebar-ciclo-card-headtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; overflow: hidden; line-height: 1.2; }
.sidebar-ciclo-card-label {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: rgba(183,201,188,.7); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-ciclo-card-fecha {
  font-size: .86rem; font-weight: 700; color: #fff; line-height: 1.2;
  font-feature-settings: 'tnum'; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#nav-stat-ciclo.ciclo-nav-accionable {
  cursor: pointer;
  background: linear-gradient(160deg, rgba(74,222,128,.20), rgba(74,222,128,.06));
  border-color: rgba(74,222,128,.5);
}
#nav-stat-ciclo.ciclo-nav-accionable:hover { border-color: #4ADE80; }
#nav-stat-ciclo.ciclo-nav-accionable .sidebar-ciclo-card-icowrap { background: rgba(74,222,128,.16); }
.nav-stat-positive i, .nav-stat-positive .nav-stat-val { color: #86EFAC; }
.nav-stat-negative i, .nav-stat-negative .nav-stat-val { color: #FCA5A5; }
.nav-stat-item:nth-child(3) .nav-stat-val { color: #FDE68A; }
.nav-stat-item:nth-child(3) i             { color: #FDE68A; opacity: 1; }
.nav-stat-item:nth-child(5) .nav-stat-val { color: #FECDD3; }
.nav-stat-item:nth-child(5) i             { color: #FECDD3; opacity: 1; }

/* ── Notif config rows ────────────────────────────── */
.notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 8px;
  border-bottom: 1px solid var(--dm-divider);
}
.notif-row:last-child { border-bottom: none; }
.notif-info { flex: 1; min-width: 0; }
.notif-titulo { font-weight: 600; font-size: .95rem; color: var(--dm-text1); margin-bottom: 2px; }
.notif-desc { font-size: .82rem; margin-bottom: 4px; color: var(--dm-text3); }

/* ── Category fund cards ──────────────────────────── */
.cat-fund-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 900px) { .cat-fund-grid { grid-template-columns: 1fr; } }
.cat-fund-card { border-radius: var(--radius-md); padding: 14px 16px; }
.cat-fund-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.cat-fund-name  { font-size: .9rem; font-weight: 700; color: var(--dm-text1); letter-spacing: -0.01em; }
.cat-fund-sub   { font-size: .72rem; color: var(--dm-text3); margin-top: 2px; }
.cat-fund-disp  { font-size: 1.15rem; font-weight: 700; white-space: nowrap; margin-left: 8px; font-feature-settings: 'tnum'; letter-spacing: -0.02em; }
.cat-fund-bar-bg {
  background: rgba(0,0,0,.08);
  border-radius: 4px;
  height: 7px;
  margin-bottom: 7px;
  overflow: hidden;
}
.cat-fund-bar-fill { height: 100%; border-radius: 4px; transition: width .6s cubic-bezier(0.4,0,0.2,1); }
.cat-fund-footer { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: var(--dm-text3); }
.cat-fund-stat  { display: flex; align-items: center; gap: 3px; }
.cat-fund-bar-label { font-size: .7rem; font-weight: 700; }

/* Equal-height cards in a row */
#cards-cats { display: flex; flex-wrap: wrap; align-items: stretch; }
#cards-cats > .col { display: flex; flex-direction: column; }
#cards-cats > .col > .card { flex: 1; display: flex; flex-direction: column; }
#cards-cats > .col > .card > .card-content { flex: 1; }
#cards-cats > .col > .card > .card-action  { margin-top: auto; }

/* ── Responsive ───────────────────────────────────── */
@media only screen and (max-width: 600px) {
  .content-wrapper { padding: 16px 12px 48px; }
  .stat-value { font-size: 1.3rem; }
  #nav-stats-bar { display: none; }
}

/* ── Trend chart ──────────────────────────────────── */
.trend-chart-wrapper { position: relative; height: 200px; }

/* ── Privacy mode ─────────────────────────────────── */
.privacy-val, .stat-value, .stat-sub { transition: filter 0.3s ease; }
body.privacy-mode .privacy-val,
body.privacy-mode .stat-value,
body.privacy-mode .stat-sub { filter: blur(10px); user-select: none; cursor: pointer; }
body.privacy-mode .privacy-val:hover,
body.privacy-mode .stat-value:hover,
body.privacy-mode .stat-sub:hover { filter: blur(4px); }
#btn-privacy i { transition: color 0.2s; }
body.privacy-mode #btn-privacy i { color: #FCD34D !important; }

/* ══════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   ══════════════════════════════════════════════════════ */
body.dark-mode .card:not(.stat-card) {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border);
  box-shadow: 0 1px 3px var(--dm-shadow) !important;
}
body.dark-mode .card:not(.stat-card):not(.insight-card):not(.login-card):hover {
  box-shadow: 0 4px 16px var(--dm-shadow-md) !important;
}

body.dark-mode .modal { background-color: var(--dm-modal) !important; }
body.dark-mode .modal .modal-content h5 { color: var(--dm-text1); }
body.dark-mode .modal p:not(.red-text) { color: var(--dm-text2); }
body.dark-mode .input-field label { color: var(--dm-text2) !important; }
body.dark-mode .input-field input {
  color: var(--dm-text1) !important;
  border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .input-field input:focus {
  border-bottom-color: #4ADE80 !important;
  box-shadow: 0 1px 0 0 #4ADE80 !important;
}

body.dark-mode table.striped tbody tr { background: var(--dm-surface) !important; }
body.dark-mode table.striped tbody tr:nth-child(odd) { background: var(--dm-surface2) !important; }
body.dark-mode table.striped tbody tr:hover td { background: #252B38 !important; }
body.dark-mode table th { background: var(--dm-surface2); color: var(--dm-text3); border-bottom-color: var(--dm-border); }

body.dark-mode .dropdown-content {
  background-color: var(--dm-surface) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.6) !important;
  border: 1px solid var(--dm-border) !important;
}
/* Materialize aplica su propio hover (gris/blanco fijo) al <li>, no al <a> de adentro —
   sin este override queda un borde/fondo claro visible al pasar el mouse en dark mode. */
.dropdown-content li:hover { background-color: var(--dm-surface2) !important; }
body.dark-mode .user-menu-item { color: var(--dm-text2) !important; }
body.dark-mode .user-menu-item i { color: #4ADE80 !important; }
body.dark-mode .user-menu-item:hover { background: var(--dm-surface2) !important; }
body.dark-mode .user-menu-logout { color: #FC8181 !important; }
body.dark-mode .user-menu-logout i { color: #FC8181 !important; }
body.dark-mode .user-menu-logout:hover { background: #2A1518 !important; }
body.dark-mode #dropdown-user-nav li.divider { background: var(--dm-border) !important; }

body.dark-mode .notif-item { border-bottom-color: var(--dm-divider); }
body.dark-mode .notif-item:hover { background: var(--dm-surface2); }
body.dark-mode .notif-item--unread { background: #102E21; }
body.dark-mode .notif-item--unread:hover { background: #153F2C; }
body.dark-mode .notif-item__titulo { color: var(--dm-text1); }
body.dark-mode .notif-item__preview { color: var(--dm-text3); }
body.dark-mode .notif-perfil-badge { background: rgba(86,179,120,.14); color: #86EFAC; }
body.dark-mode .notif-item__icon { background: rgba(86,179,120,.10); }
body.dark-mode .notif-footer-link { color: #4ADE80 !important; border-top-color: var(--dm-border) !important; }
body.dark-mode .notif-footer-link i { color: #4ADE80 !important; }
body.dark-mode .notif-footer-link:hover { background: rgba(86,179,120,0.1) !important; }
body.dark-mode .notif-empty, body.dark-mode .notif-placeholder { color: var(--dm-text3); }

body.dark-mode .perfil-row:not(.perfil-row--activo):hover { background: #142E20; }
body.dark-mode .perfil-row--activo { background: #183F2C; }
body.dark-mode .perfil-row__info strong { color: var(--dm-text1); }
body.dark-mode .perfil-row__info span  { color: var(--dm-text3); }

body.dark-mode .filter-select {
  background-color: var(--dm-surface);
  color: var(--dm-text2);
  border-color: var(--dm-border);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748B' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
}
body.dark-mode .filter-select:focus { border-color: #4ADE80; box-shadow: 0 0 0 3px rgba(86,179,120,0.12); }
body.dark-mode .filter-input {
  background: var(--dm-surface) !important;
  color: var(--dm-text1);
  border-color: var(--dm-border) !important;
}
body.dark-mode .filter-input:focus { border-color: #4ADE80 !important; box-shadow: 0 0 0 3px rgba(86,179,120,0.12) !important; }
body.dark-mode .filter-input::placeholder { color: var(--dm-text3); }
body.dark-mode input[type="date"].browser-default {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text1) !important;
  color-scheme: dark;
}
body.dark-mode .filter-btn { color: var(--dm-text2); }
body.dark-mode .filter-btn.active { background: rgba(86,179,120,0.14) !important; color: #4ADE80; box-shadow: 0 0 0 1.5px rgba(86,179,120,0.3); }

body.dark-mode .chip.teal.lighten-4 { background: #1A3D38 !important; }
body.dark-mode .chip.grey.lighten-3 { background: var(--dm-surface2) !important; color: var(--dm-text2) !important; }
body.dark-mode .chip-pendiente { background: #2C1E06; color: #FCD34D; border-color: #6B4A10; }
body.dark-mode .chip-pagado    { background: #102E21; color: #68D391; border-color: #1B6F38; }
body.dark-mode .chip-gasto     { background: #0D1F36; color: #93C5FD; border-color: #1A3558; }
body.dark-mode .chip-deuda     { background: #290F1E; color: #F9A8D4; border-color: #5C1A3A; }

body.dark-mode .switch label .lever { background-color: #444; }
body.dark-mode .switch label .lever::after { background-color: #888; }
body.dark-mode .switch label input[type="checkbox"]:checked + .lever { background-color: rgba(0,105,92,0.45); }
body.dark-mode .switch label input[type="checkbox"]:checked + .lever::after { background-color: #4ADE80; }

body.dark-mode .cat-fund-bar-bg { background: rgba(255,255,255,0.08); }

#btn-darkmode i { transition: transform var(--transition-slow), color 0.2s; }
body.dark-mode #btn-darkmode i { transform: rotate(180deg); color: #FCD34D !important; }

/* ── Tabs ── */
body.dark-mode .tabs { background-color: var(--dm-surface) !important; border-bottom: 1px solid var(--dm-border) !important; }
body.dark-mode .tabs .tab a { color: var(--dm-text3) !important; }
body.dark-mode .tabs .tab a:hover,
body.dark-mode .tabs .tab a.active { color: #4ADE80 !important; }
body.dark-mode .tabs .indicator { background-color: #4ADE80 !important; }

/* ── Chips genéricos (Materialize pone bg #e4e4e4) ── */
body.dark-mode .chip { background-color: var(--dm-surface2) !important; color: var(--dm-text2) !important; }
body.dark-mode .chip.white-text { color: #fff !important; }
body.dark-mode .chip.green,
body.dark-mode .chip.green.darken-2 { background-color: #142a14 !important; }
body.dark-mode .chip.orange,
body.dark-mode .chip.orange.darken-1,
body.dark-mode .chip.orange.darken-2 { background-color: #2e1a00 !important; }
body.dark-mode .chip.red,
body.dark-mode .chip.red.darken-1,
body.dark-mode .chip.red.darken-2 { background-color: #2e0f0f !important; }
body.dark-mode .chip.teal,
body.dark-mode .chip.teal.darken-2 { background-color: #082828 !important; }
body.dark-mode .chip.blue,
body.dark-mode .chip.blue.darken-2 { background-color: #0d1f38 !important; }
body.dark-mode .chip.grey { background-color: var(--dm-surface2) !important; color: var(--dm-text3) !important; }

/* ── Select / input inline (panel admin, etc.) ── */
body.dark-mode select.browser-default {
  background-color: var(--dm-surface2) !important;
  color: var(--dm-text2) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode input.browser-default {
  background-color: var(--dm-surface2) !important;
  color: var(--dm-text2) !important;
  border-color: var(--dm-border) !important;
}

/* ── Textarea ── */
body.dark-mode .input-field textarea,
body.dark-mode textarea.materialize-textarea {
  color: var(--dm-text1) !important;
  border-bottom-color: var(--dm-border) !important;
}

/* ── Tabla td color ── */
body.dark-mode table td { color: var(--dm-text2); }

/* ── Modal footer ── */
body.dark-mode .modal .modal-footer {
  background-color: var(--dm-surface2) !important;
  border-top: 1px solid var(--dm-border) !important;
}

/* ── Divider ── */
body.dark-mode .divider { background-color: var(--dm-border) !important; }

/* ── Progress track ── */
body.dark-mode .progress { background-color: var(--dm-surface2) !important; }

/* ── Grey-text en dark (Materialize lo fuerza a gris claro) ── */
body.dark-mode .grey-text:not(.red-text) { color: var(--dm-text3) !important; }

/* ── Sub-row perfiles en admin panel ── */
body.dark-mode .perfiles-subrow { background-color: var(--dm-surface2) !important; }
body.dark-mode .perfiles-subrow td { color: var(--dm-text2) !important; background: transparent !important; }

/* ── Info cards con colores Materialize (bg light en light mode) ── */
body.dark-mode .card.blue.lighten-5 {
  background-color: #0D1F38 !important;
  border-left-color: #3B82F6 !important;
}
body.dark-mode .card.blue.lighten-5 p,
body.dark-mode .card.blue.lighten-5 strong,
body.dark-mode .card.blue.lighten-5 i.material-icons { color: #90CAF9 !important; }

body.dark-mode .card.teal.lighten-5 {
  background-color: #082828 !important;
}
body.dark-mode .card.teal.lighten-5 p,
body.dark-mode .card.teal.lighten-5 strong { color: #86EFAC !important; }

body.dark-mode .card.red.lighten-5 {
  background-color: #2A1010 !important;
  border-left-color: #EF5350 !important;
}
body.dark-mode .card.red.lighten-5 p,
body.dark-mode .card.red.lighten-5 strong,
body.dark-mode .card.red.lighten-5 i.material-icons { color: #EF9A9A !important; }

body.dark-mode .card.orange.lighten-5 {
  background-color: #2A1E06 !important;
  border-left-color: #FFA726 !important;
}
body.dark-mode .card.orange.lighten-5 p,
body.dark-mode .card.orange.lighten-5 strong { color: #FFCC80 !important; }

/* ── Collapsible en contenido (no sidenav) ── */
body.dark-mode main .collapsible {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  box-shadow: none !important;
}
body.dark-mode main .collapsible-header {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text1) !important;
  border-bottom-color: var(--dm-border) !important;
}
body.dark-mode main .collapsible-body {
  background-color: var(--dm-surface2) !important;
  border-bottom-color: var(--dm-border) !important;
}

/* ══════════════════════════════════════════════════════
   INSIGHT CARDS
   ══════════════════════════════════════════════════════ */
.insight-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0 0 10px;
}
.insight-card {
  background: var(--dm-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--dm-border);
  padding: 14px 18px;
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: box-shadow var(--transition-std), transform var(--transition-std), border-color var(--transition-std);
}
.insight-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  border-color: rgba(22,163,74,0.2);
}
.insight-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.insight-icon i { font-size: 1.35rem; }
.insight-body { flex: 1; min-width: 0; }

/* Icon chip de fila de tabla (Gastos/Deudas/Fondos/Ingresos) — versión chica
   del mismo patrón que .insight-icon, para la primera columna de cada fila. */
.row-chip {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 8px;
}
.row-chip i { font-size: 16px; }

.insight-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--dm-text3);
  font-weight: 600;
  margin-bottom: 2px;
}
.insight-value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--dm-text1);
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum';
}
.insight-sub { font-size: .73rem; color: var(--dm-text3); margin-top: 3px; font-weight: 450; }

.insight-icon--green  { background: #F0FDF4; }
.insight-icon--orange { background: #FFF7ED; }
.insight-icon--purple { background: #FAF5FF; }
.insight-icon--blue   { background: #EFF6FF; }
.insight-icon--green  i { color: #15803D; }
.insight-icon--orange i { color: #D97706; }
.insight-icon--purple i { color: #7C3AED; }
.insight-icon--blue   i { color: #2563EB; }

body.dark-mode .insight-icon--green  { background: #102E21; }
body.dark-mode .insight-icon--orange { background: #2C1E06; }
body.dark-mode .insight-icon--purple { background: #1E1432; }
body.dark-mode .insight-icon--blue   { background: #0D1F38; }
body.dark-mode .insight-icon--green  i { color: #34D399; }
body.dark-mode .insight-icon--orange i { color: #FBBF24; }
body.dark-mode .insight-icon--purple i { color: #C4B5FD; }
body.dark-mode .insight-icon--blue   i { color: #93C5FD; }
body.dark-mode .insight-card { border-color: var(--dm-border); box-shadow: none; }
body.dark-mode .insight-card:hover { border-color: rgba(86,179,120,0.25); box-shadow: 0 4px 12px var(--dm-shadow); }

/* ══════════════════════════════════════════════════════
   FLOATING CHAT (AI ASSISTANT)
   ══════════════════════════════════════════════════════ */
#flow-chat-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16A34A, #15803D);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,105,92,0.45);
  z-index: 1200;
  transition: transform var(--transition-std), box-shadow var(--transition-std);
}
#flow-chat-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(0,105,92,0.55);
}
#flow-chat-btn:active { transform: scale(0.96); }
#flow-chat-btn i { font-size: 26px; }

/* Pulse ring around chat button */
#flow-chat-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(22,163,74,0.35);
  animation: chatPulse 2.5s ease infinite;
}
@keyframes chatPulse {
  0%, 100% { opacity: 0; transform: scale(0.9); }
  50%       { opacity: 1; transform: scale(1.08); }
}

#flow-chat-panel {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 368px;
  max-height: 530px;
  background: var(--dm-surface);
  border: 1px solid var(--dm-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  z-index: 1199;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(0.96);
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.34,1.56,0.64,1);
}
#flow-chat-panel.flow-chat-panel--open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0) scale(1);
}

.flow-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: linear-gradient(135deg, #052e16, #16A34A);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.flow-chat-header button {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 0;
  display: flex;
  align-items: center;
  opacity: 0.75;
  transition: opacity var(--transition-fast);
}
.flow-chat-header button:hover { opacity: 1; }

#flow-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
  max-height: 360px;
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.flow-chat-msg {
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
  animation: msgIn 0.2s ease both;
}
.flow-chat-msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, #16A34A, #15803D);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,105,92,0.3);
}
.flow-chat-msg--assistant {
  align-self: flex-start;
  background: var(--dm-surface2);
  color: var(--dm-text1);
  border: 1px solid var(--dm-border);
  border-bottom-left-radius: 4px;
}

.flow-chat-thinking {
  display: flex;
  gap: 5px;
  padding: 11px 14px;
  background: var(--dm-surface2);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  border: 1px solid var(--dm-border);
}
.flow-chat-thinking span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dm-text3);
  animation: chatBounce 1.1s infinite ease-in-out;
}
.flow-chat-thinking span:nth-child(1) { animation-delay: 0s; }
.flow-chat-thinking span:nth-child(2) { animation-delay: 0.18s; }
.flow-chat-thinking span:nth-child(3) { animation-delay: 0.36s; }
@keyframes chatBounce {
  0%, 80%, 100% { transform: scale(0.65); opacity: 0.45; }
  40%           { transform: scale(1); opacity: 1; }
}

.flow-chat-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--dm-border);
  background: var(--dm-surface);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
#flow-chat-input {
  flex: 1;
  border: 1.5px solid var(--dm-border);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 13px;
  font-family: 'Space Grotesk', sans-serif;
  background: var(--dm-surface2);
  color: var(--dm-text1);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
#flow-chat-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-muted);
  background: var(--dm-surface);
}
#flow-chat-send {
  background: linear-gradient(135deg, #16A34A, #15803D);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  flex-shrink: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 2px 6px rgba(0,105,92,0.35);
}
#flow-chat-send:hover { transform: scale(1.08); box-shadow: 0 4px 10px rgba(0,105,92,0.45); }
#flow-chat-send:active { transform: scale(0.94); }
#flow-chat-send i { font-size: 18px; }

@media (max-width: 480px) {
  #flow-chat-panel {
    right: 0;
    bottom: 72px;
    width: 100vw;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 60vh;
  }
}

/* ══════════════════════════════════════════════════════
   TOAST / SNACKBAR IMPROVEMENTS
   ══════════════════════════════════════════════════════ */
#toast-container .toast {
  border-radius: var(--radius-md) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ══════════════════════════════════════════════════════
   PERFIL SWITCH MODAL — tarjetas
   ══════════════════════════════════════════════════════ */
.perfil-switch-card {
  flex: 1;
  min-width: 130px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 2px solid #E0E0E0;
  background: #FAFAFA;
  transition: border-color .15s, background .15s;
}
.perfil-switch-card.psc-active {
  border-color: #14532D;
  background: #ECF4EC;
  cursor: default;
}
.perfil-switch-card.psc-selectable {
  cursor: pointer;
}
.perfil-switch-card.psc-selectable:hover {
  border-color: #86EFAC;
  background: #F0FDFC;
}
.perfil-switch-card.psc-selected {
  border-color: #14532D;
  background: #ECF4EC;
}
.psc-badge-activo {
  background: #14532D;
  color: #fff;
  font-size: .6rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
}
body.dark-mode .perfil-switch-card {
  background: var(--dm-surface);
  border-color: var(--dm-border);
}
body.dark-mode .perfil-switch-card.psc-active,
body.dark-mode .perfil-switch-card.psc-selected {
  background: rgba(29,92,54,.18);
  border-color: #14532D;
}
body.dark-mode .perfil-switch-card.psc-selectable:hover {
  background: rgba(29,92,54,.08);
  border-color: #4ADE80;
}

/* ══════════════════════════════════════════════════════
   ADMIN PERFILES PAGE
   ══════════════════════════════════════════════════════ */
.perfil-card {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition-fast) !important;
}
.perfil-card:hover {
  box-shadow: var(--shadow-md) !important;
}
body.dark-mode .perfil-card {
  background-color: var(--dm-surface) !important;
}
body.dark-mode .perfil-card .card-content strong {
  color: var(--dm-text1) !important;
}
#check-privilegios-container label span {
  color: var(--dm-text2);
}

/* ── Admin panel: acciones rápidas ─────────────────────── */
.admin-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Admin panel: paginación resumen ───────────────────── */
.qa-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.qa-list-item {
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 8px 0;
  font-size: .87rem;
}
.qa-list-item:last-child { border-bottom: none; }
.qa-list-item .qa-item-label { font-weight: 500; color: #37474F; }
.qa-list-item .qa-item-sub { font-size: .76rem; color: #90A4AE; margin-top: 1px; }
body.dark-mode .qa-list-item { border-color: rgba(255,255,255,.07); }
body.dark-mode .qa-list-item .qa-item-label { color: var(--dm-text1); }
body.dark-mode .qa-list-item .qa-item-sub { color: var(--dm-text2); }

/* ── Comparativo mes a mes ────────────────────────── */
.comp-card { margin-bottom: 10px; }
.comp-label { font-size: .78rem; color: var(--text-secondary); font-weight: 500; margin-bottom: 6px; display: flex; align-items: center; }
.comp-actual { font-size: 1.55rem; font-weight: 700; color: var(--dm-text1); line-height: 1.2; margin-bottom: 4px; }
.comp-vs { font-size: .78rem; color: var(--text-secondary); display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.comp-ant { color: var(--text-secondary); }
.comp-delta-up   { color: #2e7d32; font-weight: 600; }
.comp-delta-down { color: #c62828; font-weight: 600; }
.comp-delta-flat { color: #78909c; font-weight: 600; }
body.dark-mode .comp-actual { color: var(--dm-text1); }

/* ── Backlog: section chips & 3-dot dropdown ─────── */
.seccion-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: .76rem;
  cursor: pointer;
  border: 1px solid #b0bec5;
  background: #fff;
  color: #546e7a;
  margin: 2px 2px;
  transition: background .15s, color .15s;
  user-select: none;
}
.seccion-chip.active {
  background: #15803D;
  color: #fff;
  border-color: #15803D;
}
body.dark-mode .seccion-chip { background: #37474f; color: #cfd8dc; border-color: #546e7a; }
body.dark-mode .seccion-chip.active { background: #14532D; border-color: #14532D; color: #fff; }

.pend-dropdown a:hover {
  background: #f5f5f5;
}
body.dark-mode .pend-dropdown { background: #37474f !important; }
body.dark-mode .pend-dropdown a { color: #eceff1; }

/* Overlay bloqueante: política de uso y privacidad. Sin botón de cerrar a propósito —
   z-index por encima de todo lo demás (navbar, sidebar, modales, toasts). */
#overlay-politica-uso {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(10,10,10,.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.politica-card {
  background: #fff;
  border-radius: 14px;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 28px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.politica-card h5 {
  margin: 0 0 16px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1D5C36;
  display: flex;
  align-items: center;
}
.politica-body p {
  font-size: .88rem;
  line-height: 1.65;
  color: #37474F;
  margin: 0 0 12px;
}
.politica-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #E0E0E0;
}
body.dark-mode .politica-card { background: #1B1F24; }
body.dark-mode .politica-card h5 { color: #4ADE80; }
body.dark-mode .politica-body p { color: #CFD8DC; }
body.dark-mode .politica-footer { border-top-color: rgba(255,255,255,.1); }
body.dark-mode .pend-dropdown a:hover { background: #546e7a; }