/* static/public/bienvenida_responsive.css */

/* LOGO MOBILE */
/* oculto en escritorio */

.bienvenida-logo{
    display:none;
}


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

@media (max-width:768px){

    /* APP */

    .public-app{

        min-height:100dvh;

        background-image:
        url("/static/img/p_login_mobile_a_arriba_2.png");

        background-size:cover;
        background-position:center top;
        background-repeat:no-repeat;

        padding:0;

        justify-content:flex-start;
        align-items:flex-start;
    }


    html,
    body{
        overflow:hidden;
    }


    /* CONTAINER */

    .public-container{

        width:100%;
        min-height:100dvh;

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


    /* CONTENT */

    .public-content{

        width:100%;
        max-width:none;
    }


    /* HERO */

    .page-bienvenida{

        position:relative;

        height:100dvh;

        padding:  
        350px     /* subir/bajar text */
        28px
        180px
        28px;

        box-sizing:border-box;
    }

    /* LOGO */

    .bienvenida-logo{

        position:absolute;

        top:-15px;   /* subir/bajar */
        left:50%;

        transform:translateX(-50%);

        width:225px;

        display:block;
    }


    /* BLOQUE TEXTO */
    /* ocultamos solo textos mobile:
   ya están integrados
   en la imagen responsive */

    .bienvenida-title,
    .bienvenida-highlight,
    .bienvenida-text,
    .bienvenida-extra{
        display:none;
    }


    /* TITULO */

    .bienvenida-title{

        font-size:12px;
        line-height:0.95;

        margin:
        0
        0
        10px
        0;

        color:#527368;
    }


    /* TEXTOS */

    .bienvenida-highlight,
    .bienvenida-text,
    .bienvenida-extra{

        font-size:10px;
        line-height:1.25;

        color:#5f6f70;

        margin-bottom:4px;   /* espacio entre párrafos */
    }


    /* RESALTADO */

    .resaltado{

        color:#c49a3a;
    }


    /* BOTONES */

    .bienvenida-actions{

        position:absolute;

        left:50%;
        bottom:110px;     /* subir/bajar bt */

        transform:translateX(-50%);

        width:100%;

        max-width:260px;

        display:flex;
        flex-direction:column;

        align-items:center;

        gap:12px;

        margin-top:0;
    }


    /* BOTONES */

    .btn-principal,
    .btn-secundario{

        width:100%;
        height:30px;

        border-radius:20px;

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

        padding:0;

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


    /* FOOTER */

    .public-footer{

        position:absolute;

        bottom:20px;
        left:0;

        width:100%;

        text-align:center;

        font-size:7px;

        color:#807e78;

        opacity:0.85;
    }

}



/* =========================================
   iPhone SE
   375 x 667
========================================= */

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

    /* ✅ referencia base
       no tocar */
}


/* =========================================
   Galaxy S8+
   360 x 740
========================================= */

@media (max-width:370px) and (min-height:700px){

    .page-bienvenida{

        padding:
        390px
        28px
        190px
        28px;
    }

    .bienvenida-logo{

        position:absolute;

        left:50%;

        transform:translateX(-50%);

        width:235px;

        top:10px;

        display:block;
    }

    .bienvenida-box{

        max-width:275px;
    }

    .bienvenida-title{

        margin-bottom:12px;
    }

    .bienvenida-highlight,
    .bienvenida-text,
    .bienvenida-extra{

        font-size:10px;

        line-height:1.3;

        margin-bottom:6px;
    }

    .bienvenida-actions{

        max-width:275px;

        bottom:115px;
    }

}

/* =========================================
   iPhone 12 Pro
   390 x 844
========================================= */

@media (min-width:380px) and (max-width:400px) and (min-height:820px){

    .page-bienvenida{

        padding:
        420px
        30px
        210px
        30px;
    }

    .bienvenida-logo{

        width:250px;

        top:0px;
    }

    .bienvenida-box{

        max-width:285px;
    }

    .bienvenida-title{

        font-size:15px;

        margin-bottom:12px;
    }

    .bienvenida-highlight,
    .bienvenida-text,
    .bienvenida-extra{

        font-size:12px;

        line-height:1.3;

        margin-bottom:6px;
    }

    .bienvenida-actions{

        max-width:285px;

        bottom:155px;
    }

    .btn-principal,
    .btn-secundario{

        height:32px;

        font-size:10px;
    }

     .public-footer{

        font-size:8px;
    }

}


/* =========================================
   Pixel 7
   412 x 915
========================================= */

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

    .page-bienvenida{

        padding:
        465px
        32px
        235px
        32px;
    }

    .bienvenida-logo{

        width:265px;

        top:25px;
    }

    .bienvenida-box{

        max-width:300px;
    }

    .bienvenida-title{

        font-size:17px;

        margin-bottom:14px;
    }

    .bienvenida-highlight,
    .bienvenida-text,
    .bienvenida-extra{

        font-size:14px;

        line-height:1.35;

        margin-bottom:7px;
    }

    .bienvenida-actions{

        max-width:300px;

        bottom:105px;

        gap:14px;
    }

    .btn-principal,
    .btn-secundario{

        height:34px;

        font-size:11px;
    }

     .public-footer{

        font-size:8px;
    }

}


/* =========================================
   iPhone 14 Pro Max
   430 x 932
========================================= */

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

    .page-bienvenida{

        padding:
        500px
        34px
        250px
        34px;
    }

    .bienvenida-logo{

        width:285px;

        top:30px;
    }

    .bienvenida-box{

        max-width:320px;
    }

    .bienvenida-title{

        font-size:16px;

        margin-bottom:14px;
    }

    .bienvenida-highlight,
    .bienvenida-text,
    .bienvenida-extra{

        font-size:12px;

        line-height:1.35;

        margin-bottom:8px;
    }

    .bienvenida-actions{

        max-width:320px;

        bottom:145px;

        gap:16px;
    }

    .btn-principal,
    .btn-secundario{

        height:36px;

        font-size:11px;
    }

     .public-footer{

        font-size:8px;
    }

}


/* =========================================
   Samsung Galaxy S20 Ultra
   412 x 915
========================================= */

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

    /* ✅ actualmente se ve correcto
       ajustes pendientes solo si
       futuras vistas lo necesitan */

    .public-footer{

        font-size:8px;
    }
}