/* static/app/emails/situaciones_responsive.css */

/* =========================================
   EMAILS · SITUACIONES · RESPONSIVE
========================================= */


/* =========================================
   MOBILE
========================================= */

@media (max-width:768px){

    /* =====================================
       WORKSPACE
    ===================================== */

    .workspace{

        display:flex;
        flex-direction:column;

        width:100%;

        min-height:auto;

        overflow:visible;
    }


    /* =====================================
       ACCIÓN
    ===================================== */

    .accion{

        width:100%;

        display:flex;
        flex-direction:column;

        overflow:visible;

        height:auto;

        min-height:unset;

        flex:none;
    }


    /* =====================================
       SCROLL
    ===================================== */

    .accion-scroll{

        width:100%;
        max-width:390px;

        margin:0 auto;

        overflow:visible;

        padding:
        12px
        14px
        0
        14px;

        box-sizing:border-box;
    }


    /* =====================================
       HEADER
    ===================================== */

    .header-con-idioma{

        display:flex;
        flex-direction:column;

        align-items:flex-start;

        gap:12px;
    }

    .selector-idioma{

        width:100%;
    }

    .selector-idioma select{

        width:100%;
        height:36px;

        font-size:12px;
    }


    /* =====================================
       GRID CATEGORÍAS
    ===================================== */

    .lista-categorias{

        grid-template-columns:1fr 1fr;

        gap:10px;
    }


    /* =====================================
       CARDS CATEGORÍAS
    ===================================== */

    .item-categoria{

        min-height:84px;

        padding:12px;

        border-radius:12px;
    }

    .categoria-titulo{

        font-size:12px;
        line-height:1.3;
    }

    .categoria-desc{

        font-size:10.5px;
        line-height:1.35;
    }


    /* =====================================
       SITUACIONES
    ===================================== */

    .lista-situaciones{

        gap:10px;
    }

    .item-situacion{

        padding:12px;

        border-radius:10px;
    }

    .situacion-titulo{

        font-size:12px;
        line-height:1.35;
    }

    .situacion-desc{

        font-size:10.5px;
        line-height:1.4;
    }


    /* =====================================
       SUBCONFIGURACIÓN MOBILE
    ===================================== */

    .sub-configuracion{

        margin-top:10px;

        margin-left:0;

        padding-left:0;

        border-left:none;
    }


    /* =====================================
       CONFIG CARD
    ===================================== */

    .config-box{

        width:100%;

        padding:12px;

        border-radius:10px;

        background:#f7f4ee;

        box-sizing:border-box;
    }


    /* =====================================
       LABELS
    ===================================== */

    .config-item label{

        font-size:11.5px;

        line-height:1.4;
    }


    /* =====================================
       TEXTAREA
    ===================================== */

    .config-item textarea{

        min-height:90px;

        font-size:12px;

        line-height:1.45;

        resize:none;
    }


    /* =====================================
       INPUT
    ===================================== */

    .config-item input{

        height:36px;

        font-size:12px;
    }


    /* =====================================
       CHIPS
    ===================================== */

    .opciones{

        gap:6px;
    }

    .opcion{

        font-size:11px;

        padding:
        6px
        10px;
    }


    /* =====================================
       FOOTER
    ===================================== */

    .accion-footer{

        width:100%;
        max-width:390px;

        margin:0 auto;

        padding:
        18px
        14px
        0
        14px;

        border-top:none;

        background:transparent;

        box-shadow:none;

        display:flex;
        flex-direction:column;

        gap:8px;

        box-sizing:border-box;
    }


    /* =====================================
       BOTONES
    ===================================== */

    .btn-primario,
    .btn-secundario{

        width:100% !important;

        min-width:0;

        height:36px;

        border-radius:8px;

        font-size:11.5px;
    }


    /* =====================================
       RESULTADO
    ===================================== */

    .resultado{

        width:100%;

        padding:
        18px
        14px
        24px
        14px;

        overflow:visible;

        height:auto;

        min-height:auto;

        flex:none;

        box-sizing:border-box;
    }


    /* =====================================
       RESULTADO WRAPPER
    ===================================== */

    .resultado-wrapper{

        width:100%;
        max-width:390px;

        margin:0 auto;

        overflow:visible;

        height:auto;

        min-height:0;

        background:#ddd8ce;

        border-radius:10px;

        padding:14px;

        box-sizing:border-box;
    }


    /* =====================================
       RESULTADO HEADER
    ===================================== */

    .resultado-header{

        flex-direction:column;

        align-items:flex-start;

        gap:4px;

        margin-bottom:10px;
    }

    .resultado-header h2{

        margin:0;

        font-size:13px;
    }

    .resultado-info{

        font-size:9px;

        line-height:1.3;
    }


    /* =====================================
       RESULTADO BODY
    ===================================== */

    .resultado-body{

        min-height:120px;

        overflow:visible;

        padding-right:0;

        font-size:11.5px;

        line-height:1.7;
    }

    #resultado{

        width:100%;

        min-height:180px;

        font-size:11.5px;

        line-height:1.7;
    }


    /* =====================================
       BOTONES RESULTADO
    ===================================== */

    .resultado-actions{

        height:auto;

        padding-top:12px;
    }

    .botones-secundarios{

        width:100%;

        flex-direction:column;

        gap:8px;
    }

    .btn-compartir,
    .btn-guardar{

        width:100%;

        height:34px;

        border-radius:7px;

        font-size:11px;
    }


    /* =====================================
       DIVIDER
    ===================================== */

    .divider{
        display:none;
    }

    /* =====================================
        UX FLUIDA · MOBILE
    ===================================== */


    /* =====================================
        UX FLUIDA · MOBILE
    ===================================== */


    /* 🔥 estado inicial */

    .accion-footer,
    .resultado{

        display:none;

        opacity:0;

        max-height:0;

        overflow:hidden;

        pointer-events:none;

        padding-top:0 !important;
        padding-bottom:0 !important;

        transition:
        opacity .18s ease,
        max-height .22s ease;
    }


    /* =====================================
    FOOTER ACTIVO
    ===================================== */

    .workspace.modo-config .accion-footer{

        opacity:1;

        max-height:140px;

        overflow:visible;

        pointer-events:auto;

        padding-top:18px !important;

        display:flex;
    }


    /* =====================================
    RESULTADO ACTIVO
    ===================================== */

    .workspace.modo-resultado .resultado{

        display:block;

        opacity:1;

        max-height:1200px;

        overflow:visible;

        pointer-events:auto;

        padding-top:10px !important;
        padding-bottom:24px !important;
    }


    /* =====================================
    TRANSICIÓN NATURAL
    ===================================== */

    .resultado{

        animation:fadeResultado .18s ease;
    }

    @keyframes fadeResultado{

        from{

            opacity:0;
            transform:translateY(8px);
        }

        to{

            opacity:1;
            transform:translateY(0);
        }

    }


    /* =====================================
    MÁS AIRE ENTRE BLOQUES
    ===================================== */

    .lista-categorias{

        margin-top:6px;
    }

    .lista-situaciones{

        margin-top:4px;
    }


    /* =====================================
    RESULTADO MÁS NATURAL
    ===================================== */

    .resultado{

        padding-top:10px;
    }


    /* =====================================
    FOOTER MÁS NATURAL
    ===================================== */

    .accion-footer{

        padding-top:20px;
    }

}