/* =====================================================================
   ÁREA DE CLIENTE — "la tienda del socio"
   =====================================================================
   Idea: esto no es un panel de control. El socio tiene UN número que le
   importa (su saldo), y un sitio donde gastarlo. Así que la portada es el
   catálogo y el saldo viaja arriba, siempre visible, como una cartera.

   Lo que manda el dato real: 536 socios con saldo (media 40,71 €) y 211
   lotes ya caducados. Por eso el catálogo se ordena por lo que CADA UNO
   puede llevarse hoy, y la caducidad se avisa arriba, no se esconde.

   Color: los tokens salen de web/css/theme-light.css (el <body> lleva
   tema-claro), así que el área sigue la paleta activa de la web. El
   degradado de marca se usa en DOS sitios y en ninguno más: la cartera y
   el estado "puedes llevártelo". Todo lo demás es papel, tinta y una
   línea fina.
   ===================================================================== */

body.cl {
    background: var(--bg-soft, #F8F6FB);
    color: var(--ink, #262626);
    font-family: 'Montserrat', system-ui, sans-serif;
    margin: 0;
    /* Las cifras de dinero en versalitas tabulares: en una pantalla llena
       de precios, que no baile la coma es funcional, no estético. */
    font-variant-numeric: tabular-nums;
}
.cl-ancho { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- Cabecera ---------------------------------------------------
   Antes eran dos barras (una degradada de 60 px y otra de iconos de 70):
   130 px de cromo antes de ver nada. Ahora una sola, blanca y fina. */
.cl-top {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line, #E9E3F1);
}
.cl-top-in {
    max-width: 1180px; margin: 0 auto; padding: .7rem 1.25rem;
    display: flex; align-items: center; gap: 1rem;
}
body.cl .cl-logo { display: inline-flex; align-items: center; min-height: 44px; }
.cl-logo img { height: 30px; width: auto; display: block; }

/* La cartera. Es la única pieza con el degradado en la cabecera. */
body.cl .cl-cartera {
    margin-left: auto;
    display: inline-flex; align-items: baseline; gap: .45rem;
    background: var(--bv-grad, linear-gradient(115deg,#7938AD,#B53486));
    color: #fff; text-decoration: none;
    padding: .5rem 1.05rem; border-radius: 999px;
    box-shadow: 0 6px 18px rgba(var(--bv-shadow-rgb, 121,56,173), .26);
}
body.cl .cl-cartera b { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
body.cl .cl-cartera span { font-size: .72rem; opacity: .9; }
body.cl .cl-cartera:hover { color: #fff; filter: saturate(1.06); }

.cl-menu { display: flex; align-items: center; gap: .2rem; }
body.cl .cl-menu a {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 44px; padding: 0 .8rem; border-radius: 999px;
    color: var(--ink-2, #525251); text-decoration: none;
    font-size: .9rem; font-weight: 600;
}
body.cl .cl-menu a:hover { background: var(--wash, #F3ECFA); color: var(--ink, #262626); }
body.cl .cl-menu a.act { color: var(--pink-texto, #6B2F9A); font-weight: 800; }
.cl-menu a i { font-size: 1rem; }
body.cl .cl-salir { color: var(--ink-3, #6E6E6D) !important; }

/* ---------- Aviso de caducidad -----------------------------------------
   Solo aparece si de verdad caduca algo pronto. Es el saldo del socio: se
   avisa, no se deja morir. */
.cl-caduca {
    background: var(--wash, #F3ECFA);
    border-bottom: 1px solid var(--line, #E9E3F1);
    font-size: .88rem;
}
.cl-caduca div {
    max-width: 1180px; margin: 0 auto; padding: .6rem 1.25rem;
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    color: var(--ink-2, #525251);
}
.cl-caduca i { color: var(--naranja-texto, #9E2A74); }
/* Petición de reseña: misma franja discreta que el aviso de caducidad */
.cl-resena i { color: #F5A623; }
.cl-resena .cl-resena-ir { margin-left: auto; padding: .4rem .9rem; border-radius: 999px; background: var(--color-primary, #7938AD); color: #fff !important; font-weight: 700; font-size: .82rem; text-decoration: none; }
.cl-resena .cl-resena-no { border: 0; background: none; color: var(--ink-3, #6E6E6D); font: inherit; font-size: .82rem; cursor: pointer; text-decoration: underline; padding: .3rem .4rem; }
@media (max-width: 640px) { .cl-resena .cl-resena-ir { margin-left: 0; } }
.cl-caduca b { color: var(--ink, #262626); }
body.cl .cl-caduca a { color: var(--pink-texto, #6B2F9A); font-weight: 700; }

/* ---------- Encabezado de la tienda ------------------------------------ */
.cl-intro { padding: 2.2rem 0 1.2rem; }
body.cl .cl-intro h1 {
    margin: 0 0 .3rem; font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800; letter-spacing: -.02em; color: var(--ink, #262626);
}
.cl-intro p { margin: 0; color: var(--ink-3, #6E6E6D); font-size: .98rem; }

/* Filtros. Píldoras, no pestañas: no hay jerarquía entre categorías. */
.cl-filtros { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1.1rem 0 1.6rem; }
.cl-filtro {
    border: 1px solid var(--line, #E9E3F1); background: #fff;
    color: var(--ink-2, #525251); font: inherit; font-size: .84rem; font-weight: 600;
    padding: .45rem .9rem; border-radius: 999px; cursor: pointer;
    min-height: 36px; display: inline-flex; align-items: center; gap: .4rem;
}
.cl-filtro:hover { border-color: var(--bv-pink, #7938AD); color: var(--ink, #262626); }
.cl-filtro.act { background: var(--bv-grad); border-color: transparent; color: #fff; }
.cl-filtro small { opacity: .7; font-weight: 600; }

/* ---------- Bandas por alcance -----------------------------------------
   El catálogo no se ordena por categoría, se ordena por lo que ESTE socio
   puede llevarse. Es la idea de toda la pantalla. */
.cl-banda { margin: 0 0 2.4rem; }
/* style.css lleva un `h2 { text-align: center }` global de la epoca
   anterior: aqui los titulos de banda van alineados con el resto. */
body.cl .cl-banda > h2 {
    margin: 0 0 .25rem; font-size: 1.05rem; font-weight: 800;
    color: var(--ink, #262626); letter-spacing: -.01em;
    text-align: left;
}
.cl-banda > p { margin: 0 0 1rem; font-size: .88rem; color: var(--ink-3, #6E6E6D); }

.cl-rejilla {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
}

/* ---------- Tarjeta de producto ----------------------------------------
   Filete fino, sin sombra. La sombra se reserva para lo que el socio ya
   puede llevarse: es la única jerarquía que importa aquí. */
.cl-art {
    background: #fff; border: 1px solid var(--line, #E9E3F1);
    border-radius: 14px; overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.cl-art:hover { border-color: var(--bv-pink, #7938AD); }
.cl-art.puedes { box-shadow: 0 1px 2px rgba(82,82,81,.05), 0 10px 24px rgba(var(--bv-shadow-rgb,121,56,173),.10); }

.cl-foto { aspect-ratio: 1 / 1; background: #fff; display: grid; place-items: center; padding: .9rem; }
.cl-foto img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.cl-cuerpo { padding: .2rem .9rem 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.cl-nom {
    font-size: .88rem; font-weight: 600; line-height: 1.3; color: var(--ink, #262626);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cl-precios { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.cl-pvp { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink, #262626); }
.cl-tienda { font-size: .8rem; color: var(--ink-3, #6E6E6D); text-decoration: line-through; }
.cl-ahorro { font-size: .78rem; font-weight: 700; color: var(--ok, #0A7A54); }

/* Los tres estados. Es la información, no decoración. */
.cl-estado { margin-top: auto; font-size: .8rem; font-weight: 700; }
.cl-estado.puedes { color: var(--ok, #0A7A54); }
.cl-estado.falta  { color: var(--ink-3, #6E6E6D); }
body.cl .cl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    width: 100%; min-height: 42px; border: 0; border-radius: 999px;
    font: inherit; font-size: .88rem; font-weight: 800; cursor: pointer;
    text-decoration: none; background: var(--bv-grad); color: #fff;
}
body.cl .cl-btn:hover { color: #fff; filter: saturate(1.06); }
body.cl .cl-btn[disabled], body.cl .cl-btn.off {
    background: #fff; color: var(--ink-3, #6E6E6D);
    border: 1px solid var(--line, #E9E3F1); cursor: default; filter: none;
}
.cl-agotado { font-size: .78rem; font-weight: 700; color: var(--naranja-texto, #9E2A74); }
.cl-art.agotada { opacity: .62; }
.cl-art.agotada .cl-foto img { filter: grayscale(.8); }
.cl-art.agotada:hover { opacity: .85; }
.cl-h2-nota { font-size: .85rem; font-weight: 500; color: var(--ink-3, #6E6E6D); margin-left: .5rem; }

/* ---------- Vacío y pie ------------------------------------------------ */
.cl-vacio { text-align: center; padding: 3rem 1rem; color: var(--ink-3, #6E6E6D); }
.cl-vacio b { display: block; color: var(--ink, #262626); font-size: 1.05rem; margin-bottom: .35rem; }
.cl-pie { border-top: 1px solid var(--line, #E9E3F1); margin-top: 2rem; padding: 1.6rem 0 3rem; color: var(--ink-3,#6E6E6D); font-size: .86rem; }
body.cl .cl-pie a { color: var(--pink-texto, #6B2F9A); font-weight: 600; }

/* ---------- Móvil ------------------------------------------------------
   El menú baja a una barra inferior: esta gente entra desde el móvil y el
   pulgar llega abajo, no arriba. */
@media (max-width: 767px) {
    /* OJO: backdrop-filter crea bloque contenedor para los descendientes
       position:fixed, asi que .cl-menu se anclaba al final de la cabecera
       (arriba) en vez de al final de la pantalla. En movil la cabecera va
       opaca y sin filtro, y la barra baja donde llega el pulgar. */
    .cl-top {
        background: #fff;
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .cl-top-in { padding: .55rem 1rem; gap: .6rem; }
    .cl-logo img { height: 26px; }
    body.cl .cl-cartera { padding: .45rem .85rem; }
    .cl-menu {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: rgba(255,255,255,.97);
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        border-top: 1px solid var(--line, #E9E3F1);
        justify-content: space-around; padding: .25rem .4rem;
        padding-bottom: calc(.25rem + env(safe-area-inset-bottom, 0px));
    }
    body.cl .cl-menu a { flex-direction: column; gap: .1rem; font-size: .75rem; padding: .35rem .4rem; min-height: 50px; }
    body.cl .cl-menu a i { font-size: 1.15rem; }
    body.cl .cl-menu a:hover { background: transparent; }
    body.cl { padding-bottom: 68px; }
    /* Diez categorias en pildoras ocupaban cinco filas antes de ver un solo
       premio. Una tira de una linea que se desliza con el dedo. */
    .cl-filtros {
        flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
        margin-inline: -1rem; padding-inline: 1rem; padding-bottom: .4rem;
        scrollbar-width: none;
    }
    .cl-filtros::-webkit-scrollbar { display: none; }
    .cl-filtro { flex: 0 0 auto; scroll-snap-align: start; }
    .cl-rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
    .cl-cuerpo { padding: .2rem .7rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cl-art, .cl-btn, body.cl .cl-menu a { transition: none; }
}

/* Filtrado por categoría: oculta, no recoloca, para que no salte la página */
.cl-art[hidden] { display: none; }
.cl-banda[hidden] { display: none; }

/* =====================================================================
   AMIGOS — "a quién has traído"
   Solo 3 socios de 472 han traído a alguien. El problema no es que el
   cartel fuera pequeño (era enorme y en degradado en todas las pantallas):
   es que no se entiende qué gana uno ni cuándo. Así que aquí manda el
   enlace —lo único accionable— y el resto es consecuencia.
   ===================================================================== */
body.cl .magic-card {
    background: #fff; border: 1px solid var(--line, #E9E3F1);
    border-radius: 14px; padding: 1.2rem; display: flex; gap: 1rem;
    align-items: center; flex-wrap: wrap; box-shadow: var(--shadow-1);
}
body.cl .magic-card .icon { color: var(--pink-texto, #6B2F9A); font-size: 1.4rem; }
body.cl .magic-card .info { flex: 1 1 280px; min-width: 0; }
body.cl .magic-card h3 { margin: 0 0 .4rem; font-size: .95rem; font-weight: 800; color: var(--ink, #262626); text-align: left; }
body.cl .magic-card .codigo {
    font-size: .88rem; font-weight: 600; color: var(--ink, #262626);
    background: var(--bg-soft, #F8F6FB); border: 1px solid var(--line, #E9E3F1);
    border-radius: 10px; padding: .6rem .8rem; word-break: break-all;
}
body.cl .magic-card .hint { margin-top: .45rem; font-size: .82rem; color: var(--ink-3, #6E6E6D); }
body.cl .btn-copy {
    background: var(--bv-grad); color: #fff; border: 0; border-radius: 999px;
    padding: .7rem 1.3rem; font: inherit; font-weight: 800; font-size: .88rem;
    cursor: pointer; min-height: 44px;
}

body.cl .stats-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 1.4rem 0; }
body.cl .stat-card {
    background: #fff; border: 1px solid var(--line, #E9E3F1); border-radius: 12px;
    padding: 1rem; text-align: left;
}
body.cl .stat-card .value { font-size: 1.5rem; font-weight: 800; color: var(--ink, #262626); letter-spacing: -.02em; }
body.cl .stat-card .label { font-size: .78rem; color: var(--ink-3, #6E6E6D); margin-top: .15rem; }
/* El degradado va en UNA tarjeta por pantalla, la que de verdad importa.
   Ojo: la clase .warning significa cosas distintas segun la pagina (en
   amigos es "Ganado hasta hoy", en mis_movimientos es "Ya gastado"), asi
   que la de amigos va acotada a su pagina; si no, se destaca justo lo
   contrario de lo que toca. */
body.cl .stat-card.highlight { background: var(--bv-grad); border-color: transparent; }
body.cl .stat-card.highlight .value,
body.cl .stat-card.highlight .label { color: #fff; }
body.cl.pag-amigos .stat-card.warning { background: var(--bv-grad); border-color: transparent; }
body.cl.pag-amigos .stat-card.warning .value,
body.cl.pag-amigos .stat-card.warning .label { color: #fff; }
/* Y en amigos la destacada es esa, no "Confirmados": una sola por pantalla. */
body.cl.pag-amigos .stat-card.highlight { background: #fff; border-color: var(--line, #E9E3F1); }
body.cl.pag-amigos .stat-card.highlight .value { color: var(--ok, #0A7A54); }
body.cl.pag-amigos .stat-card.highlight .label { color: var(--ink-3, #6E6E6D); }
body.cl .stat-card.success .value { color: var(--ok, #0A7A54); }
body.cl .stat-card.warning .value { color: var(--naranja-texto, #9E2A74); }

body.cl .saldo-card {
    background: var(--bg-soft, #F8F6FB); border: 1px solid var(--line, #E9E3F1);
    border-radius: 14px; padding: 1.2rem; display: flex; gap: 1.2rem;
    align-items: center; flex-wrap: wrap; margin-bottom: 1.4rem;
}
body.cl .saldo-value { font-size: 1.6rem; font-weight: 800; color: var(--ink, #262626); letter-spacing: -.02em; }
body.cl .saldo-label { font-size: .8rem; color: var(--ink-3, #6E6E6D); }
body.cl .saldo-extra { display: flex; gap: 1.4rem; flex-wrap: wrap; }
body.cl .saldo-item .val { font-size: .95rem; font-weight: 700; color: var(--ink, #262626); }
body.cl .saldo-item .val[style] { color: var(--naranja-texto, #9E2A74) !important; }
body.cl .saldo-item .lbl { font-size: .74rem; color: var(--ink-3, #6E6E6D); }
body.cl .saldo-card .btn { margin-left: auto; background: #fff; color: var(--pink-texto, #6B2F9A); border: 1px solid var(--line-marca, #D3BCE9); border-radius: 999px; padding: .6rem 1.1rem; font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; }

body.cl .card { background: #fff; border: 1px solid var(--line, #E9E3F1); border-radius: 14px; overflow: hidden; }
body.cl .card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line, #E9E3F1); }
body.cl .card-header h3 { margin: 0; font-size: .95rem; font-weight: 800; color: var(--ink, #262626); text-align: left; }
body.cl .card-header span { color: var(--ink-3, #6E6E6D) !important; }
body.cl .card-body { padding: .4rem 1.2rem 1.2rem; }
body.cl .referido-item { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem 0; border-bottom: 1px solid var(--line, #E9E3F1); }
body.cl .referido-item:last-child { border-bottom: 0; }
body.cl .referido-info h4 { margin: 0 0 .2rem; font-size: .92rem; font-weight: 700; color: var(--ink, #262626); }
body.cl .referido-info .meta { font-size: .8rem; color: var(--ink-3, #6E6E6D); }
body.cl .empty-state { text-align: center; padding: 2.4rem 1rem; color: var(--ink-3, #6E6E6D); }
body.cl .empty-state i { font-size: 1.8rem; color: var(--line-marca, #D3BCE9); margin-bottom: .6rem; }
body.cl .empty-state p:first-of-type { color: var(--ink, #262626); font-weight: 700; margin: .3rem 0; }
body.cl .no-magic-alert { background: var(--wash, #F3ECFA); border: 1px solid var(--line-marca, #D3BCE9); border-radius: 14px; padding: 1.1rem; display: flex; gap: .9rem; align-items: flex-start; }
body.cl .no-magic-alert i { color: var(--naranja-texto, #9E2A74); }
body.cl .no-magic-alert h4 { margin: 0 0 .25rem; color: var(--ink, #262626); font-size: .95rem; }
body.cl .no-magic-alert p { margin: 0; color: var(--ink-2, #525251); font-size: .86rem; }
body.cl .subtitle { color: var(--ink-3, #6E6E6D); font-size: .95rem; margin: 0 0 1.4rem; }
body.cl main > h2 { text-align: left; font-size: clamp(1.4rem, 3vw, 2rem); margin: 2rem 0 .3rem; }