/* SAS Finanzas · Panel · menú emergente (en computadora y en celular).
   El menú vive oculto para que cada sección use todo el ancho. Arriba queda una barra delgada translúcida con el
   botón de menú, la sección actual y el aviso de "te necesitan". El menú entra flotando desde la izquierda, con
   esquinas redondeadas y el fondo difuminado (como la barra lateral del iPad). Se abre con el botón, acercando
   el mouse al borde izquierdo, y se cierra al elegir una sección, con Esc o tocando fuera. */

.app{display:block;min-height:100vh}

/* Barra superior */
.barra-movil{display:flex;position:sticky;top:0;z-index:30;align-items:center;gap:var(--s2);min-height:56px;padding:8px var(--s5);padding-top:calc(8px + env(safe-area-inset-top));
  background:rgba(246,247,249,.78);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid rgba(221,225,232,.8);color:var(--marino)}
.barra-movil .btn-fantasma{color:var(--marino)}
.barra-movil .btn-fantasma:hover{background:rgba(22,35,63,.07)}
.barra-movil .marca{color:var(--marino);font-size:17px}
.barra-movil .marca span{color:var(--acento)}
.barra-seccion{display:flex;align-items:center;gap:var(--s2);font-size:15px;font-weight:600;color:var(--texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-seccion::before{content:"";width:1px;height:18px;background:var(--borde-fuerte)}
.barra-seccion:empty{display:none}
.pastilla-atencion{margin-left:auto;background:var(--rojo);color:#fff;text-decoration:none;font-size:12px;font-weight:600;border-radius:14px;padding:5px 12px;white-space:nowrap;transition:transform var(--rapido)}
.pastilla-atencion:hover{transform:translateY(-1px)}
#btn-menu{position:relative}
#btn-menu[data-aviso]::after{content:"";position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--rojo);box-shadow:0 0 0 2px rgba(246,247,249,.9)}

/* El menú: flotante, entra desde la izquierda con la curva de iOS */
.lateral{position:fixed;top:12px;left:12px;bottom:12px;height:auto;width:min(276px,calc(100vw - 48px));z-index:45;border-radius:18px;
  box-shadow:0 24px 60px -12px rgba(18,26,43,.45),0 0 0 1px rgba(255,255,255,.06) inset;
  transform:translateX(calc(-100% - 24px));transition:transform .42s cubic-bezier(.32,.72,0,1);visibility:hidden}
.lateral.abierto{transform:none;visibility:visible}
.lateral .nav a{border-radius:10px}
.lateral .nav a:active{transform:scale(.98)}
#velo-menu{z-index:44;background:rgba(18,26,43,.22);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* Zona del borde izquierdo que abre el menú al acercar el mouse (solo con mouse) */
.borde-menu{display:none}
@media (hover:hover) and (pointer:fine){.borde-menu{display:block;position:fixed;left:0;top:0;bottom:0;width:8px;z-index:29}}

/* El contenido usa todo el ancho */
.principal{max-width:none;padding:var(--s5) var(--s6) 80px}

@media (max-width:900px){
  .barra-movil{padding:6px var(--s3);padding-top:calc(6px + env(safe-area-inset-top))}
  .barra-seccion{display:none}
  .lateral{top:8px;left:8px;bottom:8px}
  .principal{padding:var(--s4) var(--s4) 64px}
}
@media (prefers-reduced-motion:reduce){.lateral{transition:none}}