/*
 * «Mi monedero» del socio (12 oct 2026, docs/monedero.md; rediseño del 6 nov 2026, Sergi: «no tiene un diseño premium»).
 * Cada cosa, como lo que es, en el orden en que sale:
 *
 *  1. La pantalla: lo suyo a un lado y lo que puede hacer al otro
 *  2. El monedero: su piel y sus costuras (del color de la asociación), su cierre y lo que lleva dentro
 *  3. Recargar: la recarga a medias, los billetes y «Otro importe»
 *  4. Lo que has pagado y recargado: un ticket de caja
 *  5. Mis pulseras: cada una, una pulsera
 *  6. Devolverme el saldo
 *
 * Los materiales (el papel, los billetes) son los mismos en claro y en oscuro: son objetos, no interfaz.
 */

/* #region 1. La pantalla: en el ordenador, lo que puede hacer a un lado y el ticket, de arriba abajo, al otro */
.monedero-pantalla {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--espacio-10) clamp(32px, 4vw, 72px);
    align-items: start;
}

.monedero-pantalla > * {
    grid-column: 1;
    min-width: 0;
}

.monedero-pantalla > .ticket-caja {
    grid-column: 2;
    grid-row: 1 / span 6;
    margin-top: var(--espacio-8);
}

.mi-monedero {
    display: grid;
    gap: var(--espacio-4);
}

.mi-monedero[hidden] {
    display: none;
}

.mi-monedero .lista-agrupada__titulo,
.mi-monedero .ayuda-campo {
    margin: 0;
}

@media (max-width: 960px) {
    .monedero-pantalla {
        grid-template-columns: minmax(0, 1fr);
    }

    .monedero-pantalla > .ticket-caja {
        grid-column: 1;
        grid-row: auto;
        margin-top: 0;
    }
}
/* #endregion */

/* #region 2. El monedero */
.cartera {
    --piel: oklch(from var(--marca-principal) 0.36 min(c, 0.1) h);
    --piel-honda: oklch(from var(--marca-principal) 0.2 min(c, 0.06) h);
    position: relative;
    display: grid;
    align-content: end;
    gap: var(--espacio-2);
    min-height: clamp(17rem, 22vw, 21rem);
    margin-top: var(--espacio-4);
    padding: clamp(24px, 2.6vw, 38px);
    padding-right: clamp(76px, 8vw, 116px);
    border-radius: 26px 26px 30px 30px;
    background: linear-gradient(150deg, var(--piel), var(--piel-honda));
    box-shadow: inset 0 0 0 8px rgb(0 0 0 / 0.14), inset 0 1px 0 9px rgb(255 255 255 / 0.05), 0 22px 44px rgb(0 0 0 / 0.26);
    color: #FFFFFF;
}

.cartera[hidden] {
    display: none;
}

/* Las costuras. */
.cartera::before {
    content: "";
    position: absolute;
    inset: 13px;
    border: 1.5px dashed rgb(255 255 255 / 0.26);
    border-radius: 18px;
    pointer-events: none;
}

/* El cierre, con su botón dorado. */
.cartera::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: clamp(64px, 7vw, 92px);
    height: clamp(64px, 6.4vw, 84px);
    transform: translateY(-50%);
    border-radius: 42px 0 0 42px;
    background:
        radial-gradient(circle at 38px 50%, #FFF3C7 0, #E7C36D 7px, #B9872F 14px, #8F6520 15px, transparent 15.5px),
        var(--piel-honda);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), -6px 0 16px rgb(0 0 0 / 0.25);
}

/* Con saldo, asoman los billetes por arriba, por detrás de la piel. */
.cartera--con-saldo {
    margin-top: var(--espacio-8);
}

