/* ============================================
   NAVBAR
   ============================================ */

.nav-section {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    flex-direction: row;
    height: 50px;
    width: 90%;
    justify-content: space-between;
    margin: 0 auto;
    margin-top: 30px;
}

.nav-section:hover .nav-container {
    gap: 20px;
}

/* Contenedores */
.logo-container {
    height: inherit;
    width: 50px;
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.logo-container #logo {
    height: 30px;
}

.logo-container:hover {
    transform: scale(1.05);
}

.logo-container:hover #logo {
    transform: rotate(72deg);
}

.nav-container {
    height: inherit;
    display: flex;
    flex-direction: row;
    border-radius: 60px;
    gap: 10px;
    transition: all 0.3s ease;
}

.nav-container a {
    height: inherit;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 20px;
    color: var(--textAct);
    transition: all 0.3s ease;
}

.nav-container a:hover,
.nav-container a.act {
    padding: 0px 25px;
    transform: scale(1.02);
    color: var(--textSecondary);
    font-weight: 500;
    background-color: var(--lightHover);
}

.user-container {
    height: inherit;
    width: 50px;
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.user-container a,
.logo-container a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.nav-section .tab:hover {
    --glow: inset 0 0 24px var(--shadow);
    border-color: var(--border);
}

#conf-icon,
#exis {
    color: var(--text);
    transition: all 0.3s ease;
}

#conf-icon {
    height: 30px;
    width: 30px;
}

#exis {
    height: 25px;
    width: 25px;
}

.user-container:hover {
    width: 60px;
    transform: scale(1.02);
}

.user-container:hover #conf-icon {
    color: var(--border);
    transform: rotate(-60deg);
}

.user-container:hover #exis {
    color: var(--border);
    transform: rotate(-90deg);
}

.logo-container:hover,
.user-container:hover {
    background-color: var(--lightHover);
}

/* Activos */
.act {
    color: var(--border);
}

.hide {
    visibility: hidden;
    opacity: 0;
}

/* ============================================
   SIDEBAR
   ============================================ */

#sidebar {
    display: flex;
    flex-direction: column;
    width: 15%;
    min-width: 180px;
    gap: 6px;
    flex-shrink: 0;
    max-height: 100%;
    transition: width 0.3s ease, min-width 0.3s ease;
}

#sidebar button {
    width: 100%;
    text-align: start;
    justify-content: start;
    padding: 12px 16px;
    color: var(--textSecondary);
    font-family: var(--font-primary);
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#sidebar button:hover, #sidebar button.act {
    color: var(--border);
    background-color: var(--lightHover);
}

#sidebar button:hover {
    --glow: inset 0 0 24px var(--shadow);
    border-color: var(--border);
}

#sidebar button:active {
    color: var(--border);
    background-color: var(--lightHover);
    border-color: var(--border);
}

#sidebar button.selected {
    background-color: var(--border);
    color: var(--surface);
}

/* Scrollbar del sidebar */
#sidebar::-webkit-scrollbar {
    width: 4px;
}

#sidebar::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

/* ============================================
   SIDEBAR WRAP · COLAPSO (riel de solo íconos)
   ============================================ */

.sidebar-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 15%;
    min-width: 180px;
    flex-shrink: 0;
    max-height: 100%;
    --sidebar-btn: 44px;
    transition: width 0.3s ease, min-width 0.3s ease;
    position: relative;
}

.sidebar-wrap #sidebar {
    min-width: 0;
    flex: 1;
    /* min-height: 0 es lo que permite que la lista scrollee en vez de crecer:
       sin él, un flex item no baja de su altura de contenido y se sale de la
       caja en lugar deOverflow. Con esto, el scroll termina justo encima del
       botón de colapsar, que es un hermano más abajo del mismo .sidebar-wrap. */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Un contenedor con scroll recorta TODO el paint de sus hijos (incluido el
       glow de los botones .glass, que va en su ::after) a su padding box. Con
       `padding: 2px 0` no había aire y el glow salía cortado en seco por los
       bordes del sidebar. Le damos margen y lo compensamos con márgenes
       negativos + más ancho para que los botones conserven el ancho de antes. */
    box-sizing: border-box;
    width: calc(100% + 16px);
    margin-inline: -8px;
    padding: 8px;
}

