/* === styles.css === */

/* Estilo general del cuerpo de la página */
body {
  font-family: Arial, sans-serif;               /* Tipografía limpia y común */
  background-color: #f4f6f8;                    /* Color de fondo suave */
  margin: 0;                                     /* Eliminar margen predeterminado */
  padding: 0;                                    /* Eliminar relleno predeterminado */
  display: flex;                                 /* Usar Flexbox para centrar */
  justify-content: center;                       /* Centrar horizontalmente */
  align-items: center;                           /* Centrar verticalmente */
  min-height: 100vh;                             /* Altura mínima de la ventana completa */
}

/* Títulos principales */
h2 {
  color: #333;                                   /* Texto oscuro */
  text-align: center;                            /* Centrado */
}

/* Contenedores principales del login y carga */
.login-container,
.upload-container {
  background: #fff;                              /* Fondo blanco */
  padding: 30px;                                 /* Relleno interno generoso */
  border-radius: 12px;                           /* Bordes redondeados */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);       /* Sombra suave */
  width: 100%;                                   /* Ancho completo */
  max-width: 400px;                              /* Ancho máximo */
}

/* Formularios y sus elementos */
form {
  display: flex;                                 /* Disposición flexible en columna */
  flex-direction: column;                        /* Columnas */
  gap: 15px;                                     /* Separación entre elementos */
  margin-top: 15px;                              /* Margen superior */
}

/* Estilo para campos de texto, contraseña y archivo */
input[type="text"],
input[type="password"],
input[type="file"] {
  padding: 10px;                                 /* Relleno interno */
  border: 1px solid #ccc;                        /* Borde gris claro */
  border-radius: 6px;                            /* Bordes redondeados */
  font-size: 1rem;                               /* Tamaño de fuente estándar */
}

/* Botones principales */
button {
  padding: 10px;                                 /* Espaciado interno */
  background-color: #007bff;                    /* Azul vibrante */
  color: white;                                  /* Texto blanco */
  font-weight: bold;                             /* Texto en negrita */
  border: none;                                  /* Sin borde */
  border-radius: 6px;                            /* Bordes redondeados */
  cursor: pointer;                               /* Cursor tipo "mano" */
  transition: background-color 0.2s ease-in-out; /* Transición suave al pasar el cursor */
}

/* Cambio de color al pasar el mouse sobre el botón */
button:hover {
  background-color: #0056b3;                     /* Azul más oscuro */
}

/* Clase para ocultar elementos */
.hidden {
  display: none;                                 /* No mostrar el elemento */
}

/* Mensajes de error */
.error-message {
  color: red;                                    /* Texto rojo */
  font-size: 0.9em;                              /* Ligeramente más pequeño */
  text-align: center;                            /* Centrado */
}

/* Resultado del procesamiento */
#resultado {
  margin-top: 20px;                              /* Espacio arriba */
  font-size: 0.95rem;                            /* Tamaño de texto ligeramente reducido */
  text-align: center;                            /* Centrado */
  color: #333;                                   /* Texto oscuro */
}

/* Estilo especial para el botón salir */
#salir-btn {
  margin-top: 20px;                              /* Espacio con respecto al botón anterior */
  background-color: #dc3545;                     /* Rojo fuerte */
}

#salir-btn:hover {
  background-color: #a71d2a;                     /* Rojo más oscuro al pasar el mouse */
}