/* =========================================
    VARIABLES CSS
   ========================================= */

:root {
    --index-background-image: '';
    --index-background-color: var(--color-primary-50);
    --color-text-section: var(--color-default-60);
    --color-entry-balance: var(--color-success-50);
    --color-process-balance: var(--color-default-50);
    --color-exit-balance: var(--color-danger-50);
    --bg-backdrop-modal: var(--color-primary-100);
}

    :root[data-ds-theme="dark"] {
        --index-background-color: var(--color-primary-20);
        --color-text-section: var(--color-default-100);
        --color-entry-balance: var(--color-success-50);
        --color-process-balance: var(--color-default-90);
        --color-exit-balance: var(--color-danger-50);
        --bg-backdrop-modal: var(--color-primary-10);
        /* Override de variables Bootstrap para formularios.
           Bootstrap solo responde a data-bs-theme="dark"; el DS usa su propio
           atributo, por lo que estos tokens nunca se actualizan solos. */
        --bs-body-color: var(--color-default-100);
        --bs-body-bg: var(--color-default-10);
        --bs-secondary-color: var(--color-default-60);
        --bs-border-color: var(--color-default-30);
        --bs-tertiary-bg: var(--color-default-20);
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--color-danger-60);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--color-default-100|);
}

    .blazor-error-boundary::after {
        content: "Se ha producido un error."
    }

/* =========================================
    UTILIDADES GENERALES
   ========================================= */
.shadow-sm {
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(var(--ds-dropdown-border-color-rgb), 0.075);
}

.text-section {
    color: var(--color-text-section);
    letter-spacing: 0.05em;
}

.rounded-nav-bar-4 {
    border-radius: var(--bs-border-radius-xl) var(--bs-border-radius-xl) 0rem 0rem !important;
}

/* =========================================
    NAVEGACIÓN MÓVIL (Bottom Bar)
   ========================================= */
.responsive-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--color-default-10);
    z-index: 1000;
    padding: 0.25rem 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.nav-item-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--color-default-60);
    font-size: 0.7rem;
    padding: 0;
    transition: all 0.2s;
    cursor: pointer;
}

    .nav-item-link i {
        font-size: 1rem;
        margin-bottom: 0.2rem;
        color: var(--color-primary-50);
        padding: 0.4rem 1rem;
        border-radius: 20px;
        transition: all 0.2s;
        width: 50px;
    }

    .nav-item-link:hover i,
    .nav-item-link.active i {
        background-color: var(--color-primary-10);
        color: var(--color-primary-60);
    }

    .nav-item-link:hover span,
    .nav-item-link.active span {
        font-weight: bold;
        color: var(--color-default-100);
    }

/* =========================================
    LISTAS MÓVIL
   ========================================= */
/* Contenedor de lista */
.list-section {
    background: var(--color-default-10);
    border-radius: 1rem;
    overflow: hidden;
}

/* Renglones estándar */
.list-row {
    display: flex;
    align-items: center;
    padding: 0.25rem .6rem;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--bxl-bg-body);
    background: transparent;
    transition: background 0.2s;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

.list-row-movement {
    display: flex;
    align-items: center;
    padding: 0.25rem .6rem;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--bxl-bg-body);
    background: transparent;
    transition: background 0.2s;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

    .list-row:last-child,
    .list-row-movement:last-child {
        border-bottom: none;
    }

    .list-row:hover,
    .list-row-movement:hover {
        background-color: var(--color-primary-10);
    }

/* Elementos de lista */
.list-icon {
    width: 25px;
    height: 25px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-primary-50);
    margin-right: 0.25rem;
    flex-shrink: 0;
}

    .list-icon i {
        color: var(--color-primary-50);
    }

.list-content {
    flex-grow: 1;
    min-width: 0;
    /* Permite que el truncate funcione */
}

.list-arrow {
    color: var(--color-primary-50);
    font-size: 0.75rem;
}

/* Renglón compacto (KeyValue) */
.list-row-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-primary-10);
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    color: var(--color-default-100);
    text-decoration: none;
}

    .list-row-compact:last-child {
        border-bottom: none;
    }

