/* ═══════════════════════════════════════════════════════════════════════════
   data21-shell.css · CÁSCARA DEL PANEL DATA21
   Topbar, logo, sidebar, bloque de usuario, menú lateral y pie.
   Traduce el bloque .nuevo{...} de la maqueta aprobada
   (.superpowers/brainstorm/50266-1788770755/maqueta.html, líneas 108-134 y 199)
   a las clases que el panel USA DE VERDAD.

   Es la ÚLTIMA hoja del tema: gana cualquier duda de acoplamiento del sidebar.
   Consume EXCLUSIVAMENTE tokens de data21-tokens.css. No declara :root.

   CLASES CUBIERTAS (dueño único, nadie más las escribe):
     .topbar · .topbar .navbar.navbar-default · .topbar .container ·
     .topbar .pull-left · .topbar .topbar-left · .topbar .text-left ·
     .logo · .logo img · .button-menu-mobile · .topbar .nav > li > a ·
     .topbar .profile img · .porcentajeUsaso · .progress.progress-sm ·
     .left.side-menu · .side-menu.left · .content-page (SOLO margin-left
     y padding-top) · .sidebar-inner · .sidebar-user (+ img, p, a) ·
     .btnCerrarSesion (solo dentro de .sidebar-user) ·
     #sidebar-menu > ul > li > a (+ .active) · #sidebar-menu ul li a i ·
     #sidebar-menu ul ul (+ a) · #sidebar-menu .subdrop · .menu-title ·
     .menuLateral · .footer · #wrapper.enlarged (solo protección) ·
     responsive @media 767px y 419px

   FRONTERAS RESPETADAS:
     · .content-page → aquí SOLO margin-left y padding-top.
       '.content-page > .content' y .container general son de data21-layout.css.
     · #botonesEdicion es de data21-layout.css: no aparece en este fichero.
     · .btn, .form-control, .flexigrid, .modal, .nav-tabs, .dropdown-menu,
       .card-box, .page-title, .row, .col-*, utilidades de margen y padding (m- y p-): NO se tocan.

   USO DE !important — solo por estas tres razones, marcadas caso por caso:
     (a) vencer un style="" inline de cabecera.php
         (height:40px de la topbar, min-height:40px del navbar,
          width:54px!important y left:-20px de .topbar-left,
          margin-top:-5px/-23px de los dos <img> del logo,
          max-width:70px/130px que PHP calcula para el avatar del sidebar,
          margin:10px 0 0px del <p>, border:0;background:none de los enlaces)
     (b) vencer un !important previo de core.css
         (.nav > li > a{color:!important}, #sidebar-menu > ul > li > a.active,
          #sidebar-menu .subdrop, .menu-title{padding:!important})
     (c) vencer un !important de bootstrap.min.css
         (.navbar-right{float:right!important} dentro de @media min-768)
   Fuera de esos casos se gana por especificidad y por orden de carga.

   NO SE TOCA: el fichero ni el color del logo (assets/images/logoCabecera.png),
   el display de '.logo .icon-c-logo' y '.logo span' (mecanismo abierto /
   colapsado), el estado #wrapper.enlarged, el 'text-align:left !important'
   del pie (core.css:107) ni los id #btn-fullscreen / #btnCerrarSesion.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1 · TOPBAR — de 40px a 58px  (maqueta 108-113)
   La altura de 40px está INLINE en cuatro sitios de cabecera.php
   (L618 .topbar, L622 .navbar, L631 .topbar-left, L632 .text-left) y el PHP
   no se puede tocar: todo este bloque necesita !important por razón (a).
   ═══════════════════════════════════════════════════════════════════════════ */
.topbar{
  height:var(--d21-topbar-h) !important;      /* (a) style="height:40px" */
  background-color:var(--d21-oscuro);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}

.topbar .navbar.navbar-default{
  min-height:var(--d21-topbar-h) !important;  /* (a) style="min-height:40px" */
  height:var(--d21-topbar-h);
  background-color:var(--d21-oscuro);
  border:0;
  border-radius:0;
  margin-bottom:0;
  box-shadow:none;
}

