/* PAM V656 · responsive fase 2.
   Alcance: Teoría/MetroTest, Verbal, PE y Juanky.
   Solo distribución visual; no modifica bancos, motores, respuestas ni progreso. */

html{min-width:320px}
body[data-pam-screen-v656]{min-height:100svh;min-height:100dvh}

/* =========================
   Teoría / MetroTest
   ========================= */
@media (min-width:1024px){
  body[data-pam-screen-v656="metrotest"] .app-wrap{
    width:min(1440px,calc(100vw - 36px));
    margin:12px auto 24px;
  }
  body[data-pam-screen-v656="metrotest"] .top-card{padding:10px 16px 12px}
  body[data-pam-screen-v656="metrotest"] .home-panel.home-ultra-clean{
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr);
    column-gap:16px;
    row-gap:12px;
    align-items:start;
    padding:14px 16px 18px;
  }
  body[data-pam-screen-v656="metrotest"] .home-panel.home-ultra-clean > .ux-continue{
    grid-column:1/-1;
    margin:0;
  }
  body[data-pam-screen-v656="metrotest"] .home-panel.home-ultra-clean > .ux-start-card{
    grid-column:1;
    grid-row:2 / span 2;
    margin:0;
    min-width:0;
    height:100%;
  }
  body[data-pam-screen-v656="metrotest"] .home-panel.home-ultra-clean > .ux-home-tools-title{
    grid-column:2;
    grid-row:2;
    margin:0;
    align-self:end;
  }
  body[data-pam-screen-v656="metrotest"] .home-panel.home-ultra-clean > .ux-home-secondary{
    grid-column:2;
    grid-row:3;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    align-content:start;
    margin:0;
  }
  body[data-pam-screen-v656="metrotest"] .ux-home-secondary .btn{
    width:100%;
    min-height:44px;
    white-space:normal;
  }
  body[data-pam-screen-v656="metrotest"] .home-panel.home-ultra-clean > .ux-home-tip{
    grid-column:1/-1;
    margin:0;
  }
  body[data-pam-screen-v656="metrotest"] .ux-mode-choice{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body[data-pam-screen-v656="metrotest"] .ux-form{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:end;
  }
  body[data-pam-screen-v656="metrotest"] .ux-form > .ux-field,
  body[data-pam-screen-v656="metrotest"] .ux-form > .ux-start-btn,
  body[data-pam-screen-v656="metrotest"] .ux-form > .ux-material-btn{min-width:0}
  body[data-pam-screen-v656="metrotest"] .ux-form > .ux-mixed-panel{grid-column:1/-1}
  body[data-pam-screen-v656="metrotest"] .ux-form > .ux-start-btn{grid-column:1/-1}

  /* En examen: pregunta a la izquierda y respuestas a la derecha. */
  body[data-pam-screen-v656="metrotest"] #quizView .content{
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr);
    grid-template-rows:auto auto minmax(0,auto) auto;
    column-gap:18px;
    row-gap:12px;
    padding:16px 18px 18px;
  }
  body[data-pam-screen-v656="metrotest"] #quizView .actions-top,
  body[data-pam-screen-v656="metrotest"] #quizView .tag-row,
  body[data-pam-screen-v656="metrotest"] #quizView .feedback{
    grid-column:1/-1;
  }
  body[data-pam-screen-v656="metrotest"] #quizView .q-title{
    grid-column:1;
    grid-row:3;
    margin:0;
    align-self:start;
  }
  body[data-pam-screen-v656="metrotest"] #quizView .image-box{
    grid-column:1;
    grid-row:4;
    margin:0;
  }
  body[data-pam-screen-v656="metrotest"] #quizView .options{
    grid-column:2;
    grid-row:3 / span 2;
    align-content:start;
    gap:9px;
  }
  body[data-pam-screen-v656="metrotest"] #quizView .option{min-height:58px}

  /* Gamer: mismo criterio de dos zonas, sin tocar la lógica. */
  body[data-pam-screen-v656="metrotest"] #gamerView .gamer-content{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
    grid-template-rows:auto auto auto auto;
    column-gap:18px;
    row-gap:12px;
  }
  body[data-pam-screen-v656="metrotest"] #gamerView .gamer-qtag{grid-column:1/-1}
  body[data-pam-screen-v656="metrotest"] #gamerView .gamer-question{grid-column:1;grid-row:2;margin:0}
  body[data-pam-screen-v656="metrotest"] #gamerView .gamer-image-box{grid-column:1;grid-row:3;margin:0}
  body[data-pam-screen-v656="metrotest"] #gamerView .gamer-options{grid-column:2;grid-row:2 / span 2;align-content:start}
  body[data-pam-screen-v656="metrotest"] #gamerView .gamer-feedback,
  body[data-pam-screen-v656="metrotest"] #gamerView .gamer-actions{grid-column:1/-1}

  body[data-pam-screen-v656="metrotest"] #summaryView{
    display:grid;
    grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr);
    column-gap:18px;
    align-items:start;
  }
  body[data-pam-screen-v656="metrotest"] #summaryView > .tag,
  body[data-pam-screen-v656="metrotest"] #summaryView > .score,
  body[data-pam-screen-v656="metrotest"] #summaryView > .sub,
  body[data-pam-screen-v656="metrotest"] #summaryView > .summary-grid,
  body[data-pam-screen-v656="metrotest"] #summaryView > .summary-actions-extra,
  body[data-pam-screen-v656="metrotest"] #summaryView > .actions{grid-column:1}
  body[data-pam-screen-v656="metrotest"] #summaryView > .summary-advice,
  body[data-pam-screen-v656="metrotest"] #summaryView > .summary-blocks,
  body[data-pam-screen-v656="metrotest"] #summaryView > .review{grid-column:2}
  body[data-pam-screen-v656="metrotest"] #summaryView > .review{grid-row:1 / span 7;margin-top:0;max-height:calc(100dvh - 190px)}
}

