/* EL BINGO (24/10/2026). Lo común a los juegos de mesa está en la-hoja.css. */

/* Lo escondido, escondido: los botones y las filas de botones llevan su propio
   `display`, que le gana al atributo `hidden` si no se dice. */
.bingo [hidden] { display: none !important; }

.bingo .modos {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 18px 0 8px;
}

.bingo .modo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    border: 2px solid var(--hj-linea);
    border-radius: 16px;
    background: #fff;
    color: var(--hj-tinta);
    font: inherit;
    line-height: 1.25;
    cursor: pointer;
}

.bingo .modo .dibujo { font-size: 1.8rem; }
.bingo .modo b { font-size: 1.02rem; }
.bingo .modo span:last-child { font-size: .85rem; color: var(--hj-suave); }
.bingo .modo[aria-pressed="true"] { border-color: var(--hj-marca); background: var(--hj-marca-suave); }

.bingo .opciones { margin-top: 14px; }
.bingo .pregunta { margin: 0 0 6px; font-weight: 700; }
.bingo .elige { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.bingo .elige .boton[aria-pressed="true"] { background: var(--hj-marca); color: #fff; box-shadow: none; }

.bingo .amano {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    font-size: .98rem;
}

.bingo .amano input { width: 22px; height: 22px; accent-color: var(--hj-marca); }
.bingo .boton.grande { margin-top: 18px; min-height: 56px; padding: 14px 40px; font-size: 1.25rem; }
.bingo .nota { margin: 10px 0 0; font-size: .85rem; color: var(--hj-suave); }

/* ------------------------------------------------------------ La partida */

.bingo .arriba {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bingo .cuenta { font-weight: 700; color: var(--hj-suave); }
.bingo .mandos { display: flex; align-items: center; gap: 8px; }

.bingo .sonido {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--hj-hueco);
    color: var(--hj-tinta);
    cursor: pointer;
}

.bingo .sonido svg { width: 24px; height: 24px; }
.bingo .sonido[aria-pressed="true"] .sin,
.bingo .sonido[aria-pressed="false"] .con { display: none; }

.bingo .escena {
    position: relative;
    margin-top: 6px;
}

/* El bombo ocupa todo el ancho y la bola que sale se queda en la bandeja, a
   la derecha, encima del lienzo. */
.bingo #bombo { width: 100%; display: block; }

.bingo .salida {
    position: absolute;
    right: 1%;
    top: 12%;
    width: 38%;
}

.bingo .bola-grande {
    --color: #2f6fd1;
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 190px;
    aspect-ratio: 1;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 50%;
    background: #fbfaf6;
    box-shadow: 0 12px 26px rgba(31, 41, 51, .28);
}

/* La franja de color de la decena, alrededor de la bola. */
.bingo .bola-grande .franja {
    position: absolute;
    inset: 22% -10%;
    border-radius: 50%;
    background: var(--color);
}

/* La luz, por encima de todo: brillo arriba a la izquierda y sombra abajo. */
.bingo .bola-grande::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.95) 0 6%, rgba(255,255,255,.2) 20%, rgba(0,0,0,0) 55%, rgba(20,24,30,.38) 100%);
    pointer-events: none;
}