/* core.css:93 ya deja .container en width:auto; aquí solo se convierte en la
   fila flex de la barra y se le da el aire lateral de la maqueta (24px). */
.topbar .navbar-default > .container{
  display:flex;
  align-items:center;
  height:var(--d21-topbar-h);
  width:auto;
  padding:0 var(--d21-e5);
}

/* El <div class=""> sin clase que cabecera.php mete entre .container y los
   tres bloques (burger, logo, lista de la derecha). */
.topbar .navbar-default > .container > div{
  display:flex;
  align-items:center;
  gap:var(--d21-e4);
  width:100%;
  height:var(--d21-topbar-h);
}

/* Los floats de .pull-left / .navbar-right dejan de hacer falta: dentro de un
   contenedor flex el float no se aplica. Se ordenan por orden de DOM:
   burger · logo · (auto) · lista de la derecha.
   position:static es DELIBERADO y sustituye al 'position:relative' del plan:
   el div lleva style="left:-10px !important" INLINE, y un !important inline no
   se puede vencer con seguridad desde una hoja; al quitarle el posicionamiento,
   la propiedad 'left' deja de aplicarse y el burger se alinea solo. */
.topbar .pull-left{
  float:none !important;                      /* (a) utilidad .pull-left */
  position:static !important;                 /* neutraliza left:-10px!important inline */
  height:auto !important;                     /* (a) style="height:30px" */
  display:flex;
  align-items:center;
}

.topbar .topbar-left{
  float:none !important;                      /* (b) core.css:1134 float:left */
  width:auto !important;                      /* (a) style="width:54px !important" */
  height:auto !important;                     /* (a) style="height:40px" */
  left:0 !important;                          /* (a) style="left:-20px" */
  position:relative !important;
  display:flex;
  align-items:center;
  z-index:1;
}