@media (min-width:1024px) and (max-height:800px){
  body[data-pam-screen-v656="metrotest"] .app-wrap{margin-top:8px}
  body[data-pam-screen-v656="metrotest"] .home-panel.home-ultra-clean{padding-top:10px;padding-bottom:12px;row-gap:8px}
  body[data-pam-screen-v656="metrotest"] .ux-start-card{padding:12px!important}
  body[data-pam-screen-v656="metrotest"] .ux-start-card > p{margin-bottom:8px!important}
  body[data-pam-screen-v656="metrotest"] .ux-mode-btn{min-height:74px!important;padding:10px!important}
  body[data-pam-screen-v656="metrotest"] .ux-mode-text small{line-height:1.22}
  body[data-pam-screen-v656="metrotest"] .ux-home-secondary .btn{min-height:38px;padding:8px 10px}
  body[data-pam-screen-v656="metrotest"] #quizView .top-stats-bar{padding-top:6px}
  body[data-pam-screen-v656="metrotest"] #quizView .progress-area{padding-top:8px}
  body[data-pam-screen-v656="metrotest"] #quizView .content{padding-top:10px;row-gap:8px}
}

/* =========================
   Psicotécnicos Verbal
   ========================= */
@media (min-width:1024px){
  body[data-pam-screen-v656="verbal"] .shell{
    max-width:1440px!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  body[data-pam-screen-v656="verbal"] #setup .metroNormativaSetupV25{
    max-width:1400px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.45fr) minmax(340px,.75fr);
    align-items:start;
    column-gap:14px;
  }
  body[data-pam-screen-v656="verbal"] #setup .normTopV25{grid-column:1/-1}
  body[data-pam-screen-v656="verbal"] #setup .learnCardV397{
    grid-column:2;
    grid-row:2;
    margin:14px 14px 0 0;
    min-height:118px;
  }
  body[data-pam-screen-v656="verbal"] #setup .verbalSetupSectionV224{
    grid-column:1;
    grid-row:2 / span 4;
    padding:14px!important;
  }
  body[data-pam-screen-v656="verbal"] #setup .normProgressV25{
    grid-column:2;
    grid-row:3;
    margin:10px 14px 0 0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body[data-pam-screen-v656="verbal"] #setup .normNoticeV25{
    grid-column:2;
    grid-row:4;
    margin:10px 14px 0 0!important;
  }
  body[data-pam-screen-v656="verbal"] #setup #bankInfo{
    grid-column:2;
    grid-row:5;
    margin:10px 14px 14px 0!important;
  }
  body[data-pam-screen-v656="verbal"] .verbalControlsV224{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  body[data-pam-screen-v656="verbal"] .verbalSecondaryV224{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  body[data-pam-screen-v656="verbal"] #play .playHeader,
  body[data-pam-screen-v656="verbal"] #play .stats,
  body[data-pam-screen-v656="verbal"] #play .questionCard,
  body[data-pam-screen-v656="verbal"] #results .panel,
  body[data-pam-screen-v656="verbal"] #failbook .panel{max-width:1400px}
  body[data-pam-screen-v656="verbal"] #play .questionCard{
    display:grid;
    grid-template-columns:minmax(0,.86fr) minmax(440px,1.14fr);
    grid-template-rows:auto auto auto auto auto;
    column-gap:18px;
    row-gap:10px;
  }
  body[data-pam-screen-v656="verbal"] #play .questionCard > .tag{grid-column:1;grid-row:1;margin:0;justify-self:start}
  body[data-pam-screen-v656="verbal"] #play .questionCard > .qtext{grid-column:1;grid-row:2;margin:0}
  body[data-pam-screen-v656="verbal"] #play .questionCard > .options{grid-column:2;grid-row:1 / span 3;align-content:start}
  body[data-pam-screen-v656="verbal"] #play .questionCard > .examNote{grid-column:1;grid-row:3;margin:0}
  body[data-pam-screen-v656="verbal"] #play .questionCard > .feedback,
  body[data-pam-screen-v656="verbal"] #play .questionCard > .actions{grid-column:1/-1}
  body[data-pam-screen-v656="verbal"] #play .option{min-height:58px}
}

