/* PAM V655 · base responsive fase 1.
   Alcance cerrado: menú principal y menú Psicotécnicos espaciales.
   No modifica motores, bancos ni lógica de ejercicios. */

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

/* Escritorio y portátil: el contenido deja de comportarse como una columna móvil ampliada. */
@media (min-width:1024px){
  body[data-pam-screen-v655="home"] .app{
    width:min(1280px,calc(100% - 40px));
    min-height:100svh;
    min-height:100dvh;
    padding:18px 22px max(22px,env(safe-area-inset-bottom));
    gap:10px;
  }
  body[data-pam-screen-v655="home"] .brand{text-align:left;padding:0 4px}
  body[data-pam-screen-v655="home"] .brand h1{font-size:clamp(38px,4.2vw,54px);margin-top:8px}
  body[data-pam-screen-v655="home"] .layout{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-flow:row dense;
    gap:11px;
  }
  body[data-pam-screen-v655="home"] .topGrid,
  body[data-pam-screen-v655="home"] .pairGrid,
  body[data-pam-screen-v655="home"] .secondaryGrid{display:contents}
  body[data-pam-screen-v655="home"] .areaCard,
  body[data-pam-screen-v655="home"] .areaCard.big,
  body[data-pam-screen-v655="home"] .areaCard.compact,
  body[data-pam-screen-v655="home"] .areaCard.secondary{
    min-height:92px;
    height:100%;
    border-radius:21px;
    grid-template-columns:54px minmax(0,1fr) auto;
    gap:11px;
    padding:11px 12px;
  }
  body[data-pam-screen-v655="home"] .areaCard.big{grid-column:span 2}
  body[data-pam-screen-v655="home"] .areaCard.big.disabled{grid-column:1/-1}
  body[data-pam-screen-v655="home"] .toolsTitle{grid-column:1/-1;margin:1px 2px -1px}
  body[data-pam-screen-v655="home"] .icon,
  body[data-pam-screen-v655="home"] .compact .icon,
  body[data-pam-screen-v655="home"] .secondary .icon{
    width:50px;height:50px;border-radius:16px
  }
  body[data-pam-screen-v655="home"] .icon svg,
  body[data-pam-screen-v655="home"] .compact .icon svg,
  body[data-pam-screen-v655="home"] .secondary .icon svg{width:30px;height:30px}
  body[data-pam-screen-v655="home"] .icon:after,
  body[data-pam-screen-v655="home"] .compact .icon:after,
  body[data-pam-screen-v655="home"] .secondary .icon:after{font-size:25px}
  body[data-pam-screen-v655="home"] .areaCard h2,
  body[data-pam-screen-v655="home"] .compact h2,
  body[data-pam-screen-v655="home"] .secondary h2{font-size:19px;margin-bottom:3px}
  body[data-pam-screen-v655="home"] .areaCard p,
  body[data-pam-screen-v655="home"] .compact p,
  body[data-pam-screen-v655="home"] .secondary p{font-size:12px;line-height:1.25}
  body[data-pam-screen-v655="home"] .arrow,
  body[data-pam-screen-v655="home"] .compact .arrow{font-size:23px}

  body[data-pam-screen-v655="spatial-menu"] .app{
    max-width:1180px;
    min-height:100svh;
    min-height:100dvh;
    padding:20px 24px max(24px,env(safe-area-inset-bottom));
  }
  body[data-pam-screen-v655="spatial-menu"] .top{margin-bottom:12px}
  body[data-pam-screen-v655="spatial-menu"] h1{font-size:clamp(40px,4vw,54px);margin-bottom:14px}
  body[data-pam-screen-v655="spatial-menu"] .grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(145px,1fr));
    gap:14px;
  }
  body[data-pam-screen-v655="spatial-menu"] .card{
    min-height:145px;
    height:100%;
    grid-template-columns:60px minmax(0,1fr) auto;
    align-content:center;
    border-radius:23px;
    padding:15px;
  }
  body[data-pam-screen-v655="spatial-menu"] .card h2{font-size:21px}
  body[data-pam-screen-v655="spatial-menu"] .card p{font-size:13px}
  body[data-pam-screen-v655="spatial-menu"] .card .icon{width:56px;height:56px;border-radius:18px}
  body[data-pam-screen-v655="spatial-menu"] .card .icon svg{width:37px;height:37px}
}

/* Tablet: dos columnas reales para el menú espacial. */
@media (min-width:700px) and (max-width:1023px){
  body[data-pam-screen-v655="home"] .app{width:min(960px,100%);padding-left:20px;padding-right:20px}
  body[data-pam-screen-v655="spatial-menu"] .app{max-width:960px;padding-left:20px;padding-right:20px}
  body[data-pam-screen-v655="spatial-menu"] .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(3,minmax(125px,1fr));
  }
  body[data-pam-screen-v655="spatial-menu"] .card{min-height:125px}
}

/* Portátiles con poca altura: reducir altura sin recortar contenido. */
@media (min-width:1024px) and (max-height:780px){
  body[data-pam-screen-v655="home"] .app{padding-top:12px;gap:7px}
  body[data-pam-screen-v655="home"] .brand h1{font-size:36px;margin-top:5px}
  body[data-pam-screen-v655="home"] .kicker{padding:5px 10px;font-size:10px}
  body[data-pam-screen-v655="home"] .layout{gap:8px}
  body[data-pam-screen-v655="home"] .areaCard,
  body[data-pam-screen-v655="home"] .areaCard.big,
  body[data-pam-screen-v655="home"] .areaCard.compact,
  body[data-pam-screen-v655="home"] .areaCard.secondary{min-height:76px;padding:8px 10px}
  body[data-pam-screen-v655="home"] .icon,
  body[data-pam-screen-v655="home"] .compact .icon,
  body[data-pam-screen-v655="home"] .secondary .icon{width:44px;height:44px;border-radius:14px}
  body[data-pam-screen-v655="home"] .areaCard h2,
  body[data-pam-screen-v655="home"] .compact h2,
  body[data-pam-screen-v655="home"] .secondary h2{font-size:17px}
  body[data-pam-screen-v655="home"] .areaCard p,
  body[data-pam-screen-v655="home"] .compact p,
  body[data-pam-screen-v655="home"] .secondary p{font-size:11px}

  body[data-pam-screen-v655="spatial-menu"] .app{padding-top:12px}
  body[data-pam-screen-v655="spatial-menu"] .top{margin-bottom:7px}
  body[data-pam-screen-v655="spatial-menu"] h1{font-size:36px;margin-bottom:10px}
  body[data-pam-screen-v655="spatial-menu"] .grid{grid-template-rows:repeat(2,minmax(118px,1fr));gap:10px}
  body[data-pam-screen-v655="spatial-menu"] .card{min-height:118px;padding:11px 13px}
}

/* Móvil: conservar el diseño validado de V654 y el margen de botones del sistema. */
@media (max-width:699px){
  body[data-pam-screen-v655] .app{padding-bottom:max(26px,calc(env(safe-area-inset-bottom) + 18px))}
}

@media (prefers-reduced-motion:reduce){
  body[data-pam-screen-v655] .areaCard,
  body[data-pam-screen-v655] .card,
  body[data-pam-screen-v655] .icon{transition:none!important}
}