.topbar .topbar-left .text-left{
  height:auto !important;                     /* (a) style="height:40px" */
  display:flex;
  align-items:center;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2 · LOGO — INTOCABLE en fichero y en color; aquí solo geometría
   Hay DOS <img> del mismo PNG (uno para el menú abierto dentro del <span>,
   otro .icon-c-logo para el menú colapsado) con margin-top:-5px y -23px INLINE.
   Esos márgenes existen SOLO para compensar el line-height:60px de core.css:1144
   sobre una barra de 40px. Al pasar a 58px y a flex, se anulan.

   DESVIACIÓN DELIBERADA Y DOCUMENTADA — no se usan los 24px de la maqueta.
   logoCabecera.png es un lienzo de 60×60 en el que la marca ocupa sólo
   58×14 px (bbox medido con PIL: x 1-59, y 21-35); el 77% de la altura es
   relleno transparente. Con height:24px la marca se dibujaría a 23×5,6 px:
   ilegible. La maqueta usa ese mismo PNG en crudo, así que su "24px" es un
   artefacto de la demo, no una decisión de diseño.

   CORREGIDO — el primer intento fijaba height:52px y el logo salía MÁS PEQUEÑO
   que antes del rediseño: 49×11 px dentro de una barra un 45% más alta, frente
   a los 57×12 px que ocupaba en la barra de 40px. Pasaba del 30% del alto de la
   barra al 19%: la marca perdía presencia justo cuando la barra ganaba aire.
   Ahora, en vez de escalar el lienzo entero (77% de aire muerto), se RECORTA el
   relleno transparente con object-fit y la marca se dibuja a su tamaño natural,
   58×14 px — más grande que los 57×12 de antes y sin desbordar la barra:
     lienzo 60×60, caja 60×20 → escala de cover = max(60/60, 20/60) = 1
     centro de la marca en la imagen = y 28; para llevarlo al centro de la caja
     (y 10) hace falta un offset de −18 px sobre un desbordamiento de 40 px
     → object-position vertical = 18/40 = 45 %
   El recorte no altera ni un píxel de color: sólo quita transparencia.
   PROHIBIDO aquí: filter, opacity, background o cualquier recoloreado.

   NOTA CONOCIDA, NO SE ARREGLA AQUÍ: la palabra "data" del PNG es #000000 puro
   sobre la topbar #36404a → 2,03:1, por debajo del 3:1 mínimo para gráficos. Es
   un problema del ASSET, y el logo es intocable por encargo. Agrandar la marca
   lo alivia; resolverlo exigiría un PNG nuevo. */
.topbar .logo{
  line-height:1 !important;                   /* (b) core.css:1148 line-height:60px */
  height:var(--d21-topbar-h);
  display:flex;
  align-items:center;
  font-size:0;                                /* mata el hueco de texto en línea */
  letter-spacing:0;
}

.topbar .logo img{
  height:20px !important;                     /* (a) contra los margin-top inline */
  width:60px !important;                      /* el lienzo completo, sin escalar */
  object-fit:cover;                           /* recorta el 77% de aire transparente */
  object-position:center 45%;                 /* ver el cálculo del comentario */
  margin:0 !important;                        /* (a) margin-top:-5px / -23px inline */
  vertical-align:middle;
  /* OJO: aquí NO se declara 'display'. '.topbar .logo img' (0,2,1) vencería a
     '.logo .icon-c-logo{display:none}' de core.css:1160 (0,2,0) y se verían LOS
     DOS logos a la vez (verificado con Playwright: el <a class="logo"> pasaba de
     52px a 104px de ancho). El <img> ya se comporta como bloque por ser hijo
     directo de '.logo', que es display:flex. */
}

/* Estado colapsado (#wrapper.enlarged): el sidebar mide 50px, así que el
   lienzo de 60px no cabe. Se recorta a 48×17 y la marca sale a 46×11 px, que es
   lo que ya se veía antes en ese estado. Mismo cálculo:
   escala 48/60 = 0,8 → imagen 48×48, desbordamiento 48−17 = 31,
   centro de la marca a 28×0,8 = 22,4 → offset 8,5−22,4 = −13,9 → 13,9/31 = 45%. */
.topbar .logo img.icon-c-logo{
  height:17px !important;
  width:48px !important;
}

/* El <span> que envuelve el logo del menú abierto. NO se toca su 'display':
   core.css:1160/1574/1578 y responsive.css:130-136 lo usan como interruptor
   abierto/colapsado junto con .icon-c-logo. Solo se alinea. */
.topbar .logo span{
  align-items:center;
  line-height:1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3 · ZONA DERECHA DE LA TOPBAR  (maqueta 113 .avatar-top)
   ═══════════════════════════════════════════════════════════════════════════ */
.topbar .navbar-nav.navbar-right{
  margin:0 0 0 auto;
  float:none !important;                      /* (c) bootstrap .navbar-right{float:right!important} */
  display:flex;
  align-items:center;
  gap:var(--d21-e1);
  padding:0;
}

.topbar .nav > li > a{
  line-height:var(--d21-topbar-h);
  color:var(--d21-texto-topbar) !important;   /* (b) core.css:1181 color:#9ea3a8 !important */
  padding:0 var(--d21-e3);
  border-radius:var(--d21-r-s);
  transition:color var(--d21-t),background var(--d21-t);
}

.topbar .nav > li > a:hover,
.topbar .nav > li > a:focus{
  color:#fff !important;                      /* (b) misma regla de core.css */
  background:rgba(255,255,255,.06);
}

.topbar .nav > li.open > a,
.topbar .nav > li.open > a:hover,
.topbar .nav > li.open > a:focus{
  background:rgba(255,255,255,.10);
}

/* Avatar de la barra: 32px con halo, como .avatar-top de la maqueta.
   core.css:1193 lo tiene en 26x26 con borde sólido de 2px #edf0f0, SIN
   !important: aquí basta con la especificidad (0,2,1) y el orden de carga. */
.topbar .profile{
  display:flex;
  align-items:center;
  height:var(--d21-topbar-h);
  line-height:1;
}

.topbar .profile img{
  width:32px;
  height:32px;
  border:0;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 2px rgba(255,255,255,.18);
}

/* Botón hamburguesa. NO se renombra .open-left: jquery.app.js:68 lo usa. */
.button-menu-mobile{
  background:transparent;
  border:0;
  line-height:1;
  height:auto;
  font-size:20px;
  color:#fff;
  opacity:.6;
  padding:0 var(--d21-e2);
  display:flex;
  align-items:center;
  transition:opacity var(--d21-t);
}

.button-menu-mobile:hover,
.button-menu-mobile:focus{
  opacity:1;
  color:#fff;
}

/* CUOTA DE DISCO — solo se pinta para $_SESSION["nivel"]==2 (cabecera.php:668).
   No verificable con el usuario admin (nivel 0): estilado a ciegas sobre el
   marcado de cabecera.php:668-676. */
.topbar .porcentajeUsaso{
  display:block;
  color:#fff;
  font-size:12px;
  line-height:1.4;
  opacity:.8;
}

.topbar .progress.progress-sm{
  height:6px;
  border-radius:var(--d21-r-pill);
  background:rgba(255,255,255,.15);
  box-shadow:none;
  margin:var(--d21-e1) 0 0;
  overflow:hidden;
}

.topbar .progress.progress-sm .progress-bar,
.topbar .progress-bar.barraUsada{
  border-radius:var(--d21-r-pill);
  box-shadow:none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4 · ACOPLAMIENTO SIDEBAR / CONTENIDO / PIE
   El ancho 220px y la altura 40px están repartidos en cuatro sitios acoplados
   (core.css:1348 .side-menu, :1258 .side-menu.left, :1269 .content-page,
   :107 .footer). Se cambian LOS CUATRO a la vez o el contenido se solapa.
   ═══════════════════════════════════════════════════════════════════════════ */
.left.side-menu,
.side-menu{
  width:var(--d21-sidebar-w);
  background:var(--d21-superficie);
  border-right:1px solid var(--d21-borde);
  box-shadow:none;
  padding:var(--d21-e5) 0;
}

.side-menu.left{
  top:var(--d21-topbar-h);                    /* core.css:1258 pone 40px */
  box-shadow:none;
}

/* FRONTERA: de .content-page solo margin-left y padding-top.
   El padding-top es además el arreglo de un solape que ya existe hoy: la
   .topbar es position:fixed y .content-page arranca en y=0, así que la barra
   tapaba los primeros 40px del contenido. */
.content-page{
  margin-left:var(--d21-sidebar-w);
  padding-top:var(--d21-topbar-h);
}

.sidebar-inner{
  height:100%;
}

.menuLateral{
  margin:0;
  padding:0;
  list-style:none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5 · BLOQUE DE USUARIO  (maqueta 117-122)
   Marcado real (cabecera.php:707-719):
     div.sidebar-user > img[class y style calculados por PHP]
                      + p[style="margin:10px 0 0px"]
                          > span > a(nombre)  +  a.btnCerrarSesion > i.ti-power-off
   Los !important son obligatorios por razón (a): PHP escribe style inline en
   el <img> (max-width:70px o 130px), en el <p> y en los dos enlaces.

   DESVIACIÓN DOCUMENTADA — la segunda línea tenue.
   La maqueta pone un "rol" (Administrador / Consultor / Cliente) que NO EXISTE
   en el HTML ni en ninguna variable disponible sin tocar PHP. El plan preveía
   reutilizar el enlace 'Cerrar sesión' como esa segunda línea, pero en el
   marcado real ese enlace contiene SOLO un icono (<i class="ti-power-off">),
   sin texto. Para que la segunda línea se lea, la etiqueta se añade con
   content: en un ::after. Es contenido generado por CSS, vive dentro del
   bloque del tema y desaparece al quitar el <link>. El panel es monolingüe
   (control/lib/lang/ solo contiene es.php), así que el texto fijo es seguro.
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar-user{
  width:auto;
  background:transparent;
  padding:0 var(--d21-e5) var(--d21-e5);
  margin:0 0 var(--d21-e4);
  text-align:left;
  display:flex;
  align-items:center;
  gap:var(--d21-e3);
  border-bottom:1px solid var(--d21-borde);
}

.sidebar-user img{
  width:42px !important;                      /* (a) style="max-width:70px|130px" */
  height:42px !important;
  max-width:42px !important;
  max-height:42px !important;
  min-width:42px;
  flex:0 0 42px;
  border-radius:50% !important;               /* iguala la forma aunque PHP no ponga .img-circle */
  object-fit:cover;
  box-shadow:0 0 0 3px var(--d21-marca-suave);
}

.sidebar-user p{
  margin:0 !important;                        /* (a) style="margin:10px 0 0px" */
  min-width:0;
  flex:1;
  text-align:left;
  line-height:1.35;
  font-size:0;                                /* traga el &nbsp; suelto del marcado */
}

.sidebar-user p > span{
  display:block;
  font-size:var(--d21-txt-base);
}

.sidebar-user p a{
  color:var(--d21-texto) !important;          /* (a) enlaces con style inline */
  font-size:var(--d21-txt-base);
  font-weight:600;
  text-decoration:none;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border:0 !important;                        /* (a) style="border:0px" */
  background:none !important;                 /* (a) style="background:none !important" */
  padding:0;
}

.sidebar-user p a:hover{
  color:var(--d21-marca-oscuro) !important;
}

.sidebar-user a.btnCerrarSesion{
  display:block;
  margin-top:2px;
  font-size:var(--d21-txt-mini);
  font-weight:400;
  color:var(--d21-texto-tenue) !important;    /* (a) style inline del enlace */
}

.sidebar-user a.btnCerrarSesion::after{
  content:"Cerrar sesión";                    /* ver DESVIACIÓN arriba */
}

.sidebar-user a.btnCerrarSesion i{
  font-size:var(--d21-txt-mini);
  margin-right:var(--d21-e1) !important;      /* (c) utilidad m-r-5 lleva !important */
}

.sidebar-user a.btnCerrarSesion:hover,
.sidebar-user a.btnCerrarSesion:hover i{
  color:var(--d21-marca) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6 · ITEMS DEL MENÚ  (maqueta 123-132)
   Aquí es donde el azul #3f9ce8 de la plantilla pasa al naranja de marca.
   ═══════════════════════════════════════════════════════════════════════════ */
#sidebar-menu > ul > li > a{
  margin:1px var(--d21-e3);
  padding:10px var(--d21-e3);
  border-radius:var(--d21-r-s);
  color:var(--d21-texto-suave);
  font-weight:500;
  font-size:var(--d21-txt-campo);
  font-family:var(--d21-fuente);
  border-left:0;
  position:relative;
  display:flex;
  align-items:center;
  transition:background var(--d21-t),color var(--d21-t);
}

#sidebar-menu > ul > li > a:hover,
#sidebar-menu > ul > li > a:focus{
  background:var(--d21-superficie-3);
  color:var(--d21-texto);
  text-decoration:none;
}

#sidebar-menu ul li a i{
  color:var(--d21-texto-tenue);
  font-size:14px;
  width:18px;
  margin-left:0;
  margin-right:var(--d21-e2);
  line-height:inherit;
  text-align:center;
  flex:0 0 18px;
  transition:color var(--d21-t);
}

#sidebar-menu > ul > li > a:hover i{
  color:var(--d21-texto-suave);
}

#sidebar-menu > ul > li > a > span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ── ACTIVO ────────────────────────────────────────────────────────────────
   core.css:1403 pone hoy background:#f6f7f9 !important + border-left:3px
   #3f9ce8 + color:#000 !important → hacen falta !important por razón (b).
   El anchor de un grupo abierto lleva SIEMPRE 'active' y 'subdrop' a la vez
   (jquery.app.js:75 los pone al abrir el padre del hijo activo). */
#sidebar-menu > ul > li > a.active{
  background:var(--d21-marca-suave) !important;
  color:var(--d21-marca-oscuro) !important;
  border-left:0 !important;
  font-weight:600;
}