@media (min-width:1024px) and (max-height:800px){
  body[data-pam-screen-v656="verbal"] .shell{padding-top:10px!important}
  body[data-pam-screen-v656="verbal"] #setup .normTopV25{padding:9px 12px!important}
  body[data-pam-screen-v656="verbal"] #setup .learnCardV397{min-height:96px;padding:12px}
  body[data-pam-screen-v656="verbal"] #setup .verbalSetupSectionV224{padding:10px!important}
  body[data-pam-screen-v656="verbal"] .verbalControlsV224{padding:9px!important}
  body[data-pam-screen-v656="verbal"] #play .questionCard{padding:14px;row-gap:8px}
  body[data-pam-screen-v656="verbal"] #play .stats{margin-bottom:8px}
}

/* =========================
   PE
   ========================= */
@media (min-width:1000px){
  body[data-pam-screen-v656="pe"]{padding:16px 18px max(18px,env(safe-area-inset-bottom))}
  body[data-pam-screen-v656="pe"] .app{
    max-width:1440px;
    min-height:calc(100dvh - 34px);
    grid-template-columns:250px minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    column-gap:14px;
    row-gap:12px;
  }
  body[data-pam-screen-v656="pe"] .top{grid-column:1/-1}
  body[data-pam-screen-v656="pe"] .filters{
    grid-column:1;
    grid-row:2;
    display:grid;
    grid-template-columns:1fr;
    align-content:start;
    gap:8px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(255,255,255,.045);
    max-height:calc(100dvh - 120px);
    overflow:auto;
  }
  body[data-pam-screen-v656="pe"] .chip{width:100%;text-align:left;border-radius:14px}
  body[data-pam-screen-v656="pe"] .panel{grid-column:2;grid-row:2;padding:14px 16px}
  body[data-pam-screen-v656="pe"] .app > .small{grid-column:1/-1;grid-row:3;margin:0;text-align:center}
  body[data-pam-screen-v656="pe"] .exercise{
    grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
    grid-template-areas:"prompt prompt" "series options" "feedback feedback";
    align-items:start;
    gap:12px 16px;
  }
  body[data-pam-screen-v656="pe"] .prompt{grid-area:prompt}
  body[data-pam-screen-v656="pe"] .series{grid-area:series;min-height:180px}
  body[data-pam-screen-v656="pe"] .options{grid-area:options;grid-template-columns:1fr}
  body[data-pam-screen-v656="pe"] .feedback{grid-area:feedback}
}

