/* Navegación: avance / retorno inverso. Tabs: disolución breve, sin dirección jerárquica. */
#main{background:var(--surface)}
.bottomnav{view-transition-name:app-nav}
::view-transition-group(app-nav),::view-transition-old(app-nav),::view-transition-new(app-nav){animation:none;mix-blend-mode:normal}
::view-transition-image-pair(root){clip-path:inset(0 var(--motion-right,0px) 0 var(--motion-left,0px));isolation:isolate}
::view-transition{pointer-events:none}
::view-transition-group(root){animation:none}



::view-transition-old(root){animation:page-out 280ms cubic-bezier(.22,.72,.2,1) both;mix-blend-mode:normal}
::view-transition-new(root){animation:page-in 280ms cubic-bezier(.22,.72,.2,1) both;mix-blend-mode:normal}
@keyframes page-in{from{transform:translateX(var(--motion-width,100vw))}to{transform:translateX(0)}}
@keyframes page-out{from{transform:translateX(0);opacity:1}to{transform:translateX(calc(var(--motion-width,100vw) * -.24));opacity:.7}}
:root[data-motion=back]::view-transition-old(root){animation-name:page-back-out;z-index:2}
:root[data-motion=back]::view-transition-new(root){animation-name:page-back-in;z-index:1}
@keyframes page-back-out{from{transform:translateX(0)}to{transform:translateX(var(--motion-width,100vw))}}
@keyframes page-back-in{from{transform:translateX(calc(var(--motion-width,100vw) * -.24));opacity:.7}to{transform:translateX(0);opacity:1}}

:root[data-motion=tab]::view-transition-old(root){animation:page-fade-out 150ms ease both}
:root[data-motion=tab]::view-transition-new(root){animation:page-fade-in 150ms ease both}
@keyframes page-fade-in{from{opacity:0}to{opacity:1}}
@keyframes page-fade-out{from{opacity:1}to{opacity:0}}
dialog{opacity:0;transform:translateY(24px);transition:opacity 180ms ease,transform 180ms cubic-bezier(.22,.72,.2,1),display 180ms allow-discrete,overlay 180ms allow-discrete}
dialog[open]{opacity:1;transform:translateY(0)}
dialog::backdrop{transition:background-color 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete}
@starting-style{dialog[open]{opacity:0;transform:translateY(24px)}dialog[open]::backdrop{background-color:transparent}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}dialog,dialog::backdrop{transition:none!important;transform:none!important}}
body{overflow-x:clip}