/* Donations: the plan card (/donate, the plan editor preview and the staff position cards that borrow its look),
   the /donate page (pn-don-), the admin income bars and the loyalty card (pn-loy-). Tokens only.

   A plan's colour is staff data (validated #RRGGBB in --pn-accent): it tints the icon square, the badge and the
   highlighted border, and wherever it colours text or a check it is mixed toward the text colour first
   (--pn-accent-text), so even white or yellow passes AA in both themes. The action stays brand violet. The card root
   is .pn-plan, never .pn-tier: that is the rank chip of progression.css. */

.pn-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: stretch;
}

.pn-tiers > * { min-width: 0; }

.pn-plan {
    --pn-accent-text: color-mix(in srgb, var(--pn-accent) 40%, var(--mud-palette-text-primary));
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius);
    background: var(--mud-palette-surface);
    transition: border-color var(--pn-dur-fast) var(--pn-ease-out);
}

.pn-dark .pn-plan,
html[data-theme="dark"] .pn-plan {
    --pn-accent-text: color-mix(in srgb, var(--pn-accent) 30%, var(--mud-palette-text-primary));
}

.pn-plan-hot {
    border-color: color-mix(in srgb, var(--pn-accent) 60%, var(--pn-line));
    background: color-mix(in srgb, var(--pn-accent) 4%, var(--mud-palette-surface));
}

@media (hover: hover) and (pointer: fine) {
    .pn-plan:hover { border-color: var(--pn-line-strong); }
    .pn-plan-hot:hover { border-color: color-mix(in srgb, var(--pn-accent) 80%, var(--pn-line)); }
}

.pn-tier-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 12px;
}

.pn-tier-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--pn-accent) 45%, transparent);
    border-radius: var(--pn-radius-md);
    background: color-mix(in srgb, var(--pn-accent) 16%, transparent);
    color: var(--pn-accent-text);
}

.pn-tier-titles {
    display: flex;
    flex: 1 1 8rem;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pn-tier-name {
    margin: 0;
    font-family: var(--pn-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.pn-tier-tagline {
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
    line-height: 1.4;
}

.pn-tier-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--pn-accent) 45%, transparent);
    border-radius: var(--pn-radius-pill);
    background: color-mix(in srgb, var(--pn-accent) 14%, transparent);
    color: var(--pn-accent-text);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.pn-tier-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin: 18px 0 0;
}

.pn-tier-amount {
    font-family: var(--pn-font-display);
    font-size: 2.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--pn-accent-text);
}

.pn-tier-was {
    color: var(--mud-palette-text-secondary);
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}

.pn-tier-caption {
    flex-basis: 100%;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

.pn-tier-description {
    margin: 12px 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: .9rem;
    text-wrap: pretty;
}

.pn-tier-perks {
    flex: 1;
    margin: 16px 0 20px;
    padding: 12px 0 0;
    border-top: 1px solid var(--pn-line);
    list-style: none;
}

.pn-tier-perks li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    font-size: .9rem;
    color: var(--mud-palette-text-primary);
}

.pn-tier-perks .pn-tier-check {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--pn-accent-text);
}

.pn-tier-action { margin-top: auto; }

/* The page's one standout call to action: the button takes the cut corner (.pn-cut-fill, a clip-path, which would
   clip a box-shadow), so the earned glow is a drop-shadow on its wrapper and follows the cut shape. */
.pn-don-glow {
    display: inline-block;
    filter: drop-shadow(0 6px 16px rgba(var(--pn-brand-rgb), .45));
}

.pn-tier-action.pn-don-glow { display: block; }

.pn-dark .pn-don-glow,
html[data-theme="dark"] .pn-don-glow {
    filter: drop-shadow(0 0 18px rgba(var(--pn-brand-night-rgb), .45));
}

.pn-surface-tool .pn-don-glow { filter: none; }

/* ---------- Admin dashboard: income per month as plain bars ---------- */

.pn-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 220px;
    padding-top: 22px;
}

.pn-bar-col {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
    height: 100%;
}

.pn-bar-track {
    display: flex;
    flex: 1;
    align-items: flex-end;
    width: 100%;
}

.pn-bar {
    width: 100%;
    min-height: 2px;
    border-radius: var(--pn-radius-md) var(--pn-radius-md) 0 0;
    background: var(--mud-palette-primary);
}

