/* ──────────────────────────────────────────────────────────────────────────
   La barra lateral, en neutro (18/10/2026, SOLO EN LOCAL, rama
   dashboard-nuevo).

   Xavi: fondo neutro suave (#F8FAFC) con un borde derecho de 1px (#E2E8F0, luego #E5E7EB);
   el rojo SOLO como acento —el logo de arriba, la marca de la sección activa
   y los avisos—; textos e iconos en gris oscuro/medio, que se lean bien.

   Por eso aquí se apaga todo el rojo que no es eso: las celdas de la
   retícula que se encendían en rojo, el halo que seguía al cursor y el logo
   que solo se ponía rojo al pasar por encima (ahora lo es siempre).
   Contrastes sobre #F8FAFC: texto #334155 ≈ 10:1, iconos y cabeceras
   #64748B ≈ 4,6:1 (AA). Esquinas rectas, como manda el sistema de formas.
   Es una hoja que se carga la última: quitar su línea de index.html deja la
   barra como estaba.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --sbn-fondo: #F8FAFC;
  --sbn-borde: #E5E7EB;
  --sbn-texto: #334155;      /* gris oscuro: los nombres del menú */
  --sbn-medio: #64748B;      /* gris medio: iconos, cabeceras de grupo, rol */
  --sbn-fuerte: #0F172A;     /* el elemento activo y el nombre de usuario */
  --sbn-hover: #EEF2F6;
  --sbn-activo: #FFFFFF;
  --sbn-trama: rgba(15, 23, 42, 0.03);
}
:root[data-tema="oscuro"] {
  --sbn-fondo: #121216;
  --sbn-borde: #26262c;
  --sbn-texto: #C8CDD6;
  --sbn-medio: #8B93A1;
  --sbn-fuerte: #F4F5F7;
  --sbn-hover: rgba(255, 255, 255, 0.05);
  --sbn-activo: rgba(255, 255, 255, 0.08);
  --sbn-trama: rgba(255, 255, 255, 0.025);
}

/* ── 1. El fondo y el borde ──────────────────────────────────────────── */
.sidebar {
  background: var(--sbn-fondo) !important;
  /* Una sola línea de 1px: la de antes era una sombra interior que, sumada
     al borde, se veía doble. */
  border-right: 1px solid var(--sbn-borde) !important;
  box-shadow: none !important;
  color: var(--sbn-texto);
}
.sidebar .sbr-capa { --sbr-linea: var(--sbn-trama); }
/* Las celdas que se encendían eran rojas: fuera. El halo del cursor, igual. */
.sidebar .sbr-celda { display: none; }
.sidebar .sidebar-luz::after { background: none !important; }

/* ── 2. El rojo, solo de acento ──────────────────────────────────────── */
/* El logo: NEGRO (18/10/2026, Xavi: «el logo es rojo, lo cambiamos a negro
   otra vez»); blanco en el modo oscuro. Un logo propio se elige en
   Ajustes › Empresa (marca.js). */
.sidebar .sidebar-logo .logo-mark svg,
.sidebar .sidebar-logo .logo-mark .marca-logo,
:root[data-tema="claro"] .sidebar .sidebar-logo .logo-mark svg {
  color: var(--sbn-fuerte) !important; fill: var(--sbn-fuerte) !important; opacity: 1 !important;
}
.sidebar .sidebar-logo .logo-mark { background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* El logo propio: la imagen tal cual, encajada en el mismo hueco. */
.sidebar .sidebar-logo .logo-mark img.marca-img { width: 100% !important; height: 100% !important; max-height: 100%; object-fit: contain; filter: none !important; }
.login-marca-pie img.marca-img { display: block; width: 22px; height: 22px; object-fit: contain; }
img.marca-img.como-login-logo-form { display: block; width: 26px; height: 26px; margin-bottom: 20px; object-fit: contain; }
/* Un logo negro en modo oscuro no se vería: se invierte (se puede apagar). */
:root[data-tema="oscuro"] img.marca-img.invertir, :root[data-tema="oscuro"] .sidebar .sidebar-logo .logo-mark img.marca-img.invertir { filter: invert(1) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) img.marca-img.invertir, :root:not([data-tema="claro"]) .sidebar .sidebar-logo .logo-mark img.marca-img.invertir { filter: invert(1) !important; } }
.sidebar .logo-title { color: var(--sbn-fuerte) !important; }
.sidebar .logo-sub { color: var(--sbn-medio) !important; }