.cartera--con-saldo .cartera__rotulo::before,
.cartera--con-saldo .cartera__rotulo::after {
    content: "";
    position: absolute;
    top: -26px;
    z-index: -1;
    width: 46%;
    height: 70px;
    border-radius: 6px;
    background:
        radial-gradient(circle at 80% 40%, rgb(255 255 255 / 0.5) 0 12px, transparent 13px),
        linear-gradient(135deg, #C9E2CF, #8FBF9B);
    box-shadow: inset 0 0 0 3px rgb(255 255 255 / 0.4);
}

.cartera--con-saldo .cartera__rotulo::before {
    left: 9%;
    transform: rotate(-3deg);
}

.cartera--con-saldo .cartera__rotulo::after {
    left: 34%;
    top: -18px;
    transform: rotate(2.5deg);
    background:
        radial-gradient(circle at 20% 45%, rgb(255 255 255 / 0.5) 0 12px, transparent 13px),
        linear-gradient(135deg, #F0D7B8, #DDA868);
}

.cartera__rotulo {
    margin: 0;
    color: rgb(255 255 255 / 0.82);
    font-family: var(--fuente-ui);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
}

.cartera__saldo {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(3.6rem, 7vw, 6.5rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.05em;
    line-height: 1;
}

.cartera__saldo small {
    font-size: 0.5em;
    letter-spacing: -0.03em;
}

.cartera__nota {
    max-width: 30rem;
    margin: var(--espacio-1) 0 0;
    color: rgb(255 255 255 / 0.82);
}

.cartera__aviso {
    margin: 0;
    color: #FFD9A0;
    font-weight: 600;
}

.cartera__aviso[hidden] {
    display: none;
}
/* #endregion */

/* #region 3. Recargar: la recarga a medias, los billetes y «Otro importe» */
.mi-monedero__pendiente {
    display: grid;
    gap: var(--espacio-2);
}

.mi-monedero__pendiente[hidden] {
    display: none;
}

.mi-monedero__pendiente p {
    margin: 0;
    color: var(--rs-aviso-texto);
    font-weight: 600;
}

.mi-monedero__pendiente-botones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-4);
}

.billetes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: var(--espacio-3);
}

/* Un billete: su color, su marco grabado, una marca de agua y su valor en grande. */
.billete {
    --tinta-billete: #5C2A22;
    --papel-billete: #F1C9BE;
    --papel-billete-hondo: #E2A093;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    aspect-ratio: 1.85;
    min-height: 4.75rem;
    padding: 12px 14px;
    overflow: hidden;
    border: 0;
    border-radius: 7px;
    background:
        radial-gradient(circle at 76% 34%, rgb(255 255 255 / 0.6) 0 18%, rgb(255 255 255 / 0.18) 18.5% 26%, transparent 26.5%),
        repeating-linear-gradient(135deg, rgb(255 255 255 / 0.1) 0 2px, transparent 2px 6px),
        linear-gradient(135deg, var(--papel-billete), var(--papel-billete-hondo));
    box-shadow: inset 0 0 0 3px rgb(255 255 255 / 0.4), inset 0 0 0 4px color-mix(in srgb, var(--tinta-billete) 30%, transparent), 0 4px 10px rgb(0 0 0 / 0.14);
    color: var(--tinta-billete);
    font-family: var(--fuente-display);
    cursor: pointer;
    transition: transform 180ms var(--curva), box-shadow 180ms var(--curva);
}

.billete:hover {
    transform: translateY(-3px) rotate(-0.6deg);
    box-shadow: inset 0 0 0 3px rgb(255 255 255 / 0.4), inset 0 0 0 4px color-mix(in srgb, var(--tinta-billete) 30%, transparent), 0 12px 22px rgb(0 0 0 / 0.2);
}

.billete:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

/* El elegido se levanta, con su marca. */
.billete[aria-pressed="true"] {
    transform: translateY(-5px);
    box-shadow: inset 0 0 0 3px rgb(255 255 255 / 0.4), 0 0 0 3px var(--tinta-billete), 0 16px 28px rgb(0 0 0 / 0.26);
}

