/* =========================================================
   RESPONSIVE — utilidades mobile-first
   Breakpoints BS5: sm 576, md 768, lg 992, xl 1200, xxl 1400
   ========================================================= */

/* ---------- Tablas en mobile: scroll horizontal suave ---------- */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Encabezados de tabla: ellipsis en mobile para columnas largas */
@media (max-width: 767.98px) {
    .table td,
    .table th {
        white-space: nowrap;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .table td.text-wrap,
    .table th.text-wrap {
        white-space: normal;
        max-width: none;
    }
}

/* ---------- DataTables: ajustes mobile ---------- */
@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none;
        text-align: left;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0 !important;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
        width: 100%;
        margin-top: 0.5rem;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0.25rem 0.5rem;
    }
}

/* ---------- Sticky deshabilitado en mobile ---------- */
@media (max-width: 767.98px) {
    .sticky-md-top,
    .card.sticky-top {
        position: static !important;
        top: auto !important;
    }
}

/* ---------- Alerts fijos: tope mínimo seguro en mobile ---------- */
@media (max-width: 575.98px) {
    .message-wrapper,
    .alert-fixed {
        right: 10px !important;
        left: 10px !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
    }
}

/* ---------- Formularios: botones y acciones ---------- */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.btn-row > * {
    flex: 1 1 auto;
    min-width: 120px;
}

@media (max-width: 575.98px) {
    .btn-row > * {
        flex: 1 1 100%;
    }
}

/* Filas de formset (egresos, items): wrapean en mobile */
.formset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.formset-row > * {
    flex: 1 1 200px;
    min-width: 0;
}

.formset-row > .formset-row-action {
    flex: 0 0 auto;
}

/* Header de página: título + acciones, envuelve en mobile */
.page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.page-header > * {
    min-width: 0;
}

/* Footer: envuelve en mobile */
.app-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    text-align: center;
}

/* Navbar: ocultamos texto largo en mobile */
@media (max-width: 767.98px) {
    .navbar-text-hide-mobile {
        display: none !important;
    }
}

/* Imágenes sin restricción: img-fluid */
.img-fluid-restricted {
    max-width: 100%;
    height: auto;
}

/* Modal: fullscreen en mobile si lo necesita */
@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-fullscreen-sm-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
}