/* =========================================
   DISEÑO RESPONSIVO: MÓVIL Y TABLET (<= 899px)
========================================= */
@media (max-width: 899px) {
    #marco-app {
        box-shadow: none;
    }

    #menu-lateral,
    .menu-lateral {
        position: fixed;
        top: 0;
        left: -340px;
        right: auto;
        width: 290px;
        max-width: 85vw;
        height: 100vh;
        height: 100dvh;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.75);
        z-index: 100000;
    }

    #menu-lateral.abierto,
    .menu-lateral.abierto {
        left: 0;
        right: auto;
    }

    #overlay-menu,
    .overlay-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        z-index: 99999;
    }

    #btn-menu-hamburguesa {
        position: fixed;
        top: 15px;
        left: 15px;
        right: auto;
        z-index: 9999;
        display: flex;
    }

    .header-superior,
    .cabecera-vista,
    #vista-campamento .header-superior,
    #vista-planificacion .header-superior,
    #vista-planificador .header-superior,
    #vista-completadas .header-superior {
        padding-left: 56px;
        padding-right: 56px;
    }

    .vista-app h2 {
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }

    .header-superior h1,
    .cabecera-vista h1,
    .vista-app h1 {
        padding: 10px 24px;
        text-align: center;
    }

    .barra-sticky-planificador {
        top: 62px;
    }

    #seccion-crear-mision,
    #seccion-banco-tareas {
        scroll-margin-top: 115px;
    }
}

/* =========================================
   DISEÑO RESPONSIVO: ESCRITORIO (>= 900px)
========================================= */
@media (min-width: 900px) {
    /* 1. Centrar la App Completa (Menú lateral + Contenido) en monitores estándar y ultra-anchos */
    #marco-app {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        max-width: 1600px; /* Ancho máximo total ergonómico para monitores de 32" o ultra-anchos */
        width: 100%;
        margin: 0 auto; /* Centra la interfaz completa en el monitor */
        min-height: 100vh;
        min-height: 100dvh;
        height: auto;
        background-color: var(--fondo-app);
        position: relative;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    }

    .menu-lateral,
    #menu-lateral {
        position: sticky;
        top: 0;
        left: 0;
        right: auto;
        width: 280px;
        height: 100vh;
        height: 100dvh;
        transform: none;
        box-shadow: none;
        border-right: 1px solid var(--color-bordes);
        background: var(--fondo-paneles);
        flex-shrink: 0;
        z-index: 10010;
    }

    #btn-menu-hamburguesa {
        display: none;
    }

    #overlay-menu {
        display: none;
    }

    #overlay-modal-calendario {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 10004;
    }

    #modal-calendario-dia {
        left: calc(50% + 125px); /* Desplaza el centro exacto sumando la mitad del menú lateral */
    }

    #contenido-principal,
    .contenido-principal,
    #app-container {
        flex-grow: 1;
        position: relative;
        width: calc(100% - 280px); /* Resto del ancho tras el menú lateral */
        max-width: 1440px; /* Contenedor principal de vistas limitado a 1440px para ultra-anchos */
        margin: 0 auto;
        padding: 0;
        overflow-y: auto;
        box-sizing: border-box;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .vista,
    .vista-app {
        width: 100%;
        box-sizing: border-box;
        padding: clamp(30px, 4vw, 50px) clamp(15px, 3vw, 30px);
        margin: 0 auto;
        max-width: 1440px;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .seccion-central,
#zona-companero-campamento,
#vista-campamento header,
#vista-ajustes .header-superior,
#vista-planificacion .seccion-central,
#vista-planificador .seccion-central,
#vista-completadas .seccion-central,
#contenido-planificacion,
.creador-avanzado,
#seccion-crear-mision,
#seccion-banco-tareas,
#contenedor-backlog-planificacion,
#vista-ajustes .seccion-central {
        width: 100%;
        max-width: 1440px; /* Se expande fluidamente hasta 1440px sin distorsionar */
        margin-left: auto;
        margin-right: auto;
    }

    .header-superior,
    .cabecera-vista,
    #vista-campamento .header-superior,
    #vista-planificacion .header-superior,
    .vista-app h2 {
        padding-left: 0;
    }

    #panel-creacion {
        left: calc(50% + 125px); /* Desplaza el centro exacto sumando la mitad del menú lateral */
    }
}

/* =========================================
   CONTROL DE ORIENTACIÓN: PANTALLAS EN VERTICAL (TABLETS Y MONITORES ROTADOS 27"-32")
========================================= */
@media (orientation: portrait) {
    #marco-app {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        box-shadow: none;
        border-left: none;
        border-right: none;
    }

    /* En orientación vertical, el sidebar pasa a ser drawer colapsado y la hamburguesa acompaña siempre */
    #btn-menu-hamburguesa {
        position: fixed;
        top: 15px;
        left: 15px;
        right: auto;
        z-index: 9999;
        display: flex;
    }

    #menu-lateral,
    .menu-lateral {
        position: fixed;
        top: 0;
        left: -340px;
        right: auto;
        width: min(340px, 85vw);
        height: 100vh;
        height: 100dvh;
        z-index: 100000;
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.75);
        border-right: none;
    }

    /* Sin !important: así el Modo Calma (transition-duration 0s) también lo deja sin deslizamiento */
    :root #menu-lateral,
    :root .menu-lateral {
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #menu-lateral.abierto,
    .menu-lateral.abierto {
        left: 0;
        right: auto;
    }

    #overlay-menu,
    .overlay-menu {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        z-index: 99999;
    }

    #overlay-menu.activo,
    .overlay-menu.activo {
        opacity: 1;
        pointer-events: auto;
    }

    /* El contenedor principal ocupa el 100% del ancho útil vertical sin barra lateral estorbando */
    #app-container,
    .contenido-principal,
    #contenido-principal {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* Regla maestra para vistas en orientación vertical */
    .vista,
    .vista-app {
        width: 100% !important;
        box-sizing: border-box;
        padding: clamp(30px, 4vw, 50px) clamp(15px, 3vw, 30px);
        margin: 0 auto;
        max-width: 1440px;
        align-items: flex-start;
        justify-content: flex-start;
    }

    /* Cabeceras con margen izquierdo para evitar colisión con el botón hamburguesa */
    .header-superior,
    .cabecera-vista,
    #vista-campamento .header-superior,
    #vista-planificacion .header-superior,
    #vista-planificador .header-superior,
    #vista-completadas .header-superior {
        padding-left: 56px;
        padding-right: 56px;
    }

    .vista-app h2 {
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }

    .header-superior h1,
    .cabecera-vista h1,
    .vista-app h1 {
        padding: 10px 24px;
        text-align: center;
    }

    .barra-sticky-planificador {
        top: 62px;
    }

    /* Los bloques de contenido (Creador de Misiones y Banco de Tareas) se apilan verticalmente al 100% */
    #seccion-crear-mision,
#seccion-banco-tareas,
.seccion-central,
#contenido-planificacion,
.tarjeta-ajustes {

        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
:root #seccion-crear-mision, :root #seccion-banco-tareas, :root .seccion-central, :root #contenido-planificacion, :root .tarjeta-ajustes { width: 100%; }

    #modal-calendario-dia {
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #panel-creacion {
        left: 50%;
        transform: translate(-50%, -50%);
    }
}