/* Estilos de la pagina de donaciones.
 *
 * POR QUE UN ARCHIVO APARTE Y NO MAS REGLAS EN styles.css
 *
 * `styles.css` es la paleta del sitio, y el proyecto la audita: `test/accesibilidad.test.ts`
 * lee sus variables y comprueba el contraste de CADA par de colores de la interfaz. Anadir
 * alli colores nuevos obligaria a que todos los pares nuevos pasaran esa revision, que es
 * justo lo que se quiere... pero tambien cambiaria la auditoria de la pagina del chat por
 * culpa de otra pagina.
 *
 * Aqui NO se define ningun color: se usan las variables de styles.css, que se carga antes.
 * Asi las donaciones heredan los dos modos —claro y oscuro— sin duplicar la paleta, que es
 * la forma de que no se desincronicen.
 */

.donacion {
  max-width: var(--medida);
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

.donacion h2 {
  margin-bottom: 0.5rem;
}

.donacion-mensaje {
  margin-bottom: 1.5rem;
}

/* Reserva el alto de una linea para que el aviso no empuje el formulario al aparecer. */
.donacion-estado {
  min-height: 1.5rem;
  color: var(--tinta-suave);
}

.grupo {
  margin: 0 0 1.25rem;
  padding: 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.grupo legend {
  padding: 0 0.5rem;
  font-weight: 600;
  color: var(--tinta);
}

.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* 44 px de alto minimo: es la medida que usa esta pagina en todos sus controles, porque la
   usan personas mayores y con el pulgar. Cumplir WCAG (24 px) no alcanza. */
.opcion {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  cursor: pointer;
}

/* `:has()` evita tener que marcar la opcion elegida desde JavaScript: una clase que el
   script pusiera y el CSS no conociera seria un fallo silencioso. */
.opcion:has(input:checked) {
  border-color: var(--acento);
  background: var(--acento-suave);
}

.opcion input {
  accent-color: var(--acento);
}

.boton-principal,
#copiar {
  min-height: 44px;
}

.boton-principal {
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: var(--radio);
  background: var(--acento);
  color: var(--superficie);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.boton-principal:disabled {
  cursor: default;
  opacity: 0.6;
}

.resultado {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}

.resultado h2 {
  margin-top: 0;
}

.direccion {
  padding: 0.75rem;
  border-radius: var(--radio);
  background: var(--acento-suave);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Se parte en cualquier punto: una direccion de cartera es una tirada larga de caracteres
     sin espacios, y sin esto desborda la pantalla del telefono. */
  overflow-wrap: anywhere;
  user-select: all;
}

.monto-cripto {
  font-weight: 600;
}

.nota {
  color: var(--tinta-suave);
  font-size: 0.95rem;
}

.sin-javascript {
  max-width: var(--medida);
  margin: 0 auto;
  padding: 0 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .opcion,
  .boton-principal,
  #copiar {
    transition: none;
  }
}