/* AASA: logo nuevo y menú lateral retráctil. Solo se carga con CHROME_NUEVO=1 (ver base.html y login.html). */
html.cn{--sb-min:60px}

/* ---- marca ---- */
html.cn .brand-n{padding:9px 10px 9px 14px;gap:6px;min-height:52px;justify-content:space-between}   /* 52 px como la barra superior: sus dos líneas coinciden */
html.cn .brand-link{display:flex;align-items:center;border-radius:var(--r-sm)}
html.cn .brand-link:focus-visible,html.cn .menu-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html.cn .logo-full{display:block;height:34px;width:auto}
html.cn .logo-mini{display:none;height:34px;width:auto}
html.cn .menu-toggle{display:none;place-items:center;width:30px;height:30px;flex:none;padding:0;border:0;
  border-radius:var(--r-sm);background:transparent;color:var(--mut);cursor:pointer}
html.cn .menu-toggle:hover{background:var(--hover);color:var(--text)}
html.cn .menu-toggle .i-der{display:none}
html.cn .login-logo{display:block;margin:2px auto 12px;width:150px;height:auto}

/* ---- menú retráctil: solo en escritorio (en celular sigue el cajón de siempre) ---- */
@media (min-width:861px){
  html.cn .menu-toggle{display:grid}
  html.cn.menu-min .menu-toggle .i-izq{display:none}
  html.cn.menu-min .menu-toggle .i-der{display:block}

  /* contraído: una barra fina de íconos fija a la izquierda; el contenido ocupa el resto */
  html.cn.menu-min .app{grid-template-columns:var(--sb-min) 1fr}
  html.cn.menu-min .main{grid-column:2}
  html.cn.menu-min .sidebar{position:fixed;inset:0 auto 0 0;width:var(--sb-min);z-index:55;overflow:hidden;white-space:nowrap;
    transition:width .16s ease,box-shadow .16s ease}
  /* con el puntero encima (o el foco dentro) se agranda por encima del contenido, sin moverlo */
  html.cn.menu-min .sidebar:hover:not(.sin-hover),
  html.cn.menu-min .sidebar:focus-within:not(.sin-hover){width:var(--sb);box-shadow:8px 0 30px var(--lat-sombra,rgba(20,27,38,.16))}

  /* aspecto contraído: solo íconos */
  html.cn.menu-min .sidebar:not(:hover):not(:focus-within) .logo-full,
  html.cn.menu-min .sidebar.sin-hover .logo-full{display:none}
  html.cn.menu-min .sidebar:not(:hover):not(:focus-within) .logo-mini,
  html.cn.menu-min .sidebar.sin-hover .logo-mini{display:block}
  html.cn.menu-min .sidebar:not(:hover):not(:focus-within) .brand-n,
  html.cn.menu-min .sidebar.sin-hover .brand-n{justify-content:center;padding:9px 0}
  html.cn.menu-min .sidebar:not(:hover):not(:focus-within) .menu-toggle,
  html.cn.menu-min .sidebar.sin-hover .menu-toggle{display:none}
  html.cn.menu-min .sidebar:not(:hover):not(:focus-within) .nav,
  html.cn.menu-min .sidebar.sin-hover .nav{padding:8px 6px}
  html.cn.menu-min .sidebar:not(:hover):not(:focus-within) .nav a,
  html.cn.menu-min .sidebar.sin-hover .nav a{font-size:0;gap:0;justify-content:center;padding:10px 0}
  html.cn.menu-min .sidebar:not(:hover):not(:focus-within) .nav a svg,
  html.cn.menu-min .sidebar.sin-hover .nav a svg{width:20px;height:20px}
  html.cn.menu-min .sidebar:not(:hover):not(:focus-within) .nav a .tag,
  html.cn.menu-min .sidebar.sin-hover .nav a .tag{display:none}
  html.cn.menu-min .sidebar:not(:hover):not(:focus-within) .nav .sec,
  html.cn.menu-min .sidebar.sin-hover .nav .sec{font-size:0;padding:0;margin:8px 10px;height:1px;background:var(--sec-linea,var(--border))}
  html.cn.menu-min .sidebar:not(:hover):not(:focus-within) .userbox,
  html.cn.menu-min .sidebar.sin-hover .userbox{justify-content:center;padding:8px 0}
  html.cn.menu-min .sidebar:not(:hover):not(:focus-within) .userbox .u,
  html.cn.menu-min .sidebar:not(:hover):not(:focus-within) .userbox a,
  html.cn.menu-min .sidebar.sin-hover .userbox .u,
  html.cn.menu-min .sidebar.sin-hover .userbox a{display:none}
}