/* =================================================================================== Estilos para la página de formulario para Prueba de Ubicación =========================================================================*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

.cuerpo {
  margin-top: 20px;
  width: 80%;
}

/* Estiliza el título alineado a la izquierda con color azul y márgenes ajustados */
.titulo-izquierdad {
  font-size: 1.8rem;
  color: #003366;
  margin: 0;
  font-weight: 600;
  margin-bottom: -5px; /* reducido */
  width: 100%; /* que tome todo el ancho disponible */
  box-sizing: border-box;
}

/* Define una caja de alerta con fondo rojo claro y texto destacado */
.alerta {
  background-color: #ffe5e5;
  border-radius: 8px;
  padding: 15px 40px; /* 15px arriba/abajo, 40px izquierda/derecha */
  color: #a40000;
  font-weight: bold;
}

/* Estiliza un cuadro informativo centrado, con fondo azul claro y sombra suave */
.info-box {
  margin: -5px auto; /* Centrado y espacio arriba/abajo */
  background-color: #d9f1fb; /* Azul claro */
  border-radius: 10px; /* Bordes redondeados */
  padding: 15px 40px; /* Espaciado interno */
  font-size: 16px;
  line-height: 1.6;
  color: #003366; /* Texto azul oscuro para coherencia */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Sombra suave */
}

/* Ajusta el espaciado de listas ordenadas dentro del cuadro informativo */
.info-box ol {
  padding-left: 20px; /* Ajusta el espacio a la izquierda */
  margin: 10px 0; /* Espacio arriba y abajo */
}

/* Elimina márgenes y sangrías innecesarias en los ítems de lista */
.info-box ol li {
  margin-left: 0; /* Eliminar margen extra si lo hubiera */
  text-indent: 0; /* Quitar sangría negativa si la hubiera */
}

/* Aplica color azul oscuro a los textos en negrita */
.info-box b {
  color: #003366;
}

.cuenta span {
  font-weight: bold;
  color: #003366;
}

.formulario {
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
  
  padding: 40px;
  border-radius: 12px;
  
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.formulario h2 {
  font-size: 26px;
  margin-bottom: 25px;
  color: #003366;
}

.form-group-row,
.form-group-grid > div {
  margin-bottom: 20px;
}

.form-group-row {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.form-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

label {
  font-weight: 600;
  color: #003366;
  margin-bottom: 8px;
}

/* Aplica a todos los inputs excepto radio y file */
input[type="text"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="file"] {
  width: 100%;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  box-sizing: border-box;
}

/* Ajuste de inputs generales */
input[type="text"],
input[type="email"],
input[type="tel"] {
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* Ajustes específicos */
input[type="file"] {
  border: none;
  padding: 0;
}

.required::before {
  content: '*';
  color: red;
  margin-right: 4px;
}

#campo-identidad {
  display: none;
  flex-direction: column;
}

.file-upload {
    border: 2px dashed #32b3e3;
    padding: 25px;
    text-align: center;
    background-color: #f4fafd;
    border-radius: 8px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s, border-color 0.3s;
  }
  .file-upload:hover {
    background-color: #e0f3fb;
    border-color: #1a8ec1;
  }
  /* Ocultar el input pero que siga funcionando */
  .file-upload input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    opacity: 0;
    cursor: pointer;
  }
  /* Texto dentro del área */
  .file-upload p {
    font-size: 1rem;
    color: #32b3e3;
    margin: 0;
    pointer-events: none; /* Que el texto no interfiera con el clic */
  }
  /* Cuando arrastran archivo sobre el área */
  .file-upload.dragover {
    background-color: #d0eefd;
    border-color: #1a8ec1;
  }

button {
  background-color: #32b3e3;
  color: white;
  font-size: 16px;
  padding: 12px 28px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 20px;
}

button:hover {
  background-color: #259fc8;
}

/* ======================== */
/*   Estilos Responsivos   */
/* ======================== */

@media (max-width: 768px) {
  .cuerpo {
    width: 95%;
    gap: 15px;
  }

  .formulario {
    padding: 20px;
  }

  .formulario h2 {
    font-size: 22px;
    text-align: center;
  }

  .titulo-izquierdad {
    font-size: 1.5rem;
    text-align: center;
  }

  .info-box {
    padding: 15px 20px;
    font-size: 15px;
    width: 100%;
    margin: 10px 0;
  }

  .form-group-grid {
    grid-template-columns: 1fr; /* Solo una columna en pantallas pequeñas */
    gap: 15px;
  }

  .file-upload {
    height: auto;
    padding: 20px;
    flex-direction: column;
  }

  .file-upload p {
    font-size: 0.95rem;
    text-align: center;
  }

  button {
    width: 100%;
    font-size: 15px;
    padding: 10px;
  }

  .alerta {
    padding: 10px 20px;
    font-size: 0.95rem;
  }
}