/* Estilo general para el fondo de la página */
body {
  background-color: #f8f9fa; /* Un fondo gris muy claro/blanco hueso */
  padding-top: 40px;
  padding-bottom: 40px;
}

/* El contenedor principal del formulario (la caja blanca) */
.form-signin {
  max-width: 400px;
  padding: 25px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 10px; /* Bordes redondeados para toda la caja */
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
  overflow: hidden; /* ¡CAMBIO CLAVE! Esto obliga a que nada se salga de la caja. */
}

/* El logo azul en la parte superior */
.form-signin .logo {
  background-color: #0053a4;
  color: white;
  padding: 20px;
  border-radius: 0; /* Ya no necesita redondearse a sí mismo */
  /* CAMBIO CLAVE: Eliminamos los márgenes negativos que causaban el problema */
  margin: -25px -25px 35px -25px; 
  text-align: center;
}

/* Ajuste para la imagen del logo */
.form-signin .logo img {
  max-height: 200px; /* Puedes ajustar este tamaño */
  width: auto;
}

/* Estilo para las etiquetas (Nombre, Cedula, etc.) */
.form-signin label {
  font-size: 16px;
  color: #555;
  font-weight: 500;
  margin-bottom: 2px;
}

/* Estilo para los campos de texto y el menú desplegable */
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px 0;
  font-size: 16px;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid #ccc;
  margin-bottom: 25px;
}

/* Cuando un usuario hace clic en un campo */
.form-signin .form-control:focus {
  z-index: 2;
  box-shadow: none;
  border-bottom-color: #0056b3;
}

/* Estilo para el texto de vista previa (placeholder) en azul */
.form-signin .form-control::placeholder {
  color: #a9a9a9;
  opacity: 1;
}

/* Estilo del botón "conectar" */
.form-signin .btn-conectar {
  background-color: #0056b3;
  border: none;
  padding: 12px;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 5px;
  width: 100%;
}

.form-signin .btn-conectar:hover {
  background-color: #002d5d;
}

/* --- ESTILOS AÑADIDOS PARA TÉRMINOS Y CONDICIONES --- */

/* Contenedor para el enlace de texto que abre el modal */
.terminos-link-container {
    margin-bottom: 10px;
    font-size: 1.1em; /* Un poco más pequeño que el label */
    text-align: center;
}

/* El enlace de texto "He leído..." */
.terminos-link {
    color: #555; /* Color de texto estándar */
    text-decoration: underline;
    cursor: pointer;
}

.terminos-link:hover {
    color: #0053a4; /* Color principal al pasar el ratón */
}

/* Contenedor para centrar la casilla de verificación */
.checkbox-container {
    text-align: center;
    margin-bottom: 20px; /* Espacio antes del botón "Conectar" */
}

/* Ajustes para el checkbox de Bootstrap 3 */
.checkbox-container .checkbox {
    margin-top: 0;
    margin-bottom: 0;
    display: inline-block; /* Permite centrar el elemento */
}

.checkbox-container .checkbox label {
    font-weight: normal; /* El texto "Acepto..." no es negrita */
}

/* Ajustes para el contenido del modal */
.modal-body h6 {
    font-weight: bold;
    margin-top: 15px;
}

.modal-body ul {
    margin-left: 20px;
}