/* Estilos del modal */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Fijo en la pantalla */
    z-index: 1000; /* Por encima de otros elementos */
    left: 0;
    top: 0;
    width: 100%; /* Ancho completo */
    height: 100%; /* Alto completo */
    overflow: hidden; /* Ocultar el overflow del modal en general */
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semi-transparente */
}

/* Estilos del contenido del modal */
.modal-content {
    background-color: #fff; /* Fondo blanco */
    margin: 5% auto; /* Margen desde la parte superior y centrado */
    padding: 20px; /* Espaciado interno para el contenido del modal */
    border: 1px solid #888; /* Borde gris */
    border-radius: 8px; /* Bordes redondeados */
    width: 80%; /* Ancho del modal */
    max-width: 700px; /* Máximo ancho aumentado */
    max-height: 75vh; /* Máxima altura del modal */
    overflow-y: auto; /* Permitir scroll vertical solo en el contenido del modal */
}

/* Estilo del botón de cerrar */
.close {
    color: #aaa; /* Color gris */
    float: right; /* A la derecha */
    font-size: 28px; /* Tamaño del texto */
    font-weight: bold; /* Negrita */
}

.close:hover,
.close:focus {
    color: red; /* Cambia a rojo al pasar el mouse */
    text-decoration: none; /* Sin subrayado */
    cursor: pointer; /* Cambia el cursor */
}

/* Estilos de texto del modal */
.modal-content h2 {
    margin-top: 0; /* Sin margen superior */
}

.modal-content p {
    margin: 10px 0; /* Márgenes para los párrafos */
}

/* Espaciado entre los campos del formulario */
.modal-content form {
    display: flex;
    flex-direction: column; /* Organiza los elementos en una columna */
}

.modal-content label {
    margin: 10px 0 5px; /* Márgenes para separar los labels de los inputs */
}

.modal-content input {
    padding: 10px; /* Espaciado interno para los inputs */
    margin-bottom: 15px; /* Espacio entre inputs */
    border: 1px solid #ccc; /* Borde gris */
    border-radius: 4px; /* Bordes redondeados */
}

.modal-content button {
    padding: 10px 15px; /* Espaciado interno para el botón */
    background-color: #000000; /* Color de fondo verde */
    color: white; /* Color del texto blanco */
    border: none; /* Sin borde */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
}

.modal-content button:hover {
    background-color: #ffffff; /* Color de fondo más oscuro al pasar el mouse */
    color: rgb(0, 0, 0);
}


.message {
    margin-bottom: 15px;
    font-weight: bold;
    padding: 10px;
    border-radius: 5px;
    color: #000000;
}

.message.success {
    background-color: #d4edda; /* Verde claro */
    color: #155724; /* Verde oscuro */
    border: 1px solid #c3e6cb; /* Borde verde */
}

.message.error {
    background-color: #f8d7da; /* Rojo claro */
    color: #721c24; /* Rojo oscuro */
    border: 1px solid #f5c6cb; /* Borde rojo */
}

button:disabled {
    background-color: #ccc; /* Color gris */
    color: #666; /* Color de texto más oscuro */
    cursor: not-allowed; /* Cursor de no permitido */
    opacity: 0.6; /* Le da un efecto de deshabilitado */
    pointer-events: none; /* Evita la animación de clic */
}




/* Estilos responsivos */
@media (max-width: 768px) {
    .modal-content {
        margin: 10% auto; /* Menos margen en pantallas pequeñas */
        padding: 20px; /* Espaciado interno reducido */
        width: 90%; /* Ancho del modal más amplio en móviles */
    }

    .close {
        font-size: 24px; /* Tamaño del botón de cerrar más pequeño */
    }
}

@media (max-width: 480px) {
    .modal-content {
        padding: 15px; /* Espaciado interno aún más reducido */
    }

    .close {
        font-size: 20px; /* Tamaño aún más pequeño para móviles */
    }
}