/* ============================================================
   F1 — Chrome: sidebar. Consume los tokens de la Capa A (01-tokens.css).

   POR QUE ESTE FICHERO EXISTE (y por que es tan verboso)
   -----------------------------------------------------
   El resto de la identidad se aplica REDEFINIENDO VARIABLES (Capa B mapea
   --bs-* a la Capa A y Metronic obedece). Con el sidebar NO se puede:

     grep -c -- "--bs-app-sidebar-dark" assets/css/style.bundle.css  ->  0

   El tema `light-sidebar` SI esta tokenizado (--bs-app-sidebar-light-*),
   pero el `dark-sidebar` —que es el que usa el panel— tiene TODO el color
   hardcodeado bajo `[data-kt-app-layout=dark-sidebar] .app-sidebar ...`
   (style.bundle.css ~50117-50356). No hay variable que redefinir, asi que
   la unica via sin recompilar el SCSS es REDECLARAR LOS SELECTORES. De ahi
   la verbosidad: no es gratuita, es la forma de la deuda que hay debajo.

   SELECTOR: `:root:not([data-bs-theme="dark"])` SIEMPRE, nunca `:root` a
   secas. El modo oscuro esta FUERA DE ALCANCE y debe quedar intacto; usa
   `[data-bs-theme=dark]` (misma especificidad), asi que un `:root` pelado
   lo romperia. El `:not()` hace que estas reglas ni siquiera casen en dark.

   ESPECIFICIDAD: el prefijo `:root:not(...)` suma 0,2,0 sobre el selector
   del bundle, asi que replicar su estructura basta para ganarle. Donde el
   bundle usa `!important` (o hand-edits patologicamente especificos como
   `.menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active)
   :not(.here) .menu-icon i` = 0,11,1) se iguala con `!important`. Cada uno
   va justificado en su sitio.

   Fuente: DISEÑO/GLO REVISION/Guia_Identidad_Panel_Vozenter.md §6
   ============================================================ */

/* ============================================================
   FONDO — guia §6: "--sidebar-bg #0B2A5B. Sustituye al azul petroleo".
   Pisa el hand-edit "MOD GONCHU 2025/02/21" que puso #19445B.
   ============================================================ */

:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar {
  background-color: var(--sidebar-bg);
  border-right: 0;
}

/* Separador del logo: el bundle usa #1F212A (gris carbon del tema oscuro
   original), invisible sobre azul marino. Blanco al 15% para que la linea
   se lea sin competir con el contenido. */
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo {
  border-bottom: 1px dashed #ffffff26;
}

/* ============================================================
   SECCIONES — guia §6: "10px/700/uppercase, opacidad 55%".

   !important en color y font-size porque:
     - el bundle declara `.menu-heading { color:#636674 !important }` y el
       hand-edit "MOD F8.11" repite `#B5B5C3 !important`.
     - el markup trae la utilidad `.fs-7` (= 0.95rem !important), que sin
       !important ganaria al tamano de 10px que pide la guia.
   ============================================================ */

:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-heading {
  color: var(--sidebar-fg) !important;
  opacity: 0.55;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   ITEMS — guia §6: texto --sidebar-fg, hover/activo --sidebar-fg-strong.
   ============================================================ */

:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link {
  color: var(--sidebar-fg);
  position: relative; /* ancla del ::before del item activo (ver abajo) */
}

/* Guia §6: "Iconos monocromos, heredan color del texto. Nunca rojos."
   `inherit` implementa literalmente esa frase: el icono y el titulo siguen
   al color del .menu-link, asi que basta con controlar el link en cada
   estado y todo lo demas va detras. De paso NEUTRALIZA LOS DOS HAND-EDITS
   ROJOS del bundle (#DE3217 en :hover), que la §6 prohibe expresamente.

   !important obligatorio: esos hand-edits llegan a 0,11,1 de especificidad
   y no hay forma sensata de superarlos por estructura. */
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title,
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon,
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon .svg-icon,
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
  color: inherit !important;
}