.pn-bar-value {
    margin-bottom: 4px;
    overflow: hidden;
    max-width: 100%;
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Two columns from 1100px: the income bars beside the sales per plan. */
.pn-don-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 32px;
}

@media (min-width: 1100px) {
    .pn-don-admin-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* On a phone the twelve values do not fit over the bars: the table under «Ver los datos» has them. */
@media (max-width: 599.98px) {
    .pn-bar-value { display: none; }
    .pn-bars { gap: 4px; height: 180px; padding-top: 8px; }
}

.pn-bar-label {
    margin-top: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
    text-transform: capitalize;
}

/* ---------- /donate (pn-don-) ---------- */

.pn-don-block { margin-top: 40px; }

.pn-don-h2 {
    margin: 0;
    font-family: var(--pn-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
}

.pn-don-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 16px;
}

.pn-don-head p {
    margin: 4px 0 0;
    max-width: 65ch;
    color: var(--mud-palette-text-secondary);
}

/* What applies right now (test mode, the donor role, signed out): bordered lines, a tone only when it is a status. */
.pn-don-notes {
    display: grid;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.pn-don-note {
    --pn-note: var(--mud-palette-text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 14px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font-size: .9rem;
}

.pn-don-note > .mud-icon-root { flex: none; color: var(--pn-note); }
.pn-don-note > span { flex: 1 1 16rem; min-width: 0; }

.pn-don-note.is-warning,
.pn-don-note.is-success {
    border-color: color-mix(in srgb, var(--pn-note) 40%, var(--pn-line));
    background: color-mix(in srgb, var(--pn-note) 6%, var(--mud-palette-surface));
}

.pn-don-note.is-warning { --pn-note: var(--mud-palette-warning); }
.pn-don-note.is-success { --pn-note: var(--mud-palette-success); }

/* Paying on Ko-fi (?pago=): the page's focus while it waits. */
.pn-don-pay { margin-bottom: 8px; }

.pn-don-pay-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin-bottom: 20px;
}

.pn-don-pay-head span {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pn-don-pay .pn-help-steps p {
    margin: 4px 0 10px;
    max-width: 65ch;
    color: var(--mud-palette-text-secondary);
}

.pn-don-code {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-top: 8px;
}

.pn-don-code code {
    padding: 8px 14px;
    border: 1px dashed var(--pn-line-strong);
    border-radius: var(--pn-radius-sm);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font-family: var(--pn-font-mono);
    font-size: 1.375rem;
    letter-spacing: .08em;
    user-select: all;
}

.pn-don-wait {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--pn-line);
}

.pn-don-wait-text {
    display: inline-flex;
    flex: 1 1 18rem;
    align-items: center;
    gap: 10px;
    color: var(--mud-palette-text-primary);
}

.pn-don-fine {
    margin: 12px 0 0;
    max-width: 75ch;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

.pn-don-paid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.pn-don-paid-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--pn-radius);
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
    color: var(--mud-palette-success);
    animation: pn-pop var(--pn-dur-tab) var(--pn-ease-out) backwards;
}

.pn-don-paid-text { flex: 1 1 18rem; min-width: 0; }
.pn-don-paid-text p { margin: 4px 0 0; color: var(--mud-palette-text-secondary); }

.pn-don-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Discount code: a disclosure in the plans header, its answer right under the field. */
.pn-don-discount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.pn-don-discount-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.pn-don-discount-form .mud-input-control { width: min(100%, 280px); margin: 0; }

.pn-don-discount-msg {
    min-height: 1.25em;
    margin: 0;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.pn-don-discount-msg.is-ok { color: var(--mud-palette-success); }

/* "Antes de donar": facts as hairline rows. */
.pn-don-facts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pn-don-facts li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    max-width: 80ch;
}

.pn-don-facts li + li { border-top: 1px solid var(--pn-line); }

.pn-don-fact-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.pn-don-facts strong { display: block; color: var(--mud-palette-text-primary); }
.pn-don-facts span { color: var(--mud-palette-text-secondary); }

.pn-don-facts a {
    color: var(--pn-brand-text);
    text-decoration: underline;
}

.pn-dark .pn-don-facts a { color: var(--pn-brand-on-dark); }

/* "Tus donaciones" */
.pn-don-history .mud-table-cell { font-variant-numeric: tabular-nums; }

.pn-don-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.pn-don-state .mud-icon-root { width: 18px; height: 18px; }
.pn-don-state.is-paid .mud-icon-root { color: var(--mud-palette-success); }
.pn-don-state.is-refunded { color: var(--mud-palette-text-secondary); }

@media (max-width: 600px) {
    .pn-don-block { margin-top: 32px; }
    .pn-don-discount { align-items: stretch; width: 100%; }
    .pn-don-discount-form .mud-input-control { width: 100%; }
    .pn-don-code code { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-don-paid-icon { animation: none; }
}

/* ---------- Loyalty: "Tu apoyo" (SupportStandingCard, pn-loy-) ----------
   Seal colours are staff data (validated #RRGGBB in --pn-cos), mixed toward the text colour wherever they colour
   text, like the cosmetics. */

.pn-loy-now {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.pn-loy-now-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pn-loy-now-text strong {
    font-family: var(--pn-font-display);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
}

.pn-loy-now-text span,
.pn-loy-next span:first-child {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.pn-loy-next b {
    color: var(--mud-palette-text-primary);
}

.pn-loy-seal {
    --pn-cos: var(--mud-palette-primary);
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--pn-cos) 45%, transparent);
    border-radius: var(--pn-radius-md);
    background: color-mix(in srgb, var(--pn-cos) 16%, transparent);
    /* Mixed toward the text colour like the cosmetics, so a light seal (gold) still reads on white. */
    color: color-mix(in srgb, var(--pn-cos) 65%, var(--mud-palette-text-primary));
}

.pn-loy-seal--lg {
    width: 56px;
    height: 56px;
    border-radius: var(--pn-radius);
}

.pn-loy-seal--lg .mud-icon-root {
    width: 30px;
    height: 30px;
}

.pn-loy-seal.is-off {
    border-style: dashed;
    border-color: var(--pn-line-strong);
    background: transparent;
    color: var(--mud-palette-text-secondary);
}

.pn-loy-next {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 16px;
}

.pn-loy-top {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.pn-loy-meter {
    --pn-meter-color: var(--pn-brand);
}

.pn-loy-ladder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pn-loy-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-md);
}

.pn-loy-step:not(.is-on) .pn-loy-seal {
    border-color: var(--pn-line);
    background: transparent;
    color: var(--mud-palette-text-secondary);
}

.pn-loy-step.is-current {
    border-color: color-mix(in srgb, var(--pn-cos) 60%, var(--pn-line));
    background: color-mix(in srgb, var(--pn-cos) 8%, transparent);
}

.pn-loy-step-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pn-loy-step-text strong {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.pn-loy-step-text span {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.pn-loy-membership {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.pn-loy-membership b {
    color: var(--mud-palette-text-primary);
}

.pn-loy-membership .mud-icon-root {
    flex: none;
    color: var(--pn-data);
}

.pn-loy-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pn-brand-text);
    text-decoration: none;
}

.pn-dark .pn-loy-link {
    color: var(--pn-brand-on-dark);
}

@media (hover: hover) and (pointer: fine) {
    .pn-loy-link:hover {
        text-decoration: underline;
    }
}

.pn-loy-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--pn-radius-sm);
}

.pn-me-support {
    margin-top: 20px;
}

/* ---------- /admin/donations (staff tool, admin-tools.css pieces) ---------- */

/* A plan's mark: its icon on a tint of its accent (staff data), mixed toward the text so it reads. */
.pn-tool-mark.pn-don-plan-mark {
    background: color-mix(in srgb, var(--pn-accent) 14%, transparent);
    color: color-mix(in srgb, var(--pn-accent) 60%, var(--mud-palette-text-primary));
}

/* The plan form with the real card beside it from 960px. */
.pn-don-plan-edit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px 28px;
    align-items: start;
}

.pn-don-plan-preview { display: flex; flex-direction: column; gap: 8px; max-width: 340px; }

@media (min-width: 960px) {
    .pn-don-plan-edit { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); }
    .pn-don-plan-preview { position: sticky; top: calc(var(--pn-appbar-h) + 16px); }
}

.pn-don-code {
    font-family: var(--pn-font-mono);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* The message a payer wrote on Ko-fi, quoted under an unmatched payment. */
.pn-don-note {
    margin: 6px 0 0;
    padding: 6px 10px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-sm);
    background: var(--mud-palette-background-gray);
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}