.billete__cifra {
    font-size: clamp(1.9rem, 2.6vw, 2.5rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    line-height: 1;
}

.billete__moneda {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    opacity: 0.7;
}

.billete--gris { --tinta-billete: #3F4347; --papel-billete: #DDDFE0; --papel-billete-hondo: #BFC3C6; }
.billete--azul { --tinta-billete: #1E3E66; --papel-billete: #C4D9EE; --papel-billete-hondo: #93B7DC; }
.billete--naranja { --tinta-billete: #693A0D; --papel-billete: #F4D6AE; --papel-billete-hondo: #E6B071; }
.billete--verde { --tinta-billete: #1F4A2E; --papel-billete: #C9E2CF; --papel-billete-hondo: #93C3A0; }
.billete--oro { --tinta-billete: #57430A; --papel-billete: #F4E3A6; --papel-billete-hondo: #DEC061; }

.mi-monedero__otro {
    margin: 0;
}

.mi-monedero__otro .campo-unidad input {
    width: 10rem;
}

.mi-monedero__pagar {
    justify-self: start;
}

@media (max-width: 767px) {
    .billetes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .billete {
        min-height: 4rem;
        padding: 9px 10px;
    }

    .mi-monedero__pagar {
        justify-self: stretch;
        justify-content: center;
    }

    .mi-monedero__pendiente-botones .boton {
        flex: 1;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .billete,
    .billete:hover,
    .billete[aria-pressed="true"] {
        transition: none;
        transform: none;
    }
}
/* #endregion */

/* #region 4. Lo que has pagado y recargado: un ticket de caja */
.ticket-caja {
    filter: drop-shadow(0 12px 22px rgb(0 0 0 / 0.14));
}

.ticket-caja[hidden] {
    display: none;
}

.ticket-caja__papel {
    --diente: 9px;
    display: grid;
    gap: var(--espacio-3);
    padding: calc(var(--diente) + 22px) clamp(18px, 2vw, 28px);
    background: #FBF8F0;
    color: #23201A;
    /* Los bordes de arriba y abajo, cortados en dientes como los de la caja registradora. */
    mask:
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--diente)) 51% repeat-x,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--diente)) 51% repeat-x;
}

.ticket-caja__titulo {
    margin: 0;
    padding-bottom: var(--espacio-3);
    border-bottom: 1px dashed rgb(35 32 26 / 0.35);
    color: #23201A;
    font-family: var(--fuente-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.ticket-caja__lineas {
    display: grid;
    gap: var(--espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ticket-caja__lineas:empty {
    display: none;
}

.ticket-caja__linea {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--espacio-4);
}

.ticket-caja__concepto {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.ticket-caja__importe {
    font-family: var(--fuente-mono);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.ticket-caja__importe--entra {
    color: #1B7A48;
}

.ticket-caja__detalle,
.ticket-caja__marca {
    grid-column: 1;
    font-size: 13px;
}

.ticket-caja__detalle {
    color: rgb(35 32 26 / 0.62);
}

.ticket-caja__marca {
    font-family: var(--fuente-mono);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ticket-caja__marca--mal {
    color: #A7232F;
}

.ticket-caja__marca--ojo {
    color: #8A5A00;
}

/* Lo que no cuenta en el saldo, tachado y apagado. */
.ticket-caja__linea--no-cuenta :is(.ticket-caja__concepto, .ticket-caja__importe) {
    opacity: 0.55;
}

.ticket-caja__linea--no-cuenta .ticket-caja__importe {
    text-decoration: line-through;
}

.ticket-caja__vacio {
    margin: 0;
    color: rgb(35 32 26 / 0.62);
    text-align: center;
}

.ticket-caja__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espacio-4);
    margin: 0;
    padding-top: var(--espacio-3);
    border-top: 2px solid #23201A;
    font-family: var(--fuente-mono);
    font-weight: 600;
    text-transform: uppercase;
}

.ticket-caja__total strong {
    font-size: 1.2rem;
}
/* #endregion */

/* #region 5. Mis pulseras: cada una, una pulsera */
.pulseras-objeto {
    display: grid;
    gap: var(--espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pulsera-objeto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
}

.pulsera-objeto__banda {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 11.5rem;
    height: 2.6rem;
    border-radius: 999px;
    background:
        repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 2px, transparent 2px 7px),
        var(--marca-boton);
    box-shadow: inset 0 0 0 2px var(--marca-detalle), inset 0 -3px 6px rgb(0 0 0 / 0.22), 0 4px 10px rgb(0 0 0 / 0.16);
    color: var(--marca-boton-texto, #FFFFFF);
    font-family: var(--fuente-mono);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.14em;
}

/* Su cierre. */
.pulsera-objeto__banda::after {
    content: "";
    position: absolute;
    right: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFFFFF, #B9BEC4 62%, #868C93);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
}

.pulsera-objeto__textos {
    display: grid;
    flex: 1;
    min-width: 6rem;
    color: var(--rs-texto-secundario);
}

.pulsera-objeto small {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
}

.pulsera-objeto--bloqueada .pulsera-objeto__banda {
    background:
        repeating-linear-gradient(135deg, rgb(255 255 255 / 0.16) 0 6px, transparent 6px 12px),
        #8B9096;
    color: #FFFFFF;
}
/* #endregion */

/* #region 6. Devolverme el saldo */
.mi-monedero__devolucion,
.mi-monedero__devolucion-estado,
#mi-devolucion-formulario {
    display: grid;
    justify-items: start;
    gap: var(--espacio-3);
}

.mi-monedero__devolucion {
    padding-bottom: var(--espacio-3);
}

.mi-monedero__devolucion .aviso,
#mi-devolucion-formulario .ayuda-campo {
    margin: 0;
}

#mi-devolucion-formulario .campo {
    width: 100%;
    max-width: 32rem;
    margin: 0;
}

#mi-devolucion-formulario[hidden] {
    display: none;
}
/* #endregion */