/* Donar: un aporte voluntario, sin contrapartida. La página tiene que
   dejar clarísimo que no compra nada, y no debe presionar. */
:root {
    --don-page: #f5f8fc;
    --don-surface: #ffffff;
    --don-surface-soft: #f8fbff;
    --don-ink: #071b42;
    --don-muted: #52647f;
    --don-line: #d7e0ed;
    --don-line-strong: #aebdd1;
    --don-blue: #1463e6;
    --don-blue-strong: #0a56d4;
    --don-blue-soft: #e8f0fe;
}

:root[data-theme="dark"] {
    --don-page: #081427;
    --don-surface: #0f1d35;
    --don-surface-soft: #122442;
    --don-ink: #f5f8ff;
    --don-muted: #bdc9dc;
    --don-line: #2b4162;
    --don-line-strong: #4e668a;
    --don-blue: #5d95ef;
    --don-blue-strong: #a7c8ff;
    --don-blue-soft: #172f55;
}

body.donar-page {
    background: var(--don-page);
    color: var(--don-ink);
    font-family: "Onest", sans-serif;
}


body.donar-page .donar-wrap {
    max-width: 620px;
    margin: 0 auto;
    padding: 34px 20px 60px;
}

body.donar-page .donar-card {
    background: var(--don-surface);
    border: 1px solid var(--don-line);
    border-radius: var(--radio-lg);
    padding: clamp(22px, 4vw, 34px);
    box-shadow: 0 16px 42px rgba(14, 34, 68, .10);
}

:root[data-theme="dark"] body.donar-page .donar-card { box-shadow: 0 18px 48px rgba(0, 0, 0, .22); }

body.donar-page h1 {
    margin: 0 0 10px;
    font-size: clamp(1.5rem, 4vw, 1.9rem);
    letter-spacing: -.6px;
}

body.donar-page .donar-intro {
    margin: 0 0 8px;
    color: var(--don-muted);
    line-height: 1.6;
    font-size: .95rem;
}

body.donar-page .donar-principios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 20px 0 12px;
    color: var(--don-ink);
    font-size: .84rem;
    font-weight: 700;
}
body.donar-page .donar-principios span { display: inline-flex; align-items: center; gap: 7px; }
body.donar-page .donar-principios span::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--don-blue);
    content: "";
}

/* Se dice explícitamente que no compra nada: es lo honesto y además evita
   que alguien done esperando un trato distinto. */
body.donar-page .donar-aviso {
    margin: 0 0 24px;
    padding: 11px 14px;
    border-radius: var(--radio-md);
    background: var(--don-surface-soft);
    border: 1px solid var(--don-line);
    color: var(--don-muted);
    font-size: .87rem;
    line-height: 1.55;
}

body.donar-page .donar-cargando {
    display: flex;
    align-items: center;
    min-height: 70px;
    padding: 16px;
    border: 1px solid var(--don-line);
    border-radius: var(--radio-md);
    background: var(--don-surface-soft);
    color: var(--don-muted);
    font-size: .92rem;
}
body.donar-page .donar-cargando::before {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-right: 10px;
    border: 2px solid var(--don-line-strong);
    border-top-color: var(--don-blue);
    border-radius: 50%;
    content: "";
    animation: donar-giro .8s linear infinite;
}
body.donar-page .donar-cargando[hidden] { display: none; }
@keyframes donar-giro { to { transform: rotate(360deg); } }

body.donar-page fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 20px;
}
body.donar-page legend {
    padding: 0;
    margin-bottom: 10px;
    font-size: .87rem;
    font-weight: 700;
    color: var(--don-ink);
}

body.donar-page .donar-montos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
}

/* El input real queda oculto pero enfocable: el foco se pinta sobre la
   etiqueta con :has, así el teclado ve dónde está. */
