/* PAM V656 · responsive fase 2.
   Alcance: Teoría/MetroTest y Verbal.
   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}
}

/* 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}
}

/* 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}
}