/* =========================================================================
   Finanzas — capa móvil (teléfono < 768px).
   Archivo estático servido tal cual (no pasa por Vite), así se despliega con
   git pull. Solo afecta presentación en pantallas chicas; el diseño de PC
   (>= 768px) queda intacto.
   ========================================================================= */

/* --- Fix: el sidebar del tema arranca visible (margin-left:0) y solo se
   oculta cuando el JS agrega .sidebar-hidden, provocando un "flash" del menú
   en cada navegación. Aquí lo forzamos fuera de pantalla por defecto en móvil
   (hasta el breakpoint del sidebar, 1140px) salvo cuando está abierto a
   propósito (.sidebar-enable). Así dejar de aparecer al cambiar de pantalla. */
@media (max-width: 1139.98px) {
    html:not(.sidebar-enable) .main-nav {
        margin-left: calc(var(--bs-main-nav-width) * -1);
    }

    .page-container {
        margin-left: 0 !important;
    }

    /* Al abrir el menú "Más", ocultamos la barra inferior para que no se encime. */
    html.sidebar-enable .finance-bottom-nav {
        display: none;
    }
}

/* --- Barra inferior de pestañas ----------------------------------------- */
.finance-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
    padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom, 0px));
    background: var(--bs-body-bg, #0f172a);
    border-top: 1px solid var(--bs-border-color, rgba(148, 163, 184, .25));
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
}

.finance-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
    padding: .35rem .25rem;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color, #94a3b8);
    font-size: .68rem;
    line-height: 1;
    text-decoration: none;
    text-align: center;
}

.finance-bottom-nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finance-bottom-nav-item svg,
.finance-bottom-nav-item [data-lucide] {
    width: 22px;
    height: 22px;
}

.finance-bottom-nav-item.active {
    color: var(--bs-primary, #22b956);
    font-weight: 600;
}

/* Botón central "Capturar" elevado */
.finance-bottom-nav-capture {
    color: var(--bs-primary, #22b956);
}

.finance-bottom-nav-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-top: -22px;
    margin-bottom: 2px;
    border-radius: 50%;
    background: var(--bs-primary, #22b956);
    color: #fff;
    box-shadow: 0 6px 16px rgba(34, 185, 86, .45);
}

.finance-bottom-nav-fab svg,
.finance-bottom-nav-fab [data-lucide] {
    width: 24px;
    height: 24px;
}

/* =========================================================================
   Ajustes solo para teléfono.
   ========================================================================= */
@media (max-width: 767.98px) {
    /* Que la barra inferior no tape el contenido ni el footer. */
    .page-content {
        padding-bottom: 5.25rem !important;
    }

    .footer {
        margin-bottom: 4.5rem;
    }

    /* Tarjetas más compactas y de borde a borde para aprovechar el ancho. */
    .page-content .card {
        border-radius: .6rem;
    }

    .page-content .card-body {
        padding: .85rem;
    }

    /* Targets de toque cómodos en formularios. */
    .page-content .form-control,
    .page-content .form-select {
        min-height: 44px;
        font-size: 1rem; /* evita el zoom automático de iOS al enfocar */
    }

    .page-content .btn {
        min-height: 42px;
    }

    /* Botones de acción en fila no se encimen. */
    .page-content .btn-sm {
        min-height: 36px;
    }

    /* Encabezados un poco más chicos. */
    .page-content h4.fw-semibold {
        font-size: 1.15rem;
    }

    /* Filas/tarjetas móviles de listas: separadores claros. */
    .finance-mobile-list .finance-mobile-row:last-child {
        border-bottom: 0 !important;
    }

    /* Resumen: una tarjeta por fila y sin el panel de tamaño 1/2/3/4 del modo
       Diseño (no tiene sentido en teléfono; el reordenar y ocultar sí sirven). */
    .finance-dashboard-grid .dashboard-widget {
        flex: 0 0 100% !important;
        min-width: 0;
        width: 100% !important;
        max-width: 100% !important;
    }

    .finance-dashboard-grid .dashboard-widget-size-panel {
        display: none !important;
    }

    /* La gráfica mensual tiene hasta ocho importes que no caben legibles en
       una sola fila. Su desplazamiento debe quedarse dentro de la tarjeta para
       que nunca ensanche ni desplace horizontalmente toda la página. */
    .finance-monthly-income-chart-scroll {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .finance-monthly-income-chart {
        min-width: max-content;
    }

    /* Hero del Resumen: pastillas a ancho completo para que no se aprieten. */
    .finance-hero .finance-hero-pill {
        flex: 1 1 100%;
        min-width: 0;
    }
}