/* MEJORAS PARA MODALES - BOTÓN CERRAR MEJORADO Y SIN MOVIMIENTO */
/* ALTA ESPECIFICIDAD PARA SOBRESCRIBIR OTROS CSS */

/* Mejorar botón de cerrar - Más visible y sin efectos de movimiento */
.modal .cerrar_modal,
footer .cerrar_modal,
.cerrar_modal {
    position: absolute !important;
    right: 15px !important;
    top: 15px !important;
    width: 45px !important;
    height: 45px !important;
    background: #dc3545 !important; /* Rojo más visible */
    border: 3px solid #dc3545 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 1001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 24px !important;
    font-weight: bold !important;
    font-family: Arial, sans-serif !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4) !important; /* Sombra para destacar */
    transition: opacity 0.2s ease !important; /* Solo transición de opacidad */
    transform: none !important; /* Eliminar cualquier transform */
}

/* Hover sin movimiento - Solo cambio de opacidad */
.modal .cerrar_modal:hover,
footer .cerrar_modal:hover,
.cerrar_modal:hover {
    opacity: 0.85 !important;
    background: #c82333 !important;
    transform: none !important; /* Asegurar que no hay transform */
    scale: none !important; /* Eliminar scale si existe */
}

.modal .cerrar_modal:focus,
footer .cerrar_modal:focus,
.cerrar_modal:focus {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.4) !important;
    transform: none !important;
}

/* Asegurar que el ícono × sea visible y bien centrado */
.modal .cerrar_modal span,
footer .cerrar_modal span,
.cerrar_modal span {
    line-height: 1 !important;
    font-size: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Variante alternativa con fondo blanco y borde rojo (opcional) */
.cerrar_modal.variante-blanca {
    background: white !important;
    color: #dc3545 !important;
    border: 3px solid #dc3545 !important;
}

.cerrar_modal.variante-blanca:hover {
    background: #f8f9fa !important;
    opacity: 1 !important;
}

/* Mejorar contraste en modales oscuros */
.modal-content.dark .cerrar_modal {
    background: #28a745 !important;
    border-color: #28a745 !important;
}

/* Mejorar ancho del modal de productos */
#modalProducto .modal-lg {
    max-width: 90%;
}

#modalProducto .modal-body {
    max-height: 80vh;
    overflow-y: auto;
}

/* Mejorar el scroll de las tablas */
.js-pscroll {
    max-height: 400px;
    overflow-y: auto;
}

/* Estilos adicionales para mejorar visibilidad general */
.modal-content {
    position: relative; /* Asegurar que el botón se posicione correctamente */
}

/* Botón de cerrar específico para modal de categorías */
#modalCategorias .cerrar_modal {
    background: #007bff !important; /* Azul para categorías */
    border-color: #007bff !important;
}

#modalCategorias .cerrar_modal:hover {
    opacity: 0.85 !important;
    background: #0056b3 !important;
}

/* Botón de cerrar específico para modal de productos */
#modalProducto .cerrar_modal {
    background: #28a745 !important; /* Verde para productos */
    border-color: #28a745 !important;
}

#modalProducto .cerrar_modal:hover {
    opacity: 0.85 !important;
    background: #1e7e34 !important;
}

/* Responsive - En pantallas pequeñas hacer el botón más grande */
@media (max-width: 768px) {
    .modal .cerrar_modal,
    footer .cerrar_modal,
    .cerrar_modal {
        width: 50px !important;
        height: 50px !important;
        right: 10px !important;
        top: 10px !important;
        font-size: 28px !important;
    }
    
    .modal .cerrar_modal span,
    footer .cerrar_modal span,
    .cerrar_modal span {
        font-size: 32px !important;
    }
}

/* Eliminación explícita de efectos de movimiento que puedan venir de otros CSS */
.modal .cerrar_modal,
footer .cerrar_modal,
.cerrar_modal {
    animation: none !important;
    transition: opacity 0.2s ease !important; /* Solo opacidad */
}

/* Asegurar que no haya transforms en hover de ningún tipo */
.modal .cerrar_modal:hover,
footer .cerrar_modal:hover,
.cerrar_modal:hover,
.modal .cerrar_modal:active,
footer .cerrar_modal:active,
.cerrar_modal:active {
    transform: none !important;
    scale: none !important;
    translate: none !important;
    animation: none !important;
}