/*
 * «Mis pedidos» (/socio/mis-compras), rediseño del 6 nov 2026 (Sergi: «¿qué has querido simular?»: fuera los papeles y
 * los sellos): arriba, lo que falta por pagar, con lo que hay que hacer; debajo, el historial por meses, cada pedido en
 * una línea con el día del evento en su color o la foto de lo comprado, cuánto y cómo está, su comprobante y su
 * papelera, y una casilla para quitar varios (15 oct 2026: siempre a la vista). Se llega desde «Lo mío».
 *
 * Solo la carga plantillas/socio/mis-compras.php, después de socio.css (de
 * ahí salen «Cómo pagar», el aviso de escribir al encargado de la tienda,
 * «Quitar de mi lista» y el conmutador, que también usan otras pantallas).
 *
 *  1. Las dos secciones
 *  2. Lo común: foto, qué es y cuándo, líneas
 *  3. Por pagar
 *  4. El historial: filtros, meses y filas
 *  5. Quitar varios a la vez: la barra de abajo
 *
 * Convenciones: cada pieza lleva sus ajustes de móvil justo debajo; lo que
 * falta por pagar va en ámbar (aviso); lo cancelado, recogido y apagado.
 */

/* #region 1. Las dos secciones */
.pedidos-seccion {
    --pedido-foto: 4.5rem;
    display: grid;
    gap: var(--espacio-3);
}

.pedidos-seccion[hidden] {
    display: none;
}

.pedidos-seccion:not([hidden]) + .pedidos-seccion {
    margin-top: var(--espacio-8);
}

/* El título a la izquierda; a la derecha, el total por pagar o los filtros. */
.pedidos-seccion__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2) var(--espacio-4);
}

.pedidos-seccion__cabecera h2 {
    margin: 0;
    font-size: clamp(1.25rem, 1.6vw, 1.6rem);
    font-weight: 650;
    letter-spacing: -0.025em;
}

.pedidos-seccion__resumen {
    margin: 0;
    color: var(--rs-aviso);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Los filtros: el conmutador de siempre, a su tamaño; si no caben, pasan de línea. */
.pedidos-filtros {
    flex-wrap: wrap;
    max-width: 100%;
}

.pedidos-filtros[hidden] {
    display: none;
}

.pedidos-filtros__cantidad {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
}

/* En el móvil, sin los números: así caben las cuatro pestañas en una línea. */
@media (max-width: 767px) {
    .pedidos-seccion {
        --pedido-foto: 3.5rem;
    }

    .pedidos-filtros__cantidad {
        display: none;
    }
}

/* «Ver pedidos anteriores», al final y a su tamaño. */
.pedidos-historial__mas {
    justify-self: center;
    margin-top: var(--espacio-2);
}

.pedidos-historial__mas[hidden] {
    display: none;
}
/* #endregion */

/* #region 2. Lo común: foto, qué es y cuándo */
/* Lo comprado, en pequeño y como lo que es: el producto sobre blanco o una bolsa, y una bola del bombo para la lotería. */
.compra__miniatura {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--pedido-foto);
    height: var(--pedido-foto);
    overflow: hidden;
    border-radius: var(--radio-lg);
    color: #FFFFFF;
}

.compra__miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compra__miniatura .icono {
    width: 46%;
    height: 46%;
}

.pedido-foto--entrada {
    background: linear-gradient(145deg, var(--color-eventos), oklch(from var(--color-eventos) calc(l - 0.12) c h));
}

.pedido-foto--tienda {
    background: linear-gradient(145deg, var(--color-tienda), oklch(from var(--color-tienda) calc(l - 0.12) c h));
}

.pedido-foto--tienda:has(img) {
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgb(35 32 26 / 0.1);
}

.pedido-foto--tienda img {
    object-fit: contain;
}

.pedido-foto--loteria {
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #FFF4C9, #E8C572 56%, #B98A32);
    box-shadow: inset -2px -3px 6px rgb(90 60 10 / 0.35), 0 3px 6px rgb(90 60 10 / 0.25);
    color: #5A3C0A;
}

