/* static/app/emails/favoritos_responsive.css */

/* static/app/emails/favoritos_responsive.css */


/* =========================================
   EMAILS · FAVORITOS · RESPONSIVE
========================================= */

@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
        20px
        14px;

        box-sizing:border-box;
    }


    /* =====================================
       LISTA FAVORITOS
    ===================================== */

    .lista-favoritos{

        gap:10px;
    }


    /* =====================================
       CARD FAVORITO
    ===================================== */

    .favorito-item{

        padding:12px;

        border-radius:10px;
    }


    /* =====================================
       TIPO
    ===================================== */

    .favorito-item .tipo{

        font-size:10px;
    }


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

    .favorito-item .titulo{

        font-size:12px;

        line-height:1.45;
    }


    /* =====================================
       PREVIEW
    ===================================== */

    .favorito-item .preview{

        font-size:11px;

        line-height:1.45;
    }


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

    .resultado{

        width:100%;

        padding:
        0
        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 BODY
    ===================================== */

    .resultado-body{

        overflow:visible;

        padding-right:0;

        padding-bottom:12px;

        min-height:180px;
    }


    /* =====================================
       CONTENIDO
    ===================================== */

    #vista-contenido{

        font-size:11.5px;

        line-height:1.7;
    }


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

    .botones-secundarios{

        display:flex;

        flex-direction:column;

        align-items:stretch;

        width:100%;

        gap:8px;
    }

    .btn-compartir,
    .btn-editar{

        width:100%;
        max-width:none;

        min-height:40px;

        padding:
        10px
        14px;

        border-radius:8px;

        font-size:11.5px;

        font-weight:500;

        display:flex;
        align-items:center;
        justify-content:center;

        box-sizing:border-box;
    }


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

    .divider{
        display:none;
    }


    /* =====================================
       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;
    }


    /* =====================================
       ESTADO INICIAL
    ===================================== */

    .workspace:not(.modo-vista-favorito) .resultado{

        display:none;
    }

    .workspace.modo-vista-favorito .resultado{

        display:block;
    }


    /* =====================================
       FAVORITO ABIERTO
    ===================================== */

    .workspace.modo-vista-favorito .bloque-header,
    .workspace.modo-vista-favorito .lista-favoritos{

        display:none;
    }


    /* =====================================
       BOTÓN VOLVER
    ===================================== */

    .volver-favoritos{

        display:none;
    }

    .workspace.modo-vista-favorito .volver-favoritos{

        display:inline-flex;
        align-items:center;

        gap:6px;

        align-self:flex-start;

        margin:
        18px
        0
        -6px
        20px;

        padding:
        4px
        10px;

        border:1px solid #d0c8bb;
        border-radius:6px;

        background:#f1ede6;

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

        letter-spacing:0.1px;

        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;

        font-size:11px;
        font-weight:500;

        color:#2c3c3d;

        cursor:pointer;

        width:auto;
    }

    .workspace.modo-vista-favorito .volver-favoritos::before{

        content:"←";
    }

}