/* La sección activa: fondo blanco limpio y UNA marca roja a la izquierda
   (había dos: una sombra de 3px y una rayita de 2px encima). */
.sidebar .nav-item.active,
.sidebar .nav-group-items .nav-item.active,
:root:not([data-tema="oscuro"]) .sidebar .nav-group-items .nav-item.active {
  background: var(--sbn-activo) !important;
  color: var(--sbn-fuerte) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--red), 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}
.sidebar .nav-item.active::before { display: none !important; }
.sidebar .nav-item.active .nav-icon { color: var(--sbn-fuerte) !important; stroke: currentColor; opacity: 1 !important; }

/* Los avisos se quedan en rojo. */
.sidebar .nav-badge { background: var(--red) !important; color: #fff !important; }

/* ── 3. Textos e iconos en gris ──────────────────────────────────────── */
.sidebar .nav-item {
  color: var(--sbn-texto) !important;
}
.sidebar .nav-item .nav-label { color: inherit !important; }
.sidebar .nav-item .nav-icon { color: var(--sbn-medio) !important; opacity: 1 !important; }
.sidebar .nav-item:hover:not(.active) { background: var(--sbn-hover) !important; color: var(--sbn-fuerte) !important; }
.sidebar .nav-item:hover:not(.active) .nav-icon { color: var(--sbn-texto) !important; }

.sidebar .nav-group-head { color: var(--sbn-medio) !important; }
.sidebar .nav-group-head * { color: inherit !important; }
.sidebar .nav-group-head:hover { color: var(--sbn-texto) !important; background: var(--sbn-hover) !important; }
/* El grupo que contiene la página abierta: en tinta, no en rojo. */
.sidebar .nav-group.tiene-activo > .nav-group-head,
.sidebar .nav-group-activo > .nav-group-head { color: var(--sbn-fuerte) !important; }

.sidebar .sidebar-collapse-btn { color: var(--sbn-medio) !important; }
.sidebar .sidebar-collapse-btn:hover { color: var(--sbn-fuerte) !important; background: var(--sbn-hover) !important; }

/* El pie: separado por el mismo borde, nombre en tinta y rol en gris, y con
   aire: no pegado a los cantos ni al fondo de la pantalla. */
.sidebar .sidebar-user { border-top: 1px solid var(--sbn-borde) !important; padding: 16px 18px 6px !important; margin: 0 4px !important; }
.sidebar .sidebar-user-info { margin-bottom: 6px !important; gap: 12px; }
.sidebar .sidebar-salir { padding: 11px 18px !important; margin: 0 4px 18px !important; }
.sidebar .sidebar-user-name { color: var(--sbn-fuerte) !important; }
.sidebar .sidebar-user-role { color: var(--sbn-medio) !important; }
.sidebar .sidebar-salir { color: var(--sbn-medio) !important; }
.sidebar .sidebar-salir:hover { color: var(--sbn-fuerte) !important; background: var(--sbn-hover) !important; }
/* Plegada, el pie es una columna estrecha: el aire va arriba y abajo, no a los lados. */
.sidebar.collapsed .sidebar-user { padding: 14px 0 6px !important; margin: 0 !important; }
.sidebar.collapsed .sidebar-salir { padding: 11px 0 !important; margin: 0 0 18px !important; justify-content: center; }