@media (min-width:1000px) and (max-height:800px){
  body[data-pam-screen-v656="pe"]{padding-top:10px}
  body[data-pam-screen-v656="pe"] .app{min-height:calc(100dvh - 22px);gap:8px}
  body[data-pam-screen-v656="pe"] .panel{padding:10px 12px;gap:8px}
  body[data-pam-screen-v656="pe"] .exercise{gap:8px 12px}
  body[data-pam-screen-v656="pe"] .series{min-height:130px;padding:12px}
  body[data-pam-screen-v656="pe"] .opt{min-height:48px;padding:10px 12px}
  body[data-pam-screen-v656="pe"] .feedback{min-height:38px;padding:9px 11px}
}

/* =========================
   Juanky catálogo / ajustes
   La vista de repaso conserva su motor y reglas V553-V566.
   ========================= */
@media (min-width:1200px){
  body[data-pam-screen-v656="juanky"] .jk-shell{
    width:min(1460px,calc(100vw - 40px));
    padding-top:max(14px,env(safe-area-inset-top));
    padding-bottom:max(24px,env(safe-area-inset-bottom));
  }
  body[data-pam-screen-v656="juanky"] .jk-header{margin-bottom:10px}
  body[data-pam-screen-v656="juanky"] .jk-titleBlock{padding:14px 20px}
  body[data-pam-screen-v656="juanky"] .jk-titleBlock h1{font-size:clamp(2rem,3.2vw,3rem)}
  body[data-pam-screen-v656="juanky"] .jk-dashboard{margin:10px 0;gap:9px}
  body[data-pam-screen-v656="juanky"] .jk-stat{padding:10px 12px}
  body[data-pam-screen-v656="juanky"] .jk-stat__num{font-size:1.65rem}
  body[data-pam-screen-v656="juanky"] .jk-tabs{
    flex-wrap:wrap;
    overflow:visible;
    padding-bottom:8px;
  }
  body[data-pam-screen-v656="juanky"] .jk-tab--import{margin-left:0}
  body[data-pam-screen-v656="juanky"] .jk-toolbar{
    grid-template-columns:.85fr 1fr 1.2fr .95fr 1.45fr .75fr;
    gap:9px;
    margin-bottom:12px;
  }
  body[data-pam-screen-v656="juanky"] .jk-field select,
  body[data-pam-screen-v656="juanky"] .jk-field input{padding:9px 10px}
  body[data-pam-screen-v656="juanky"] .jk-catalog,
  body[data-pam-screen-v656="juanky"] .jk-empty,
  body[data-pam-screen-v656="juanky"] .jk-import,
  body[data-pam-screen-v656="juanky"] .jk-settings{padding:18px 20px}
  body[data-pam-screen-v656="juanky"] .jk-catalogGrid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  body[data-pam-screen-v656="juanky"] .jk-blockCard{height:100%}
  body[data-pam-screen-v656="juanky"] .jk-settingsGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:1200px) and (max-height:800px){
  body[data-pam-screen-v656="juanky"] .jk-shell{padding-top:8px}
  body[data-pam-screen-v656="juanky"] .jk-header{gap:9px;margin-bottom:7px}
  body[data-pam-screen-v656="juanky"] .jk-titleBlock{padding:9px 15px}
  body[data-pam-screen-v656="juanky"] .jk-kicker{display:none}
  body[data-pam-screen-v656="juanky"] .jk-titleBlock h1{font-size:1.7rem}
  body[data-pam-screen-v656="juanky"] .jk-subtitle{font-size:.82rem}
  body[data-pam-screen-v656="juanky"] .jk-dashboard{margin:7px 0}
  body[data-pam-screen-v656="juanky"] .jk-stat{padding:7px 10px}
  body[data-pam-screen-v656="juanky"] .jk-stat__num{font-size:1.35rem}
  body[data-pam-screen-v656="juanky"] .jk-tabs{padding-bottom:5px}
  body[data-pam-screen-v656="juanky"] .jk-tab{padding:7px 10px}
  body[data-pam-screen-v656="juanky"] .jk-toolbar{margin-bottom:8px}
}