#sidebar-menu > ul > li > a.active i{
  color:var(--d21-marca) !important;
}

/* La barrita naranja de 3px pegada al borde del sidebar.
   DESVIACIÓN TÉCNICA: la maqueta la dibuja con un ::before del propio enlace,
   pero core.css:2032 le da 'overflow:hidden' a .waves-effect (que llevan TODOS
   los enlaces del menú) y recortaría un ::before que sobresale. Se dibuja
   sobre el <li>, que es position:relative por core.css:1298 y no recorta.
   Se selecciona con :has() porque el <li> de un grupo abierto NO recibe
   .active (solo su <a>). Sin soporte de :has() se pierde la barrita y se
   conservan fondo y color: degradación limpia. */
#sidebar-menu > ul > li:has(> a.active)::before{
  content:"";
  position:absolute;
  left:1px;
  top:10px;
  height:20px;                                 /* altura FIJA, no top/bottom: en un
                                                  li.has_sub el <li> mide lo que el
                                                  padre MÁS su submenú desplegado y
                                                  la barra se estiraba sobre los hijos
                                                  (visto con Playwright) */
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--d21-marca);
}

/* ── DESPLEGABLE ABIERTO ───────────────────────────────────────────────────
   core.css:1357 pone border-left:3px #000 y color:#000 con !important. */