.sidebar-wrap #sidebar button {
    min-height: var(--sidebar-btn);
    gap: 10px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Padding-left SOLO cuando el sidebar está extendido.
   Ojo: .sidebar-colapsado vive en el .sidebar-wrap, no en el botón.
   Sin transición de padding: el cambio de geometría en hover producía un
   salto con la sombra del ::after entrecortada al hacer clic. */
.sidebar-wrap:not(.sidebar-colapsado) #sidebar button.act {
    padding-left: 20px;
}

/* Espacio inferior para que el scroll termine antes que el botón de colapsar.
   El `padding: 2px 0` original ya dejaba espacio para la máscara de desvanecimiento,
   pero añadimos más para garantizar separación con el botón. */
.sidebar-wrap:not(.sidebar-colapsado) #sidebar {
    padding-bottom: 46px;
}

.sidebar-wrap #sidebar button span {
    overflow: hidden;
    white-space: nowrap;
    max-width: 22ch;
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Botón chevron circular (mismo diámetro que la altura de cada botón) */
.sidebar-wrap .sidebar-toggle {
    width: var(--sidebar-btn);
    height: var(--sidebar-btn);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    color: var(--textSecondary);
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.sidebar-wrap .sidebar-toggle:hover {
    color: var(--text);
    background-color: var(--lightHover);
    transform: scale(1.02);
    --glow: inset 0 0 24px var(--shadow);
    border-color: var(--border);
}

.sidebar-wrap .sidebar-toggle svg {
    transition: transform 0.3s ease;
}

.sidebar-wrap.sidebar-colapsado .sidebar-toggle svg {
    transform: rotate(180deg);
}

/* Modo colapsado: riel de solo íconos */
.sidebar-wrap.sidebar-colapsado {
    width: var(--sidebar-btn);
    min-width: var(--sidebar-btn);
}

.sidebar-wrap.sidebar-colapsado #sidebar {
    align-items: center;
    /* El riel de iconos también scrollea, y con el mismo desvanecido. Aquí
       antes ponía `overflow: visible`, que sacaba las cuentas de la caja y
       dejaba el botón de expandir tapando la última. */
    overflow-y: auto;
}

.sidebar-wrap.sidebar-colapsado #sidebar button {
    transition: all 0.3s ease;
}

.sidebar-wrap.sidebar-colapsado #sidebar button,
.sidebar-wrap.sidebar-colapsado #sidebar button:hover,
.sidebar-wrap.sidebar-colapsado #sidebar button.act {
    padding: 0;
    gap: 0;
    justify-content: center;
    text-align: center;
}

.sidebar-wrap.sidebar-colapsado #sidebar button svg {
    margin: auto;
}

.sidebar-wrap.sidebar-colapsado #sidebar button span {
    opacity: 0;
    max-width: 0;
}

/* ============================================
   PANEL
   ============================================ */

#panel {
    flex: 1;
    padding: 28px 3% 28px 3%;
    border-radius: 25px;
    color: var(--text);
    gap: 16px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
    min-height: 0;
    transition: all 0.3s ease;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#panel::after {
    box-shadow: none;
}

#panel:hover {
    box-shadow: inset 0 0 24px var(--shadow);
    border-color: var(--border);
}

#panel h2 {
    color: var(--border);
    font-size: 28px;
    margin: 0 0 4px 0;
    font-weight: 600;
}

#panel .row {
    font-family: var(--font-secondary);
}

/* Scrollbar del panel */
#panel::-webkit-scrollbar {
    width: 6px;
}

#panel::-webkit-scrollbar-track {
    background: transparent;
}

#panel::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

/* ============================================
   LASTRAR
   ============================================ */

.lastbar {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    padding: 0 50px;
    height: 50px;
}

.lastbar:hover {
    gap: 25px;
}

