/* Estilos para el modal */
.custom-modal {
    display: none; /* Por defecto oculto */
    position: fixed; 
    z-index: 1000; /* Asegurar que el modal esté por encima de otros elementos */
    left: 50%; /* Centrar horizontalmente */
    top: 50%; /* Centrar verticalmente */
    transform: translate(-50%, -50%); /* Centrar completamente */
    width: 80%; /* Ancho del modal */
    max-width: 600px; /* Ancho máximo */
    background-color: #fff; /* Fondo blanco */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Sombra suave */
    overflow: hidden; /* Evitar que el contenido del modal se desborde */
}

/* Estilos para el contenido del modal */
.custom-modal-content img {
    display: block; /* Asegurar que la imagen sea un elemento de bloque */
    width: 100%; /* Redimensionar la imagen al 100% del contenedor */
    max-width: 100%; /* Asegurar que la imagen no exceda el ancho del contenedor */
    height: auto; /* Altura automática para mantener la proporción */
}

/* Estilos para el fondo oscurecido cuando el modal está abierto */
.custom-modal-open header, .custom-modal-open body, .custom-modal-open footer {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente */
    z-index: 999; /* Asegurar que el footer esté por encima del fondo oscurecido */
}

.custom-modal-open html {
    overflow: hidden; /* Evitar desplazamiento de la página */
    position: relative; /* Establecer posición relativa para los estilos z-index */
}

.custom-modal-open html::before {
    content: ""; /* Pseudoelemento para cubrir toda la página */
    position: fixed; /* Fijar posición */
    top: 0; /* Alinear con la parte superior */
    left: 0; /* Alinear con la izquierda */
    width: 100%; /* Ancho completo */
    height: 100%; /* Altura completa */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente */
    z-index: 998; /* Colocar por debajo del modal pero por encima del contenido */
}

/* Estilos para el fondo oscurecido */
.custom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
    z-index: 999; /* Colocar debajo del modal pero por encima del contenido */
}

/* Estilos para el botón de cerrar */
.custom-close {
    color: #555; /* Color del icono de cierre */
    position: absolute;
    top: 10px;
    right: 10px; /* Alejar del borde derecho */
    font-size: 25px;
    font-weight: bold;
    cursor: pointer;
}

#overlayModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Color semi-transparente */
    z-index: 999; /* Asegura que esté encima de otros elementos */
    display: none; /* Oculta la capa inicialmente */
}
/* Estilos para el fondo oscurecido cuando el modal está abierto */
.custom-modal-open .topheader {
    box-shadow: none; /* Eliminar la sombra del encabezado */
    z-index: 999; /* Asegurar que el encabezado esté por encima del fondo oscurecido */
}