/* Ajustes de presentacion para movil (<768px). Solo media queries: en escritorio no aplica nada. */
@media (max-width: 767.98px) {

    /* Titulos principales mas contenidos (equivale a fs-3) */
    h1 {
        font-size: calc(1.3rem + 0.6vw);
    }

    /* Padding compacto en tarjetas */
    .card-body {
        padding: 0.75rem;
    }

    /* Botones de accion de tablas a tamano tactil */
    .table .btn-sm {
        min-height: 38px;
        min-width: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* DataTables sin desbordar la pantalla (DataTables 2 usa .dt-container) */
    .dataTables_wrapper,
    div.dt-container {
        overflow-x: auto;
        max-width: 100%;
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* Botoneras de cabecera (show): que envuelvan sin pegarse */
    .btn-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .btn-toolbar .btn-group {
        margin-right: 0 !important;
    }

    /* Boton hamburguesa: area tactil minima de 44px */
    .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
        padding: .5rem .75rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Items de dropdown de la navbar: filas mas altas para el dedo */
    .navbar-collapse .dropdown-item {
        padding-top: .65rem;
        padding-bottom: .65rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Controles de DataTables (buscador, longitud, paginacion, export).
       DataTables 2 usa .dt-search/.dt-length/.dt-paging; se mantienen los
       nombres de DataTables 1 (.dataTables_*) por si queda alguna tabla legacy. */
    div.dt-container div.dt-search input,
    div.dt-container div.dt-length select,
    .dataTables_filter input,
    .dataTables_length select {
        min-height: 38px;
    }

    div.dt-container div.dt-search,
    .dataTables_filter {
        width: 100%;
    }

    div.dt-container div.dt-search input,
    .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .dt-buttons .btn,
    div.dt-container div.dt-paging .page-link,
    .dataTables_paginate .page-link {
        min-height: 38px;
        min-width: 38px;
    }

    /* Botones de modal-footer a tamano tactil */
    .modal-footer .btn {
        min-height: 44px;
    }
}