/* static/app/prompts/crear_responsive.css */


/* =========================================
   PROMPTS · RESPONSIVE
========================================= */


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

@media (max-width:768px){

    /* =====================================
        TOPBAR PROMPTS · TABS MÁS FINOS
    ===================================== */

    .workspace-prompts .tabs{

        justify-content:center;
    }

    .workspace-prompts .tabs a{

        font-size:11.5px;

        padding:
        8px
        8px;
    }

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

    .workspace{

        display:flex;
        flex-direction:column;

        gap:0;

        width:100%;

        min-height:max-content;
        height:auto !important;

        overflow:visible !important;

        padding-bottom:10px;

    }


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

    .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:initial;

        padding:
        10px
        14px
        0
        14px;

        box-sizing:border-box;
    }


    /* =====================================
       BLOQUE
    ===================================== */

    .bloque{
        width:100%;
    }


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

    .bloque-header h2{

        font-size:14px;

        line-height:1.3;

        margin:
        0
        0
        10px
        0;

        letter-spacing:0.2px;
    }


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

    .bloque-body{
        gap:10px;
    }


    /* =====================================
       CAMPOS
    ===================================== */

    .campo{
        gap:5px;
    }

    .campo label{

        font-size:11.5px;

        line-height:1.3;

        margin:0;
    }


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

    .campo-principal textarea{

        width:100%;
        max-width:none;

        min-height:108px;

        padding:12px;

        border-radius:8px;

        font-size:12px;

        line-height:1.45;

        resize:none;

        box-sizing:border-box;
    }


    /* =====================================
       SUB BLOQUE
    ===================================== */

    .sub-bloque{

        width:100%;
        max-width:none;

        padding:10px;

        border-radius:8px;

        gap:8px;
    }


    /* =====================================
       SELECTS
    ===================================== */

    .sub-bloque select{

        min-height:34px;

        padding:
        0
        10px;

        border-radius:6px;

        font-size:12px;
    }


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

    .accion-footer{

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

        margin:0 auto;

        padding:
        12px
        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{

        width:100%;
        min-width:0;

        height:36px;

        border-radius:7px;

        font-size:11.5px;
    }

    .btn-secundario{

        width:100%;
        min-width:0;

        height:32px;

        border-radius:7px;

        font-size:11px;
    }


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

    .resultado{

        width:100%;

        padding:
        16px
        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:3px;

        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:100px;

        overflow:visible;

        padding-right:0;

        font-size:12px;

        line-height:1.5;

        white-space:pre-line;

        word-break:break-word;
    }


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

    .resultado-actions{

        height:auto;

        padding-top:12px;
    }


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

    .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;
    }

}


/* =========================================
   iPHONE SE
========================================= */

@media (width:375px) and (height:667px){

    .campo-principal textarea{
        min-height:95px;
    }

}


/* =========================================
   PIXEL 7
========================================= */

@media (min-width:401px) and (max-width:420px) and (min-height:880px){

    .campo-principal textarea{
        min-height:125px;
    }

}


/* =========================================
   iPHONE 14 PRO MAX
========================================= */

@media (min-width:421px) and (max-width:440px) and (min-height:900px){

    .campo-principal textarea{
        min-height:135px;
    }

}