/* Estructura base */
.lr-form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Campos de 2 columnas */
.lr-col-half {
  width: calc(50% - 10px);
}

/* Campos de ancho completo */
.lr-col-full {
  width: 100%;
}

/* Campos de entrada */
.lr-form input,
.lr-form select,
.lr-form textarea {
  width: 100%;
  border: 1px solid #a0a0a0;
  padding: 10px;
  border-radius: 0;
  font-family: 'Open Sans', sans-serif;
}

/* Botón */
.lr-submit {
  background-color: #075e96;
  color: #fff;
  padding: 12px 20px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.lr-submit:hover {
  background-color: #00897b;
}

/* Mensajes de error */
.lr-error {
  border-color: red !important;
}

/* Estilos para checkboxes: uno por línea, check primero (izquierda), título luego (derecha) */
.lr-form .lr-checks {
  display: block !important; /* Cada div como bloque: uno por línea */
  margin-bottom: 15px; /* Espacio vertical entre líneas para legibilidad */
  text-align: left !important; /* Alineación general izquierda */
  width: 100%; /* Ancho completo */
}

.lr-form .lr-check {
  display: flex !important; /* Flex para alinear horizontalmente: check + texto */
  flex-direction: row !important; /* Fuerza dirección: izquierda a derecha (check primero) */
  align-items: flex-start !important; /* Alinea verticalmente al inicio (bueno para textos multilínea) */
  justify-content: flex-start !important; /* Alinea todo a la izquierda */
  gap: 10px; /* Espacio entre check y texto */
  flex-wrap: nowrap; /* Evita wrapping innecesario; texto se expande */
}

.lr-form .lr-check input[type="checkbox"] {
  margin: 0; /* Elimina márgenes extra; ajusta si necesitas */
  flex-shrink: 0; /* Check no se encoje */
  order: 1; /* Fuerza orden: check primero (aunque ya lo es en HTML) */
}

.lr-form .lr-check span {
  flex: 1; /* Texto ocupa el resto del espacio */
  text-align: left !important; /* Refuerza alineación izquierda */
  word-break: break-word; /* Rompe palabras largas (útil para consentimiento largo) */
  order: 2; /* Texto después del check */
}

/* Opcional: Estilo para checkboxes custom (si quieres mejorar visualmente) */
.lr-form .lr-check input[type="checkbox"] {
  width: 20px; /* Tamaño mayor para usabilidad */
  height: 20px;
  cursor: pointer;
}

/* Opcional: Hover y focus para accesibilidad */
.lr-form .lr-check:hover,
.lr-form .lr-check:focus-within {
  background-color: #f0f0f0; /* Fondo sutil al hover */
}

/* H2 solos en su línea */
.lr-form h2 {
  width: 100%;
  margin: 20px 0 10px 0;
}

/* Nueva sección: Info de empresa debajo del logo */
.lr-empresa-info {
  text-align: center; /* Centrado para un look profesional; cambia a 'left' si quieres alineado izquierda */
  margin: 10px 0 20px 0; /* Espacio arriba/abajo; ajusta según necesites */
  font-family: 'Open Sans', sans-serif; /* Consistente con inputs */
  color: #333; /* Color neutro */
}

.lr-empresa-nombre {
  font-size: 1.2em; /* Más grande para el nombre */
  font-weight: bold;
  margin: 0;
}

.lr-empresa-ruc,
.lr-empresa-direccion {
  font-size: 1em;
  margin: 5px 0 0 0; /* Espacio mínimo entre líneas */
}

/* Responsivo: En mobile, reduce tamaños si es necesario */
@media (max-width: 768px) {
  .lr-empresa-info {
    text-align: left; /* Opcional: Alinea izquierda en pantallas pequeñas */
  }
}

/* Mensaje de éxito */
.lr-success {
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  color: #3c763d;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
}

.lr-logo-contaniner {
  display: flex;
  justify-content: center;     /* Centra horizontalmente */
  align-items: center;         /* Centra verticalmente (si hay altura) */
  margin-bottom: 10px;
}