/* =========================================
    OFFCANVAS / BOTTOM SHEET
   ========================================= */
.bottom-sheet-responsive {
    width: 100% !important;
}

/*
    Aceleración GPU: delega transform y opacity al compositor del navegador.
    Previene jank en dispositivos móviles de gama media/baja.
*/
.offcanvas.bottom-sheet-responsive {
    will-change: transform;
}

    /*
    Apertura: suave y natural (ease-out → desacelera al llegar).
    Bootstrap variable override — sin !important para respetar la cascada.
*/
    .offcanvas.bottom-sheet-responsive:not(.hiding) {
        --bs-offcanvas-transition: transform 0.28s cubic-bezier(0.0, 0.0, 0.2, 1);
    }

    /*
    Cierre ultra-rápido: Bootstrap añade .hiding en cuanto empieza el dismiss.
    ease-in (aceleración de salida) → el panel sale disparado de pantalla.
    200ms es el límite perceptivo de "inmediato" en mobile UX.
*/
    .offcanvas.bottom-sheet-responsive.hiding {
        transition: transform 0.2s cubic-bezier(0.4, 0.0, 1, 1) !important;
    }

/*
    Backdrop: cierre ~30% más rápido que el panel para que no "bloquee" la vista.
    Al estar en .hiding el backdrop ya tiene opacity:0 como destino, con esta
    duración llega antes de que el panel termine de salir.
*/
.offcanvas-backdrop.show {
    will-change: opacity;
}

.offcanvas.bottom-sheet-responsive.hiding ~ .offcanvas-backdrop,
.offcanvas-backdrop.hiding {
    transition: opacity 0.15s linear !important;
}

/* =========================================
    CARRUSEL DE FILTROS (Scroll Horizontal)
   ========================================= */
.scroll-container-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: inherit;
}

.scroll-horizontal {
    display: flex;
    flex-wrap: nowrap;
    /* OBLIGATORIO: Fuerza una sola fila */
    overflow-x: auto;
    /* Habilita scroll horizontal */
    width: 100%;
    /* UX: Suavidad en móviles */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* UX: Cursor para indicar que hay contenido deslizable */
    cursor: grab;
    /* Espaciado para que no se corten sombras */
    padding-bottom: 5px;
    /* Evita selección de texto al arrastrar */
    user-select: none;
}

    .scroll-horizontal:active {
        cursor: grabbing;
    }

.scroll-item {
    flex: 0 0 auto;
    /* No encoger ni estirar */
    width: auto;
    max-width: 100%;
}

/*
    =========================================
    MOVIMIENTOS
    =========================================
*/

.text-entry-balance {
    color: var(--color-entry-balance)
}

.text-process-balance {
    color: var(--color-process-balance)
}

.text-exit-balance {
    color: var(--color-exit-balance)
}


/* =========================================
    MEDIA QUERIES - TABLET (576px)
   ========================================= */
@media (min-width: 576px) {
    .bottom-sheet-responsive {
        /* Centrado absoluto horizontal */
        left: 50% !important;
        transform: translateX(-50%) !important;
        /* Anchos estándar de Bootstrap Containers */
        max-width: 540px;
    }
}

/* =========================================
    MEDIA QUERIES - ESCRITORIO (768px)
   ========================================= */
