/* ============================================================================================================================
 * pl-decimos-ws.css (18/10/2026): el módulo de décimos de la web principal (loteria_todos_numeros.aspx: jueves, sábado, Navidad,
 * Niño, número y terminación) con el estilo de la tarjeta de décimo de las WEBS SOCIALES. Lo enlaza solo esa página (no el master).
 * La imagen oficial del décimo no se toca y el fondo de la página sigue blanco. Subir el ?v= del <link> al cambiar este fichero.
 *
 * Fuente de cada token: websse-react (origin/staging), src/components/home/HeroV6.tsx salvo que se diga otra cosa:
 *   tarjeta bg-white rounded-xl border-2 border-slate-200 shadow-xl ............................................... :2043
 *   imagen oficial en su caja, scale-[0.97] (aquí: 8 px de aire) .................................................. :2045-2049
 *   separador imagen / acción border-t-2 border-slate-100 ......................................................... :2086
 *   franja de acción bg-slate-50 px-3 (md:px-5) py-[9px] min-h 74px ............................................... :2091
 *   AÑADIR A LA CESTA en contorno: h-[56px] bg-white text-slate-700 border border-rose-500, hover borde 2 + shadow-md,
 *     font-black 14px rounded-full uppercase tracking-wide; ShoppingCart 18px rose-500 ............................ :2131-2138
 *   chip EN CESTA bg-white border-slate-300 rounded-lg px-1.5 py-[10px]; carrito 16px; 8px bold uppercase slate-500 .. :2144-2146
 *   «1 décimo» slate-500 font-medium; importe slate-900 font-black text-xl/lg ..................................... :2169-2174
 *   − / + w-10 h-10 (sm: w-9 h-9) bg-rose-600 hover:bg-rose-700 font-black rounded-full ............................ :2181, :2189
 *   cantidad h-9/h-10 rounded-full border-slate-400 bg-white font-bold min-w-48px .................................. :2185
 *   pie border-t border-slate-100 px-5 pt-3 pb-4, slate-600 text-sm centrado (SIN la barra de progreso de la WS) ... :2222-2238
 *   BUSCAR = CTA lleno (JUGAR YA) bg-rose-600 hover:bg-rose-700 text-white font-black rounded-full uppercase ........ :2500-2503
 *   campo y desplegable = chips de importe h-10 rounded-full font-bold 17px border-slate-400 hover:border-rose-400 .. :2581
 *   popup = modal de décimo, components/cesta/VistaDecimo.tsx:136-160 (bg-slate-900/60, caja max-w rounded-xl shadow-2xl)
 * Colores de Tailwind v4 pasados a hex (sRGB aproximado de su oklch). Fuente Lato (ya la carga el master).
 * ========================================================================================================================== */

:root {
    --dws-rose-400: #ff637e;
    --dws-rose-500: #ff2056;
    --dws-rose-600: #ec003f;
    --dws-rose-700: #c70036;
    --dws-slate-50: #f8fafc;
    --dws-slate-100: #f1f5f9;
    --dws-slate-200: #e2e8f0;
    --dws-slate-300: #cad5e2;
    --dws-slate-400: #90a1b9;
    --dws-slate-500: #62748e;
    --dws-slate-600: #45556c;
    --dws-slate-700: #314158;
    --dws-slate-900: #0f172b;
    --dws-sombra-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
    --dws-sombra-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    /* 'PL Lato reserva' (pl-historico-loteria.css): la de reserva con las medidas de Lato, para que el buscador y la rejilla no
     * cambien de alto al llegar Lato de Google Fonts (CLS). Con Lato cargada no se usa. */
    --dws-font: 'Lato', 'PL Lato reserva', ui-sans-serif, system-ui, sans-serif;
    --dws-aire-imagen: 8px;
}

/* ─── Tarjeta del décimo ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.cotenedor-boleto-total.pl-dws {
    display: flex;
    flex-direction: column;
    margin: 0 0 24px;
    padding: 0;
    background: #fff;
    border: 2px solid var(--dws-slate-200);
    border-radius: 12px;
    box-shadow: var(--dws-sombra-xl);
    overflow: hidden;
    font-family: var(--dws-font);
}
.cotenedor-boleto-total.pl-dws .boleto-total-imagen {
    height: auto;
    margin: 0;
    padding: var(--dws-aire-imagen) var(--dws-aire-imagen) 6px;
    background: #fff;
    border-bottom: 2px solid var(--dws-slate-100);
}
.cotenedor-boleto-total.pl-dws .boleto-total-imagen img { display: block; width: 100%; }

/* El número impreso encima de la imagen, en proporción a la imagen y no en px por tipo de dispositivo (screen.css): en tableta y en
 * las columnas estrechas el número de 37 px se montaba sobre el texto del décimo. Medido en staging a 1280 (imagen de 374 px:
 * número de 37 px, centrado en el 57,5 % del ancho y a 24,5 px del borde de arriba). Sin unidades de contenedor, lo de siempre. */
@supports (width: 1cqw) {
    .cotenedor-boleto-total.pl-dws .boleto-total-imagen { container-type: inline-size; }
    .cotenedor-boleto-total.pl-dws .boleto-total-imagen .boleto_numero-loteria {
        position: absolute;
        left: var(--dws-aire-imagen);
        top: var(--dws-aire-imagen);
        width: calc(100% - 2 * var(--dws-aire-imagen));
        height: 0;
    }
    .cotenedor-boleto-total.pl-dws .boleto-total-imagen .boleto_numero-loteria p {
        position: absolute;
        left: 57.5%;
        top: 6.55cqw;
        margin: 0;
        transform: translateX(-50%);
        white-space: nowrap;
        font-size: 9.9cqw;
        line-height: 1;
        letter-spacing: .53cqw;
    }
}

