/******************************************/
/* 1. RESPONSIVE PRINCIPAL (max-width: 640.98px) */
/******************************************/

@media (max-width: 640.98px) /*and (max-device-aspect-ratio: 1/1)*/
{
    /* celular */

    .marco-factura-uno {
        flex-direction: column;
    }

    .marco-mitad-izquierda,
    .marco-mitad-derecha {
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }

    .marco-mitad-derecha {
        margin-left: 0 !important;
    }

    .grid {
        width: 100%;
        height: calc(100vh - 310px);
        border: 0px solid #CCC;

    }

    .gridConCabecera {
        width: 100%;
        height: calc(100vh - 428px);
        border: 0px solid #CCC;
    }



    .ancho {
        width: 99% !important;
    }

    .ancho-combo {
        width: 80% !important;
    }

    .oculta-icono {
        display: none;
    }


    .formulario,
    .formulariofactura,
    .formulariolistar,
    .formulariolistarGestion {
        /* background-color: #fff;*/
        border: 1px solid #ccc !important;
        border-radius: 3px !important;
        padding: 10px !important;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15) !important;
        width: 96% !important;
        max-width: 96% !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        margin-left: 2% !important;
        margin-right: 2% !important;
        overflow: hidden !important;
        height: 100% !important;
    }

/*    .formulario,
    .formulariofactura {
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
        width: 96%;
        margin: 2%;
        resize: both !important;
        overflow: hidden !important;
        height: 100% !important;
    }*/

    .alto-btn {
        height: 45px !important;
        margin: 5px 0 !important;
    }

    .margen-cel {
        margin: 3px !important;
    }

    .custom-dropdown-grid {
        width: 80px;
    }

    .no-expand-mobile {
        max-width: 120px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .my-custom-modal {
        max-width: 96%;
        border-radius: 5px;
        padding: 10px;
        background-color: #fff;
        margin-left: 2%;
        margin-right: 2%;
        margin-top: 20px
    }

    .my-custom-modal-busca {
        max-width: 96%;
        border-radius: 5px;
        padding: 20px;
        padding-top: 10px;
        background-color: #fff;
        margin-left: 2%;
        margin-right: 2%;
        margin-top: 30px; /* Espacio superior para bajar el título */
    }



    .marco-producto-foto {
        width: 100%;
    }

    /* Solo grillas sin clase personalizada */
    /* Para primera celda */
    body .rz-datatable:not([class*="gridBusqueda"]):not([class*="gridConCabecera"]) tbody tr td:first-child {
        border-top: 3px solid #dee2e6 !important;
    }

    /* Para última celda */
    body .rz-datatable:not([class*="gridBusqueda"]):not([class*="gridConCabecera"]) tbody tr td:last-child {
        border-bottom: 3px solid #dee2e6 !important;
    }

    .responsive-tabs .nav-item {
        flex: 0 0 50%; /* cada pestaña ocupa 100% */
    }

    .responsive-tabs .nav-link {
        width: 100%; /* botón igual al 100% */
    }

    div[style*="overflow: auto"] {
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
    }


    /* Agregar esto: */
    .page {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Scrollbar delgado solo en móvil */
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(0,0,0,0.2) transparent;
    }

    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }

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

    ::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.15);
        border-radius: 3px;
    }

}




/* Sección 16: MEDIA QUERIES (RESPONSIVE) */

@media (max-width: 801px) {
    /* celular */
    .ancho-toast {
        width: 320px !important;
    }
}

@media (max-width: 768px) {
    .card-resumen {
        padding: 1rem;
    }

    .card-resumen-icono {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .card-resumen-valor {
        font-size: 1.5rem;
    }

    .filtros-estado {
        justify-content: center;
    }

    .barra-progreso {
        width: 60px;
    }
}