/* Inicialización de CSS */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    font-family: var(--fontfam-body);
    background-color: var(--bkcolor-body);
    color: var(--fwcolor-body);
}

/* El overflow: hidden es para que la aplicación se vea tipo formulario de windows sin barras de desplazamiento */
body {
    /*  overflow-x: hidden oculta la barra de desplazamiento horizontal. La oculto porque sino se ve un cachito de
        desplazamiento que no puedo quitar.

        overflow-x: hidden; /* Si lo pongo en el html, en el body deja de funcionar el sticky-top

        NOTA: Lo he comentado aquí porque en el activaBody() de site.js (COMUNES) he puesto $("body").css("overflow", "hidden")
        que oculta las 2 barras de scroll.
        Además cuando se estaba mostrando la pantalla incial se veía la barra 
    */
    overflow: hidden; /* Para ocultar las 2 barras de scroll al iniciarse la app */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 9vh; /* Si no e pongo un alto fijo al agrandarse los iconos el alto de se cambia y se ve feo */
    padding: 0vw 1vw; /* Para que el logo y los íconos tengan el mismo espacio con los laterales del body */
    padding-left: 2.5vw; /* Lo pidió el cliente */
    /**/
    background-color: var(--bkcolor-header);
    color: var(--fwcolor-header);
    font-family: var(--fontfam-header);
    /*     border: 2px solid black; */
}

ul {
    list-style-type: none;
    margin: 0;
    margin-bottom: 1px;
    padding: 0;
    cursor: pointer;
}

li:hover {
    font-weight: bolder;
}

/* Chrome, Safari, Edge, Opera */
    .sin-flechitas::-webkit-outer-spin-button,
    .sin-flechitas::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.contenedor-logo { /* crea un div donde entra el logo y debajo el nombre de la tienda */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* border: black 1px solid; */
}

.imagen-cliente { /* Para que el logo sea responsive */
    display: none;
}

@media (min-width: 260px) {
	.img-logo {
		width: 15vw;
		min-width: 64px;
	}
}

@media (min-width: 576px) {
	.img-logo {
		width: 10vw;
		min-width: 64px;
	}
}

@media (min-width: 768px) {
	.img-logo {
		width: 7.5vw;
		min-width: 64px;
	}
}

@media (min-width: 992px) {
	.img-logo {
		width: 5vw;
		min-width: 64px;
	}
}

@media (min-width: 1024px) {
	.img-logo {
		width: 6vw;
		min-width: 64px;
	}
}

@media (min-width: 1280px) {
	.img-logo {
		width: 5vw;
		min-width: 64px;
	}
}

@media (min-width: 1366px) {
	.img-logo {
		width: 4.5vw;
		min-width: 64px;
	}
}

@media (min-width: 1440px) {
	.img-logo {
		width: 5vw;
		min-width: 64px;
	}
}

@media (min-width: 1920px) {
	.img-logo {
		width: 4.5vw;
		min-width: 64px;
	}
}

.h-frm-img-cliente {
    min-height: 70vh;
    max-height: 70vh;
}

.contenedor-barra-nav {
    width: var(--prc-navbar);
    font-size: 1.25vw;
}

    .contenedor-barra-nav a {
        text-decoration: none;
        color: var(--fwcolor-header);
    }

        .contenedor-barra-nav a:hover {
            font-weight: bolder;
        }

.contenedor-iconos {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 50%;
    /*border: 1px solid black;*/ 
}

.contenedor-globo-idioma {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 50%;
    font-size: 80%;
    cursor: pointer;
    /* border: 1px solid black; */
}

.texto-globo-idioma {
    font-size: 80%;
    margin-bottom: 3px; /* âra que quede centrado con respecto al icono porque es de menor altura que el icono */
    /* border: 1px solid black; */
}

.marquesina, .barra-config {
    background-color: var(--bkcolor-banner);
    color: var(--fwcolor-banner);
    font-family: var(--fontfam-banner);
    /**/
    width: 100vw;
    font-size: 190%;
    cursor: pointer;
    padding: 0.75vh 0;
    cursor: none;
}

.marquesina {
    /* Por defecto <marquee> tiene un margen inferior de 6px, lo quito porque se ve un espacio entre el marquee
       y la imagen de principal
    */
    margin-bottom: -6px;
}

.barra-config {
    text-align: center;
    display: none;
}

.bandera {
    height: 16px;
}

.barra-sup {
    display: none !important;
}

.cmdinstalar {
    background-color: #123B69;
    color: #f9ae2e;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
}

    .cmdinstalar a {
        text-decoration: none;
    }

.img-portada {
    display: none;
    width: 100%;
}

.form-control {
    height: calc(1.5em + 0.75rem);
}

.cbo-tablas-config {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
}

.contenedor-img-portada {
    width: auto;
    height: 320px;
    cursor: pointer;
}

.img-portada-thumb {
    height: 100%;
    width: auto;
}

.ff-ddn {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .ff-ddn:focus {
        color: #495057;
        background-color: #fff;
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

.table {
    cursor: pointer;
}

.barra-breadcrumbs {
    display: none;
    width: 100%;
    background-color: var(--bkcolor-body);
    color: var(--fwcolor-body);
    margin-bottom: 1.5rem;
}

.barra-lat {
    background-color: var(--bkcolor-banner);
    color: var(--fwcolor-banner);
    width: 14rem;
}

.msgbox {
    width: 20vw;
    height: 20vh;
    border: 1px solid var(--fwcolor-body);
    padding: 5px 15px 15px;
    background-color: white;
}

.dl {
    overflow-y: auto;
}

.liCats, .liSubcats, .liClas {
    /* Interlineado */
    margin-bottom: 8px 0;
}

/*@media (max-width: 576px) {
    .fig {
        width: 90vw;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .fig {
        width: 40vw;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .fig {
        width: 30vw;
    }
}
*/

@media screen and (max-width: 1200px) {
    .img-portada {
        min-width: 100%;
        min-height: 100%;
    }
}

@media (min-width: 1200px) {
/*    .fig {
        width: 20vw;
    }
*/
    .brcr {
        margin-left: 14rem;
        padding-left: 0.5rem;
        width: calc(100vw - 14rem);
    }

    .offset-divimgs {
        margin-left: 14rem;
        width: calc(100vw - 14rem);
    }

   .img-portada {
        display: block;
        width: 100%;
    }

    .h-frm-img-cliente {
        min-height: 75vh;
        max-height: 75vh;
    }

}