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

/* Contenedor principal del modal */
.wire-elements-modal-container {
    width: 100% !important;
    max-width: min(42rem, 95vw); /* Ancho base por defecto (2xl) */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* En móviles, modal adaptado a la pantalla */
@media (max-width: 640px) {
    .wire-elements-modal-container {
        width: 96vw !important;
        max-width: 96vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .wire-elements-modal-container .modal-content {
        padding: 0.5rem !important;
    }
}

/* Anchos gobernados por modalMaxWidth() en componentes Livewire (Medidas Bootstrap y extendidas) */
@media (min-width: 641px) {
    /* sm / modal-sm: 300px (Bootstrap modal-sm) */
    .wire-elements-modal-container[data-max-width="sm"],
    .wire-elements-modal-container[data-max-width="modal-sm"],
    .wire-elements-modal-container[data-max-width="sm-overflow-visible"],
    .wire-elements-modal-container.sm\:max-w-sm,
    .wire-elements-modal-container[class*="sm:max-w-sm"],
    .wire-elements-modal-container.max-w-sm,
    .wire-elements-modal-container.modal-sm {
        width: 300px !important;
        max-width: min(300px, 95vw) !important;
    }

    /* md / modal-md: 500px (Bootstrap modal-md / modal estándar) */
    .wire-elements-modal-container[data-max-width="md"],
    .wire-elements-modal-container[data-max-width="modal-md"],
    .wire-elements-modal-container.sm\:max-w-md,
    .wire-elements-modal-container[class*="sm:max-w-md"],
    .wire-elements-modal-container.max-w-md,
    .wire-elements-modal-container.modal-md {
        width: 500px !important;
        max-width: min(500px, 95vw) !important;
    }

    /* lg / modal-lg: 800px (Bootstrap modal-lg) */
    .wire-elements-modal-container[data-max-width="lg"],
    .wire-elements-modal-container[data-max-width="modal-lg"],
    .wire-elements-modal-container.md\:max-w-lg,
    .wire-elements-modal-container[class*="md:max-w-lg"],
    .wire-elements-modal-container.max-w-lg,
    .wire-elements-modal-container.modal-lg {
        width: 800px !important;
        max-width: min(800px, 95vw) !important;
    }

    /* xl / modal-xl: 1140px (Bootstrap modal-xl) */
    .wire-elements-modal-container[data-max-width="xl"],
    .wire-elements-modal-container[data-max-width="modal-xl"],
    .wire-elements-modal-container.md\:max-w-xl,
    .wire-elements-modal-container[class*="md:max-w-xl"],
    .wire-elements-modal-container.max-w-xl,
    .wire-elements-modal-container.modal-xl {
        width: 1140px !important;
        max-width: min(1140px, 95vw) !important;
    }

    /* 2xl: 1200px */
    .wire-elements-modal-container[data-max-width="2xl"],
    .wire-elements-modal-container.lg\:max-w-2xl,
    .wire-elements-modal-container[class*="lg:max-w-2xl"],
    .wire-elements-modal-container.max-w-2xl {
        width: 1200px !important;
        max-width: min(1200px, 95vw) !important;
    }

    /* 3xl: 1300px */
    .wire-elements-modal-container[data-max-width="3xl"],
    .wire-elements-modal-container.lg\:max-w-3xl,
    .wire-elements-modal-container[class*="lg:max-w-3xl"],
    .wire-elements-modal-container.max-w-3xl {
        width: 1300px !important;
        max-width: min(1300px, 95vw) !important;
    }

    /* 4xl: 1400px */
    .wire-elements-modal-container[data-max-width="4xl"],
    .wire-elements-modal-container.xl\:max-w-4xl,
    .wire-elements-modal-container[class*="xl:max-w-4xl"],
    .wire-elements-modal-container.max-w-4xl {
        width: 1400px !important;
        max-width: min(1400px, 95vw) !important;
    }

    /* 5xl: 88vw */
    .wire-elements-modal-container[data-max-width="5xl"],
    .wire-elements-modal-container.xl\:max-w-5xl,
    .wire-elements-modal-container[class*="xl:max-w-5xl"],
    .wire-elements-modal-container.max-w-5xl {
        width: 88vw !important;
        max-width: 92vw !important;
    }

    /* 6xl: 92vw */
    .wire-elements-modal-container[data-max-width="6xl"],
    .wire-elements-modal-container.\32xl\:max-w-6xl,
    .wire-elements-modal-container[class*="2xl:max-w-6xl"],
    .wire-elements-modal-container.max-w-6xl {
        width: 92vw !important;
        max-width: 95vw !important;
    }

    /* 7xl: 95vw (ancho amplio / pantalla completa) */
    .wire-elements-modal-container[data-max-width="7xl"],
    .wire-elements-modal-container.\32xl\:max-w-7xl,
    .wire-elements-modal-container[class*="2xl:max-w-7xl"],
    .wire-elements-modal-container.max-w-7xl {
        width: 95vw !important;
        max-width: 96vw !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;
}

/* Enlaces y botones en modales */
.wire-elements-modal-container a,
.wire-elements-modal-container button {
    min-height: auto;
}

/* 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;
}