.lastbar .item {
    width: 12px;
    height: 12px;
    border-radius: 20px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lastbar .item svg {
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

.lastbar .bar,
.lastbar .pendientes {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lastbar .bar {
    height: inherit;
    display: flex;
    flex-direction: row;
}

.lastbar:hover .bar,
.lastbar:hover .pendientes {
    gap: 14px;
}

.lastbar:hover .item {
    width: 40px;
    height: 40px;
}

.lastbar:hover .desact {
    opacity: 0.5;
}

.lastbar:hover .item svg {
    visibility: visible;
    opacity: 1;
}

.lastbar .item:hover {
    background-color: var(--lightHover);
    width: 45px;
    --glow: inset 0 0 10px var(--shadow);
    border-color: var(--border);
    transform: scale(1.05);
}

.lastbar-tooltip {
    position: fixed;
    z-index: 3000;
    visibility: hidden;
    opacity: 0;
    padding: 6px 12px;
    border-radius: 30px;
    color: var(--text);
    border: 1px solid var(--lightBorder);
    --glow: inset 0 0 10px var(--shadow);
    /* Mismo criterio que .notificacion: flota sobre la app sin capa detrás,
       así que lleva velo + difuminado. Los aporta .glass; aquí va el nivel,
       más tupido porque es texto pequeño sobre contenido borroso. */
    --blur-frosted: 14px;
    background-color: var(--glass-frosted);
    -webkit-backdrop-filter: blur(var(--blur-frosted));
    backdrop-filter: blur(var(--blur-frosted));
    font-size: 15px;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    transform: translate(-50%, calc(-100% + 8px));
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    will-change: transform, opacity;
}

.lastbar-tooltip.visible {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -100%);
    transition-delay: 0s;
}

.lastbar .item svg {
    color: var(--text);
    width: 20px;
    height: 20px;
    display: block;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

/* Íconos: sin animaciones de hover (se retiraron los transforms/rotaciones
   por-ícono). Solo queda la transición base de .lastbar .item svg para el
   efecto de aparición del ícono al desplegar el lastbar. */

/* ============================================
   LASTRAR - MODO SIEMPRE VISIBLE
   ============================================ */

.lastbar-always-visible {
    gap: 25px;
    transition: all 0.3s ease;
}

.lastbar-always-visible .bar,
.lastbar-always-visible .pendientes {
    gap: 14px;
}

.lastbar-always-visible .item {
    width: 40px !important;
    height: 40px !important;
}

.lastbar-always-visible .item svg {
    visibility: visible !important;
    opacity: 1 !important;
}

.lastbar-always-visible .item:hover {
    width: 45px !important;
}

/* ============================================
   KEYFRAMES
   ============================================ */

@keyframes shake {
    0% {
        transform: translateY(0px);
    }
    10% {
        transform: translateY(1px);
    }
    30% {
        transform: translateY(-1px);
    }
    50% {
        transform: translateY(1px);
    }
    70% {
        transform: translateY(-1px);
    }
    90% {
        transform: translateY(1px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* ============================================
   NAVEGACIÓN · OCULTAR PÁGINAS
   ============================================ */

   .nav-container a.nav-oculto {
    display: none;
}

/* ============================================
   ÚLTIMA BARRA · BOTÓN ACTIVO
   ============================================ */

.lastbar .item.activo {
    background-color: var(--lightHover);
    border-color: var(--text);
}

.lastbar .item.activo svg {
    color: var(--positive);
}

/* ============================================
   RESPONSIVE MÓVIL
   ============================================ */

@media (max-width: 768px) {
    .nav-section {
        width: 96%;
        margin-top: 12px;
        height: 44px;
    }

    .nav-container {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nav-container::-webkit-scrollbar {
        display: none;
    }

    .nav-container a {
        padding: 0 12px;
        font-size: 13px;
        flex-shrink: 0;
    }

    .nav-container a:hover,
    .nav-container a.act {
        padding: 0 13px;
    }

    main {
        width: 96%;
        gap: 12px;
    }

    /* Sidebar → franja horizontal con scroll */
    #sidebar,
    .sidebar-wrap {
        width: 100%;
        min-width: 0;
    }

    .sidebar-wrap {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .sidebar-wrap #sidebar {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        /* Mismo motivo que en escritorio: aire para el glow de los botones.
           El ancho/márgenes negativos de escritorio no aplican en fila. */
        margin-inline: 0;
        width: auto;
        padding: 8px 6px;
        gap: 6px;
        max-width: 100%;
    }

    .sidebar-wrap #sidebar button {
        min-width: 96px;
        min-height: 42px;
        justify-content: center;
        text-align: center;
        padding: 8px 12px;
        gap: 6px;
        flex-shrink: 0;
    }

    .sidebar-wrap:not(.sidebar-colapsado) #sidebar button:hover,
    .sidebar-wrap:not(.sidebar-colapsado) #sidebar button.act {
        padding-left: 12px;
    }

    .sidebar-wrap.sidebar-colapsado {
        width: 100%;
        min-width: 0;
    }

    .sidebar-wrap.sidebar-colapsado #sidebar button {
        min-width: 46px;
    }

    .sidebar-wrap .sidebar-toggle {
        flex-shrink: 0;
    }

    #panel {
        padding: 20px 16px;
        border-radius: 20px;
    }

    #panel h2 {
        font-size: 22px;
    }

    /* Lastbar: siempre operativo sin hover */
    .lastbar {
        width: 94%;
    }

    .lastbar .item {
        width: 40px;
        height: 40px;
        margin: 0;
    }

    .lastbar .item svg {
        visibility: visible;
        opacity: 1;
    }

    .lastbar .desact {
        opacity: 0.45;
    }
}

@media (max-width: 420px) {
    .logo-container,
    .user-container {
        width: 40px;
        flex-shrink: 0;
    }

    .nav-container {
        gap: 4px;
    }

    .nav-container a {
        padding: 0 8px;
        font-size: 12px;
    }

    .nav-container a:hover,
    .nav-container a.act {
        padding: 0 9px;
    }
}

/* ---- desde style.css ---- */

#app-content {
    position: relative;
    view-transition-name: app-content;
}

@view-transition {
    navigation: auto;
}

::view-transition-old(app-content),
::view-transition-new(app-content) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

::view-transition-old(app-content) {
    animation-name: page-out;
}

::view-transition-new(app-content) {
    animation-name: page-in;
}

@keyframes page-out {
    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}

/* ============================================
   TRANSICIÓN ENTRE DOCUMENTOS (login → dashboard)
   ============================================
   style.css lo cargan auth.html, reset-password.html, index.html y
   dashboard.html, y todos optan por @view-transition { navigation: auto }. El
   logo existe en los dos con el mismo id, así que darle un nombre lo convierte
   en el elemento compartido: en vez de fundir dos páginas enteras, el logo
   viaja del centro de la pantalla a la navbar y el resto se funde alrededor. */
#logo {
    view-transition-name: logo;
}

