/**
 * Proyecto: MiniJuegoTech
 * Módulo: PlayerTech
 * Versión: 2.1.0
 * Archivo: assets/css/responsive.css
 * Finalidad: Adaptación fluida a móvil, tableta, escritorio y ambas orientaciones.
 * Criterio: No se diseñan tamaños fijos por marca o modelo de dispositivo.
 */

@media (max-width: 62rem) {
    .screen-grid--intro,
    .screen-grid--profile,
    .lobby-layout { grid-template-columns: 1fr; align-content: start; }
    .screen-grid { min-height: auto; padding-block: 1.2rem 2rem; }
    .intro-panel h1,
    .context-card h1,
    .lobby-hero h1 { max-width: 18ch; }
    .lobby-panel { max-height: none; }
}

@media (max-width: 46rem) {
    :root { --header-height: 4.2rem; }
    .app-header { padding-block: .55rem; }
    .app-header__version,
    .badge--environment { display: none; }
    .app-main { padding: .85rem; }
    .intro-panel,
    .context-card { padding: .5rem .15rem; }
    .intro-panel h1,
    .context-card h1,
    .lobby-hero h1 { font-size: clamp(2.25rem, 13vw, 4rem); }
    .panel { padding: 1rem; border-radius: 1.25rem; }
    .avatar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lobby-panel__footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 23.75rem) {
    .app-header__identity small { display: none; }
    .app-header__identity { gap: .5rem; }
    .avatar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .panel__heading { align-items: flex-start; }
}

/* Móvil y tableta en horizontal: aprovechamos el ancho sin forzar una altura concreta. */
@media (orientation: landscape) and (max-height: 37.5rem) {
    .app-header { position: relative; }
    .screen-grid--intro,
    .screen-grid--profile,
    .lobby-layout { grid-template-columns: minmax(0, .88fr) minmax(20rem, 1.12fr); min-height: auto; align-items: start; }
    .app-main { padding-block: .75rem; }
    .intro-panel h1,
    .context-card h1,
    .lobby-hero h1 { font-size: clamp(2rem, 6vw, 3.5rem); }
    .route-preview { margin-top: 1rem; }
    .panel { padding: 1rem; }
    .avatar-option { grid-template-columns: auto 1fr; justify-items: start; text-align: left; }
    .avatar-option img { width: 2.8rem; }
    .lobby-panel { max-height: calc(100dvh - 2rem); }
}

/* Los criterios recibidos desde la API permiten ajustes sin depender solo de media queries. */
html[data-responsive="COMPACTO"] .app-header__status .badge--environment,
html[data-responsive="COMPACTO"] .app-header__version { display: none; }
html[data-responsive="TABLET"] .form-panel { max-width: 46rem; width: 100%; justify-self: center; }
html[data-touch="true"] .button,
html[data-touch="true"] .field input { min-height: 3.65rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* V2: los estados superpuestos también se adaptan a vertical y horizontal. */
@media (max-width: 46rem) {
    .connection-banner { top: max(.35rem, env(safe-area-inset-top)); grid-template-columns: auto 1fr; }
    .connection-banner__action { grid-column: 1 / -1; width: 100%; }
    .loading-steps { gap: .25rem; }
    .loading-steps span { font-size: .65rem; }
}

@media (orientation: landscape) and (max-height: 31rem) {
    .loading-card--detailed { max-height: calc(100dvh - 1.25rem); overflow: auto; padding: 1rem; }
    .loading-steps { grid-template-columns: repeat(4, 1fr); }
    .connection-banner { top: .35rem; width: min(44rem, calc(100% - 1rem)); }
}

html[data-responsive="COMPACTO"] .loading-steps span { display: none; }
html[data-responsive="COMPACTO"] .loading-card--detailed { gap: .85rem; }

@media (prefers-reduced-motion: reduce) {
    .screen-curtain,
    .screen--arriving,
    .screen--leaving,
    .loader-emblem,
    .skeleton::after,
    .connection-banner__pulse { animation: none !important; transition: none !important; }
}

/*
 * V2.1: avisos internos adaptados por perfil y orientación.
 * Se evitan tamaños fijos por marca o modelo.
 */
html[data-responsive="COMPACTO"] .toast-region,
html[data-responsive="MOVIL"][data-orientation="vertical"] .toast-region {
    right: max(.55rem, env(safe-area-inset-right));
    bottom: calc(max(.55rem, env(safe-area-inset-bottom)) + var(--pt-keyboard-offset, 0px));
    left: max(.55rem, env(safe-area-inset-left));
    width: auto;
}
html[data-responsive="COMPACTO"] .toast,
html[data-responsive="MOVIL"][data-orientation="vertical"] .toast {
    border-radius: 1.05rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

/* En horizontal se colocan arriba para no tapar los controles inferiores. */
html[data-orientation="horizontal"][data-responsive="COMPACTO"] .toast-region,
html[data-orientation="horizontal"][data-responsive="MOVIL"] .toast-region {
    top: max(.55rem, env(safe-area-inset-top));
    right: max(.55rem, env(safe-area-inset-right));
    bottom: auto;
    left: 50%;
    width: min(32rem, calc(100vw - 1.1rem));
    transform: translateX(-50%);
}
html[data-orientation="horizontal"] .toast { padding-block: .7rem; }
html[data-orientation="horizontal"] .toast__message { line-height: 1.35; }

html[data-responsive="TABLET"] .toast-region {
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--pt-keyboard-offset, 0px));
    width: min(26rem, calc(100vw - 2rem));
}

/* Confirmación tipo bottom sheet en móviles. */
@media (max-width: 46rem) {
    .app-dialog {
        width: auto;
        max-height: calc(100dvh - env(safe-area-inset-top));
        margin: auto max(.45rem, env(safe-area-inset-right)) max(.45rem, env(safe-area-inset-bottom)) max(.45rem, env(safe-area-inset-left));
        border-radius: 1.35rem;
    }
    .app-dialog__handle { display: block; }
    .app-dialog__actions { grid-template-columns: 1fr; }
    .app-dialog__confirm { grid-row: 1; }
}

@media (orientation: landscape) and (max-height: 31rem) {
    .app-dialog { width: min(34rem, calc(100vw - 1rem)); margin: auto; }
    .app-dialog__card { max-height: calc(100dvh - 1rem); overflow: auto; grid-template-columns: auto 1fr; align-items: start; }
    .app-dialog__handle { display: none; }
    .app-dialog__actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .toast,
    .toast__progress { animation: none !important; transition: none !important; }
}