/* =========================================================
   KIOSKO CUT - Ajustes específicos para pantalla 1024 x 768
   Archivo agregado para NO alterar la hoja original.
   Debe cargarse después de css/kiosko.css en index.html.
   ========================================================= */

@media screen and (max-width: 1100px) and (orientation: landscape){
    :root{
        --radius:24px;
        --touch:58px;
        --shadow:0 14px 38px rgba(17,24,39,.11);
        --soft-shadow:0 8px 22px rgba(17,24,39,.08);
    }

    html,body,
    .kiosk-app{
        width:100vw;
        height:100vh;
        overflow:hidden;
    }

    .kiosk-app::before,
    .kiosk-app::after{
        width:210px;
        height:210px;
        opacity:.11;
    }

    .kiosk-app::before{
        right:-76px;
        top:-84px;
    }

    .kiosk-app::after{
        left:-96px;
        bottom:-92px;
    }

    /* ---------- Encabezado ---------- */
    .app-header{
        top:12px;
        left:22px;
        right:22px;
        height:58px;
        display:grid;
        grid-template-columns:170px 1fr 190px;
        align-items:center;
        column-gap:16px;
    }

    .brand-logo{
        justify-self:center;
        width:auto;
        height:54px;
        max-width:210px;
        object-fit:contain;
    }

    .icon-button{
        min-width:0;
        width:150px;
        height:52px;
        padding:0 18px;
        gap:10px;
        font-size:1rem;
    }

    .icon-button img{
        width:22px;
        height:22px;
    }

    .status-pill{
        justify-self:end;
        min-width:0;
        width:180px;
        padding:13px 14px;
        font-size:.98rem;
    }

    .screen{
        padding:86px 24px 20px;
    }

    /* ---------- Inicio / selección de juego ---------- */
    .home-shell{
        width:min(940px, 100%);
        height:100%;
        margin:0 auto;
        display:block;
    }

    .intro-panel{
        display:none !important;
    }

    .challenge-panel{
        height:100%;
        padding:26px 28px;
        justify-content:center;
        gap:18px;
    }

    .section-heading{
        gap:14px;
    }

    .section-heading span{
        width:72px;
    }

    .section-heading h2{
        font-size:2rem;
        line-height:1;
    }

    .challenge-grid{
        grid-template-columns:repeat(3,1fr) !important;
        gap:16px;
    }

    .challenge-card{
        min-height:210px;
        padding:18px 16px;
        border-radius:22px;
        gap:11px;
    }

    .card-icon{
        width:86px;
        height:86px;
    }

    .card-icon img{
        width:50px;
        height:50px;
    }

    .challenge-card strong{
        font-size:1.24rem;
        line-height:1.07;
    }

    .challenge-card small{
        font-size:.88rem;
        line-height:1.25;
    }

    .touch-btn{
        min-height:58px;
        padding:0 26px;
        font-size:1.05rem;
        gap:10px;
    }

    .btn-icon,
    .btn-icon img{
        width:25px;
        height:25px;
    }

    .start-btn{
        width:min(620px, 82%);
        margin-top:6px;
    }

    /* ---------- Encabezados de minijuegos ---------- */
    .screen-band{
        width:min(940px, 100%);
        height:78px;
        margin:0 auto 14px;
        padding:14px 22px;
        border-radius:24px;
    }

    .band-title{
        gap:12px;
    }

    .band-icon{
        width:48px;
        height:48px;
    }

    .band-icon img{
        width:29px;
        height:29px;
    }

    .band-title h2{
        font-size:1.65rem;
        line-height:1;
    }

    .band-title p{
        margin-top:4px;
        font-size:.88rem;
        line-height:1.2;
    }

    .band-logo{
        width:160px;
        max-height:54px;
        border-radius:14px;
        padding:6px 10px;
    }

    .game-layout{
        width:min(940px, 100%);
        height:calc(100vh - 198px);
        gap:14px;
    }

    .info-card{
        padding:18px;
        gap:12px;
        border-radius:22px;
    }

    .info-card h3{
        font-size:1.25rem;
    }

    .info-card p{
        font-size:.93rem;
        line-height:1.38;
    }

    /* ---------- Rompecabezas ---------- */
    .puzzle-layout{
        grid-template-columns:230px 1fr !important;
        align-items:stretch;
    }

    .puzzle-workspace{
        gap:10px;
    }

    .puzzle-board{
        width:min(660px, 100%);
        max-height:390px;
        gap:5px;
        padding:7px;
        border-radius:20px;
    }

    .puzzle-piece{
        border-radius:12px;
        border-width:2px;
        touch-action:none;
    }


    .puzzle-piece.drag-over{
        transform:scale(.96);
    }

    .helper-text{
        font-size:.82rem;
    }

    /* ---------- Memorama ---------- */
    .memory-layout{
        grid-template-columns:1fr 230px !important;
    }

    .memory-board{
        grid-template-columns:repeat(4,1fr);
        gap:10px;
    }

    .memory-card{
        border-radius:18px;
    }

    .memory-face{
        gap:7px;
    }

    .memory-back img{
        width:46px;
        height:46px;
    }

    .memory-back span{
        font-size:.9rem;
    }

    .memory-icon-wrap{
        width:64px;
        height:64px;
    }

    .memory-icon-wrap img{
        width:38px;
        height:38px;
    }

    .memory-label{
        font-size:.92rem;
    }

    .score-card{
        padding:14px;
        font-size:.9rem;
        border-radius:16px;
    }

    .score-card strong{
        font-size:1.45rem;
    }

    /* ---------- Runner / Alcanza tu Futuro ---------- */
    .runner-score-card{
        min-width:150px;
        padding:10px 14px;
        border-radius:16px;
        font-size:.9rem;
    }

    .runner-score-card strong{
        font-size:1.65rem;
    }

    .runner-layout{
        width:min(940px, 100%);
        height:calc(100vh - 198px);
        grid-template-rows:1fr 112px;
        gap:14px;
    }

    .runner-area{
        border-radius:22px;
    }

    .runner-background{
        bottom:62px;
        height:126px;
    }

    .runner-road{
        bottom:44px;
        height:6px;
    }

    .runner-road::after{
        bottom:-13px;
        height:3px;
    }

    .runner-car{
        left:7%;
        bottom:46px;
        width:112px;
    }

    .obstacle{
        bottom:42px;
        width:64px;
        height:76px;
        gap:2px;
        overflow:visible;
    }

    .obstacle img{
        width:58px;
        height:58px;
        object-fit:contain;
    }

    .obstacle span{
        min-width:96px;
        max-width:110px;
        font-size:.62rem;
        line-height:1.05;
        position:relative;
        top:-6px;
    }

    .runner-footer{
        grid-template-columns:1fr 310px !important;
        gap:14px;
    }

    .runner-footer .info-card{
        padding:14px 18px;
        justify-content:center;
    }

    .runner-controls{
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

    .runner-btn{
        border-radius:22px;
        height:100%;
        font-size:1.02rem;
    }

    /* ---------- Certificado ---------- */
    .certificate-panel{
        width:min(780px, 92%);
        height:calc(100vh - 116px);
        padding:24px 34px;
        gap:10px;
        border-radius:26px;
    }

    .certificate-top{
        justify-content:center;
    }

    .band-icon.large{
        width:62px;
        height:62px;
    }

    .band-icon.large img{
        width:38px;
        height:38px;
    }

    .achievement-badge{
        padding:10px 18px;
        font-size:.95rem;
    }

    .achievement-badge img{
        width:27px;
        height:27px;
    }

    .certificate-panel h2{
        font-size:2rem;
    }

    .scholarship-value{
        gap:10px;
    }

    .scholarship-value span{
        font-size:4.1rem;
    }

    .scholarship-value b{
        font-size:1.75rem;
    }

    .certificate-panel p{
        max-width:620px;
        font-size:1rem;
        line-height:1.35;
    }

    .certificate-media{
        width:min(520px, 88%);
        grid-template-columns:1fr;
        margin:4px 0;
    }

    .certificate-media img{
        height:96px;
        border-radius:16px;
    }

    /* ---------- Pantalla QR ---------- */
    .reward-layout{
        width:min(940px, 100%);
        height:calc(100vh - 112px);
        margin:0 auto;
        display:grid;
        grid-template-columns:1fr !important;
        place-items:center;
        gap:0;
    }

    .lead-panel{
        display:none !important;
    }

    .qr-panel{
        width:430px;
        max-width:92%;
        min-height:0;
        padding:24px 28px 26px;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        text-align:center;
        gap:12px;
        border-radius:26px;
    }

    .qr-logo{
        width:132px;
        max-height:64px;
        object-fit:contain;
        margin:0 auto 2px;
    }

    .qr-panel h2{
        max-width:360px;
        font-size:1.85rem;
        line-height:1.05;
        letter-spacing:-.035em;
        text-align:center;
    }

    .qr-image{
        width:230px;
        max-width:72%;
        padding:10px;
        border-width:7px;
        border-radius:18px;
    }

    .qr-panel p{
        max-width:320px;
        font-size:.9rem;
        line-height:1.3;
    }

    .qr-panel .touch-btn{
        min-height:46px;
        font-size:.86rem;
        padding:0 20px;
    }

    /* ---------- Modal ---------- */
    .modal{
        padding:22px;
    }

    .modal-card{
        width:min(560px, 90vw);
        padding:26px 30px;
        border-radius:24px;
    }

    .modal-icon{
        width:76px;
        height:76px;
        margin-bottom:12px;
    }

    .modal-icon img{
        width:46px;
        height:46px;
    }

    .modal-card h2{
        font-size:2rem;
    }

    .modal-card p{
        margin:12px auto 18px;
        font-size:1rem;
        line-height:1.35;
    }
}

/* =========================================================
   REAJUSTE HOME 1024x768 v2
   Mantiene visible "Elige tu reto" y evita que se amontone.
   ========================================================= */
@media screen and (max-width: 1100px) and (orientation: landscape){
    .screen-home{
        padding:82px 22px 18px;
    }

    .screen-home .home-shell{
        width:min(948px,100%);
        height:100%;
        margin:0 auto;
        display:grid;
        grid-template-rows:150px 1fr;
        gap:14px;
        align-items:stretch;
    }

    .screen-home .intro-panel{
        display:grid !important;
        grid-template-columns:170px 1fr;
        grid-template-rows:auto auto;
        column-gap:20px;
        row-gap:4px;
        align-items:center;
        justify-items:start;
        padding:18px 28px;
        min-height:0;
        overflow:hidden;
    }

    .screen-home .intro-logo{
        grid-row:1 / 3;
        width:150px;
        max-height:96px;
        margin:0;
        object-fit:contain;
        justify-self:center;
    }

    .screen-home .intro-panel h1{
        margin:0;
        font-size:3.25rem;
        line-height:.9;
        letter-spacing:-.055em;
        white-space:nowrap;
    }

    .screen-home .intro-panel p{
        margin:0;
        max-width:660px;
        font-size:1rem;
        line-height:1.25;
    }

    .screen-home .challenge-panel{
        padding:20px 24px 22px;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        gap:12px;
        min-height:0;
        overflow:hidden;
    }

    .screen-home .section-heading{
        gap:12px;
        flex:0 0 auto;
    }

    .screen-home .section-heading span{
        width:66px;
    }

    .screen-home .section-heading h2{
        font-size:1.7rem;
        line-height:1;
    }

    .screen-home .challenge-grid{
        grid-template-columns:repeat(3,1fr) !important;
        gap:14px;
        flex:1 1 auto;
        min-height:0;
        align-items:stretch;
    }

    .screen-home .challenge-card{
        min-height:0;
        height:100%;
        padding:14px 12px;
        border-radius:20px;
        gap:8px;
    }

    .screen-home .card-icon{
        width:72px;
        height:72px;
        flex:0 0 72px;
    }

    .screen-home .card-icon img{
        width:42px;
        height:42px;
    }

    .screen-home .challenge-card strong{
        font-size:1.08rem;
        line-height:1.05;
    }

    .screen-home .challenge-card small{
        font-size:.78rem;
        line-height:1.15;
    }

    .screen-home .start-btn{
        width:min(560px,78%);
        min-height:52px;
        margin:0 auto;
        font-size:.95rem;
        flex:0 0 auto;
    }
}

/* Recompensa, consentimiento y QR del aviso en 1024 x 768 */
@media screen and (max-width:1100px) and (orientation:landscape){
    .qr-panel{
        width:520px;
        max-width:94%;
        padding:14px 24px 16px;
        gap:7px;
    }

    .qr-logo{
        width:108px;
        max-height:48px;
    }

    .qr-panel h2{
        max-width:410px;
        font-size:1.5rem;
        line-height:1.05;
    }

    .privacy-consent{
        width:410px;
        max-width:96%;
        min-height:42px;
        padding:7px 12px;
        gap:10px;
        border-radius:13px;
        font-size:.78rem;
    }

    .privacy-check{
        width:22px;
        height:22px;
        border-width:2px;
        border-radius:5px;
    }

    .privacy-consent input:checked + .privacy-check::after{
        width:5px;
        height:10px;
        border-width:0 2px 2px 0;
    }

    .reward-qr-lock{
        width:190px;
        max-width:none;
        border-radius:17px;
    }

    .reward-qr-lock .qr-image{
        width:100%;
        max-width:none;
        padding:8px;
        border-width:6px;
        border-radius:17px;
    }

    .qr-lock-overlay{
        gap:7px;
        padding:14px;
        border-width:2px;
        font-size:.72rem;
        border-radius:17px;
    }

    .qr-lock-overlay img{
        width:32px;
        height:32px;
    }

    .qr-panel p.reward-help{
        max-width:360px;
        margin:0 !important;
        font-size:.74rem;
        line-height:1.2;
    }

    .privacy-qr-block{
        width:330px;
        max-width:92%;
        grid-template-columns:62px 1fr;
        gap:10px;
        padding:6px 10px;
        border-radius:13px;
    }

    .privacy-qr-image{
        width:62px;
        height:62px;
        border-radius:7px;
    }

    .privacy-qr-block small{
        font-size:.62rem;
        line-height:1.25;
    }
}

/* =========================================================
   CORRECCIÓN FINAL — PANTALLA DE RECOMPENSA / QR
   Centra la tarjeta y evita que el contenido quede en la
   mitad izquierda o se desborde en resoluciones 2K y 1024x768.
   ========================================================= */

/* Reglas base exclusivas de la última pestaña */
.screen[data-screen="reward"]{
    display:none;
    padding:116px 34px 30px;
}

.screen[data-screen="reward"].active{
    display:grid;
    place-items:center;
}

.screen[data-screen="reward"] .reward-layout{
    width:100%;
    height:100%;
    margin:0;
    display:grid;
    grid-template-columns:1fr;
    place-items:center;
    gap:0;
}

.screen[data-screen="reward"] .lead-panel{
    display:none !important;
}

.screen[data-screen="reward"] .qr-panel{
    box-sizing:border-box;
    margin:0 auto;
    overflow:hidden;
}

/* Vista amplia / 2K: composición en dos columnas dentro de una sola tarjeta */
@media screen and (min-width:1200px){
    .screen[data-screen="reward"]{
        padding:120px 44px 38px;
    }

    .screen[data-screen="reward"] .qr-panel{
        width:min(980px, 86vw);
        max-height:calc(100vh - 174px);
        padding:30px 42px 28px;
        display:grid;
        grid-template-columns:minmax(280px, .92fr) minmax(300px, 1.08fr);
        grid-template-rows:auto auto auto 1fr auto;
        column-gap:44px;
        row-gap:13px;
        align-items:center;
        justify-items:center;
        text-align:center;
        border-radius:30px;
    }

    .screen[data-screen="reward"] .qr-logo{
        grid-column:1 / -1;
        width:150px;
        max-height:68px;
        margin:0;
    }

    .screen[data-screen="reward"] .qr-panel h2{
        grid-column:1 / -1;
        width:100%;
        max-width:720px;
        margin:0;
        font-size:clamp(2rem, 2.25vw, 2.8rem);
        line-height:1.02;
    }

    .screen[data-screen="reward"] .privacy-consent{
        grid-column:1 / -1;
        width:min(610px, 100%);
        min-height:54px;
        margin:0;
        padding:10px 18px;
        font-size:1rem;
    }

    .screen[data-screen="reward"] .reward-qr-lock{
        grid-column:1;
        grid-row:4;
        width:min(290px, 100%);
        margin:2px 0 0;
    }

    .screen[data-screen="reward"] .reward-qr-lock .qr-image{
        padding:10px;
        border-width:7px;
        border-radius:22px;
    }

    .screen[data-screen="reward"] .qr-lock-overlay{
        padding:22px;
        font-size:.92rem;
        border-radius:22px;
    }

    .screen[data-screen="reward"] .qr-lock-overlay img{
        width:40px;
        height:40px;
    }

    .screen[data-screen="reward"] .reward-help{
        grid-column:1;
        grid-row:5;
        max-width:300px;
        margin:0 !important;
        font-size:.88rem;
        line-height:1.25;
    }

    .screen[data-screen="reward"] .privacy-qr-block{
        grid-column:2;
        grid-row:4 / 6;
        width:min(390px, 100%);
        min-height:190px;
        padding:20px 24px;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:12px;
        border-radius:22px;
    }

    .screen[data-screen="reward"] .privacy-qr-image{
        width:122px;
        height:122px;
    }

    .screen[data-screen="reward"] .privacy-qr-block small{
        max-width:310px;
        text-align:center;
        font-size:.88rem;
        line-height:1.3;
    }
}

/* Vista 1024 x 768: una sola columna compacta y completamente visible */
@media screen and (max-width:1199px) and (orientation:landscape){
    .screen[data-screen="reward"]{
        padding:82px 22px 16px;
    }

    .screen[data-screen="reward"] .qr-panel{
        width:min(510px, 94vw);
        max-height:calc(100vh - 100px);
        padding:14px 22px 16px;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:7px;
        border-radius:24px;
    }

    .screen[data-screen="reward"] .qr-logo{
        width:96px;
        max-height:42px;
        margin:0;
    }

    .screen[data-screen="reward"] .qr-panel h2{
        max-width:430px;
        margin:0;
        font-size:1.42rem;
        line-height:1.02;
    }

    .screen[data-screen="reward"] .privacy-consent{
        width:min(420px, 96%);
        min-height:40px;
        margin:0;
        padding:6px 11px;
        gap:9px;
        font-size:.76rem;
        border-radius:12px;
    }

    .screen[data-screen="reward"] .privacy-check{
        width:21px;
        height:21px;
        border-width:2px;
        border-radius:5px;
    }

    .screen[data-screen="reward"] .reward-qr-lock{
        width:176px;
        max-width:none;
        margin:0;
        border-radius:16px;
    }

    .screen[data-screen="reward"] .reward-qr-lock .qr-image{
        padding:7px;
        border-width:5px;
        border-radius:16px;
    }

    .screen[data-screen="reward"] .qr-lock-overlay{
        padding:12px;
        gap:5px;
        font-size:.67rem;
        line-height:1.18;
        border-width:2px;
        border-radius:16px;
    }

    .screen[data-screen="reward"] .qr-lock-overlay img{
        width:28px;
        height:28px;
    }

    .screen[data-screen="reward"] .reward-help{
        max-width:340px;
        margin:0 !important;
        font-size:.69rem;
        line-height:1.15;
    }

    .screen[data-screen="reward"] .privacy-qr-block{
        width:min(330px, 92%);
        min-height:0;
        padding:6px 10px;
        display:grid;
        grid-template-columns:54px 1fr;
        gap:9px;
        border-radius:12px;
    }

    .screen[data-screen="reward"] .privacy-qr-image{
        width:54px;
        height:54px;
        border-radius:7px;
    }

    .screen[data-screen="reward"] .privacy-qr-block small{
        text-align:left;
        font-size:.59rem;
        line-height:1.2;
    }
}