/* Estilos responsivos para wire-elements/modal */

/* Contenedor principal del modal */
.wire-elements-modal-container {
    max-width: 95vw !important;
    width: 95vw !important;
}

/* Responsividad para diferentes tamaños de pantalla */
@media (max-width: 640px) {
    /* Pantallas pequeñas (móviles) */
    .wire-elements-modal-container {
        max-width: 98vw !important;
        width: 98vw !important;
        margin: 0 1vw !important;
    }
    
    .wire-elements-modal-container .modal-content {
        padding: 0.5rem !important;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    /* Tablets pequeñas */
    .wire-elements-modal-container {
        max-width: 90vw !important;
        width: 90vw !important;
        margin: 0 5vw !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablets grandes */
    .wire-elements-modal-container {
        max-width: 85vw !important;
        width: 85vw !important;
        margin: 0 7.5vw !important;
    }
}

@media (min-width: 1025px) {
    /* Pantallas de escritorio */
    .wire-elements-modal-container {
        max-width: 80vw !important;
        width: 80vw !important;
        margin: 0 10vw !important;
    }
}

/* Mejoras para el contenido del modal */
.wire-elements-modal-container .modal-body {
    overflow-x: auto;
    word-wrap: break-word;
}

/* CORRECCIÓN: Permitir que las tablas mantengan su comportamiento natural */
.wire-elements-modal-container table {
    width: 100%;
    /* Eliminar propiedades que interfieren con el layout natural */
    min-width: auto;
    overflow-x: visible;
    display: table; /* Mantener display de tabla normal */
}

/* CORRECCIÓN: Permitir que thead y tbody mantengan su estructura natural */
.wire-elements-modal-container table thead,
.wire-elements-modal-container table tbody {
    display: table-header-group; /* thead natural */
    display: table-row-group; /* tbody natural */
    width: 100%;
}

/* CORRECCIÓN: Permitir que las filas mantengan su comportamiento natural */
.wire-elements-modal-container table tr {
    display: table-row; /* Comportamiento natural de fila */
}

/* CORRECCIÓN: Permitir que las celdas mantengan su comportamiento natural */
.wire-elements-modal-container table th,
.wire-elements-modal-container table td {
    display: table-cell; /* Comportamiento natural de celda */
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    vertical-align: top;
    /* NO forzar anchos específicos - dejar que la tabla se ajuste naturalmente */
}

/* CORRECCIÓN: Respetar las clases de ancho específicas del framework */
.wire-elements-modal-container table .w-25 {
    width: 25% !important;
}

.wire-elements-modal-container table .text-right {
    text-align: right !important;
}

/* Mejorar la visualización en pantallas pequeñas */
@media (max-width: 640px) {
    .wire-elements-modal-container .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .wire-elements-modal-container .btn-group .btn {
        border-radius: 0.375rem !important;
        margin-bottom: 0.25rem;
    }
    
    .wire-elements-modal-container .form-control {
        font-size: 16px; /* Evita zoom en iOS */
    }
    
    /* CORRECCIÓN: En móviles, permitir scroll horizontal natural */
    .wire-elements-modal-container .table-responsive {
        overflow-x: auto;
    }
    
    .wire-elements-modal-container .table-responsive table {
        min-width: auto; /* Permitir que la tabla se ajuste naturalmente */
        white-space: normal; /* Permitir saltos de línea naturales */
    }
    
    .wire-elements-modal-container table th,
    .wire-elements-modal-container table td {
        padding: 0.5rem 0.25rem;
        font-size: 0.875rem;
        white-space: normal; /* Permitir saltos de línea */
    }
    
    .wire-elements-modal-container table .text-right {
        text-align: center !important;
    }
}

/* Asegurar que los botones sean responsivos */
.wire-elements-modal-container .btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mejorar el espaciado en pantallas pequeñas */
@media (max-width: 640px) {
    .wire-elements-modal-container .p-0 {
        padding: 0.5rem !important;
    }
    
    .wire-elements-modal-container .pl-3 {
        padding-left: 0.5rem !important;
    }
    
    .wire-elements-modal-container .pr-3 {
        padding-right: 0.5rem !important;
    }
    
    .wire-elements-modal-container .mb-2 {
        margin-bottom: 0.5rem !important;
    }
}

/* Asegurar que las paginaciones sean responsivas */
.wire-elements-modal-container .pagination {
    justify-content: center;
    flex-wrap: wrap;
}

.wire-elements-modal-container .pagination .page-link {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

/* Asegurar que los enlaces sean táctiles en dispositivos móviles */
.wire-elements-modal-container a,
.wire-elements-modal-container button {
    min-height: 44px;
    min-width: 44px;
}

/* Mejorar la accesibilidad del modal */
.wire-elements-modal-container[aria-modal="true"] {
    outline: none;
}

/* Posicionamiento responsivo del modal */
.wire-elements-modal-container {
    /* Eliminar posicionamiento absoluto problemático */
    position: relative;
    /* Centrado vertical solo en dispositivos móviles */
    top: auto;
    transform: none;
}

/* En móviles, aplicar centrado vertical */
@media (max-width: 640px) {
    .wire-elements-modal-container {
        top: 0;
        margin-top: 1rem;
    }
}

/* En tablets y escritorio, usar márgenes automáticos para centrado */
@media (min-width: 641px) {
    .wire-elements-modal-container {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

/* Asegurar que el modal no se salga de la pantalla */
.wire-elements-modal-container {
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

/* Mejorar el scroll en dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
    .wire-elements-modal-container {
        -webkit-overflow-scrolling: touch;
    }
}

/* CORRECCIÓN: Asegurar que las tablas con clases específicas mantengan su alineamiento natural */
.wire-elements-modal-container .table-responsive {
    overflow-x: auto;
}

.wire-elements-modal-container .table-responsive table {
    margin-bottom: 0;
}

/* CORRECCIÓN: Permitir que los botones en las celdas de acción mantengan su tamaño natural */
.wire-elements-modal-container table td:last-child .btn {
    min-width: auto;
    width: auto;
    padding: 0.375rem 0.75rem;
}