::view-transition-group(logo) {
    animation-duration: 420ms;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

::view-transition-old(root) {
    animation: root-out 200ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
    animation: root-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes root-out {
    to {
        opacity: 0;
    }
}

@keyframes root-in {
    from {
        opacity: 0;
    }
}

@keyframes page-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* ============================================
   LASTRAR · TRANSICIÓN ENTRE PÁGINAS
   ============================================
   Cada página monta una lastbar distinta y router.js la reconstruye con
   innerHTML. Sin nombre propio, #app-footer cae dentro del snapshot `root`
   y los botones viejos y nuevos se cruzan en un cross-fade difuso: se ve
   el doble de íconos durante 220 ms. Nombrándolo, sale del snapshot root,
   el grupo anima tamaño/posición (la barra se recentra sola) y cada estado
   se funde por separado. */
#app-footer {
    view-transition-name: app-footer;
}

::view-transition-group(app-footer) {
    animation-duration: 340ms;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

::view-transition-old(app-footer),
::view-transition-new(app-footer) {
    animation-duration: 340ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    overflow: clip;
}

/* Los items vienen colapsados a 12px y se abren a 40px. Encoger la imagen
   vieja hacia el centro en vez de dejarla al tamaño final evita el escalón
   visible cuando la página nueva tiene menos botones. */
::view-transition-old(app-footer) {
    animation-name: lastbar-out;
}

::view-transition-new(app-footer) {
    animation-name: lastbar-in;
}

@keyframes lastbar-out {
    to {
        opacity: 0;
        transform: scaleX(0.86);
    }
}

@keyframes lastbar-in {
    from {
        opacity: 0;
        transform: scaleX(0.86);
    }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-line,
    .skeleton-circle,
    .skeleton-pill,
    .skeleton-text,
    .skeleton-sidebar-icon,
    .skeleton-grafico-bloque {
        animation: none;
        background-image: none;
    }

    ::view-transition-old(app-content),
    ::view-transition-new(app-content) {
        animation: none;
    }

    ::view-transition-group(app-footer),
    ::view-transition-old(app-footer),
    ::view-transition-new(app-footer) {
        animation: none;
    }
}

.dashboard .movimientos-lista.scroll-fade,
.dashboard .favoritos-lista.scroll-fade,
.dashboard .metas-lista.scroll-fade,
.dashboard .pendientes-lista.scroll-fade,
.dashboard .ordenes-lista.scroll-fade,
.dashboard .estrategias-lista.scroll-fade,
.dashboard .distribucion-lista.scroll-fade,
.dashboard .programados-lista.scroll-fade,
.dashboard .alertas-lista.scroll-fade,
.lista-cards.scroll-fade,
.cuenta-detalle.scroll-fade,
.lista-posiciones.scroll-fade,
.pendientes-lista.scroll-fade,
.vencimientos-lista.scroll-fade,
.sidebar-wrap #sidebar.scroll-fade {
    --scroll-fade-top: 0px;
    --scroll-fade-bottom: 0px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-top), #000 calc(100% - var(--scroll-fade-bottom)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-top), #000 calc(100% - var(--scroll-fade-bottom)), transparent 100%);
}
.dashboard .movimientos-lista.scroll-fade.scroll-fade-top,
.dashboard .favoritos-lista.scroll-fade.scroll-fade-top,
.dashboard .metas-lista.scroll-fade.scroll-fade-top,
.dashboard .pendientes-lista.scroll-fade.scroll-fade-top,
.dashboard .ordenes-lista.scroll-fade.scroll-fade-top,
.dashboard .estrategias-lista.scroll-fade.scroll-fade-top,
.dashboard .distribucion-lista.scroll-fade.scroll-fade-top,
.dashboard .programados-lista.scroll-fade.scroll-fade-top,
.dashboard .alertas-lista.scroll-fade.scroll-fade-top,
.lista-cards.scroll-fade.scroll-fade-top,
.cuenta-detalle.scroll-fade.scroll-fade-top,
.lista-posiciones.scroll-fade.scroll-fade-top,
.pendientes-lista.scroll-fade.scroll-fade-top,
.vencimientos-lista.scroll-fade.scroll-fade-top,
.sidebar-wrap #sidebar.scroll-fade.scroll-fade-top {
    --scroll-fade-top: 18px;
}

.dashboard .movimientos-lista.scroll-fade.scroll-fade-bottom,
.dashboard .favoritos-lista.scroll-fade.scroll-fade-bottom,
.dashboard .metas-lista.scroll-fade.scroll-fade-bottom,
.dashboard .pendientes-lista.scroll-fade.scroll-fade-bottom,
.dashboard .ordenes-lista.scroll-fade.scroll-fade-bottom,
.dashboard .estrategias-lista.scroll-fade.scroll-fade-bottom,
.dashboard .distribucion-lista.scroll-fade.scroll-fade-bottom,
.dashboard .programados-lista.scroll-fade.scroll-fade-bottom,
.dashboard .alertas-lista.scroll-fade.scroll-fade-bottom,
.lista-cards.scroll-fade.scroll-fade-bottom,
.cuenta-detalle.scroll-fade.scroll-fade-bottom,
.lista-posiciones.scroll-fade.scroll-fade-bottom,
.pendientes-lista.scroll-fade.scroll-fade-bottom,
.vencimientos-lista.scroll-fade.scroll-fade-bottom,
.sidebar-wrap #sidebar.scroll-fade.scroll-fade-bottom {
    --scroll-fade-bottom: 18px;
}