/* ====================================================================
 * DONACIONES — sección, botón flotante y ventana de importes
 * PHP: inc/donaciones.php · JS: assets/js/donaciones.js
 * ==================================================================== */

/* ====================================================================
 * 1 — LA SECCIÓN
 * ==================================================================== */

.lt-donar__caja {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

.lt-donar__etiqueta {
  justify-content: center;
}

.lt-donar__titulo {
  margin: 14px 0 0;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  text-wrap: balance;
}

.lt-donar__texto {
  margin: 16px auto 0;
  max-width: 56ch;
  font-size: 1.05rem;
  line-height: 1.65;
}

.lt-donar__boton {
  margin-top: 26px;
  gap: 10px;
}

/* La letra pequeña: aclara que donar NO compra posición. Va apagada y
   pequeña porque es una advertencia, no un argumento de venta — pero va,
   porque en este sitio SÍ se paga por aparecer y sin ella se confunden. */
.lt-donar__nota {
  margin: 16px auto 0;
  max-width: 46ch;
  font-size: .85rem;
  line-height: 1.5;
  opacity: .72;
}

/* ====================================================================
 * 2 — EL BOTÓN FLOTANTE
 * ==================================================================== */

/*
 * ENCIMA DEL DE WHATSAPP, EN LA MISMA ESQUINA.
 *
 * ---------------------------------------------------------------------
 * LAS MEDIDAS NO SE COPIAN, SE COMPARTEN — 2026-09-10
 * ---------------------------------------------------------------------
 * La primera version escribio aqui las medidas del de WhatsApp a mano:
 * 44 px de ancho y «bottom + 52 + 10». El dueno lo abrio en el movil y
 * dijo lo que se veia: «aparece mal, muy pegado y no alineado». Y era
 * exacto, por tres motivos que ninguna copia a mano puede seguir:
 *
 *   . por debajo de 640 px el de WhatsApp crece a 56 y este se quedaba
 *     en 44 — dos anchos distintos pegados a la misma esquina no pueden
 *     alinearse;
 *   . en iPhone el de WhatsApp baja a `--canal` + area segura;
 *   . en las fichas de negocio, ayuda y evento sube a 80 px para no
 *     tapar la barra de «Llamar».
 *
 * Ahora los dos salen de los tokens `--flota-*` de estructura.css: mismo
 * ancho, misma separacion del borde, y este se apoya SOBRE el alto real
 * del de abajo. Se muevan como se muevan, van juntos.
 *
 * z-index 90, el mismo que el de WhatsApp: son hermanos, y ninguno tiene
 * por que taparse con el otro.
 */
.lt-donar-flota {
  position: fixed;
  right: var(--flota-lado, clamp(16px, 2.5vw, 34px));
  bottom: calc(
    var(--flota-abajo, clamp(16px, 2.5vw, 34px))
    + var(--flota-alto, 52px)
    + var(--flota-hueco, 14px)
  );
  z-index: 90;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--flota-alto, 52px);
  padding: 0 18px 0 15px;
  border: 0;
  border-radius: 999px;

  background: var(--marca, #12335c);
  color: #fff;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;

  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  transition: opacity .22s ease, visibility .22s ease;

  /*
   * FLOTA EN FASE CON EL DE WHATSAPP, Y ES LA MISMA ANIMACION.
   *
   * Medido a 390 px con los dos ya alineados: el hueco entre ellos iba de 14
   * a 10 px y volvia, porque el de abajo sube y baja y este estaba quieto. Un
   * desajuste que respira llama mas la atencion que uno fijo — asistente.css
   * ya lo tenia escrito para el boton de la esquina de enfrente.
   *
   * `lt-flotante-sube` se declara en estructura.css, que se carga en todas las
   * paginas. Arranca con la pagina y no al aparecer el boton: encendida mas
   * tarde las dos ondas van a distinto paso, y alli se midio un desfase de
   * 4 px. Que corra escondida no cuesta nada, porque no se pinta.
   */
  animation: lt-flotante-sube 4.5s ease-in-out infinite;
}

/* El hover para la flotacion en vez de mover el boton: `transform` ya lo
   usa la animacion, y una regla de hover sobre la misma propiedad no se ve.
   Es lo que hace el de WhatsApp. */
.lt-donar-flota:hover,
.lt-donar-flota:focus-visible {
  animation-play-state: paused;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .38);
}

/*
 * ESCONDIDO POR CLASE Y NO POR [hidden].
 *
 * `.lt-donar-flota` es `display: inline-flex`, y eso GANA al `display: none`
 * que el navegador aplica a [hidden]. Es el fallo que ya mordió tres veces en
 * este tema (ver alertas.css y directorio.css): el botón se quedaba visible y
 * muerto. Con `visibility` además no queda pulsable, que es lo que importa.
 */
.lt-donar-flota.is-oculto {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
}

/*
 * REDONDO EN MOVIL, Y EN EL MISMO CORTE QUE EL DE WHATSAPP.
 *
 * Dos pastillas con texto apiladas se comen media pantalla; el aria-label
 * lleva la frase entera, asi que el circulo no pierde nada.
 *
 * EL CORTE ES 640 Y NO 480 A PROPOSITO: es donde el de WhatsApp se vuelve
 * circulo. Con el corte en 480, entre 480 y 640 quedaba una pastilla ancha
 * encima de un circulo — que es justo el descuadre que se reporto.
 */