/* Bullets y flechas de submenu: mismo criterio, siguen al texto. */
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet {
  background-color: currentColor;
  opacity: 0.6;
}
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-arrow:after {
  background-color: currentColor;
  opacity: 0.6;
}

/* HOVER — los `:not(.active):not(.here)` NO son decorativos, arreglan un bug
   real detectado en el panel: KTMenu usa `.hover` como CLASE LITERAL (no solo
   el pseudo) y LA DEJA PEGADA al item aunque el raton se haya ido (se observo
   `class="menu-item hover showing"` con el cursor en la otra punta). Sin los
   guards, esa clase (0,9,0) le ganaba a la regla del item activo (0,8,0) y
   dejaba el activo con el fondo de hover (5%) en vez del suyo (10%): el item
   activo se APAGABA en vez de resaltarse. Metronic pone estos mismos guards en
   sus reglas — aqui se replican por la misma razon.

   !important en color porque el hand-edit del bundle llega a 0,10,0. */
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) > .menu-link:not(.disabled):not(.active):not(.here):hover,
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) {
  color: var(--sidebar-fg-strong) !important;
}

/* El FONDO del hover va solo en el pseudo `:hover` REAL, nunca en la clase
   `.hover` — precisamente porque esa clase se queda pegada y dejaria una banda
   al 5% permanente en el ultimo item visitado. */
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) > .menu-link:not(.disabled):not(.active):not(.here):hover {
  background-color: #ffffff0d; /* blanco 5%: mas tenue que el activo (10%) */
}

/* ESTADO ABIERTO (.show = acordeon desplegado). Solo sube el texto: "abierto"
   no es "activo", asi que NO lleva fondo ni barra — si no, un padre abierto
   competiria visualmente con el hijo realmente activo. */
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link {
  color: var(--sidebar-fg-strong);
}

/* ============================================================
   ITEM ACTIVO — guia §6: "Fondo --sidebar-active (blanco 10%) + barra
   izquierda 3px --accent. Sustituye al bloque negro."

   El "bloque negro" es `.menu-link.active { background-color:#1C1C21 }`
   (bundle :50318). `.here` marca la seccion actual; ambos se tratan igual.
   Las pone KTMenu (JS) tras el login, no Razor.
   ============================================================ */

:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link,
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
  color: var(--sidebar-fg-strong);
  background-color: var(--sidebar-active);
}

:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link::before,
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 2px 2px 0;
  background-color: var(--accent);
}

/* ============================================================
   FOOTER — boton "¿Necesitas ayuda?".

   El markup lo pasa a `.btn-accent` (F1): con --primary = #0B2A5B, un
   btn-primary quedaria azul marino SOBRE azul marino = invisible.

   Pero no basta con cambiar la clase: el boton tambien lleva `.btn-custom`,
   y el bundle declara `[data-kt-app-layout=dark-sidebar] .app-sidebar
   .btn-custom { background-color: rgba(63,66,84,.35) }` = 0,3,0, que le
   gana a `.btn.btn-accent` = 0,2,0 de 04-componentes.css. Sin esto el boton
   se quedaria GRIS. Y su regla de :hover lleva `!important`, de ahi el
   nuestro.
   ============================================================ */

:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .btn.btn-accent {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .btn.btn-accent i,
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .btn.btn-accent .svg-icon,
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .btn.btn-accent .btn-label {
  color: var(--accent-fg);
}
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .btn.btn-accent:hover:not(:disabled),
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .btn.btn-accent:focus:not(:disabled),
:root:not([data-bs-theme="dark"]) [data-kt-app-layout=dark-sidebar] .app-sidebar .btn.btn-accent:active:not(:disabled) {
  background-color: #26b869 !important; /* = hover de btn-accent en 04-componentes.css */
  border-color: #26b869;
  color: var(--accent-fg) !important;
}

/* ============================================================
   NO TOCAR: el contador de notificaciones (`.badge-danger` del sidebar)
   es el UNICO rojo permitido en §6 — es una alerta, y el rojo alerta.
   Ninguna regla de este fichero lo alcanza (vive fuera de .menu-icon /
   .menu-title, y el `color: inherit` no cruza a los badges).
   ============================================================ */