@media (min-width: 768px) {

    /* Utilidades */
    .rounded-nav-bar-4 {
        border-radius: var(--bs-border-radius-xl) !important;
    }

    /* Navegación escritorio */
    .responsive-nav {
        position: static;
        box-shadow: none;
        border: none;
        background: transparent;
        justify-content: flex-start;
        gap: 1rem;
        padding: .25rem .5rem .25rem .5rem !important;
        margin-bottom: 1rem !important;
    }

    .nav-item-link {
        flex-direction: row;
        font-size: 1rem;
        padding: 0.5rem 1rem;
        border-radius: 2rem;
        /* Estilo píldora completa */
    }

        .nav-item-link i {
            margin-bottom: 0;
            margin-right: 0.5rem;
            font-size: 1.1rem;
            padding: 0;
            background-color: transparent !important;
            border-radius: 0;
            width: auto;
        }

        .nav-item-link:hover {
            background-color: var(--color-primary-10);
            /* Fondo en todo el botón, no solo el icono */
        }

            .nav-item-link:hover span,
            .nav-item-link:hover i {
                color: var(--color-primary-60);
                font-weight: normal;
            }

        .nav-item-link.active {
            background-color: var(--color-primary-10);
            color: var(--color-primary-60);
            font-weight: bold;
        }

            .nav-item-link.active i {
                color: var(--color-primary-60);
            }

    /* Listas escritorio */
    .list-row {
        padding: 1rem;
        font-size: 1rem;
    }

    .list-row-movement {
        padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
        font-size: 1rem;
    }

    .list-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        margin-right: 1rem;
    }

    .list-arrow {
        font-size: 1rem;
    }

    .list-row-compact {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    /* Offcanvas / Bottom Sheet */
    .bottom-sheet-responsive {
        max-width: 720px;
    }

    /* Scroll horizontal - Ocultar barra en móvil */
    .scroll-horizontal {
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

        .scroll-horizontal::-webkit-scrollbar {
            display: none;
            /* Chrome/Safari */
        }
}

/* =========================================
    MEDIA QUERIES - ESCRITORIO GRANDE (769px)
   ========================================= */
@media (min-width: 769px) {

    /* Scroll horizontal - Barra delgada en escritorio */
    .scroll-horizontal {
        scrollbar-width: thin;
        scrollbar-color: var(--bxl-color-scroll-thumb) var(--bxl-color-scroll-bg);
    }

        .scroll-horizontal::-webkit-scrollbar {
            height: 6px;
            /* Altura de la barra */
        }

        .scroll-horizontal::-webkit-scrollbar-track {
            background: var(--bxl-color-scroll-bg);
            border-radius: 1.75px;
        }

        .scroll-horizontal::-webkit-scrollbar-thumb {
            background: var(--bxl-color-scroll-thumb);
            border-radius: 1.75px;
        }

            .scroll-horizontal::-webkit-scrollbar-thumb:hover {
                background: var(--bxl-color-scroll-thumb-hover);
            }
}

/* =========================================
    MEDIA QUERIES - DESKTOP (992px)
   ========================================= */
@media (min-width: 992px) {
    .bottom-sheet-responsive {
        max-width: 960px;
    }
}

/* =========================================
    MEDIA QUERIES - DESKTOP LARGE (1200px)
   ========================================= */
@media (min-width: 1200px) {
    .bottom-sheet-responsive {
        max-width: 1140px;
    }
}

/* =========================================
    MEDIA QUERIES - DESKTOP XL (1400px)
   ========================================= */
@media (min-width: 1400px) {
    .bottom-sheet-responsive {
        max-width: 1320px;
    }
}

/* =========================================
    COMPONENTES SEGUROS
   ========================================= */

/* Agrega esto en el global.css de tu aplicación Host */
.bxl-secure-iframe {
    width: 100%; /* Normalmente queremos que abarque el ancho del contenedor padre */
    max-width: 100%;
    border: none; /* Sin bordes feos de iframe */
    overflow: hidden; /* Previene barras de scroll internas */
    /* Alto por defecto antes de que el evento de JS responda (ej. tamaño base de la tarjeta) */
    height: 208px;
    /* MAGIA: Cuando JS actualice el height, CSS lo animará suavemente */
    transition: height 0.25s ease-out, width 0.25s ease-out;
}

/* =========================================
    ADMINISTRADOR DE FUNCIONALIDADES
   ========================================= */

/* Transición de fondo al hacer hover sobre ítems de lista. */
.fm-list-item {
    transition: background-color var(--ease-out-duration, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

/* Tipografía compacta para badges de estado (Activo / Inactivo). */
.fm-badge {
    font-size: 0.60rem;
}

/* Tipografía y familia para rutas de propiedades en monospace. */
.fm-path {
    font-size: 0.65rem;
    font-family: var(--bs-font-monospace);
}

.bxl-no-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}