/* Portátil y tablet horizontal amplia: catálogo útil sin comprimir seis controles. */
@media (min-width:1024px) and (max-width:1199px){
  body[data-pam-screen-v656="juanky"] .jk-shell{
    width:min(1160px,calc(100vw - 28px));
    padding-top:max(12px,env(safe-area-inset-top));
    padding-bottom:max(22px,env(safe-area-inset-bottom));
  }
  body[data-pam-screen-v656="juanky"] .jk-header{margin-bottom:9px}
  body[data-pam-screen-v656="juanky"] .jk-titleBlock{padding:12px 17px}
  body[data-pam-screen-v656="juanky"] .jk-dashboard{margin:9px 0;gap:8px}
  body[data-pam-screen-v656="juanky"] .jk-tabs{flex-wrap:wrap;overflow:visible;padding-bottom:7px}
  body[data-pam-screen-v656="juanky"] .jk-tab--import{margin-left:0}
  body[data-pam-screen-v656="juanky"] .jk-toolbar{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
  body[data-pam-screen-v656="juanky"] .jk-field--search{grid-column:span 2;min-width:0}
  body[data-pam-screen-v656="juanky"] .jk-catalog,
  body[data-pam-screen-v656="juanky"] .jk-empty,
  body[data-pam-screen-v656="juanky"] .jk-import,
  body[data-pam-screen-v656="juanky"] .jk-settings{padding:16px 17px}
  body[data-pam-screen-v656="juanky"] .jk-catalogGrid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  body[data-pam-screen-v656="juanky"] .jk-blockCard{height:100%}
  body[data-pam-screen-v656="juanky"] .jk-settingsGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:1024px) and (max-width:1199px) and (max-height:800px){
  body[data-pam-screen-v656="juanky"] .jk-shell{padding-top:7px}
  body[data-pam-screen-v656="juanky"] .jk-header{gap:8px;margin-bottom:6px}
  body[data-pam-screen-v656="juanky"] .jk-titleBlock{padding:8px 13px}
  body[data-pam-screen-v656="juanky"] .jk-kicker{display:none}
  body[data-pam-screen-v656="juanky"] .jk-titleBlock h1{font-size:1.65rem}
  body[data-pam-screen-v656="juanky"] .jk-dashboard{margin:6px 0}
  body[data-pam-screen-v656="juanky"] .jk-stat{padding:7px 9px}
  body[data-pam-screen-v656="juanky"] .jk-toolbar{margin-bottom:7px}
}

/* Tablet: más anchura útil sin forzar el diseño de escritorio. */
@media (min-width:760px) and (max-width:1023px){
  body[data-pam-screen-v656="metrotest"] .app-wrap,
  body[data-pam-screen-v656="verbal"] .shell{width:min(100%,calc(100vw - 20px));max-width:none}
  body[data-pam-screen-v656="pe"] .app{max-width:100%}
  body[data-pam-screen-v656="juanky"] .jk-shell{width:min(100vw - 16px,1120px)}
}

/* Móvil: conservar las interfaces ya validadas y el área segura inferior. */
@media (max-width:759px){
  body[data-pam-screen-v656]{padding-bottom:max(0px,env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:reduce){
  body[data-pam-screen-v656] *{scroll-behavior:auto!important}
}