/* Franja de acción: AÑADIR A LA CESTA, o (ya en la cesta) [EN CESTA] 1 décimo / 20,00 € (−) (1) (+). El servidor pinta una u otra. */
.cotenedor-boleto-total.pl-dws .pl-dws-accion {
    display: flex;
    align-items: center;
    min-height: 74px;
    padding: 9px 12px;
    background: var(--dws-slate-50);
}
.cotenedor-boleto-total.pl-dws .pl-dws-anyadir { width: 100%; }
.pl-dws .pl-dws-btn-anyadir {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--dws-rose-500);
    border-radius: 9999px;
    box-shadow: none;
    color: var(--dws-slate-700);
    font-family: var(--dws-font);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .025em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow .15s;
}
.pl-dws .pl-dws-btn-anyadir:hover,
.pl-dws .pl-dws-btn-anyadir:focus {
    /* hover:border-2 sin mover el contenido: el segundo píxel del borde va en la sombra */
    color: var(--dws-slate-700);
    text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--dws-rose-500), var(--dws-sombra-md);
}
.pl-dws .pl-dws-btn-anyadir:focus-visible,
.pl-dws .pl-dws-menos:focus-visible,
.pl-dws .pl-dws-mas:focus-visible,
.pl-azar-cerrar:focus-visible,
.pl-azar-otro:focus-visible {
    outline: 2px solid var(--dws-rose-500);
    outline-offset: 2px;
}
.pl-dws .pl-dws-ico { flex: none; color: var(--dws-rose-500); }

