/* static/app/ayuda_responsive.css */

/* =========================================
   AYUDA · RESPONSIVE
========================================= */

@media (max-width:768px){

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

    .topbar::after{
        content:"Ayuda";
    }


    /* =====================================
       VIEW
    ===================================== */

    .view-container{

        padding:
        14px
        14px
        28px
        14px;
    }


    /* =====================================
       PAGE
    ===================================== */

    .ayuda-page{

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

        margin:0 auto;

        padding-top:8px;
        padding-bottom:24px;
    }


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

    .perfil-header{

        margin-bottom:20px;
    }

    .perfil-header h1{

        font-size:24px;

        line-height:1.15;

        letter-spacing:0;

        margin-bottom:8px;
    }

    .perfil-header p{

        font-size:13px;

        line-height:1.5;
    }


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

    .ayuda-body{
        gap:18px;
    }


    /* =====================================
       BLOQUES
    ===================================== */

    .bloque{

        padding:
        18px
        16px;

        border-radius:14px;

        gap:12px;
    }


    /* =====================================
       TITULOS
    ===================================== */

    .bloque-header h2{

        font-size:15px;

        line-height:1.3;

        letter-spacing:0.2px;
    }


    /* =====================================
       TEXTO
    ===================================== */

    .bloque-body p{

        font-size:12.5px;

        line-height:1.6;
    }


    /* =====================================
       GRIDS
    ===================================== */

    .ayuda-grid-dos,
    .ayuda-grid-tres{

        display:flex;

        flex-direction:column;

        gap:14px;
    }


    /* =====================================
       CARDS
    ===================================== */

    .ayuda-card{

        padding:14px;

        border-radius:12px;

        gap:8px;
    }

    .ayuda-card h3{

        font-size:14px;
    }

    .ayuda-card p{

        font-size:12.5px;

        line-height:1.55;
    }

    .ayuda-ejemplo{

        font-size:11.5px;

        line-height:1.5;
    }


    /* =====================================
       SUBSECCIONES
    ===================================== */

    .subsecciones-ayuda{

        flex-direction:column;

        gap:14px;

        margin-top:4px;
    }

    .subsecciones-ayuda strong{

        font-size:12.5px;
    }

    .subsecciones-ayuda p{

        font-size:11.5px;

        line-height:1.5;
    }


    /* =====================================
       PASOS
    ===================================== */

    .ayuda-pasos{
        gap:12px;
    }

    .ayuda-paso{
        gap:10px;
    }

    .paso-numero{

        min-width:24px;
        height:24px;

        font-size:11px;
    }

    .ayuda-paso strong{

        font-size:12.5px;
    }

    .ayuda-paso p{

        font-size:11.5px;

        line-height:1.5;
    }


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

    .btn-secundario,
    .btn-ayuda-fijo{

        width:100%;

        min-width:0;

        height:36px;

        padding:
        0
        14px;

        border-radius:8px;

        font-size:11.5px;
    }


    /* =====================================
       SOPORTE
    ===================================== */

    .bloque-soporte ul{

        gap:8px;

        padding-left:18px;
    }

    .bloque-soporte li{

        font-size:12.5px;

        line-height:1.55;
    }

}