body.donar-page .donar-monto input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
body.donar-page .donar-monto {
    position: relative;
    display: block;
    padding: 15px 10px;
    border: 2px solid var(--don-line);
    border-radius: var(--radio-md);
    background: var(--don-surface-soft);
    text-align: center;
    font-size: 1.15rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
body.donar-page .donar-monto:hover { border-color: var(--don-line-strong); }
body.donar-page .donar-monto:has(input:checked) {
    border-color: var(--don-blue);
    background: var(--don-blue-soft);
    color: var(--don-blue-strong);
}
body.donar-page .donar-monto:has(input:focus-visible) {
    outline: 3px solid var(--don-blue);
    outline-offset: 3px;
}

body.donar-page .donar-otro { margin-top: 12px; }
body.donar-page label.donar-etiqueta {
    display: block;
    margin-bottom: 6px;
    font-size: .87rem;
    font-weight: 700;
}
body.donar-page .donar-campo-monto {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--don-line);
    border-radius: var(--radio-md);
    background: var(--don-surface-soft);
    padding: 0 14px;
}
body.donar-page .donar-campo-monto:focus-within {
    border-color: var(--don-blue);
}
body.donar-page .donar-campo-monto span {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--don-muted);
}
body.donar-page input[type="number"],
body.donar-page textarea {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--don-ink);
    font: inherit;
    padding: 14px 0;
}
body.donar-page input[type="number"]:focus,
body.donar-page textarea:focus { outline: none; }

body.donar-page textarea {
    border: 2px solid var(--don-line);
    border-radius: var(--radio-md);
    background: var(--don-surface-soft);
    padding: 12px 14px;
    resize: vertical;
    min-height: 84px;
}
body.donar-page textarea:focus { border-color: var(--don-blue); }

body.donar-page .donar-boton {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: var(--radio-md);
    background: var(--don-blue);
    color: #ffffff;
    font: inherit;
    font-size: 1rem;
    font-weight: 750;
    cursor: pointer;
}
body.donar-page .donar-boton:hover:not(:disabled) { background: var(--don-blue-strong); }
body.donar-page .donar-boton:disabled { opacity: .55; cursor: not-allowed; }

body.donar-page .donar-estado {
    margin: 14px 0 0;
    min-height: 1.4em;
    font-size: .9rem;
    color: var(--don-muted);
}
body.donar-page .donar-estado.error { color: #b3261e; }
:root[data-theme="dark"] body.donar-page .donar-estado.error { color: #ffb4ab; }

body.donar-page .donar-cerrado {
    padding: 18px 20px;
    border-radius: var(--radio-md);
    background: var(--don-surface-soft);
    border: 1px dashed var(--don-line-strong);
    color: var(--don-muted);
    line-height: 1.6;
}

body.donar-page .donar-volver {
    display: inline-block;
    margin-top: 22px;
    color: var(--don-blue-strong);
    font-weight: 700;
    font-size: .9rem;
}
:root[data-theme="dark"] body.donar-page .donar-volver { color: #9bc1ff; }

body.donar-page .donar-volver::before { content: "←"; margin-right: 7px; }
body.donar-page .donar-boton:focus-visible,
body.donar-page .donar-volver:focus-visible,
body.donar-page .donar-campo-monto:focus-within,
body.donar-page textarea:focus-visible {
    outline: 3px solid var(--don-blue);
    outline-offset: 3px;
}

@media (max-width: 520px) {
    body.donar-page .donar-wrap { padding: 24px 16px 44px; }
    body.donar-page .donar-card { padding: 22px 18px; border-radius: 16px; }
    body.donar-page .donar-principios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
    body.donar-page .donar-principios span:last-child { grid-column: 1 / -1; }
    body.donar-page .donar-montos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    body.donar-page *, body.donar-page *::before, body.donar-page *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Los botones los pinta PayPal dentro de un iframe: no se pueden estilar desde
   aqui, solo se les reserva el sitio y el aire de alrededor. */
.donar-paypal {
    margin-top: 18px;
    min-height: 52px;
}
.donar-paypal:empty {
    min-height: 0;
}

/* PayPal pinta su formulario dentro de un iframe y no se puede estilar desde
   aqui: da por supuesto un fondo claro y usa texto gris oscuro para las
   etiquetas —"Direccion de la tarjeta", el consentimiento de edad—. Sobre la
   tarjeta oscura ese texto desaparece.
   Lo que si esta en nuestra mano es darle el fondo que asume. Se hace de forma
   deliberada, como una zona de pago embutida en la tarjeta, y no dejando un
   agujero blanco: de ahi el radio, el aire alrededor y el borde tenue. */
:root[data-theme="dark"] .donar-paypal:not(:empty) {
    padding: 16px;
    border-radius: 14px;
    background: #f5f8fc;
    border: 1px solid rgba(255, 255, 255, .08);
}