#sidebar-menu > ul > li > a.subdrop{
  background:var(--d21-marca-suave) !important;
  color:var(--d21-marca-oscuro) !important;
  border-left:0 !important;
  font-weight:600;
}

#sidebar-menu > ul > li > a.subdrop i{
  color:var(--d21-marca) !important;
}

/* menu.php:379 puede repartir .subdrop entre TODOS los hijos de un grupo
   (jquery.app.js lo limpia después, pero durante un instante están todos).
   Aquí se neutraliza para que nunca se enciendan varios hijos a la vez. */
#sidebar-menu ul ul a.subdrop{
  background:transparent !important;           /* (b) core.css:1357 !important */
  color:var(--d21-texto-suave) !important;
  border-left:0 !important;
}

/* ── HIJOS (.enla_sub2) — maqueta .sub{padding-left:48px} ───────────────── */
#sidebar-menu ul ul{
  background:transparent;                      /* core.css:1324 lo pone gris #f6f7f9 */
  padding-top:var(--d21-e1);
  padding-bottom:var(--d21-e1);
}

#sidebar-menu ul ul a{
  padding:8px var(--d21-e3) 8px var(--d21-e7);
  margin:1px var(--d21-e3);
  border-radius:var(--d21-r-s);
  font-size:var(--d21-txt-sm);
  font-family:var(--d21-fuente);
  color:var(--d21-texto-suave);
  transition:background var(--d21-t),color var(--d21-t);
}