.cotenedor-boleto-total.pl-dws .pl-dws-encesta {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
}
.pl-dws .pl-dws-chip {
    flex: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 10px 6px;
    background: #fff;
    border: 1px solid var(--dws-slate-300);
    border-radius: 8px;
    color: var(--dws-slate-500);
    font-family: var(--dws-font);
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .025em;
    text-transform: uppercase;
}
.pl-dws .pl-dws-resumen {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.pl-dws .pl-dws-uds { color: var(--dws-slate-500); font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.pl-dws .pl-dws-imp { color: var(--dws-slate-900); font-size: 18px; font-weight: 900; line-height: 1.1; white-space: nowrap; }
.pl-dws .pl-dws-menos,
.pl-dws .pl-dws-mas {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    background: var(--dws-rose-600);
    border: 0;
    border-radius: 9999px;
    color: #fff;
    font-family: var(--dws-font);
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s;
}
.pl-dws .pl-dws-menos:hover, .pl-dws .pl-dws-menos:focus,
.pl-dws .pl-dws-mas:hover, .pl-dws .pl-dws-mas:focus { background: var(--dws-rose-700); color: #fff; text-decoration: none; }
.pl-dws .pl-dws-cant {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 48px;
    height: 36px;
    margin: 0;
    padding: 0 6px;
    background: #fff;
    border: 1px solid var(--dws-slate-400);
    border-radius: 9999px;
    box-shadow: none;
    color: var(--dws-slate-900);
    font-family: var(--dws-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    position: static;
}
input.pl-dws-cant { cursor: default; }

/* Pie «Quedan N décimos» (en el sitio de la barra de progreso de la WS, que aquí no se pinta: no hay dato real) */
.cotenedor-boleto-total.pl-dws .cant-decimos.pl-dws-pie {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 20px 16px;
    background: #fff;
    border: 0;
    border-top: 1px solid var(--dws-slate-100);
    text-align: center;
}
.cotenedor-boleto-total.pl-dws .pl-dws-pie p {
    margin: 0;
    color: var(--dws-slate-600);
    font-family: var(--dws-font);
    font-size: 14px;
    line-height: 20px;
}
.cotenedor-boleto-total.pl-dws .pl-dws-pie b { color: var(--dws-slate-700); font-weight: 700; }
.cotenedor-boleto-total.pl-dws .pl-dws-pie p.pl-dws-pocos,
.cotenedor-boleto-total.pl-dws .pl-dws-pie p.pl-dws-pocos b { color: var(--dws-rose-600); }

@media (min-width: 768px) {
    .cotenedor-boleto-total.pl-dws .pl-dws-accion { padding: 9px 16px; }
}
/* Móvil: − y + de 40 px (w-10 h-10) y el importe más grande */
@media (max-width: 639px) {
    .pl-dws .pl-dws-menos, .pl-dws .pl-dws-mas { width: 40px; height: 40px; }
    .pl-dws .pl-dws-cant { height: 40px; }
    .pl-dws .pl-dws-imp { font-size: 20px; }
}
/* Tarjetas estrechas (3 columnas de 992-1199 y móviles de 320-359): la fila «en cesta» cabe en una línea */
@media (min-width: 992px) and (max-width: 1199px), (max-width: 359px) {
    .cotenedor-boleto-total.pl-dws .pl-dws-accion { padding: 9px 10px; }
    .cotenedor-boleto-total.pl-dws .pl-dws-encesta { gap: 5px; }
    .pl-dws .pl-dws-menos, .pl-dws .pl-dws-mas { width: 34px; height: 34px; }
    .pl-dws .pl-dws-cant { width: 40px; height: 34px; }
    .pl-dws .pl-dws-uds { font-size: 13px; }
    .pl-dws .pl-dws-imp { font-size: 16px; }
    .pl-dws .pl-dws-btn-anyadir { gap: 8px; padding: 0 10px; font-size: 13px; }
}

/* Encabezado «Otros números que igual te interesan» / «Ooops...» y MOSTRAR MÁS DÉCIMOS (botón secundario de la WS) */
.pl-rejilla-decimos .sinresultados { font-family: var(--dws-font); font-weight: 900; font-size: 18px; color: var(--dws-slate-900); }
.pl-rejilla-decimos .btn.btn-blanco {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--dws-slate-400);
    border-radius: 9999px;
    color: var(--dws-slate-700);
    font-family: var(--dws-font);
    font-size: 16px;
    font-weight: 700;
    box-shadow: none;
    transition: border-color .15s;
}
.pl-rejilla-decimos .btn.btn-blanco:hover, .pl-rejilla-decimos .btn.btn-blanco:focus { border-color: var(--dws-rose-400); color: var(--dws-slate-700); }
.pl-rejilla-decimos .btn.btn-blanco .fa { color: var(--dws-rose-500); }

/* ─── Buscador (chips/inputs y CTA de la WS); mismas acciones de siempre ─────────────────────────────────────────────────── */
section.pl-buscador-loteria .cubo-search {
    min-height: 0;
    padding: 20px 24px 24px;
    background: #fff;
    border: 2px solid var(--dws-slate-200);
    border-radius: 12px;
    font-family: var(--dws-font);
}
section.pl-buscador-loteria .cubo-search > p.texto-center:first-child {
    margin: 0 0 12px;
    color: var(--dws-slate-900);
    font-family: var(--dws-font);
    font-size: 17px;
    font-weight: 900;
}
section.pl-buscador-loteria .cubo-search input.busqueda {
    width: 100%;
    height: 56px;
    background: #fff;
    border: 1px solid var(--dws-slate-400);
    border-radius: 9999px;
    box-shadow: none;
    outline: none;
    color: var(--dws-slate-900);
    font-family: var(--dws-font);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: .12em;
    text-align: center;
    transition: border-color .15s;
}
section.pl-buscador-loteria .cubo-search input.busqueda::placeholder { color: var(--dws-slate-400); font-weight: 700; }
section.pl-buscador-loteria .cubo-search input.busqueda:hover { border-color: var(--dws-rose-400); }
section.pl-buscador-loteria .cubo-search input.busqueda:focus { border-color: var(--dws-rose-500); box-shadow: inset 0 0 0 1px var(--dws-rose-500); }
section.pl-buscador-loteria .cubo-search .btn.btn-bag {
    width: 100%;
    height: 56px;
    margin: 0;
    background: var(--dws-rose-600);
    background-image: none;
    border: 0;
    border-radius: 9999px;
    box-shadow: none;
    color: #fff;
    font-family: var(--dws-font);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: .025em;
    text-transform: uppercase;
    transition: background-color .15s;
}
section.pl-buscador-loteria .cubo-search .btn.btn-bag:hover,
section.pl-buscador-loteria .cubo-search .btn.btn-bag:focus { background: var(--dws-rose-700); color: #fff; }
section.pl-buscador-loteria .cubo-search .btn.btn-bag:focus-visible,
section.pl-buscador-loteria .cubo-search input.busqueda:focus-visible { outline: 2px solid var(--dws-rose-500); outline-offset: 2px; }
section.pl-buscador-loteria .cubo-search .btn.btn-bag .fa { margin-right: 6px; }
section.pl-buscador-loteria .cubo-search p.texto-center img { vertical-align: -6px; }
section.pl-buscador-loteria .cubo-search a[id$="lnkDecimoSuerte"] {
    color: var(--dws-slate-700);
    font-family: var(--dws-font) !important;
    font-size: 16px;
    text-decoration: underline;
    text-decoration-color: var(--dws-rose-400);
    text-underline-offset: 3px;
}
section.pl-buscador-loteria .cubo-search p.texto-center:not(:first-child) { margin: 4px 0 14px; padding: 0; border: 0; }
section.pl-buscador-loteria .cubo-search select#soflow2 {
    width: 100%;
    height: 48px;
    padding: 0 44px 0 18px;
    background-color: #fff;
    background-position: right 16px center;
    border: 1px solid var(--dws-slate-400) !important;
    border-radius: 9999px;
    box-shadow: none;
    color: var(--dws-slate-700);
    font-family: var(--dws-font);
    font-size: 17px;
    font-weight: 700;
}
section.pl-buscador-loteria .cubo-search select#soflow2:hover { border-color: var(--dws-rose-400) !important; }
section.pl-buscador-loteria > .row { display: flex; flex-wrap: wrap; row-gap: 16px; }
section.pl-buscador-loteria > .row > [class*="col-"] { float: none; display: flex; flex-direction: column; }
section.pl-buscador-loteria > .row > [class*="col-"] > .cubo-search { flex: 1 1 auto; }
section.pl-buscador-loteria .col-sm-8 .cubo-search { display: flex; flex-wrap: wrap; gap: 12px; align-content: flex-start; }
section.pl-buscador-loteria .col-sm-8 .cubo-search > p { flex: 0 0 100%; }
section.pl-buscador-loteria .col-sm-8 .cubo-search > [class*="col-sm-4"] { flex: 1 1 200px; width: auto; margin: 0; padding: 0; float: none; }
@media (max-width: 767px) {
    section.pl-buscador-loteria .cubo-search { margin: 0 0 4px; padding: 16px; }
    section.pl-buscador-loteria .cubo-search select#soflow2 { padding: 0 36px 0 12px; background-position: right 12px center; font-size: 16px; }
    section.pl-buscador-loteria > .row { row-gap: 12px; }
}

/* ─── Popup «Tu número al azar» (#decimoLoteria) ─────────────────────────────────────────────────────────────────────────── */
html.pl-azar-abierto { overflow: hidden; }
#decimoLoteria.pl-azar {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10000;   /* por encima del botón de volver arriba (.top-scroll, 9998) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 43, .6);            /* bg-slate-900/60 */
    font-family: var(--dws-font);
    text-align: left;
}
#decimoLoteria .pl-azar-dialogo {
    width: 100%;
    max-width: 420px;                           /* 560 en VistaDecimo; aquí el ancho de una tarjeta de la rejilla */
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);   /* shadow-2xl */
}
#decimoLoteria .pl-azar-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 12px 20px; }
#decimoLoteria .pl-azar-titulo {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    text-align: left;
    color: var(--dws-slate-900);
    font-family: var(--dws-font);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
}
#decimoLoteria .pl-azar-cerrar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--dws-slate-600);
    cursor: pointer;
}
#decimoLoteria .pl-azar-cerrar:hover { color: var(--dws-slate-900); }
#decimoLoteria .pl-azar-cuerpo { padding: 16px; background: var(--dws-slate-100); }
#decimoLoteria .pl-azar-cuerpo .cotenedor-boleto-total.pl-dws { margin: 0; box-shadow: none; }
#decimoLoteria .pl-azar-pie { padding: 16px; }
#decimoLoteria .pl-azar-otro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    background: #fff;
    border: 1px solid var(--dws-slate-400);
    border-radius: 9999px;
    color: var(--dws-slate-700);
    font-family: var(--dws-font);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s;
}
#decimoLoteria .pl-azar-otro:hover { border-color: var(--dws-rose-400); }
#decimoLoteria .pl-azar-otro svg { color: var(--dws-rose-500); }
@media (max-width: 639px) {
    #decimoLoteria .pl-azar-titulo { font-size: 20px; }
}
@media (max-height: 640px) {
    #decimoLoteria.pl-azar { align-items: flex-start; }
}

