/* static/app/historial_responsive.css */


/* =========================================
   HISTORIAL · RESPONSIVE V2
========================================= */

@media (max-width:768px){

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

    .workspace{

        display:flex;
        flex-direction:column;

        gap:0;

        min-height:auto;
    }


    /* =====================================
       COLUMNAS
    ===================================== */

    .accion,
    .resultado{

        width:100%;

        min-width:0;
    }


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

    .divider{
        display:none;
    }

    /* =====================================
    TOPBAR HISTORIAL
    ===================================== */

    .topbar h1{

        position:absolute;

        top:18px;
        left:54px;

        margin:0;

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

        letter-spacing:0.3px;

        color:#375e65;

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

    .topbar::after{
        display:none;
    }


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

    .accion-scroll{

        width:100%;

        overflow:visible;
    }


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

    .resultado{

        display:none;

        padding-top:14px;
    }


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

    .workspace:not(.modo-vista-historial) .resultado{
        display:none;
    }


    /* =====================================
       MODO DETALLE
    ===================================== */

    .workspace.modo-vista-historial .accion{
        display:none;
    }

    .workspace.modo-vista-historial .resultado{
        display:block;
    }

    /* ocultar acciones vacías */

    .workspace:not(.modo-vista-historial)
    .resultado-actions{

        display:none;
    }


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

    .resultado-wrapper{

        min-height:auto;
    }


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

    .resultado-body{

        overflow:visible;

        padding:
        18px
        16px
        20px
        16px;
    }


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

    .resultado-actions{

        display:flex;

        flex-direction:column;

        gap:8px;

        height:auto;

        padding:
        12px
        16px
        0
        16px;
    }


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

    .botones-secundarios{

        display:flex !important;

        flex-direction:column !important;

        align-items:stretch !important;

        gap:8px;

        width:100%;
    }

    .btn-compartir{

        display:flex !important;

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

        width:100% !important;

        height:34px;

        border-radius:7px;

        font-size:11px;
    }


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

    .volver-historial{

    display:none;
}


.workspace.modo-vista-historial .volver-historial{

    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:"Raleway", 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;
}


    /* =====================================
       ITEMS
    ===================================== */

    .historial-item{

        border-radius:12px;
    }

    .historial-top{

        display:flex;

        justify-content:space-between;

        gap:12px;
    }


    .btn-eliminar{

        flex-shrink:0;

        width:22px;

        margin-right:12px;

        display:flex;
        justify-content:center;
    }

    .historial-texto{

        font-size:12px;

        padding-right:10px;
    }

    #contenido-detalle{

        font-size:11px !important;

        line-height:1.7;
    }

}


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

@media (max-width:576px){

    .resultado-body{

        padding:
        16px
        14px
        18px
        14px;
    }

    .resultado-actions{

        padding:14px;
    }

}