@media (max-width: 640px) {
  .lt-donar-flota {
    gap: 0;
    padding: 0;
    width: var(--flota-alto, 56px);
  }

  .lt-donar-flota__texto {
    display: none;
  }
}

/* Un boton que late sin parar en la esquina de todas las paginas es lo que
   hace insoportable navegar a quien tiene trastornos vestibulares. Se apaga la
   flotacion y se deja la sombra fija, igual que el de WhatsApp. */
@media (prefers-reduced-motion: reduce) {
  .lt-donar-flota {
    animation: none;
    transform: none;
    transition: opacity .22s ease, visibility .22s ease;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  }
}

/* ====================================================================
 * 3 — LA VENTANA
 * ==================================================================== */

/*
 * AQUÍ NO SE DECLARA `display`, Y ES DELIBERADO.
 *
 * Un <dialog> sin `open` lo esconde la hoja del navegador con display:none.
 * Cualquier `display` propio en la regla base pisa eso y la ventana se pinta
 * abierta desde que carga la página. Está escrito igual en vitrina.css y en
 * directorio.css. El layout va en la caja hija.
 */
.lt-donar-ventana {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  overflow: visible;
}

.lt-donar-ventana::backdrop {
  background: rgba(4, 12, 24, .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/*
 * TODO EL CONTENIDO DENTRO DE UNA SOLA CAJA HIJA.
 *
 * El cierre al pulsar el fondo comprueba que el clic haya aterrizado en el
 * propio <dialog>. Un hijo suelto haría que pulsarlo se leyera como «clic
 * fuera» y la ventana se cerraría sola.
 */
.lt-donar-ventana__caja {
  position: relative;
  padding: 30px 26px 26px;
  border-radius: 16px;
  background: var(--blanco, #fff);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}

.lt-donar-ventana__cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: .6;
}

.lt-donar-ventana__cerrar:hover {
  opacity: 1;
}

.lt-donar-ventana__titulo {
  margin: 0;
  font-size: 1.3rem;
}

.lt-donar-ventana__bajada {
  margin: 8px auto 0;
  max-width: 34ch;
  font-size: .95rem;
  line-height: 1.55;
  opacity: .8;
}

/* --- El formulario de importes -------------------------------------- */

.lt-donar-form {
  margin-top: 20px;
}

.lt-donar-form__importes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

/*
 * PARECEN BOTONES PERO SON RADIOS.
 *
 * El <input> se esconde con position:absolute + opacity:0, y NO con
 * display:none: escondido asi, el teclado lo sigue alcanzando y el lector de
 * pantalla lo sigue anunciando. Con display:none desaparece del orden de
 * tabulacion y el grupo deja de ser recorrible con las flechas.
 */
.lt-donar-form__chip {
  position: relative;
  display: block;
  cursor: pointer;
}

.lt-donar-form__chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.lt-donar-form__chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border: 1.5px solid var(--linea, #d8dee7);
  border-radius: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.lt-donar-form__chip:hover span {
  border-color: var(--marca, #295091);
}

.lt-donar-form__chip input:checked + span {
  border-color: var(--marca, #295091);
  background: var(--marca, #295091);
  color: #fff;
}

/* El anillo de foco lo lleva la PASTILLA, porque el radio es invisible: sin
   esto, quien tabula no ve donde esta. */
.lt-donar-form__chip input:focus-visible + span {
  outline: 3px solid var(--marca, #295091);
  outline-offset: 3px;
}

/* --- El campo de otra cantidad -------------------------------------- */

.lt-donar-form__otro {
  margin-top: 14px;
  text-align: left;
}

/* La cura de siempre: el bloque es display:block y eso le gana al
   display:none del navegador para [hidden]. Sin esto el campo se queda a la
   vista aunque el guion lo esconda. */
.lt-donar-form__otro[hidden] {
  display: none;
}

.lt-donar-form__otro label {
  display: block;
  margin-bottom: 6px;
  font-size: .85rem;
  font-weight: 600;
  opacity: .8;
}

.lt-donar-form__moneda {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 1.5px solid var(--linea, #d8dee7);
  border-radius: 10px;
}

.lt-donar-form__moneda:focus-within {
  border-color: var(--marca, #295091);
}

.lt-donar-form__moneda span {
  font-weight: 700;
  opacity: .55;
}

.lt-donar-form__moneda input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: 0;
  background: none;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.lt-donar-form__moneda input:focus {
  outline: none;
}

.lt-donar-form__enviar {
  margin-top: 18px;
  width: 100%;
}

.lt-donar-ventana__pie {
  margin: 14px auto 0;
  max-width: 34ch;
  font-size: .8rem;
  line-height: 1.5;
  opacity: .62;
}

/* --- El aviso al volver de la pasarela ------------------------------ */

.lt-donar__aviso {
  margin: 0 auto 22px;
  max-width: 46ch;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: .95rem;
  line-height: 1.5;
}

.lt-donar__aviso--ok {
  background: #e6f6ec;
  color: #14532d;
}

.lt-donar__aviso--cancelado,
.lt-donar__aviso--error {
  background: #fdf0e6;
  color: #7c3a10;
}