/* V176 — pulido visual y distribución del carrusel; sin alterar login. */
:root{--academy-sidebar-width:230px}
@media(min-width:821px){
 html body .app{display:block!important;position:relative!important;width:100%!important;grid-template-columns:none!important}
 html body .app>#mainSidebar.sidebar{position:fixed!important;inset:0 auto 0 0!important;width:230px!important;min-width:230px!important;max-width:230px!important;height:100dvh!important;box-sizing:border-box!important;z-index:60!important}
 html body .app>.main{position:relative!important;left:auto!important;transform:none!important;margin-left:230px!important;width:calc(100% - 230px)!important;max-width:calc(100% - 230px)!important;min-width:0!important;box-sizing:border-box!important}
 html body .app>.main>.content,html body #inicio.home-page{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
}
html body .app>#mainSidebar.sidebar{background-color:#091f50!important;background-image:linear-gradient(165deg,#0b285c 0%,#0a2051 55%,#0b1a46 100%)!important;border-right:1px solid #1c3e77!important;box-shadow:3px 0 14px #071c3a12!important}
/* Encabezado de academia: mismo lenguaje visual que Especialización OPPO */
html body #mainSidebar .academy-brand-lockup{background:linear-gradient(105deg,#0877e8,#5141e3)!important;border:1px solid #6a8ff5!important;border-radius:12px!important;box-shadow:0 3px 10px #00000012!important;padding:12px 8px!important}
html body #mainSidebar .academy-brand-lockup,html body #mainSidebar .academy-brand-lockup strong,html body #mainSidebar .academy-brand-lockup .academy-oppo-logo{color:#fff!important}
html body #mainSidebar .nav-group-title.oppo-title{background:linear-gradient(105deg,#0877e8,#5141e3)!important;border:1px solid #6a8ff5!important;color:#fff!important;border-radius:12px!important}
/* Botones con fondo discreto y selección celeste */
html body #mainSidebar nav.nav button{color:#f2f7ff!important;background:transparent!important;border:1px solid transparent!important;border-radius:10px!important;transition:background .2s ease,border-color .2s ease,color .2s ease!important}
html body #mainSidebar nav.nav button svg{color:inherit!important;stroke:currentColor!important}
html body #mainSidebar nav.nav button:hover{background:rgba(130,202,255,.14)!important;border-color:rgba(160,214,255,.25)!important;color:#fff!important}
html body #mainSidebar nav.nav button.active,html body #mainSidebar nav.nav button[aria-current="page"]{background:#c9edff!important;color:#073d79!important;border-color:#83cefb!important;box-shadow:0 2px 8px #001f4620!important}
html body #mainSidebar nav.nav button.active svg{color:#07569e!important}
/* Barra superior: misma familia de superficies claras que el contenido */
html body .app>.main>.topbar{background:#f7faff!important;background-image:linear-gradient(105deg,#f7faff 0%,#edf5ff 66%,#eaf0ff 100%)!important;border-bottom:1px solid #d6e4f5!important;box-shadow:0 2px 8px #14345c0a!important}
html body .app>.main>.topbar :is(button,span,strong){color:#16477f}
/* Borde fino y limpio en tarjetas */
html body #inicio .home-action-grid .home-action{border:1.5px solid #d6e2f5!important;border-radius:17px!important;box-shadow:0 4px 12px #1b3d6a0b!important}
html body #inicio .home-action-grid .home-action:hover{border-color:#a5c9f6!important}
html body #inicio .home-premium-grid>*,html body #inicio .home-premium-grid button,html body #inicio .home-specialty-grid>*,html body #inicio .home-specialty-grid button{border-radius:17px!important}
/* El carrusel pasa a la columna izquierda, inmediatamente antes de la frase. */
html body #inicio .home-left-column>.v172-carousel{margin:14px 0!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;border:1px solid #d7e6f7!important;border-radius:17px!important;background:#fff!important}
html body #inicio .home-left-column>.v172-carousel .v172-carousel-stage{height:clamp(300px,33vw,445px)!important;border-radius:13px!important;background:linear-gradient(115deg,#edf5ff,#f8fbff)!important}
/* Integra la ficha con la superficie curva, sin recortar su información. */
html body #inicio .v172-carousel-stage .v172-slide{border-radius:15px!important;overflow:hidden!important;background:#fff!important;border:1px solid #e1e9f4!important}
html body #inicio .v172-carousel-stage .v172-slide img{border-radius:inherit!important;object-fit:contain!important;display:block!important;background:#fff!important}
html body #inicio .home-left-column>.home-landscape-card{margin-top:14px!important}
@media(max-width:820px){html body .app>.main{margin-left:0!important;width:100%!important;max-width:100%!important}html body #inicio .home-left-column>.v172-carousel .v172-carousel-stage{height:clamp(300px,70vw,440px)!important}}
@media(prefers-reduced-motion:reduce){html body #mainSidebar nav.nav button{transition:none!important}}