#sidebar-menu ul ul a:hover{
  background:var(--d21-superficie-3);
  color:var(--d21-texto);
  text-decoration:none;
}

#sidebar-menu ul ul a i{
  font-size:11px;
  width:14px;
  flex:none;
  margin-right:var(--d21-e1);
  color:var(--d21-texto-tenue);
}

#sidebar-menu ul ul li.active a,
#sidebar-menu ul ul a.active{
  background:var(--d21-marca-suave);
  color:var(--d21-marca-oscuro);
  font-weight:600;
}

#sidebar-menu ul ul li.active a i,
#sidebar-menu ul ul a.active i{
  color:var(--d21-marca);
}

/* El ripple de waves.js dentro del menú era teal (#5fbeaa, el acento viejo
   que se retira). Pasa al halo de marca. La clase .waves-effect NO se toca. */
#sidebar-menu .waves-effect .waves-ripple{
  background-color:var(--d21-marca-halo);
}


/* ═══════════════════════════════════════════════════════════════════════════
   7 · TÍTULOS DE SECCIÓN  (maqueta 133-134 .sec-tit)
   La clase .menu-title YA EXISTE en core.css:1409 (y core.css:1458 ya la
   oculta en modo colapsado). Solo se le da el aspecto de la maqueta.
   Los emite menu.php — es el único cambio de PHP del proyecto.
   ═══════════════════════════════════════════════════════════════════════════ */
