/* ===========================================================
   VG ADAPTABLE
   Configuración global responsive
   No invade componentes vg_grid / vg_navigator
   =========================================================== */


/* NORMALIZACION */

* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



/* ===========================================================
   ESCALA GLOBAL RESPONSIVE
   =========================================================== */


html {


    font-size:clamp(14px,1.4vw,18px);


    font-family:

    Arial,
    Helvetica,
    sans-serif;



    --spacing:clamp(5px,1vw,12px);

    --radius:6px;



}



/* BODY */


body {


    background:#1b1b1b;


    color:white;


    padding:var(--spacing);



}



/* ===========================================================
   CONTENEDORES
   =========================================================== */


div {


    max-width:100%;


}



/* ===========================================================
   CONTROLES GENERALES
   (fuera de componentes)
   =========================================================== */


button,
select,
textarea {


    font-size:1rem;


    height:34px;


    padding:4px 10px;


    border-radius:var(--radius);


    border:1px solid #aaa;


    outline:none;



}




input {


    font-size:1rem;


    height:34px;


    padding:4px 8px;


    border-radius:var(--radius);


    border:1px solid #aaa;


    outline:none;


    background:white;


    color:#222;



}




/* disabled global */


input:disabled {


    color:#555;


    opacity:1;


    cursor:default;



}



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


button {


    cursor:pointer;


    transition:.15s;



}




button:hover {


    background:#ddd;



}




button:active {


    transform:scale(.96);



}





/* ===========================================================
   IMAGENES
   =========================================================== */


img {


    max-width:100%;


    height:auto;



}



/* ===========================================================
   LINKS
   =========================================================== */


a {


    color:#e6e6e6;



}



a:hover {


    color:white;



}



/* ===========================================================
   RESPONSIVE
   =========================================================== */



@media(max-width:700px){



html {


    font-size:14px;



}



button,
select,
textarea,
input {


    height:32px;


    font-size:.95rem;



}




}





@media(min-width:1400px){



html {


    font-size:18px;



}



}