/* Una entrada: el día del evento, en el color de su tipo y siempre oscuro para que el blanco se lea; con cartel, encima de él. */
.pedido-dia {
    --tipo: var(--color-eventos);
    position: relative;
    display: inline-grid;
    flex-shrink: 0;
    place-content: center;
    justify-items: center;
    width: var(--pedido-foto);
    height: var(--pedido-foto);
    overflow: hidden;
    border-radius: var(--radio-lg);
    background: linear-gradient(145deg, oklch(from var(--tipo) 0.46 min(c, 0.15) h), oklch(from var(--tipo) 0.32 min(c, 0.1) h));
    color: #FFFFFF;
    line-height: 1;
}

.pedido-dia img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.55);
}

.pedido-dia :is(b, small) {
    position: relative;
}

.pedido-dia b {
    font-family: var(--fuente-display);
    font-size: calc(var(--pedido-foto) * 0.4);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.pedido-dia small {
    margin-top: 3px;
    font-size: calc(var(--pedido-foto) * 0.16);
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* «Entrada · 9 oct · nº 37203» */
.pedido-meta {
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
}

/* La talla, los metros o cuántas, al lado del nombre. */
.pedido-detalle {
    color: var(--rs-texto-secundario);
    font-family: var(--fuente-ui);
    font-size: var(--texto-etiqueta);
    font-weight: 500;
}

/* #endregion */

/* #region 3. Por pagar: cada pedido en su bloque ámbar, con lo que hay que hacer */
.pedidos-pagar__lista {
    display: grid;
    gap: var(--espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.por-pagar-pedido {
    display: grid;
    gap: var(--espacio-3);
    padding: clamp(16px, 1.8vw, 24px);
    border-radius: var(--radio-xl);
    background: color-mix(in srgb, var(--rs-aviso) 9%, var(--rs-superficie-1));
}

.por-pagar-pedido__cabecera {
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
}

.por-pagar-pedido__textos {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.por-pagar-pedido__textos h3 {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.125rem, 1.4vw, 1.35rem);
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.por-pagar-pedido__quien {
    display: flex;
    align-items: center;
    gap: var(--espacio-1);
    margin: 2px 0 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.por-pagar-pedido__quien .icono {
    flex: none;
    width: 14px;
    height: 14px;
}

.por-pagar-pedido__cuanto {
    display: grid;
    flex-shrink: 0;
    justify-items: end;
    gap: var(--espacio-1);
}

.por-pagar-pedido__importe {
    font-family: var(--fuente-display);
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.por-pagar-pedido__nota {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.por-pagar-pedido__nota .icono {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--rs-aviso);
}

/* Los botones a la izquierda; el número para la sede, a la derecha. */
.por-pagar-pedido__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
}

.por-pagar-pedido__sede {
    display: flex;
    align-items: baseline;
    gap: var(--espacio-2);
    margin: 0 0 0 auto;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.por-pagar-pedido__sede strong {
    flex: none;
    color: var(--rs-texto);
    font-family: var(--fuente-display);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.por-pagar-pedido > .tienda-contacto {
    margin: 0;
}

/* En el móvil, el nombre a todo lo ancho; cuánto y cómo está, debajo. */
@media (max-width: 767px) {
    .por-pagar-pedido__cabecera {
        flex-wrap: wrap;
        gap: var(--espacio-3);
    }

    .por-pagar-pedido__textos {
        flex-basis: calc(100% - var(--pedido-foto) - var(--espacio-3));
    }

    .por-pagar-pedido__cuanto {
        display: flex;
        flex-basis: 100%;
        align-items: baseline;
        justify-content: space-between;
    }

    .por-pagar-pedido__acciones .boton {
        flex: 1;
    }

    .por-pagar-pedido__sede {
        flex-basis: 100%;
        justify-content: space-between;
        margin: 0;
    }
}
/* #endregion */

/* #region 4. El historial: filtros, meses y filas */
/* Por tipo (el conmutador), por estado y por mes (los desplegables), en una fila que pasa de línea si no cabe. */
.pedidos-historial__filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
}

.pedidos-historial__filtros:not(:has(> :not([hidden], label))) {
    display: none;
}

.pedidos-historial__desplegable {
    width: auto;
    min-height: 40px;
}

.pedidos-historial__desplegable[hidden] {
    display: none;
}

@media (max-width: 767px) {
    .pedidos-historial__desplegable {
        flex: 1;
    }
}

.historial-mes[hidden],
.historial-pedido[hidden],
.historial-canceladas[hidden] {
    display: none;
}

.historial-mes {
    margin-top: var(--espacio-5);
}

.historial-mes + .historial-mes {
    margin-top: var(--espacio-8);
}

/* El mes y lo que se pagó en él: como una hoja del extracto. */
.historial-mes__titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espacio-3);
    margin: 0 0 var(--espacio-1);
    font-family: var(--fuente-display);
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    font-weight: 650;
    letter-spacing: -0.02em;
}

.historial-mes__total {
    font-variant-numeric: tabular-nums;
}

.historial-mes__lista {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.historial-pedido:not(:last-child) {
    border-bottom: 1px solid var(--rs-borde);
}

/* Su casilla, lo que es, qué es y cuándo, cuánto y cómo está, y sus documentos. */
.historial-pedido__fila {
    display: grid;
    grid-template-columns: 20px var(--pedido-foto) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--espacio-3) var(--espacio-4);
    padding-block: var(--espacio-3);
    border-radius: var(--radio-md);
}

/* La casilla: siempre a la vista, discreta; marcada, la línea toma su color. */
.historial-pedido__casilla {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
}

.historial-pedido__casilla--hueco {
    display: inline-block;
}

.historial-pedido__fila:has(.historial-pedido__casilla:checked) {
    box-shadow: 0 0 0 var(--espacio-2) color-mix(in srgb, var(--marca-acento) 10%, transparent);
    background: color-mix(in srgb, var(--marca-acento) 10%, transparent);
}

.historial-pedido__textos {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.historial-pedido__textos > strong {
    font-family: var(--fuente-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.historial-pedido__cuanto {
    display: grid;
    justify-items: end;
    gap: 2px;
    text-align: right;
}

.historial-pedido__importe {
    font-family: var(--fuente-display);
    font-size: 1.125rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Lo cancelado, recogido al final del mes: sigue ahí, pero no compite con lo vivo. */
.historial-canceladas {
    margin-top: var(--espacio-1);
}

.historial-canceladas summary {
    width: fit-content;
    padding-block: var(--espacio-2);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
    font-weight: 600;
    cursor: pointer;
}

.historial-canceladas summary:hover {
    color: var(--marca-acento);
}

.historial-pedido--anulado :is(.historial-pedido__textos > strong, .historial-pedido__importe),
.historial-pedido--reembolsado .historial-pedido__importe {
    color: var(--rs-texto-secundario);
}

.historial-pedido--anulado .historial-pedido__importe {
    text-decoration: line-through;
}

.historial-pedido--anulado :is(.compra__miniatura, .pedido-dia) {
    opacity: 0.5;
    filter: saturate(0.5);
}

/* El comprobante, el abono y la papelera: solo iconos, callados hasta que se pasa por encima. */
.historial-pedido__acciones {
    display: flex;
    justify-content: flex-end;
    min-width: 4.5rem;
    margin-right: calc(-1 * var(--espacio-1));
}

.historial-pedido__accion {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--rs-texto-secundario);
}

.historial-pedido__accion:hover {
    color: var(--marca-acento);
}

.historial-pedido__accion--quitar {
    color: var(--rs-texto-tenue);
}

.historial-pedido__accion--quitar:hover {
    color: var(--rs-peligro-texto);
}

.historial-pedido__accion--preparando {
    color: var(--rs-texto-tenue);
    cursor: default;
}

.historial-pedido__accion--preparando .icono {
    animation: girar 1.2s linear infinite;
}

.historial-pedido > .tienda-contacto {
    margin: 0 0 var(--espacio-3) calc(20px + var(--pedido-foto) + 2 * var(--espacio-4));
}

/* Sus devoluciones, debajo y alineadas con el texto: siempre a la vista (26 oct 2026). */
.historial-devoluciones {
    display: grid;
    gap: var(--espacio-1);
    margin: 0;
    padding: 0 0 var(--espacio-3) calc(20px + var(--pedido-foto) + 2 * var(--espacio-4));
    list-style: none;
}

.historial-devolucion {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    color: var(--rs-exito-texto);
    font-size: var(--texto-etiqueta);
}

.historial-devolucion--tramite {
    color: var(--rs-aviso-texto);
}

.historial-devolucion .icono {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

/* En el móvil, cuánto y sus documentos, debajo del nombre. */
@media (max-width: 767px) {
    .historial-pedido__fila {
        grid-template-columns: 20px var(--pedido-foto) minmax(0, 1fr) auto;
        gap: var(--espacio-1) var(--espacio-3);
    }

    .historial-pedido__casilla,
    .historial-pedido__fila > :is(.compra__miniatura, .pedido-dia) {
        grid-row: 1 / span 2;
        align-self: start;
    }

    .historial-pedido__textos {
        grid-column: 3 / -1;
    }

    .historial-pedido__cuanto {
        grid-column: 3;
        justify-items: start;
        text-align: left;
    }

    .historial-pedido__acciones {
        grid-column: 4;
        min-width: 0;
    }

    .historial-pedido > .tienda-contacto,
    .historial-devoluciones {
        margin-left: 0;
        padding-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .historial-pedido__accion--preparando .icono {
        animation: none;
    }
}
/* #endregion */

/* #region 5. Quitar varios a la vez: la barra de abajo */
/* La barra de abajo: cuántos van y qué hacer; en el móvil, encima del menú. */
.pedidos-seleccion {
    position: fixed;
    bottom: var(--espacio-5);
    left: 50%;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    width: min(36rem, calc(100% - 2 * var(--espacio-4)));
    padding: var(--espacio-3) var(--espacio-3) var(--espacio-3) var(--espacio-5);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
    box-shadow: var(--sombra-lg);
    transform: translateX(-50%);
}

.pedidos-seleccion[hidden] {
    display: none;
}

.pedidos-seleccion__cuantos {
    flex: 1;
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Con la barra, sitio al final para que no tape los últimos pedidos. */
.contenido-socio--con-barra {
    padding-bottom: calc(var(--espacio-8) * 3);
}

@media (max-width: 767px) {
    .pedidos-seleccion {
        bottom: calc(68px + var(--espacio-2) + env(safe-area-inset-bottom));
        padding-left: var(--espacio-4);
    }

    .pedidos-seleccion .boton span {
        display: none;
    }

    .contenido-socio--con-barra {
        padding-bottom: calc(88px + 68px + env(safe-area-inset-bottom));
    }
}
/* #endregion */

/* #region Evento aplazado: de qué fecha a cuál y «No puedo ir» (28 oct 2026, migración 0265) */
.historial-aplazado {
    display: grid;
    gap: var(--espacio-2);
    justify-items: start;
    margin: 0 0 var(--espacio-3) calc(20px + var(--pedido-foto) + 2 * var(--espacio-4));
    padding: var(--espacio-3) var(--espacio-4);
    border-radius: var(--radio-md);
    background: color-mix(in srgb, var(--rs-aviso) 10%, var(--rs-superficie-1));
}

.historial-aplazado__titulo,
.historial-aplazado__nota {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    margin: 0;
    font-size: var(--texto-etiqueta);
}

.historial-aplazado__titulo {
    font-weight: 600;
    color: var(--rs-aviso-texto);
}

.historial-aplazado__nota {
    color: var(--rs-texto-secundario);
}

.historial-aplazado .icono {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.historial-aplazado__personas {
    display: grid;
    gap: var(--espacio-2);
    margin-block: var(--espacio-2);
}

@media (max-width: 767px) {
    .historial-aplazado {
        margin-left: 0;
    }
}
/* #endregion */