/* /static/app/core/workspace_responsive.css */


/* =========================================
   WORKSPACE · RESPONSIVE UNIVERSAL
========================================= */


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

@media (max-width:768px){

    /* =====================================
       APP FLOW
    ===================================== */

    .workspace{

        display:flex;
        flex-direction:column;

        gap:0;

        width:100%;

        min-height:auto;

        overflow:visible;
    }


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

    .accion,
    .resultado{

        width:100%;
        min-width:0;

        height:auto;

        overflow:visible;
    }


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

    .divider{
        display:none;
    }


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

    .topbar{

        position:relative;

        z-index:200;

        min-height:92px;

        display:flex;
        flex-direction:column;

        padding:0;

        background:#e7e3da;

        border-bottom:1px solid #375e65;
    }


    /* =====================================
       FILA SUPERIOR
    ===================================== */

    .topbar::before{

        content:"☰";

        position:absolute;

        top:14px;
        left:16px;

        font-size:20px;
        line-height:1;

        color:#2c3c3d;
    }

    .topbar::after{

        position:absolute;

        top:15px;
        left:52px;

        font-family:"Inter", sans-serif;

        font-size:15px;
        font-weight:700;
        letter-spacing:0.2px;

        color:#375e65;
    }

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

    .workspace-prompts .topbar::after{
        content:"Prompts";
    }

    .workspace-emails .topbar::after{
        content:"Emails";
    }

    .workspace-perfil .topbar::after{
        content:"Perfil";
    }


    /* =====================================
       LOGO
    ===================================== */

    .topbar .logo{

        position:absolute;

        top:8px;
        right:14px;

        height:46px;

        flex-shrink:0;
    }


    /* =====================================
       TABS UNIVERSALES
    ===================================== */

    .tabs{

        width:100%;

        margin-top:48px;

        display:flex;
        align-items:center;

        gap:10px;

        padding:
        10px
        14px
        12px
        14px;

        box-sizing:border-box;

        overflow:visible;
    }


    /* =====================================
       TABS
    ===================================== */

    .tabs a{

        flex-shrink:0;

        white-space:nowrap;

        font-size:11.5px;

        padding:
        8px
        14px;

        border-radius:8px;
    }

    .tabs a.activo{

        background:#e6e0d4;
    }

    /* =====================================
    TOPBAR EMAILS · 4 TABS
    ===================================== */

    .workspace-emails .tabs{

        gap:6px;

        justify-content:space-between;
    }

    .workspace-emails .tabs a{

        flex:1;

        text-align:center;

        padding:
        8px
        6px;

        font-size:11.5px;
    }

    /* =====================================
     TOPBAR PERFIL · 4 TABS
    ===================================== */

    .workspace-perfil .tabs{

        gap:6px;

        justify-content:space-between;
    }

    .workspace-perfil .tabs a{

        flex:1;

        text-align:center;

        padding:
        8px
        6px;

        font-size:11.5px;
    }


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

    .accion-scroll,
    .resultado-body{

        overflow:visible;
    }


    /* =====================================
        CTA WORKSPACE FLUIDO
    ===================================== */

    .accion-footer{

        position:relative;

        bottom:auto;

        z-index:auto;

        background:transparent;

        backdrop-filter:none;
    }


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

    .resultado{

        padding-top:18px;
    }


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

    .resultado-actions{

        height:auto;
    }

}


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

@media (max-width:576px){

    .topbar{

        min-height:88px;
    }

    .topbar::before{

        left:14px;

        font-size:18px;
    }

    .topbar::after{

        top:15px;
        left:50px;

        font-size:15px;
        font-weight:700;

        color:#375e65;
    }

    .topbar .logo{

        height:46px;

        right:12px;
    }

    .tabs{

        gap:8px;

        padding:
        10px
        12px
        10px
        12px;
    }

    .tabs a{

        font-size:11.5px;

        padding:
        7px
        12px;
    }

}