.bingo .bola-grande b {
    position: relative;
    display: grid;
    place-items: center;
    width: 58%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    color: #1b1f24;
    font-size: clamp(2.2rem, 9vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
}

.bingo .bola-grande b:empty { visibility: hidden; }
.bingo .bola-grande:has(b:empty) .franja { opacity: .25; }
.bingo .bola-grande.nueva { animation: bola-llega .7s cubic-bezier(.2, 1.3, .4, 1); }

@keyframes bola-llega {
    from { transform: translate(-60px, 20px) rotate(-200deg) scale(.35); }
    to { transform: none; }
}

.bingo .mote {
    min-height: 1.4em;
    margin: 4px 0 0;
    text-align: center;
    font-size: clamp(1.15rem, 4.6vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
}

.bingo .ultimas {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 10px;
    font-size: .85rem;
    color: var(--hj-suave);
}

.bingo .ultimas ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }

.bingo .ultimas li {
    --color: #3f52a8;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--color);
    background: #fff;
    color: var(--hj-tinta);
    font-weight: 700;
}

.bingo .cantar { display: flex; gap: 10px; justify-content: center; margin: 6px 0; }
.bingo .cantar .boton { flex: 1; max-width: 220px; font-size: 1.15rem; }
.bingo .bingo-boton { background: #c2410c; }

.bingo .comprobar {
    margin: 8px 0;
    padding: 12px;
    border-radius: 14px;
    background: #fff7e6;
    text-align: center;
    font-weight: 600;
}

.bingo .comprobar .botones { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bingo .recado { min-height: 1.4em; margin: 6px 0; text-align: center; font-weight: 700; color: var(--hj-marca); }

/* ------------------------------------------------------------ Los cartones */

.bingo .cartones,
.hoja-de-cartones .cartones {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.carton {
    border: 2px solid #c2410c;
    border-radius: 12px;
    background: #fffaf3;
    padding: 6px 6px 8px;
}

.carton.premio { box-shadow: 0 0 0 4px #f2c530; }
.carton-nombre { margin: 0 0 4px 4px; font-size: .8rem; font-weight: 700; color: #9a3412; }

.carton-rejilla {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 3px;
}

.carton-rejilla > * {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 6px;
    font: inherit;
    font-weight: 700;
    font-size: clamp(.85rem, 3.4vw, 1.05rem);
}

.carton-rejilla .hueco { background: #f3e2cf; }

.carton-rejilla .num {
    position: relative;
    border: 1px solid #e7cfb4;
    background: #fff;
    color: var(--hj-tinta);
    padding: 0;
}

.bingo .cartones.a-mano .num { cursor: pointer; }

/* La ficha: el número en blanco sobre un círculo lleno, que se vea desde lejos. */
.carton-rejilla .num.marcado { color: #fff; z-index: 0; }

.carton-rejilla .num.marcado::after {
    content: '';
    position: absolute;
    inset: 6%;
    z-index: -1;
    border-radius: 50%;
    background: #c2410c;
    animation: ficha .25s ease-out;
}

.carton-rejilla .num.premio { background: #fde68a; }
.carton-rejilla .num.no { animation: no .35s; }

@keyframes ficha { from { transform: scale(1.5); } }
@keyframes no { 25%, 75% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }

/* ------------------------------------------------------------ El tablero */

.bingo .tablero-caja { margin-top: 14px; }
.bingo .tablero-caja summary { cursor: pointer; font-weight: 700; padding: 6px 0; }

.bingo .tablero {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 4px;
}

.bingo .tablero .num {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--hj-hueco);
    color: #94a3b8;
    font-weight: 700;
    font-size: clamp(.8rem, 3vw, 1.05rem);
}

.bingo .tablero .num.salido { background: var(--hj-marca); color: #fff; }

/* En casa, el tablero es lo importante: grande, para verlo desde el sofá. */
.bingo .en-casa .tablero .num { font-size: clamp(1rem, 4vw, 1.6rem); }

.bingo .rifa { margin: 10px 0; font-size: .95rem; }
.bingo .rifa a { color: var(--hj-marca); font-weight: 700; }
.pie-juego { max-width: 760px; margin: -16px auto 28px; font-size: .9rem; color: #5b6b7a; text-align: center; }

@media (max-width: 560px) {
    .bingo .modos { grid-template-columns: 1fr; }
    .bingo .modo { flex-direction: row; text-align: left; gap: 10px; }
    .bingo .modo .dibujo { font-size: 1.5rem; }
}

/* ------------------------------------------------------------ Con amigos */

.bingo .campo {
    width: 100%;
    max-width: 320px;
    min-height: 48px;
    padding: 10px 14px;
    border: 2px solid var(--hj-linea);
    border-radius: 12px;
    font: inherit;
    font-size: 1.1rem;
    text-align: center;
}

.bingo .campo:focus { outline: none; border-color: var(--hj-marca); }
.bingo .campo.codigo { max-width: 160px; letter-spacing: .15em; text-transform: uppercase; }

.bingo .con-codigo {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px dashed var(--hj-linea);
}

.bingo .con-codigo label { display: block; margin-bottom: 6px; font-weight: 700; }
.bingo .con-codigo .fila { display: inline-flex; gap: 8px; align-items: center; }

.bingo .codigo-grande {
    margin: 4px 0 10px;
    font-size: clamp(2.2rem, 11vw, 3.2rem);
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--hj-marca);
}

.bingo .qr { width: 220px; max-width: 70vw; margin: 0 auto; }
.bingo .qr svg { width: 100%; height: auto; display: block; }

.bingo .compartir { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; }
.bingo .compartir .boton { min-height: 44px; padding: 10px 18px; font-size: .98rem; }
.bingo .boton.whatsapp { background: #1f9d55; }

.bingo .jugadores {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin: 6px 0 12px;
    padding: 0;
    list-style: none;
}

.bingo .jugadores li {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--hj-marca-suave);
    font-weight: 700;
}

.bingo .jugadores li small { font-weight: 500; color: var(--hj-suave); }
.bingo .jugadores.en-juego { margin: 0 0 6px; }
.bingo .jugadores.en-juego li { padding: 3px 10px; font-size: .85rem; }

/* ------------------------------------------------------------ Imprimir */

.hoja-de-cartones { display: none; }

@media print {
    @page { size: A4 portrait; margin: 12mm 10mm; }

    body > *:not(.hoja-de-cartones) { display: none !important; }
    body { background: #fff !important; }
    .hoja-de-cartones { display: block; }

    /*
     | TRES CARTONES POR FOLIO, CON MEDIDAS FIJAS Y AIRE DE SOBRA (24/10/2026).
     | El iPhone pone sus propios márgenes --la dirección y la fecha, abajo--
     | y con un folio «lleno» el tercer cartón se partía entre dos hojas.
     | Ahora: 3 × 78 mm + 2 × 6 mm = 246 mm, contra los 273 que deja un A4 con
     | estos márgenes. Y por si un navegador aprieta más, un cartón NUNCA se
     | parte: pasa entero a la hoja siguiente.
     */
    .pagina-impresa {
        display: block;
        break-after: page;
        page-break-after: always;
    }

    .pagina-impresa:last-child { break-after: auto; page-break-after: auto; }

    .hoja-de-cartones .carton {
        display: block;
        box-sizing: border-box;
        height: 78mm;
        margin: 0 0 6mm;
        padding: 2.5mm 3mm 3mm;
        border: 0.8mm solid #c2410c;
        border-radius: 3mm;
        background: #fff;
        break-inside: avoid;
        page-break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .hoja-de-cartones .carton:last-child { margin-bottom: 0; }

    .cabecera-impresa {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 4mm;
        height: 9mm;
        margin-bottom: 2.5mm;
        border-bottom: 0.4mm solid #e7cfb4;
        font: 700 11pt system-ui, sans-serif;
        color: #22303c;
    }

    .cabecera-impresa .marca-impresa { font-size: 17pt; line-height: 1; }
    .cabecera-impresa .marca-impresa img { height: 7mm; width: auto; }
    .cabecera-impresa .titulo-impreso { font-size: 12pt; color: #9a3412; }
    .cabecera-impresa .web-impresa { font-size: 9.5pt; font-weight: 600; color: #5b6b7a; }

    .hoja-de-cartones .carton-rejilla {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 1.2mm;
        height: 58mm;
    }

    .hoja-de-cartones .carton-rejilla > * {
        aspect-ratio: auto;
        border-radius: 1.5mm;
        font: 800 24pt system-ui, sans-serif;
    }

    .hoja-de-cartones .carton-rejilla .num { border: 0.4mm solid #c9a27a; color: #111; }
    .hoja-de-cartones .carton-rejilla .hueco { background: #f6e7d6; }
}

/* ------------------------------------------- La página de cartones suelta */

/* (25/10/2026) La que abre el juego desde el portal instalado: en pantalla se
   ven los cartones a buen tamaño y, al imprimir, mandan las reglas de arriba. */
.cartones-sueltos { margin: 0; padding: 16px; background: #f4f1ec; font-family: system-ui, sans-serif; color: #22303c; }

.barra-de-imprimir { max-width: 760px; margin: 0 auto 16px; text-align: center; }
.barra-de-imprimir .titulo { margin: 0 0 10px; font-size: 1.3rem; font-weight: 800; }
.barra-de-imprimir .boton-imprimir {
    min-height: 52px;
    padding: 12px 40px;
    border: 0;
    border-radius: 999px;
    background: #3f52a8;
    color: #fff;
    font: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
}
.barra-de-imprimir .nota { margin: 10px auto 6px; max-width: 520px; font-size: .9rem; color: #5b6b7a; }
.barra-de-imprimir .volver { color: #3f52a8; font-weight: 700; }

@media screen {
    .hoja-de-cartones.a-la-vista { display: block; max-width: 760px; margin: 0 auto; }
    .a-la-vista .pagina-impresa { display: grid; gap: 14px; margin-bottom: 14px; }
    .a-la-vista .carton { padding: 8px 8px 10px; border: 2px solid #c2410c; border-radius: 12px; background: #fff; }
    .a-la-vista .cabecera-impresa { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #e7cfb4; font-weight: 700; font-size: .8rem; }
    .a-la-vista .marca-impresa { font-size: 1.1rem; line-height: 1; }
    .a-la-vista .marca-impresa img { height: 22px; width: auto; }
    .a-la-vista .titulo-impreso { color: #9a3412; }
    .a-la-vista .web-impresa { color: #5b6b7a; font-weight: 600; font-size: .72rem; }
    .a-la-vista .carton-rejilla { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; }
    .a-la-vista .carton-rejilla > * { display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; font-weight: 800; font-size: clamp(.9rem, 3.6vw, 1.4rem); }
    .a-la-vista .carton-rejilla .num { border: 1px solid #e7cfb4; background: #fff; }
    .a-la-vista .carton-rejilla .hueco { background: #f3e2cf; }
}