/* static/app/perfil/soporte_responsive.css */

/* static/app/perfil/soporte_responsive.css */


/* =========================================
   SOPORTE · RESPONSIVE
========================================= */

@media (max-width:768px){

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

    .perfil-page{

        padding:
        8px
        0
        24px
        0;
    }


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

    .perfil-header{

        margin-bottom:18px;
    }

    .perfil-header h1{

        font-size:16px;

        font-weight:600;

        letter-spacing:0.6px;
    }

    .perfil-header p{

        font-size:12px;

        line-height:1.5;
    }


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

    .perfil-body{
        gap:14px;
    }


    /* =====================================
       LAYOUT
    ===================================== */

    .soporte-layout{

        grid-template-columns:1fr;

        gap:14px;
    }


    /* =====================================
       SIDE
    ===================================== */

    .soporte-side{
        gap:14px;
    }


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

    .bloque{

        padding:16px;

        border-radius:14px;

        gap:14px;
    }


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

    .bloque-header h2{

        font-size:14px;

        letter-spacing:0.5px;
    }


    /* =====================================
       LABELS
    ===================================== */

    .campo-label{

        font-size:12px;

        margin-top:8px;

        margin-bottom:4px;
    }


    /* =====================================
       INPUTS
    ===================================== */

    .campo-input,
    .campo-select,
    .campo-textarea{

        width:100%;

        max-width:100%;

        min-height:36px;

        box-sizing:border-box;

        border-radius:8px;

        font-size:12px;

        padding:
        10px
        12px;
    }


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

    .campo-textarea{

        min-height:110px;

        line-height:1.5;
    }


    /* =====================================
       ERRORES
    ===================================== */

    .aviso.error{

        font-size:11px;

        line-height:1.4;
    }


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

    .bloque-actions{

        width:100%;

        flex-direction:column;

        align-items:stretch;

        gap:10px;

        margin-top:6px;
    }


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

    .btn-secundario{

        width:100%;

        min-width:0;

        min-height:36px;

        border-radius:8px;

        font-size:12px;
    }


    /* =====================================
       CONFIRMACION
    ===================================== */

    #mensaje-confirmacion{

        font-size:11.5px;

        line-height:1.5;
    }


    /* =====================================
       MODAL
    ===================================== */

    .modal-confirmacion-box{

        width:calc(100% - 28px);

        padding:18px;

        border-radius:16px;
    }

    .modal-confirmacion-header h3{

        font-size:15px;
    }

    .modal-confirmacion-body p{

        font-size:12px;

        line-height:1.5;
    }

    .modal-confirmacion-actions{

        flex-direction:column;

        align-items:stretch;

        gap:10px;
    }

    .modal-confirmacion-actions .btn-secundario{

        width:100%;

        min-width:0;
    }

}