:root {
 --color-red: #000000;
 --color-green: #0059fffb;
 --color-blue: #0059fffb;
 --text-dark: #000000;
 --text-light: #ffffffe5;
 --background-light: #f4f7f6;
 --background-dark: #000000;
}

/* --- Estilos Generales del Cuerpo de la Página --- */
body {
 font-family: 'Montserrat', sans-serif;
 background: linear-gradient(135deg, var(--color-red) 0%, var(--color-blue) 100%);
 background-size: cover;
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 20px;
 box-sizing: border-box;
 color: var(--text-dark);
}

/* --- Contenedor Principal del Formulario --- */
.container {
 background-color: rgb(255, 255, 255);
 padding: 40px;
 border-radius: 15px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 width: 100%;
 max-width: 650px;
 animation: fadeIn 1s ease-out;
 backdrop-filter: blur(5px);
}

/* --- Estilos de la Cabecera y Resaltado del Logo --- */
/* Se ha ajustado el header para centrar el logo y el título */
header {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-bottom: 35px;
}

.header-logo {
 max-width: 200px;
 height: auto;
 margin-bottom: 15px;
}

h1 {
 color: var(--text-dark);
 font-size: 2.5em;
 font-weight: 800;
 margin-bottom: 10px;
 position: relative;
 padding-bottom: 10px;
}

h1::after {
 content: '';
 display: block;
 width: 80px;
 height: 4px;
 background: linear-gradient(90deg, var(--color-green), var(--color-red));
 margin: 10px auto 0;
 border-radius: 2px;
}

.logo-highlight {
 color: var(--color-blue);
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* --- Estilos para Grupos de Formulario (Label e Input/Textarea/Select) --- */
.form-group {
 margin-bottom: 25px;
}

/* SE AÑADE 'SELECT' A LOS ESTILOS DE LOS CAMPOS DE TEXTO */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea,
.form-group select {
 width: calc(100% - 22px);
 padding: 12px 10px;
 border: 2px solid #000000c4;
 border-radius: 8px;
 font-size: 1em;
 color: var(--text-dark);
 background-color: #ffffff;
 transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* SE AÑADE 'SELECT' AL ESTILO DE ENFOQUE */
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus,
.form-group select:focus {
 border-color: var(--color-blue);
 box-shadow: 0 0 0 4px rgba(0, 127, 255, 0.2);
 outline: none;
}

.form-group textarea {
 resize: vertical;
 min-height: 120px;
}

/* Estilos para el input[type="file"] */
/* Estilos para el input[type="file"] */
.form-group input[type="file"] {
  display: block;
  width: fit-content;
  background-color: transparent;
  border: none;
  color: #000000;
  font-size: 1em;
  
}

/* Estilos para el botón de carga de archivo (el que es visible) */
.form-group input[type="file"]::-webkit-file-upload-button {
  /* CAMBIO: El degradado azul ahora es el color de fondo por defecto */
  background: linear-gradient(45deg, var(--color-blue), var(--color-green));
  color: var(--text-light); /* Para que el texto sea blanco */
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgb(2, 28, 173);
}

.form-group input[type="file"]::-webkit-file-upload-button:hover {
  /* CAMBIO: El color negro ahora es el de transición al pasar el ratón */
  background-color: var(--color-red);
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* ... el resto de tu CSS ... */

.help-text {
 font-size: 0.9em;
 color: #666;
 margin-top: 5px;
 display: block;
}

/* --- Estilos del Botón de Envío --- */
.btn-submit {
display: inline-block;
background-color: #3498db; /* Color inicial: azul */
color: #fff;
padding: 12px 25px;
border-radius: 50px;
text-decoration: none;
font-weight: 500;
margin-top: 30px;
transition: background-color 0.8s ease-in-out, transform 0.2s ease, box-shadow 0.8s ease; /* Combinamos las transiciones */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
/*width: 653px;*/
width: 100%;

}

.btn-submit:hover {
background-color: #000000; /* Color al pasar el cursor: negro */
transform: translateY(-2px);
box-shadow: 0 0 20px rgba(0, 123, 255, 0.6), 0 4px 15px rgba(0, 0, 0, 0.4);  /* Efecto de brillo de azul a negro */
}

/* --- Mensajes Flash (Alertas) --- */
.flashes {
 list-style: none;
 padding: 0;
 margin-bottom: 25px;
}

.alert {
 padding: 15px 25px;
 margin-bottom: 15px;
 border-radius: 8px;
 font-weight: 600;
 opacity: 0.98;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 animation: slideInFromTop 0.5s ease-out, fadeOut 8s forwards 1s;
}

.alert.success {
 background-color: #d4edda;
 color: #155724;
 border: 1px solid #c3e6cb;
}

.alert.error {
 background-color: #f8d7da;
 color: #721c24;
 border: 1px solid #f5c6cb;
}

.alert.warning {
 background-color: #fff3cd;
 color: #856404;
 border: 1px solid #ffeeba;
}

/* --- Keyframes para Animaciones --- */
@keyframes fadeIn {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInFromTop {
 from { transform: translateY(-50px); opacity: 0; }
 to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeOut {
 0% { opacity: 0.98; }
 90% { opacity: 0.98; }
 100% { opacity: 0; display: none; }
}

/* --- Ajustes Responsivos (Media Queries) --- */
@media (max-width: 768px) {
.container {
  padding: 30px;
 }
 h1 {
 font-size: 2em;
 }
.btn-submit {
 font-size: 1.1em;
 padding: 12px;
 }
 .header-logo {
 max-width: 180px;
 margin-bottom: 10px;
 }
}

@media (max-width: 480px) {
 .container {
 padding: 20px;
 margin: 15px;
 }
 h1 {
 font-size: 1.8em;
 }
 /* SE AÑADE SELECT A LAS REGLAS RESPONSIVAS */
 .form-group label, .form-group input, .form-group textarea, .form-group select, .btn-submit {
 font-size: 0.95em;
 }
 .header-logo {
 max-width: 150px;
 margin-bottom: 8px;
 }
}