/* ─── La cesta de abajo (SECCesta + SECTotal + barra del móvil) ──────────────────────────────────────────────────────────────
 * Estilo de la cesta de React (websse-react, components/checkout/OrderSummary.tsx): línea en caja rounded-xl border-2
 * border-slate-200 con la barra de color de la lotería a la izquierda (w-1.5, COLOR_LOTERIA #754472, okCompra/lineaPedido.ts);
 * filas «Lotería X | importe», «número (font-black) | N décimos», «fecha»; − / + w-9 h-9 rose-600 y caja de cantidad h-9 border
 * slate-500 min-w-48; «A PAGAR» en caja border-2 border-slate-300 rounded-xl con el importe font-black text-4xl; CTA w-full py-5
 * rounded-full font-black uppercase bg-rose-600. La cuenta atrás y las monedas solidarias no existen en React: en pastillas
 * (las de importe de HeroV6.tsx:2581). Fondo blanco (antes, verde agua). */
.pl-cesta-ws { margin-top: 32px; margin-bottom: 8px; }
.pl-cesta-ws .pl-cesta-tarjeta {
    padding: 20px;
    background: #fff;
    border: 1px solid var(--dws-slate-200);
    border-radius: 12px;
    font-family: var(--dws-font);
}
.pl-cesta-ws .pl-cesta-cabecera { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.pl-cesta-ws .pl-cesta-titulo {
    display: flex; align-items: center; gap: 10px;
    margin: 0; padding: 0;
    color: var(--dws-slate-900); font-family: var(--dws-font); font-size: 24px; font-weight: 900; line-height: 1.2;
    text-align: left; text-transform: none; letter-spacing: normal;
}
.pl-cesta-ws .pl-cesta-titulo svg { flex: none; color: var(--dws-rose-500); }
.pl-cesta-ws .pl-cesta-vacia p { margin: 0; color: var(--dws-slate-600); font-size: 16px; line-height: 1.5; }
/* Línea de la cesta: COPIA de la de React (OrderSummary.tsx, línea con «fila»; CuandoSorteo.tsx; LogoJuego.tsx). Tamaños de móvil
 * por defecto y los de escritorio desde 1280 (xl:), como allí. Tarjeta border rounded-xl bg-gris-fondo (slate-100), borde slate-300
 * (xl: slate-200), abierta o al pasar por encima slate-400; space-y-2 entre líneas. Cabecera: botón pl-4 pr-8 py-2.5 (xl: py-2) con
 * la barra w-1.5 COLOR_LOTERIA y el chevron a la derecha (right-2, rotate-180 abierta). Fila 1 gap-2.5: logo w-6 (xl: w-5) + nombre
 * font-bold 18/24 (xl: 16/20) | importe igual. Fila 2 pl-8 (xl: pl-7) mt-0.5 (xl: 0): número font-black 18/24 (xl: 16/20) | «N
 * décimos» slate-600 15/20 (xl: 13/20). Fila 3 pl-8 mt-1: la pastilla de la fecha (FICHA: h-5 px-2 rounded-full bg-white border
 * slate-500, xl: h-4 slate-400, 13 px, xl: 11 px, leading-none). Panel: bg-white border-t slate-200 px-4 py-3 (xl: px-3 py-2.5)
 * gap-2: cuadros w-9 h-9 border slate-500 rounded-lg (papelera y ver el décimo, iconos de 15 px), «Lotería 20,00 €» text-sm
 * slate-600 y el contador ml-auto (− / + w-9 h-9 rose-600, cantidad h-9 border slate-500 rounded-full px-3 min-w-48; + al 40 % en el
 * tope; «Solo quedan N» rose-600 debajo con 10 o menos). */
.pl-cesta-ws .pl-cesta-linea {
    margin: 0 0 8px;
    background: var(--dws-slate-100);
    border: 1px solid var(--dws-slate-300);
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
    transition: border-color .15s;
}
.pl-cesta-ws .pl-cesta-linea:last-child { margin-bottom: 0; }
.pl-cesta-ws .pl-cesta-linea:hover, .pl-cesta-ws .pl-cesta-linea.pl-cesta-abierta { border-color: var(--dws-slate-400); }
.pl-cesta-ws .pl-cesta-cab {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nombre importe" "numero uds" "cuando cuando";
    column-gap: 10px;
    align-items: center;
    width: 100%;
    height: auto;                     /* el sitio da alto fijo a algunos botones */
    margin: 0;
    padding: 10px 32px 10px 16px;
    background: transparent;
    border: 0;
    color: inherit;
    font-family: var(--dws-font);
    text-align: left;
    cursor: pointer;
    transition: background-color .15s;
}
.pl-cesta-ws .pl-cesta-cab:hover { background: var(--dws-slate-100); }
.pl-cesta-ws .pl-cesta-cab:focus-visible { outline: 2px solid var(--dws-rose-500); outline-offset: -2px; }
.pl-cesta-ws .pl-cesta-barra { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: #754472; }
.pl-cesta-ws .pl-cesta-nombre { grid-area: nombre; min-width: 0; display: flex; align-items: center; gap: 8px; }
.pl-cesta-ws .pl-cesta-logo { flex: none; width: 24px; height: 24px; }
.pl-cesta-ws .pl-cesta-nombre-txt {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--dws-slate-900); font-size: 18px; font-weight: 700; line-height: 24px;
}
.pl-cesta-ws .pl-cesta-importe {
    grid-area: importe; justify-self: end;
    color: var(--dws-slate-900); font-size: 18px; font-weight: 700; line-height: 24px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pl-cesta-ws .pl-cesta-numero {
    grid-area: numero; min-width: 0; margin-top: 2px; padding-left: 32px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--dws-slate-900); font-size: 18px; font-weight: 900; line-height: 24px; font-variant-numeric: tabular-nums;
}
.pl-cesta-ws .pl-cesta-uds { grid-area: uds; justify-self: end; margin-top: 2px; color: var(--dws-slate-600); font-size: 15px; line-height: 20px; white-space: nowrap; }
.pl-cesta-ws .pl-cesta-cuando { grid-area: cuando; display: flex; align-items: center; height: 20px; margin-top: 4px; padding-left: 32px; }
.pl-cesta-ws .pl-cesta-ficha,
#plVerDecimo .pl-cesta-ficha {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    height: 20px; padding: 0 8px; box-sizing: border-box;
    background: #fff; border: 1px solid var(--dws-slate-500); border-radius: 9999px;
    color: var(--dws-slate-900); font-family: var(--dws-font); font-size: 13px; font-weight: 400; line-height: 1; white-space: nowrap;
}
.pl-cesta-ws .pl-cesta-fecha-larga { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pl-cesta-ws .pl-cesta-chevron { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--dws-slate-500); transition: transform .2s; }
.pl-cesta-ws .pl-cesta-abierta .pl-cesta-chevron { transform: translateY(-50%) rotate(180deg); }
.pl-cesta-ws .pl-cesta-panel {
    display: none;
    align-items: center; gap: 8px;
    padding: 12px 16px;
    background: #fff; border-top: 1px solid var(--dws-slate-200);
    font-family: var(--dws-font);
}
.pl-cesta-ws .pl-cesta-abierta .pl-cesta-panel { display: flex; }
.pl-cesta-ws .pl-cesta-cuadro {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin: 0; padding: 0;
    background: #fff; border: 1px solid var(--dws-slate-500); border-radius: 8px;
    color: var(--dws-slate-600); text-decoration: none; cursor: pointer; transition: color .15s, border-color .15s;
}
.pl-cesta-ws .pl-cesta-quitar:hover, .pl-cesta-ws .pl-cesta-quitar:focus { color: var(--dws-rose-700); border-color: var(--dws-rose-200, #ffccd3); text-decoration: none; }
.pl-cesta-ws .pl-cesta-ver:hover, .pl-cesta-ws .pl-cesta-ver:focus { color: var(--dws-slate-900); border-color: var(--dws-slate-400); }
.pl-cesta-ws .pl-cesta-panel-txt {
    flex: 1 1 auto; min-width: 0; min-height: 36px;
    display: flex; flex-wrap: wrap; align-items: center; align-content: center; column-gap: 4px;
    color: var(--dws-slate-600); font-size: 14px; line-height: 1.25;
}
.pl-cesta-ws .pl-cesta-panel-txt span { white-space: nowrap; }
.pl-cesta-ws .pl-cesta-panel-imp { font-variant-numeric: tabular-nums; }
.pl-cesta-ws .pl-cesta-contador { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: center; }
.pl-cesta-ws .pl-cesta-contador-fila { display: flex; align-items: center; gap: 4px; }
.pl-cesta-ws .pl-cesta-menos,
.pl-cesta-ws .pl-cesta-mas {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin: 0; padding: 0;
    background: var(--dws-rose-600); border: 0; border-radius: 9999px;
    color: #fff; font-family: var(--dws-font); font-size: 16px; font-weight: 900; line-height: 1; text-decoration: none;
    transition: background-color .15s;
}
.pl-cesta-ws .pl-cesta-menos:hover, .pl-cesta-ws .pl-cesta-menos:focus,
.pl-cesta-ws .pl-cesta-mas:hover, .pl-cesta-ws .pl-cesta-mas:focus { background: var(--dws-rose-700); color: #fff; text-decoration: none; }
.pl-cesta-ws .pl-cesta-mas.pl-cesta-en-tope, .pl-cesta-ws .pl-cesta-mas.pl-cesta-en-tope:hover { background: rgba(236, 0, 63, .4); cursor: not-allowed; }
.pl-cesta-ws .pl-cesta-cant {
    flex: none; box-sizing: border-box; height: 36px; width: 48px; min-width: 48px; margin: 0; padding: 0 12px;
    background: #fff; border: 1px solid var(--dws-slate-500); border-radius: 9999px; box-shadow: none;
    color: var(--dws-slate-900); font-family: var(--dws-font); font-size: 16px; font-weight: 700; text-align: center;
}
.pl-cesta-ws .pl-cesta-aviso { width: 0; display: flex; flex-direction: column; align-items: center; margin-top: 4px; font-size: 14px; line-height: 1.25; text-align: center; }
.pl-cesta-ws .pl-cesta-aviso span { white-space: nowrap; font-weight: 500; color: var(--dws-rose-600); }
.pl-cesta-ws .pl-cesta-cuadro:focus-visible, .pl-cesta-ws .pl-cesta-menos:focus-visible, .pl-cesta-ws .pl-cesta-mas:focus-visible,
.pl-cesta-pie-ws .pl-cesta-cta:focus-visible, .pl-cesta-barra-movil .pl-cesta-barra-cta:focus-visible { outline: 2px solid var(--dws-rose-500); outline-offset: 2px; }
@media (max-width: 374px) {
    .pl-cesta-ws .pl-cesta-panel-txt, .pl-cesta-ws .pl-cesta-aviso { font-size: 13px; }
}
@media (min-width: 1280px) {
    .pl-cesta-ws .pl-cesta-linea { border-color: var(--dws-slate-200); }
    .pl-cesta-ws .pl-cesta-cab { padding-top: 8px; padding-bottom: 8px; }
    .pl-cesta-ws .pl-cesta-logo { width: 20px; height: 20px; }
    .pl-cesta-ws .pl-cesta-nombre-txt, .pl-cesta-ws .pl-cesta-importe, .pl-cesta-ws .pl-cesta-numero { font-size: 16px; line-height: 20px; }
    .pl-cesta-ws .pl-cesta-numero { margin-top: 0; padding-left: 28px; }
    .pl-cesta-ws .pl-cesta-uds { margin-top: 0; font-size: 13px; line-height: 20px; }
    .pl-cesta-ws .pl-cesta-cuando { margin-top: 0; padding-left: 28px; }
    .pl-cesta-ws .pl-cesta-ficha { height: 16px; padding-bottom: 1px; border-color: var(--dws-slate-400); font-size: 11px; }
    .pl-cesta-ws .pl-cesta-panel { padding: 10px 12px; }
}

/* «Ver décimo»: la ventana de VistaDecimo.tsx (ModalDecimo): fixed inset-0 z-50 bg-slate-900/60 px-4; caja max-w-[560px] bg-white
 * rounded-xl shadow-2xl; cabecera px-4 py-3 con el logo de 28 px, la pastilla «Navidad · Mar, 22 dic.» y «1 décimo · 20,00 €»
 * (text-sm slate-600) y la X w-9 h-9 rounded-lg; franja bg-slate-100 p-4 con el décimo en marco rounded-xl border-2 slate-200
 * bg-white; pie px-5 pt-2 pb-[11px] text-sm slate-500 centrado. El décimo, el de la tarjeta de la rejilla (imagen y número). */
html.pl-verdecimo-abierto { overflow: hidden; }
#plVerDecimo.pl-verdecimo {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000;   /* por encima del botón de volver arriba (.top-scroll, 9998) */
    display: flex; align-items: center; justify-content: center;
    padding: 0 16px;
    background: rgba(15, 23, 43, .6);
    font-family: var(--dws-font); text-align: left;
}
#plVerDecimo .pl-verdecimo-caja { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); }
#plVerDecimo .pl-verdecimo-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; }
#plVerDecimo .pl-verdecimo-datos { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; flex-wrap: nowrap; overflow: hidden; gap: 4px 6px; }
#plVerDecimo .pl-verdecimo-datos.pl-verdecimo-dos-filas { flex-wrap: wrap; overflow: visible; }
#plVerDecimo .pl-verdecimo-logo { flex: none; }
#plVerDecimo .pl-verdecimo-resumen { color: var(--dws-slate-600); font-size: 14px; line-height: 20px; white-space: nowrap; }
#plVerDecimo .pl-verdecimo-cerrar {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; background: none; border: 0; border-radius: 8px; color: var(--dws-slate-600); cursor: pointer;
}
#plVerDecimo .pl-verdecimo-cerrar:hover { color: var(--dws-slate-900); }
#plVerDecimo .pl-verdecimo-cerrar:focus-visible { outline: 2px solid var(--dws-rose-500); outline-offset: 2px; }
#plVerDecimo .pl-verdecimo-franja { padding: 16px; background: var(--dws-slate-100); }
#plVerDecimo .pl-verdecimo-marco { overflow: hidden; background: #fff; border: 2px solid var(--dws-slate-200); border-radius: 12px; }
#plVerDecimo .cotenedor-boleto-total.pl-dws.pl-verdecimo-decimo { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
#plVerDecimo .cotenedor-boleto-total.pl-dws.pl-verdecimo-decimo .boleto-total-imagen { border-bottom: 0; padding-bottom: var(--dws-aire-imagen); }
#plVerDecimo .pl-verdecimo-pie { margin: 0; padding: 8px 20px 11px; color: var(--dws-slate-500); font-size: 14px; line-height: 20px; text-align: center; text-wrap: balance; }
#plVerDecimo .pl-verdecimo-br { display: none; }
@media (min-width: 640px) { #plVerDecimo .pl-verdecimo-br { display: inline; } }

/* Resumen y bloques de confianza */
.pl-cesta-pie-ws { margin-top: 24px; margin-bottom: 40px; font-family: var(--dws-font); }
.pl-cesta-pie-ws .pl-cesta-pie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "confianza resumen";
    gap: 32px;
    align-items: start;
}
.pl-cesta-pie-ws .pl-cesta-resumen { grid-area: resumen; }
.pl-cesta-pie-ws .pl-cesta-confianza { grid-area: confianza; display: flex; flex-direction: column; gap: 24px; padding-top: 4px; }
.pl-cesta-pie-ws.pl-cesta-sin-lineas .pl-cesta-pie { grid-template-columns: minmax(0, 1fr); grid-template-areas: "confianza"; }
.pl-cesta-pie-ws.pl-cesta-sin-lineas .pl-cesta-confianza { flex-direction: row; }
.pl-cesta-pie-ws.pl-cesta-sin-lineas .pl-cesta-sello { flex: 1 1 0; }
.pl-cesta-pie-ws .pl-cesta-total-decimos {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 12px;
    color: var(--dws-slate-500); font-size: 17px; font-weight: 500;
}
.pl-cesta-pie-ws .pl-cesta-total-num { color: #1d293d; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-cesta-pie-ws .pl-cesta-apagar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 18px 24px; border: 2px solid var(--dws-slate-300); border-radius: 12px;
}
.pl-cesta-pie-ws .pl-cesta-apagar-txt { color: var(--dws-slate-700); font-size: 16px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.pl-cesta-pie-ws .pl-cesta-apagar-imp { color: var(--dws-slate-900); font-size: 36px; font-weight: 900; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-cesta-pie-ws .pl-cesta-cta {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 64px; margin: 20px 0 0; padding: 0 24px;
    background: var(--dws-rose-600); border: 0; border-radius: 9999px;
    color: #fff; font-family: var(--dws-font); font-size: 16px; font-weight: 900; letter-spacing: .025em; text-transform: uppercase;
    text-decoration: none; transition: background-color .15s;
}
.pl-cesta-pie-ws .pl-cesta-cta:hover, .pl-cesta-pie-ws .pl-cesta-cta:focus { background: var(--dws-rose-700); color: #fff; text-decoration: none; }
/* Cuenta atrás (C_MSolidariayCAtras, control compartido: solo se le da estilo desde aquí) y «Cierra a las…», en la misma fila. Las
 * monedas solidarias no se pintan en esta página: el control lleva MostrarMonedas="false" (decisión del usuario, 18/10/2026). */
.pl-cesta-pie-ws .pl-cesta-extras { display: flex; gap: 8px; margin: 12px 0 0; }
.pl-cesta-pie-ws .pl-cesta-extras > .row { display: contents; }
.pl-cesta-pie-ws .pl-cesta-extras > .row::before, .pl-cesta-pie-ws .pl-cesta-extras > .row::after { display: none; }   /* clearfix de bootstrap: con display: contents serían cajas de la fila */
.pl-cesta-pie-ws .pl-cesta-extras > .row > div { flex: 1 1 50%; min-width: 0; float: none; width: auto; min-height: 0 !important; margin: 0; padding: 0; }
/* la cuenta atrás va dentro de dos div (columna del control y su UpdatePanel): que estiren, para que las dos cajas midan lo mismo */
.pl-cesta-pie-ws .pl-cesta-extras > .row > div,
.pl-cesta-pie-ws .pl-cesta-extras > .row > div > div { display: flex; flex-direction: column; }
.pl-cesta-pie-ws .pl-cesta-extras > .row > div > div { flex: 1 1 auto; }
.pl-cesta-pie-ws .pl-cesta-extras .textoReloj { flex: 1 1 auto; }
.pl-cesta-pie-ws .pl-cesta-extras > .row > div.hidden,
.pl-cesta-pie-ws .pl-cesta-extras > .row > div.hidden-xs:empty { display: none; }
.pl-cesta-pie-ws .pl-cesta-extras .textoReloj,
.pl-cesta-pie-ws .pl-cesta-extras .pl-cesta-cierre {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; box-sizing: border-box; margin: 0; padding: 6px 14px;
    background: #fff; border: 1px solid var(--dws-slate-400); border-radius: 22px;   /* píldora a una línea; si el texto baja, sigue redonda */
    color: var(--dws-slate-700); font-family: var(--dws-font); font-size: 15px; font-weight: 700; line-height: 1.2;
    text-align: center; text-transform: none;
}
.pl-cesta-pie-ws .pl-cesta-extras .pl-cesta-cierre { flex: 1 1 50%; min-width: 0; }   /* las dos cajas, del mismo ancho */
/* «Cierra a las 10:00h» / «del Sáb 17 oct.»: sin salto dentro de cada trozo, solo entre los dos; y la cuenta atrás, en una línea. Si
 * algo no cabe, las dos píldoras a 13 px (plPildorasAjustar, en la página). */
.pl-cesta-pie-ws .pl-cesta-extras .pl-nw,
.pl-cesta-pie-ws .pl-cesta-extras #SpancuentaAtras { white-space: nowrap; }
.pl-cesta-pie-ws .pl-cesta-extras .pl-cesta-cierre-txt { min-width: 0; text-align: center; }
.pl-cesta-pie-ws .pl-cesta-extras.pl-pildoras-pequenas .textoReloj,
.pl-cesta-pie-ws .pl-cesta-extras.pl-pildoras-pequenas .pl-cesta-cierre { font-size: 13px; }
.pl-cesta-pie-ws .pl-cesta-extras .textoReloj .fa,
.pl-cesta-pie-ws .pl-cesta-extras .pl-cesta-cierre svg { flex: none; color: var(--dws-rose-500); }
.pl-cesta-pie-ws .pl-cesta-sello { display: flex; align-items: flex-start; gap: 16px; }
.pl-cesta-pie-ws .pl-cesta-sello img {
    flex: none; box-sizing: content-box; width: 32px; height: 32px; padding: 12px;
    background: var(--dws-slate-100); border-radius: 9999px; opacity: .85;
}
.pl-cesta-pie-ws .pl-cesta-sello p { margin: 0 0 4px; color: var(--dws-slate-600); font-size: 14px; line-height: 1.45; }
.pl-cesta-pie-ws .pl-cesta-sello p.pl-cesta-sello-tit { margin-bottom: 4px; color: var(--dws-slate-900); font-size: 17px; font-weight: 900; }

/* Barra fija de la cesta: la de las webs sociales (HeroV6.tsx:2648-2717): bg-slate-50 border-t-2 border-rose-500 shadow-2xl
 * px-4 (390+: px-5) pt-2.5 pb-[max(10px,safe-area)]; «TOTAL» 14/18 font-black uppercase tracking-widest slate-700 encima del importe
 * 24/28 font-black slate-900; botón flex-1 bg-rose-600 font-black 20/24 py-2 px-6 rounded-full uppercase tracking-wide con
 * «N décimos» 14/17 bold rose-100 encima de «carrito JUGAR YA». Allí sale hasta 1279 (xl:hidden), mientras su página va en una
 * columna; aquí, hasta 767, que es donde la cesta pasa a dos columnas. Por debajo del banner de cookies (#cm, z-index 100). */
.pl-cesta-barra-movil { display: none; }
@media (max-width: 767px) {
    .pl-cesta-ws { margin-top: 24px; }
    .pl-cesta-pie-ws .pl-cesta-pie { grid-template-columns: minmax(0, 1fr); grid-template-areas: "resumen" "confianza"; gap: 28px; }
    .pl-cesta-pie-ws.pl-cesta-sin-lineas .pl-cesta-pie { grid-template-areas: "confianza"; }
    .pl-cesta-pie-ws.pl-cesta-sin-lineas .pl-cesta-confianza { flex-direction: column; }
    .pl-cesta-barra-movil {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        display: flex; align-items: center; gap: 12px;
        padding: 10px 16px max(10px, env(safe-area-inset-bottom, 0px));
        background: var(--dws-slate-50); border-top: 2px solid var(--dws-rose-500);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
        font-family: var(--dws-font);
        transition: transform .2s ease;
    }
    .pl-cesta-barra-movil.pl-cesta-barra-oculta { transform: translateY(110%); }
    html.pl-cesta-con-barra body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
    html.pl-cesta-con-barra .top-scroll { bottom: calc(55px + 80px + env(safe-area-inset-bottom, 0px)); }
    .pl-cesta-barra-movil .pl-cesta-barra-cifras { flex: none; }
    .pl-cesta-barra-movil .pl-cesta-barra-total {
        display: block; color: var(--dws-slate-700); font-size: 14px; font-weight: 900; line-height: 18px;
        letter-spacing: .1em; text-transform: uppercase;
    }
    .pl-cesta-barra-movil .pl-cesta-barra-imp {
        display: block; color: var(--dws-slate-900); font-size: 24px; font-weight: 900; line-height: 28px;
        white-space: nowrap; font-variant-numeric: tabular-nums;
    }
    .pl-cesta-barra-movil .pl-cesta-barra-cta {
        flex: 1 1 auto; min-width: max-content;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        padding: 8px 24px;
        background: var(--dws-rose-600); border-radius: 9999px;
        color: #fff; font-size: 20px; font-weight: 900; line-height: 24px; letter-spacing: .025em; text-transform: uppercase;
        white-space: nowrap; text-decoration: none; transition: background-color .15s;
    }
    .pl-cesta-barra-movil .pl-cesta-barra-cta:hover, .pl-cesta-barra-movil .pl-cesta-barra-cta:focus { background: var(--dws-rose-700); color: #fff; text-decoration: none; }
    .pl-cesta-barra-movil .pl-cesta-barra-uds {
        display: block; color: #ffe4e6; font-size: 14px; font-weight: 700; line-height: 17px; letter-spacing: normal; text-transform: none;
    }
    .pl-cesta-barra-movil .pl-cesta-barra-jugar { display: flex; align-items: center; justify-content: center; gap: 6px; }
    .pl-cesta-barra-movil .pl-cesta-barra-carrito { flex: none; transform: translateY(-1px); }
    .pl-cesta-barra-movil.pl-cesta-barra-sin-carrito .pl-cesta-barra-carrito { display: none; }
    .pl-cesta-barra-movil.pl-cesta-barra-pequena .pl-cesta-barra-total,
    .pl-cesta-barra-movil.pl-cesta-barra-pequena .pl-cesta-barra-uds { font-size: 13px; line-height: 16px; }
}
@media (min-width: 390px) and (max-width: 767px) {
    .pl-cesta-barra-movil { gap: 20px; padding-left: 20px; padding-right: 20px; }
}

/* La cesta en el móvil, como el resumen móvil de la cesta de React (OrderSummary.tsx, sin xl:): sin la caja de fuera (en React solo
 * la lleva el escritorio), título a 20 px (text-xl) y «A PAGAR» con px-[31px] py-[18px] y el importe a 36 px (text-4xl). Las líneas
 * llevan ya sus tamaños de móvil (arriba). */
@media (max-width: 639px) {
    .pl-cesta-ws .pl-cesta-tarjeta { padding: 0; border: 0; border-radius: 0; }
    .pl-cesta-ws .pl-cesta-cabecera { margin-bottom: 12px; }
    .pl-cesta-ws .pl-cesta-titulo { font-size: 20px; }
    .pl-cesta-ws .pl-cesta-vacia p { font-size: 16px; }
    .pl-cesta-pie-ws { margin-top: 20px; }
    .pl-cesta-pie-ws .pl-cesta-total-decimos { padding: 0 16px 12px; }
    .pl-cesta-pie-ws .pl-cesta-apagar { padding: 18px 31px; }
    .pl-cesta-pie-ws .pl-cesta-apagar-imp { font-size: 36px; }
    .pl-cesta-pie-ws .pl-cesta-extras .textoReloj,
    .pl-cesta-pie-ws .pl-cesta-extras .pl-cesta-cierre { padding: 6px 10px; }
}

/* Buscador en tableta (768-991): en un tercio no cabían «¿Necesitas más décimos iguales?» ni «Elegir un número al azar»; las dos cajas
 * a todo el ancho, y la segunda en una fila. */
@media (min-width: 768px) and (max-width: 991px) {
    section.pl-buscador-loteria > .row > .col-sm-8, section.pl-buscador-loteria > .row > .col-sm-4 { width: 100%; }
    section.pl-buscador-loteria .col-sm-4 .cubo-search { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 16px 24px; }
    section.pl-buscador-loteria .col-sm-4 .cubo-search > p.texto-center { margin: 0; }
    section.pl-buscador-loteria .col-sm-4 .cubo-search > select { flex: 1 1 280px; width: auto; }
}
.pl-cesta-ws .pl-cesta-ver[data-img=""] { display: none; }   /* sin imagen del sorteo no hay décimo que ver (en React, solo con imagenDecimo) */