/* descargar.css — Overrides de UI/UX scoped a la página de descarga de CFDI.
   Se carga SOLO desde descargar.html (después de styles.css) para no afectar
   el flujo de emisión en vivo: index.html, success.html, etc. comparten
   styles.css y NO deben cambiar. Todo cambio visual de esta pantalla vive aquí. */

/* Subtítulo de la pantalla, bajo la marca "FACTURACIÓN EN LÍNEA" */
.subtitulo-descarga {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #2c2b2b;
  margin: 0.4em 0 1em 0;
}

#info-descarga {
  margin-bottom: 1.2em;
}

/* Inputs ≥16px para evitar el auto-zoom de iOS al enfocar, y target táctil
   cómodo. Incluye type=number como blindaje (monto usa text+inputmode). */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"] {
  font-size: 16px;
  min-height: 44px;
}

/* Target táctil mínimo en la regla base (styles.css solo lo da en @media) */
button,
.button {
  min-height: 44px;
}

/* Botón deshabilitado legible (antes blanco sobre #ccc ≈ 1.6:1) */
button:disabled {
  color: #595959;
}

/* CTAs: centrado y anchos consistentes. Los <a class="button"> heredaban
   text-align:left (texto pegado a la izquierda) y el submit quedaba al 60%
   alineado a la izquierda. Aquí: texto centrado, submit primario full-width y
   el enlace secundario de .box-buttons también full-width (CTA apilado). */
.button {
  text-align: center;
}
#descargarBtn {
  width: 100%;
}
.box-buttons .button {
  width: 100%;
}

/* Errores con contraste AA (rojo puro #f00 ≈ 4.0:1 < 4.5:1) */
.error-message {
  color: #c0341d;
}
input.input-error {
  border-color: #c0341d;
}

/* Indicador de campo requerido (no depende solo del color) */
.req {
  color: #c0341d;
  margin-left: 2px;
}

/* Leyenda legal de reCAPTCHA: con la leyenda visible podemos ocultar el badge
   flotante de Google (cumple su política). Scoped: solo afecta a esta página. */
.grecaptcha-badge {
  visibility: hidden;
}
.recaptcha-legal {
  font-size: 11px;
  line-height: 1.4;
  color: #6c757d;
  text-align: center;
  max-width: 500px;
  margin: 0 auto 1em;
}
.recaptcha-legal a {
  color: #6c757d;
}

/* Enlace de descarga dentro del modal de notificación (no usado aquí, pero
   disponible si se reutiliza el patrón). */
.modal-descarga-link a {
  font-weight: 600;
}

/* --- Modales: el #modalNotificacion global tiene backdrop transparente en
   styles.css, así que aquí le damos un scrim real. (El .modal genérico ya trae
   scrim en styles.css.) Contenido desplazable en móvil para imágenes altas. --- */
#modalNotificacion {
  background-color: rgba(0, 0, 0, 0.5);
}
/* Anclar TODOS los modales al viewport: styles.css deja .modal en
   position:absolute → en móvil con scroll quedaban fuera de pantalla
   (afecta a #modalReferencia / #modalReferenciaFecha / #modalExito). */
.modal {
  position: fixed;
  top: 0;
  left: 0;
}
.modal-content {
  max-height: 90vh;
  overflow-y: auto;
}

/* Botón de cierre "×" accesible: es <button> pero no debe verse como el
   botón negro global; mantiene el look de .close de styles.css. */
.modal button.close {
  background: none;
  border: none;
  color: #767676;
  float: right;
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  width: auto;
  min-height: 0;
  padding: 0 4px;
}
.modal button.close:hover,
.modal button.close:focus {
  color: #000;
}

/* Modal de éxito */
#modalExito .modal-content,
#modalNotificacion .modal-content {
  max-width: 420px;
  margin: 18vh auto;
}
#modalExito .modal-content {
  text-align: center;
}
.exito-icono,
.alerta-icono {
  display: block;
  margin: 0 auto 0.6em;
}
.exito-icono {
  width: 56px;
  height: 56px;
}
.alerta-icono {
  width: 48px;
  height: 48px;
}
#modalExito h3 {
  color: #3d9f54;
  font-size: 18px;
  margin-bottom: 0.5em;
}
#modalExito p {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 1em;
}

/* Foco visible reforzado para navegación por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.info-icon:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #2c2b2b;
  outline-offset: 2px;
}

/* Respeta la preferencia de movimiento reducido: detiene el spinner */
@media (prefers-reduced-motion: reduce) {
  .loader {
    animation: none;
  }
}