/* ====================================
   MEDIA QUERIES - RESPONSIVE DESIGN
   Orden: max-width de MAYOR a MENOR para que el breakpoint
   más pequeño siempre sobrescriba al más grande.
   ==================================== */

/* ========== DESKTOP: 1024px ========== */
@media(max-width:1024px){
    .sidebar{
        width:320px;
    }

    main{
        padding:35px 25px;
    }

    #plantilla{
        transform:scale(.50);
        transform-origin:top center;
    }

    #plantilla.expanded{
        transform:scale(.65) !important;
    }

    /* centrado en sidebar de 320px: (320 - 50) / 2 = 135 */
    #toggleSidebar{
        left:135px;
        top:22px;
    }

    #toggleSidebar.visible{
        left:8px;
    }
}

/* ========== TABLET: 768px ========== */
@media(max-width:768px){
    .container{
        flex-direction:row;
    }

    .sidebar{
        position:fixed;
        left:0;
        top:0;
        height:100vh;
        width:300px;
        z-index:999;
        transform:translateX(0);
    }

    .sidebar.closed{
        width:0;
        padding:0;
        overflow:hidden;
        border-right:none;
        transform:translateX(0);
    }

    main{
        margin-left:0;
        padding:30px 20px;
    }

    #plantilla{
        transform:scale(.40);
        transform-origin:top center;
    }

    #plantilla.expanded{
        transform:scale(.50) !important;
    }

    /* centrado en sidebar de 300px: (300 - 50) / 2 = 125 */
    #toggleSidebar{
        left:125px;
        top:20px;
    }

    #toggleSidebar.visible{
        left:8px;
    }
}

/* ========== MOBILE: 425px ========== */
@media(max-width:425px){
    .container{
        flex-direction:column;
    }

    .sidebar{
        position:relative;
        width:100%;
        max-height:50vh;
        height:auto;
        padding:15px;
        padding-top:70px;
        z-index:1000;
        transform:none;
        overflow-y:auto;
    }

    .sidebar.closed{
        max-height:0;
        padding:0;
        overflow:hidden;
        border-right:none;
        transform:none;
    }

    .sidebar h2{
        font-size:22px;
        margin-bottom:18px;
    }

    .sidebar label{
        font-size:12px;
        margin-top:10px;
    }

    .sidebar input,
    .sidebar textarea,
    .sidebar select{
        padding:8px 10px;
        font-size:12px;
    }

    .sidebar button{
        padding:10px;
        font-size:12px;
    }

    main{
        padding:20px 10px;
        flex:0;
        height:auto;
    }

    #plantilla{
        transform:scale(.32);
        transform-origin:top center;
    }

    #plantilla.expanded{
        transform:scale(.38) !important;
    }

    /* en móvil apilado: centrado en pantalla completa, posición fija visible siempre */
    #toggleSidebar{
        left:50%;
        transform:translateX(-50%);
        top:15px;
        width:38px;
        height:38px;
        font-size:18px;
    }

    /* cuando está cerrado sigue centrado (el sidebar no ocupa ancho, ocupa alto) */
    #toggleSidebar.visible{
        left:50%;
        transform:translateX(-50%);
    }
}

/* ========== MOBILE: 375px ========== */
@media(max-width:375px){
    .sidebar{
        padding:15px;
        padding-top:70px;
    }

    .sidebar h2{
        font-size:20px;
        margin-bottom:15px;
    }

    .sidebar label{
        font-size:11px;
    }

    .sidebar input,
    .sidebar textarea,
    .sidebar select{
        padding:8px 10px;
        font-size:12px;
    }

    .sidebar button{
        padding:10px;
        font-size:12px;
        margin-top:8px;
    }

    main{
        padding:20px 10px;
    }

    #plantilla{
        transform:scale(.30);
        transform-origin:top center;
    }

    #plantilla.expanded{
        transform:scale(.35) !important;
    }

    #toggleSidebar{
        top:12px;
        width:36px;
        height:36px;
        font-size:18px;
    }
}

/* ========== MOBILE: 320px ========== */
@media(max-width:320px){
    .sidebar{
        max-height:50vh;
    }

    main{
        padding:15px 10px;
    }

    #plantilla{
        transform:scale(.28);
        transform-origin:top center;
    }

    #plantilla.expanded{
        transform:scale(.32) !important;
    }

    #toggleSidebar{
        top:10px;
        width:35px;
        height:35px;
        font-size:16px;
    }
}

/* ========== DESKTOP: 1200px+ ========== */
@media(min-width:1025px){
    #plantilla{
        transform:scale(.65);
    }

    #plantilla.expanded{
        transform:scale(.85) !important;
    }

    /* centrado en sidebar de 350px */
    #toggleSidebar{
        left:150px;
    }

    #toggleSidebar.visible{
        left:8px;
    }
}

/* ========== EXTRA LARGE: 1400px+ ========== */
@media(min-width:1400px){
    #plantilla{
        transform:scale(.75);
    }

    #plantilla.expanded{
        transform:scale(.95) !important;
    }
}

/* ========== ORIENTATION: LANDSCAPE ========== */
@media(orientation:landscape) and (max-height:600px){
    #plantilla{
        transform:scale(.40) !important;
    }

    main{
        padding:15px;
    }
}

/* ========== PRINT ========== */
@media print{
    .sidebar,
    #toggleSidebar,
    main{
        display:none;
    }

    body{
        background:white;
    }

    #plantilla{
        transform:scale(1);
        box-shadow:none;
    }
}