.menu-title{
  display:block;
  padding:var(--d21-e4) var(--d21-e5) var(--d21-e1) !important;  /* (b) core.css:1409 !important */
  font-size:var(--d21-txt-seccion);
  font-family:var(--d21-fuente);
  text-transform:uppercase;
  letter-spacing:.9px;
  color:var(--d21-texto-tenue);
  font-weight:700;
  line-height:1.4;
  pointer-events:none;
  cursor:default;
  list-style:none;
}

/* El primero no necesita el aire de arriba: el bloque de usuario ya lo da. */
.menuLateral > li.menu-title:first-child{
  padding-top:0 !important;                    /* (b) misma regla de core.css */
}


/* ═══════════════════════════════════════════════════════════════════════════
   8 · PIE
   NO se toca el 'text-align:left !important' de core.css:107 aunque el HTML
   diga class="footer text-right": es una incoherencia que ya existe y que el
   cliente ya ve así. Documentada, no corregida aquí.
   ═══════════════════════════════════════════════════════════════════════════ */
.footer{
  border-top:1px solid var(--d21-borde);
  background:var(--d21-superficie);
  color:var(--d21-texto-tenue);
  font-size:var(--d21-txt-mini);
  padding:var(--d21-e3) var(--d21-e6);
  left:var(--d21-sidebar-w);
}


/* ═══════════════════════════════════════════════════════════════════════════
   9 · ESTADO COLAPSADO — SOLO PROTECCIÓN
   #wrapper.enlarged sigue exactamente como está en core.css:1565-1583 y 2165
   (sidebar 50px, content-page 50px, footer 50px, .sidebar-user oculto).
   Estas dos reglas no lo cambian: impiden que el margen lateral y la barrita
   del punto 6 se cuelen en un sidebar de 50px.
   PROHIBIDO añadir clases a #wrapper: pie.php:134-193 guarda su cadena de
   clases en localStorage ('mh_menu_gestor').
   ═══════════════════════════════════════════════════════════════════════════ */
#wrapper.enlarged #sidebar-menu > ul > li > a{
  margin-left:0;
  margin-right:0;
  border-radius:0;
}

#wrapper.enlarged #sidebar-menu > ul > li::before{
  display:none;
}

#wrapper.enlarged #sidebar-menu ul ul a{
  margin-left:0;
  margin-right:0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10 · RESPONSIVE — re-afirmación de responsive.css
   responsive.css se carga ANTES que esta hoja, así que sus reglas de media
   query perderían frente a las reglas base de arriba si no se repiten.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  .content-page{
    margin-left:0 !important;                  /* (b) responsive.css:30 !important */
    padding-top:var(--d21-topbar-h);
  }
  .footer{
    left:0 !important;                         /* (b) responsive.css:33 !important */
  }
}

@media (max-width:419px){
  .content-page{
    margin-left:70px;
  }
  /* responsive.css:127 pone .topbar-left{width:70px !important}; la regla del
     punto 1 (width:auto !important, más específica) ya gana. Aquí solo se
     asegura que el logo colapsado quepa. NO se toca el display de
     .icon-c-logo ni el de .logo span: los fija responsive.css:130-136. */
  .topbar .logo img{
    height:44px !important;                    /* (a) márgenes inline del logo */
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   9 · AÑADIDO POR LA CAPA 2 (limpieza de marcado de cabecera.php)
   Al quitar los style="" inline de la topbar, el <li> de la cuota de disco
   perdió su style="min-width:200px". Ese <li> ahora lleva class="cuota-disco"
   (clase nueva, no la usa ningún JS ni ningún plugin) y el ancho se declara
   aquí. Sin !important: no hay nada previo que lo dispute.
   Solo se pinta para $_SESSION["nivel"]==2, igual que antes.
   ════════════════════════════════════════════════════════════════════════════ */
.topbar .nav > li.cuota-disco{
  min-width:200px;
  padding:0 var(--d21-e3);
}