:root { color-scheme: dark; font-family: 'Segoe UI', Arial, sans-serif; background: #0c0d0e; color: #f6f3eb; scroll-behavior: smooth; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #f5cf78; outline-offset: 5px; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; width: 100%; background: #30261b; padding: 1rem; z-index: 100; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }
.loading-progress { display: block; width: 90px; margin: 25vh auto 0; }
.loading-progress circle { fill: none; stroke: #d8b566; stroke-width: 5px; }
.loading-progress-text { text-align: center; }

@media (prefers-reduced-motion: reduce) {
    :root { scroll-behavior: auto; }
}

/* Recargas de clientes y revisión administrativa. */
.transfer-page { max-width: 1180px; margin: 0 auto; padding: 40px 32px 70px; }
.transfer-page h1 { margin: 24px 0 12px; font-size: clamp(30px, 5vw, 48px); }
.transfer-page h2 { margin: 0 0 14px; font-size: 21px; }
.transfer-page h3 { margin: 0 0 6px; color: #e6c37d; font-size: 15px; }
.transfer-page p { color: #bbb9ad; line-height: 1.6; }
.transfer-back { color: #e1bf79; font-size: 13px; }
.transfer-balance strong { color: #e6c37d; font-size: 27px; }
.transfer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; margin-top: 24px; }
.transfer-panel { padding: 24px; border: 1px solid #b99b5640; border-radius: 12px; background: #171913; min-width: 0; }
.transfer-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.transfer-heading span { color: #e0bd77; }
.bank-account, .transfer-record { padding: 15px 0; border-top: 1px solid #ffffff15; overflow-wrap: anywhere; }
.bank-account p, .transfer-record p { margin: 6px 0; }
.transfer-history { margin-top: 22px; }
.transfer-page fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.transfer-page label { display: block; margin: 14px 0 7px; font-size: 13px; }
.transfer-page input:not([type=checkbox]), .transfer-page select, .transfer-page textarea {
    display: block; width: 100%; padding: 10px 12px; background: #0e100e; color: #f4eee1;
    border: 1px solid #ffffff30; border-radius: 6px; font: inherit;
}
.transfer-page input[type=file] { overflow: hidden; }
.transfer-page textarea { resize: vertical; }
.transfer-button, .transfer-outline {
    display: inline-block; padding: 10px 15px; border-radius: 6px; border: 1px solid #c9a25960;
    font: inherit; font-size: 13px; cursor: pointer;
}
.transfer-button { background: linear-gradient(110deg, #f2d08a, #bb8f3d); color: #201911; font-weight: 700; margin-top: 16px; }
.transfer-outline { background: transparent; color: #e5c37b; }
.transfer-outline[aria-pressed=true] { background: #e5c37b; color: #201911; }
.transfer-page button:disabled { opacity: .5; cursor: default; }
.transfer-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.transfer-page .transfer-note { padding: 12px 16px; border-left: 2px solid #c9a259; background: #191910; color: #ead6a4; }
.transfer-proof { display: block; width: 100%; max-height: 650px; object-fit: contain; background: #0e100e; border-radius: 7px; }
.transfer-page .transfer-check { display: flex; align-items: baseline; gap: 8px; }
@media (max-width: 740px) {
    .transfer-page { padding: 25px 16px 50px; }
    .transfer-grid { grid-template-columns: 1fr; }
    .transfer-panel { padding: 18px; }
}
.triangle-background {
    isolation: isolate;
    --triangle-pattern-fixed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='280' viewBox='0 0 360 280'%3E%3Cpath fill='none' stroke='%23e4bc68' stroke-opacity='.16' stroke-linejoin='round' d='M179 22l12 23-26-2zM83 138l13 27-29-4zM317 181l16 20-26 2zM179 216l17 17-24 6z'/%3E%3C/svg%3E");
    --triangle-pattern-pulse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='280' viewBox='0 0 360 280'%3E%3Cpath fill='none' stroke='%23e4bc68' stroke-opacity='.16' stroke-linejoin='round' d='M29 37l26 11-22 17zM296 63l39-11-12 39zM210 113l31 7-23 23zM42 228l41-10-14 38zM257 256l18-24 12 27z'/%3E%3C/svg%3E");
}

.triangle-background::before,
.triangle-background::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.triangle-background::before {
    background:
        radial-gradient(ellipse at 24% 30%, #ad791c21, transparent 60%),
        var(--triangle-pattern-fixed) center / 360px 280px repeat;
}

.triangle-background::after {
    background: var(--triangle-pattern-pulse) center / 360px 280px repeat;
}

@media (prefers-reduced-motion: no-preference) {
    .animated-triangles.triangle-background::after { animation: triangle-pulse 8s ease-in-out infinite; }
}

@keyframes triangle-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .24; }
}

.raffle-gold-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from var(--raffle-border-angle, 0deg),
        transparent 0deg, transparent 264deg, #c38225 307deg,
        #ffe7a0 344deg, #ffcf66 353deg, transparent 360deg);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

@property --raffle-border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes raffle-border-lap {
    to { --raffle-border-angle: 360deg; }
}

@media (prefers-reduced-motion: no-preference) {
    .raffle-gold-frame::after { animation: raffle-border-lap 6s linear infinite; }
}

.page-nav {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}
.page-nav > a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:7px 11px;
    border:1px solid #e4bc6844;
    border-radius:7px;
    background:transparent;
    text-decoration:none;
    line-height:1.2;
}
.page-nav > a:hover,
.page-nav > a:focus-visible {
    background:#e4bc6810;
    border-color:#e4bc6880;
}

.form-select {
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    padding:var(--select-padding, 9px 11px);
    border:1px solid #e4bc6850;
    border-radius:9px;
    background:#10100d;
    color:#fff3db;
    font:inherit;
    font-size:var(--select-font-size, inherit);
    color-scheme:dark;
}

.form-select:focus-visible {
    outline:2px solid #e4bc68;
    outline-offset:2px;
}

@supports (appearance: base-select) {
    .form-select,
    .form-select::picker(select) {
        appearance:base-select;
    }

    .form-select {
        display:flex;
        align-items:center;
        gap:10px;
        cursor:pointer;
    }

    .form-select:open {
        border-color:#e4bc68;
    }

    .form-select::picker-icon {
        margin-inline-start:auto;
        color:#e4bc68;
    }

    .form-select:open::picker-icon {
        transform:rotate(180deg);
    }

    .form-select::picker(select) {
        margin-block:5px;
        padding:5px;
        width:anchor-size(width);
        border:1px solid #e4bc6870;
        border-radius:11px;
        background:#1d1910;
        color:#fff3db;
        box-shadow:0 10px 24px #0009;
    }

    .form-select option {
        min-height:34px;
        overflow-wrap:anywhere;
        padding:7px 10px;
        border-radius:6px;
        cursor:pointer;
    }

    .form-select option[value=""] {
        color:#d7c9a9;
    }

    .form-select option:checked {
        background:#382b16;
        color:#ffe3a6;
    }

    .form-select option:hover,
    .form-select option:focus-visible {
        background:#4b381a;
        color:#fff3db;
    }

    .form-select option::checkmark {
        order:1;
        margin-inline-start:auto;
        color:#e4bc68;
    }
}

.form-select:disabled { opacity:.65; cursor:default; }
@media (max-width:700px) {
    .form-select { font-size:16px; }
}

.consent-check {
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    box-sizing:border-box;
    min-block-size:44px;
    padding:7px 12px;
    border:1px solid #e4bc6844;
    border-radius:9px;
    background:#12110d;
    line-height:1.4;
    cursor:pointer;
}

.consent-check input {
    position:absolute;
    inset-inline-start:12px;
    inline-size:44px;
    block-size:24px;
    margin:0;
    opacity:0;
    cursor:inherit;
}

.consent-toggle {
    position:relative;
    box-sizing:border-box;
    flex:0 0 44px;
    block-size:24px;
    border:1px solid #b4a88b66;
    border-radius:999px;
    background:#1b1b16;
}

.consent-toggle::after {
    content:"";
    position:absolute;
    inset-block-start:3px;
    inset-inline-start:3px;
    inline-size:16px;
    block-size:16px;
    border-radius:50%;
    background:#c4c4bd;
}

.consent-check input:checked + .consent-toggle {
    border-color:#e4bc68;
    background:linear-gradient(110deg,#654614,#bb8b32);
    box-shadow:0 0 10px #e4bc6855;
}

.consent-check input:checked + .consent-toggle::after {
    transform:translateX(20px);
    background:#fff2cc;
}

.consent-check input:focus-visible + .consent-toggle {
    outline:2px solid #ffe199;
    outline-offset:3px;
}

@media (prefers-reduced-motion: no-preference) {
    .consent-toggle, .consent-toggle::after { transition:background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
}

@media (forced-colors: active) {
    .consent-toggle { border-color:ButtonText; }
    .consent-toggle::after { background:ButtonText; }
    .consent-check input:checked + .consent-toggle { border-color:Highlight; }
    .consent-check input:checked + .consent-toggle::after { background:Highlight; }
}

.consent-check:has(input:disabled) { opacity:.65; cursor:default; }

.number-stepper { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px; min-width:0; }
.number-stepper > input[type="number"] { width:100%; min-width:0; appearance:textfield; }
.number-stepper > input::-webkit-inner-spin-button,
.number-stepper > input::-webkit-outer-spin-button { appearance:none; margin:0; }
.number-step-actions { display:grid; grid-template-columns:repeat(2, 30px); gap:3px; }
.number-step-actions button {
    display:grid; place-items:center; min-height:36px; padding:0;
    border:1px solid #e4bc6850; border-radius:6px;
    background:#252116; color:#ffe19a; cursor:pointer;
}
.number-step-actions button:hover:not(:disabled) { border-color:#e4bc68; background:#382b16; }
.number-step-actions button:focus-visible { outline:2px solid #ffe199; outline-offset:1px; }
.number-step-actions button:disabled { opacity:.5; cursor:default; }
.number-step-actions svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }