/* /css/login.css */
/* === ESTILOS GENERALES Y DE FONDO DE LA PÁGINA === */
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f8ff; background-image: radial-gradient(circle at 15% 15%, hsla(190, 60%, 85%, 0.4) 8%, transparent 8.5%), radial-gradient(circle at 85% 25%, hsla(340, 60%, 85%, 0.4) 6%, transparent 6.5%), radial-gradient(circle at 45% 75%, hsla(120, 60%, 85%, 0.4) 7%, transparent 7.5%); background-size: 100px 100px; min-height: 100vh; margin: 0; padding: 0; color: #333; display: flex; flex-direction: column; }
/* === BARRA DE ENCABEZADO SUPERIOR === */
.header-bar { background-color: #a57f2c; padding: 10px 20px; display: flex; align-items: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.header-bar img { height: 50px; }

/* === ESTRUCTURA Y CONTENEDORES PRINCIPALES === */
.main-content { display: flex; flex-grow: 1; align-items: center; justify-content: center; padding: 0; flex-direction: column; gap: 20px; }
.content-wrapper { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 50px; flex-wrap: wrap; width: 100%; max-width: 900px; }

/* === CONTENEDOR DE INFORMACIÓN (LOGO Y TEXTO DESCRIPTIVO) === */
.info-container { width: 400px; text-align: center; color: #333; }
.main-logo { width: 280px; margin-bottom: 15px; }
.info-text { font-size: 1.1em; margin-top: 10px; line-height: 1.5; text-transform: none; color: #4a4a4a; }

/* === ESTILOS DEL FORMULARIO DE LOGIN === */
.container { background-color: rgba(255, 255, 255, 0.95); padding: 15px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); width: 250px; max-width: 90%; text-align: center; }
h2 { text-align: center; color: #a57f2c; margin-bottom: 10px; font-weight: 600; font-size: 1.3em; }
label { display: block; margin-bottom: 3px; font-weight: bold; color: #a57f2c; text-align: left; font-size: 0.85em; }
input, textarea, select { width: calc(100% - 16px); padding: 6px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; font-size: 13px; transition: border-color 0.3s ease; }
input:focus, textarea:focus, select:focus { border-color: #a57f2c; outline: none; }

/* === BOTONES PRINCIPALES Y SECUNDARIOS === */
button { background-color: #BD9132; color: white; padding: 8px 15px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: bold; width: 100%; transition: background-color 0.3s ease, transform 0.2s ease; margin-top: 6px; }
button:hover { background-color: #a57f2c; transform: translateY(-2px); }
button:disabled { background-color: #ccc; cursor: not-allowed; transform: none; }
.secondary-button {
    background-color: white;
    color: #808080; /* Gray text */
    border: 1px solid #808080; /* Gray border */
    margin-top: 6px;
    font-size: 14px;
    padding: 8px 15px;
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.secondary-button:hover {
    background-color: #808080; /* Gray background */
    color: white; /* White text */
    transform: translateY(-2px);
}

/* === MENSAJES DE FEEDBACK (ÉXITO Y ERROR) === */
.message { padding: 8px; margin-bottom: 12px; border-radius: 8px; font-weight: bold; text-align: center; opacity: 0; animation: fadeIn 0.5s forwards; transition: opacity 0.5s ease-out; }
.message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* === VENTANA MODAL (POP-UP) Y SUS COMPONENTES === */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; }
.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); width: 90%; max-width: 450px; position: relative; animation: zoomIn 0.3s ease-out; }
.close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; position: absolute; top: 10px; right: 20px; }
.close-button:hover, .close-button:focus { color: #333; text-decoration: none; }
@keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* === BARRA DE PIE DE PÁGINA === */
.footer-bar { background-color: #A01330; color: white; text-align: center; padding: 10px 0; margin-top: auto; width: 100%; margin: 0; }

/* === BOTÓN FLOTANTE DE INFORMACIÓN === */
.floating-info-button { position: fixed; bottom: 70px; right: 50px; background-color: #a57f2c; color: white; border: none; border-radius: 50%; width: 70px; height: 70px; font-size: 3em; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); z-index: 999; transition: background-color 0.3s ease, transform 0.2s ease; }
.floating-info-button:hover { background-color: #BD9132; transform: scale(1.05); }

/* === SISTEMA DE PESTAÑAS (TABS) DENTRO DEL MODAL === */
.info-tabs { margin-top: 20px; }
.tab-button { background-color: #f0f0f0; color: #333; padding: 10px 15px; border: none; border-radius: 8px 8px 0 0; cursor: pointer; font-weight: bold; margin-right: 5px; transition: background-color 0.3s ease; }
.tab-button.active { background-color: #a57f2c; color: white; }
.tab-button:hover { background-color: #e0e0e0; }
.tab-button.active:hover { background-color: #a57f2c; }
.tab-content { background-color: #fefefe; padding: 15px; border: 1px solid #ddd; border-top: none; border-radius: 0 0 8px 8px; margin-bottom: 10px; text-align: left; line-height: 1.6; }
.tab-content h3 { color: #a57f2c; margin-top: 0; margin-bottom: 10px; }
.tab-content p { margin-bottom: 1em; color: #4a4a4a; }

/* === ESTILOS RESPONSIVOS PARA TABLETS Y MÓVILES === */
@media (max-width: 900px) { 
    .content-wrapper { flex-direction: column; gap: 20px; } 
    .info-container { width: 95%; max-width: 400px; text-align: center; } 
    .container { width: 95%; max-width: 350px; } 
    .tab-button { width: calc(50% - 5px); box-sizing: border-box; border-radius: 8px; margin-bottom: 5px; }
    .tab-button:first-of-type { border-radius: 8px; }
    .tab-button:last-of-type { margin-right: 0; border-radius: 8px; }
    .tab-content { border-radius: 8px; border-top: 1px solid #ddd; }
}
@media (max-width: 768px) {
    .floating-info-button { bottom: 20px; right: 20px; width: 55px; height: 55px; font-size: 2em; }
}
/* === MODIFICACIÓN PARA MODAL DE INFORMACIÓN === */
/* Esta regla nueva hace que el modal de "Información Relevante" sea más ancho */
#infoCombinedModal .modal-content {
    max-width: 800px;
}

/* Custom styles for Iniciar Sesión button */
.login-button {
    color: #ad841f;
    background-color: white;
    border: 1px solid #ad841f;
    /* Override default button styles if necessary */
    /* You might need to adjust padding, font-size, etc. to match other buttons if desired */
}

.login-button:hover {
    color: white;
    background-color: #ad841f;
    border-color: #ad841f; /* Ensure border color also changes on hover */
}

/* Custom styles for Registrarme button */
.register-button {
    color: #4CAF50; /* Green text */
    background-color: white;
    border: 1px solid #4CAF50; /* Green border */
}

.register-button:hover {
    color: white;
    background-color: #4CAF50; /* Green background on hover */
    border-color: #4CAF50; /* Ensure border color also changes on hover */
}

/* Custom styles for Registrarme button inside modal */
.modal-register-button {
    color: #4CAF50; /* Green text */
    background-color: white;
    border: 1px solid #4CAF50; /* Green border */
}

.modal-register-button:hover {
    color: white;
    background-color: #4CAF50; /* Green background on hover */
    border-color: #4CAF50; /* Ensure border color also changes on hover */
}

/* Custom styles for Soporte y Ayuda button */
.help-button {
    color: #007bff; /* Blue text */
    background-color: white;
    border: 1px solid #007bff; /* Blue border */
}

.help-button:hover {
    color: white;
    background-color: #007bff; /* Blue background on hover */
    border-color: #007bff; /* Ensure border color also changes on hover */
}

/* Custom styles for Enviar Solicitud button inside modal */
.modal-help-button {
    color: #007bff; /* Blue text */
    background-color: white;
    border: 1px solid #007bff; /* Blue border */
}

.modal-help-button:hover {
    color: white;
    background-color: #007bff; /* Blue background on hover */
    border-color: #007bff; /* Ensure border color also changes on hover */
}