/* ── Ajustes para móvil, tableta y app instalada ──────────────────────────────
   Se aplica a todas las páginas. El juego tiene los suyos aparte.
   Criterio: en horizontal de móvil la altura es lo escaso (360-430 px), así que
   todo lo que crece en vertical se encoge.                                    */

/* Nada de rebotes ni zoom accidental al tocar dos veces */
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }

/* La app instalada no tiene barra de navegador: aprovechar el hueco */
@media (display-mode: standalone), (display-mode: fullscreen) {
  body { padding-top: env(safe-area-inset-top); }
  .navbar { padding-left: max(1rem, env(safe-area-inset-left)); }
}

/* ── Pantallas bajas (móvil en horizontal) ─────────────────────────────────── */
@media (max-height: 500px) {

  /* Altura por porcentaje en vez de vh/dvh: es la única que coincide siempre
     con lo que se ve, en navegador y en app instalada. */
  html, body { height: 100%; }
  .main-content { min-height: 0 !important; height: 100% !important; padding: 0 !important; }
  .login-container { min-height: 0 !important; height: 100% !important; }

  /* Login: en horizontal se pone en dos columnas — cabecera a la izquierda y
     el formulario a la derecha. Así entra de sobra en 360 px de alto. */
  .login-container { padding: .6rem !important; min-height: 100dvh;
                     display: flex; align-items: center; justify-content: center; }
  .login-card { display: grid !important; grid-template-columns: auto 1fr;
                align-items: center; gap: 1.2rem !important;
                padding: .9rem 1.3rem !important; max-width: 560px; width: 100%;
                margin: 0 !important; }
  .login-header { text-align: center; margin: 0 !important; padding: 0 !important;
                  border: 0 !important; max-width: 170px; }
  .login-logo { font-size: 1.7rem !important; margin: 0 0 .1rem !important; }
  .login-card h1 { font-size: 1rem !important; margin: 0 !important; }
  .login-card p  { font-size: .62rem !important; margin: .15rem 0 0 !important; line-height: 1.3; }
  .login-form { margin: 0 !important; }
  .messages { grid-column: 1 / -1; margin: 0 0 .3rem !important; }
  .message { font-size: .68rem !important; padding: .35rem .6rem !important; }
  .form-group { margin-bottom: .45rem !important; }
  .form-group label { font-size: .62rem !important; margin-bottom: .12rem !important; }
  input[type=text], input[type=password] { padding: .4rem .6rem !important; font-size: .8rem !important; }
  button[type=submit], .btn-full { padding: .45rem !important; font-size: .8rem !important; margin-top: .2rem; }

  /* Portada del jugador */
  .pt-wrap  { padding: 2.4vh 4vw 3vh !important; }
  .pt-hola  { font-size: .6rem !important; letter-spacing: .3em !important; }
  .pt-nombre{ font-size: clamp(22px, 5.5vh, 34px) !important; }
  .pt-sub   { font-size: .72rem !important; margin-top: .2rem !important; }
  .pt-grid  { margin-top: 2.4vh !important; gap: 12px !important;
              grid-template-columns: repeat(auto-fit, minmax(150px, 200px)) !important; }
  .pt-img, .pt-sinimg { aspect-ratio: 16/9 !important; }
  .pt-cuerpo{ padding: .5rem .6rem .65rem !important; gap: .2rem !important; }
  .pt-nom   { font-size: .92rem !important; }
  .pt-desc  { font-size: .66rem !important; line-height: 1.3 !important;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pt-pie   { font-size: .6rem !important; margin-top: .15rem !important; }
  .pt-jugar { font-size: .6rem !important; padding: .3rem .6rem !important; }
  .pt-badge { font-size: .5rem !important; padding: .2rem .45rem !important; top: 7px; right: 7px; }

  /* Cuento */
  .ct-wrap { padding: 3vh 6vw 6vh !important; }
  .ct-tit  { font-size: clamp(20px, 5.5vh, 32px) !important; }
  .ct-p    { font-size: clamp(14px, 2vh, 17px) !important; line-height: 1.7 !important;
             margin-bottom: .9rem !important; }
  .ct-regla{ margin: 1.1rem 0 !important; }
  .ct-moral{ margin-top: 1.4rem !important; padding: .9rem 1.1rem !important; font-size: .9rem !important; }

  /* Panel de admin: al menos legible */
  .dashboard-container { padding: .8rem !important; }
  .dashboard-title { font-size: 1.1rem !important; }
}

/* Móvil en horizontal: en vez de apilar (saludo → juegos → cuentos) se reparte
   en columnas, que es como cabe sin tener que hacer scroll. */
@media (max-height: 500px) and (orientation: landscape) {
  .pt-wrap { flex-direction: row !important; align-items: center !important;
             justify-content: center !important; gap: 3vw !important;
             min-height: 100% !important; padding: 1vh 3vw !important; }
  .pt-wrap > div:first-child { text-align: left !important; flex: 0 0 auto; max-width: 26vw; }
  .pt-nombre { font-size: clamp(20px, 6vh, 30px) !important; }
  .pt-grid   { margin-top: 0 !important; width: auto !important;
               grid-template-columns: repeat(auto-fit, minmax(140px, 190px)) !important; }
  .pt-lateral { display: flex !important; flex-direction: column; gap: .6rem;
                max-width: 36vw; max-height: 96%; overflow-y: auto; }
  .pt-lateral > div { margin-top: 0 !important; width: auto !important; max-width: none !important; }
  
  .pt-salir { top: 8px; right: 10px; padding: .25rem .6rem; font-size: .6rem; }

  /* "Volver a jugar" comparte columna con los cuentos */
  .pt-mundos { margin-top: .6rem !important; max-width: 34vw; }
  .pt-mundos .pt-hola { font-size: .55rem !important; letter-spacing: .22em !important; }
  .pt-mundos .pt-sub  { font-size: .58rem !important; margin: .1rem 0 .4rem !important; }
  .pt-chips { gap: .4rem !important; }
  .pt-chip  { min-width: 84px !important; padding: .32rem .55rem !important; border-radius: 9px; }
  .pt-chip-n{ font-size: .68rem !important; }
  .pt-chip-e{ font-size: .62rem !important; }
  .pt-chip-d{ font-size: .48rem !important; }

  /* Los cuentos pasan a filas compactas: en columna ocupaban media pantalla */
  .pt-lateral .pt-grid { grid-template-columns: 1fr !important; gap: 7px !important; }
  .pt-lateral .pt-card { flex-direction: row !important; align-items: center;
                                       gap: .55rem; padding: .3rem .55rem; border-radius: 11px; }
  .pt-lateral .pt-sinimg { aspect-ratio: 1 !important; width: 32px; height: 32px;
                                         font-size: 1rem; border-radius: 8px; flex: 0 0 auto; }
  .pt-lateral .pt-cuerpo { padding: 0 !important; flex: 1; gap: .1rem !important; }
  .pt-lateral .pt-nom    { font-size: .72rem !important; line-height: 1.2; }
  .pt-lateral .pt-desc   { display: none; }
  .pt-lateral .pt-pie    { margin-top: 0 !important; font-size: .55rem !important; }
  .pt-lateral .pt-jugar  { padding: .22rem .5rem !important; font-size: .53rem !important; }
}

/* ── Pantallas estrechas (móvil en vertical) ───────────────────────────────── */
@media (max-width: 560px) {
  .pt-grid { grid-template-columns: 1fr !important; padding: 0 4vw; }
  .games-grid { grid-template-columns: 1fr !important; }
  .dashboard-header { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .ct-wrap { padding-left: 7vw !important; padding-right: 7vw !important; }
}