@font-face{
    font-family: Sora;
    src: url(../fonts/Sora-VariableFont_wght.ttf);
}

/* body{
    margin: 0;
    font-family: Sora;
} */


.view{
    position: relative;
    width: 100%;
}

.top-header{
    width: 100%;
    height: 26px;
    background-color:#fff;
    display: block;
}

.header{
    width: 100%;
    height: 122px;
    background-color:white;
    display: block;
}

.logo{
    width: 175px;
    position: absolute;
    top: 60px;
    left: 50%;
    margin-left: -87.5px;
}

.content{
    width: 100%;
    height: 514px;
    background-image: url("../images/pc/bloque.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    font-family: Sora;
    font-size: 1.2rem;
    color: #dee0ed;
}

.welcome{
    text-align: center;
    position: relative;
    top: 125px;
}

.olvido{
    font-size: 1rem;
    text-align: center;
    position: relative;
    top: 10px;
}

.footer-slogan{
    font-size: 1rem;
    text-align: center;
    position: relative;
    top: 10px;
    color: #73b6ed;
    
}

.slogan span{
    font-weight: bold;
}

.login-form{
    text-align: center;
    position: relative;
    top: 120px;
    font-size: 1.4rem;
}

::placeholder{
    color: #acabab;
    font-size: 1rem;
}



.field{
    width: 350px;
    height: 32px;
    margin: 9px 0;
    padding: 1.3rem;
    border-radius: 5px;
    border: none;
}

.boton1{
    background-color:#26a2b2; 
    color: white; 
    font-size: 1rem; 
    padding: 0
}

.boton1:hover{
    cursor: pointer;
    background-color:#187986;
    transition: background-color 0.3s ease-in-out;
}


.banner{
    width: 100%;
    height: 117px;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center ;
}

.banner img{
    display: inline-block;
    height: 40%;
    margin: 0 30px;
}



.footer{
    width: 100%;
    height: 160px;
    background-color: white;
    display: block;
}

.footer p{
    color: #142f88;
    text-align: center;
    font-family: Sora;
    font-size: 1rem;
}

#footer-white-strip-logos{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.footer-logos-img {
	margin: 10px 30px 0 ;
}

.footer-propiedad{
    font-family: Sora;
    font-size: 1rem;
    text-align: center;
    padding: 4px;
    background-color: rgb(0, 25, 54);
    color: rgb(255, 255, 255); 
}
.footer-propiedad span{
    font-weight: 700;
    font-size: 1rem;
}


/*PANTALLA GESTION*/
.body-admin {
	margin: 0;
	font-family: Sora;
	height: 100vh;
	position: relative;
	min-height: 471px;
}

.body-admin-largo {
	margin: 0;
	font-family: Sora;
	height: 100vh;
	position: relative;
	min-height: 600px;
}

.body-admin-mas-largo {
	margin: 0;
	font-family: Sora;
    min-height: 1450px;
	position: relative;
}

.contenedor-admin{
    width: 100%;
    max-height: 560px;
    
}

.productos-asignados {
	display: flex;
	justify-content: center;
}

.salir{
    position: relative;
    right: -20vw;
    top: 20px;
}

.logo-admin {
   
    height: 70px;
    
    
}

.logo-admin img{
    object-fit: contain;
    width: 100%;
}

.header-admin{
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( to bottom, rgb(69 143 213 / 26%) 10%, #ffffff00, #ffffff00 90%);
}


.botonera-admin {
	display: grid;
	grid-template-columns: 33% 33% 1fr;
	text-align: center;
	margin: 0 252px;
	column-gap: 30px;
	row-gap: 20px;
}

.botonera-client {
	display: grid;
	grid-template-columns: 50% 1fr;
	text-align: center;
	margin: 0 335px;
	column-gap: 30px;
	row-gap: 20px;
}


.boton-menu {
    width: 215px;
    height: 50px;
    background-color: #26a2b2;
    border-radius: 10px;
    color: white;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    display: inline-flex;
}

.boton-menu:hover{
    cursor: pointer;
    background-color:#187986;
    transition: background-color 0.3s ease-in-out;
}

a {
    text-decoration: none;
}


.footer img{
    width: 100px;
}

.cliente{
    width: 265px;
}


/*
*ESTILOS DE LISTAS
*/

.tabla-lista {
	width: 87%;
	margin-left: 80px;
}

.fila-tabla {
	background-color: #295986;
	color: white;
	text-align: center;
}

.columna-tabla {
	background-color: #d4edfc;
}

.footer-admin{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 100px;
}

.formulario-crear-sku{
    display: grid;
    grid-template-columns: repeat(8, 107px);
    grid-template-areas: 
    "a a b b c c d d"
    "e e f f f f f f"
    "m m z z z z z z"
    "n n n n n n n n"
    "u u v v w w nn nn"
    "aa aa bb bb cc cc dd dd";  
}

#cod-p-lab{
    grid-area: a;
}
#cod-p{
    grid-area: b;
}

#precio-p-lab{
    grid-area: c;
}
#precio-p{
    grid-area: d;
}

#nombre-p-lab{
    grid-area: e;
}
#nombre-p{
    grid-area: f;
}

#descripcion-p-lab{
    grid-area: m;
}
#descripcion-p{
    grid-area: n;
    height: 120px;
}

#cat-p-lab{
    grid-area: u;
}
#cat-p{
    grid-area: v;
}

#marca-p-lab{
    grid-area: w;
}
#marca-p{
    grid-area: nn;
}

#status-p-lab{
    grid-area: aa;
}
#status-p{
    grid-area: bb;
}

#submit-producto{
    grid-area: cc;
}



.f-crea-cliente{
    display: grid;
    grid-template-columns: repeat(8, 107px);
    grid-template-areas: 
    "a a b b c c d d"
    "e e f f f f f f"
    "m m n n o o p p"
    "u u v v w w nn nn"
    "aa aa bb bb cc cc dd dd"
    "ee ee ff ff ff ff ff ff"
    "ii ii jj jj kk kk ll ll"
    "mm mm mm mm mm mm mm mm";
}

#cod-e-lab{
    grid-area: a;
}
#cod-e{
    grid-area: b;
}

#email-e-lab{
    grid-area: c;
}
#email-e{
    grid-area: d;
}

#nombre-e-lab{
    grid-area: e;
    font-size: 0.9rem;
}
#nombre-e{
    grid-area: f;
}

#ciudad-e-lab{
    grid-area: m;
}
#e{
    grid-area: n;
}

#telefono-e-lab{
    grid-area: o;
}
#telefono-e{
    grid-area: p;
}

#password-e-lab{
    grid-area: u;
}
#password-e{
    grid-area: v;
}

#cel-e-lab{
    grid-area: w;
}
#cel-e{
    grid-area: nn;
}

#activo-e-lab{
    grid-area: aa;
}
#activo-e{
    grid-area: bb;
}

#tipo-e-lab{
    grid-area: cc;
}
#tipo-e{
    grid-area: dd;
}

#submit-e {
	grid-area: ee;
	margin-top: 10px;
}

.formulario-crear-usuario{
    
    display: grid;
    grid-template-columns: repeat(8, 107px);
    grid-template-areas: 
    "a a b b c c d d"
    "e e f f f f f f"
    "i i j j j j j j"
    "m m n n o o p p"
    "q q r r r r r r"
    "u u v v w w nn nn"
    "aa aa bb bb cc cc dd dd"
    "ee ee ff ff ff ff ff ff"
    "ii ii jj jj kk kk ll ll"
    "mm mm mm mm mm mm mm mm";
    
    

}



.label-f-crear-c{
    /* text-align: right; */
    background-color: #295986;
    color: white;
    padding: 1px 18px;
    height: 35px;
    margin-left: 5px;
}

.input-f-crear-c {
	height: 35px;
	border-left: 0;
	background-color: #EAF7FD;
	border-bottom: 6px white solid;
	border-top: 0px white solid;
	border-right: 0;
	padding-bottom: 0px;
}

.label-f-crear-c, .input-f-crear-c{
    display: flex;
    justify-content: right;
    align-items: center;
}

.formulario-crear-c{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 128px;
}

#cod-c-lab{
    grid-area: a;

}
#cod-c{
    grid-area: b;
}

#email-c-lab{
    grid-area: c;
}

#email-c{
    grid-area: d;
}

#nombre-loc-lab{
    grid-area: e;

}
#nombre-loc{
    grid-area: f;
}

#nombre-c-lab{
    grid-area: i;

}
#nombre-c{
    grid-area: j;
}

#ciudad-c-lab{
    grid-area: m;
}
#ciudad-c{
    grid-area: n;
}

#telefono-c-lab{
    grid-area: o;
}
#telefono-c{
    grid-area: p;
}

#direccion-c-lab{
    grid-area: q;
}
#direccion-c{
    grid-area: r;
}

#password-c-lab{
    grid-area: u;
}
#password-c{
    grid-area: v;
}

#cel-c-lab{
    grid-area: w;
}
#cel-c{
    grid-area: nn;
}

#ruc-c-lab{
    grid-area: aa;
}

#ruc-c{
    grid-area: bb;
}

#asesor-c-lab{
    grid-area: cc;
}
#asesor-c{
    grid-area: dd;
}

#notas-c-lab{
    grid-area: ee;
}
#notas-c{
    grid-area: ff;
}

#tipo-c-lab{
    grid-area: ii;
}

#tipo-c{
    grid-area: jj;
}

#activo-c-lab{
    grid-area: kk;
}

#activo-c{
    grid-area: ll;
}



#submit-prod-c{
    position: fixed;
    left: 0;
    top: 300px;
    background-color: #E30613;
    color: white;
    font-size: 1.2rem;
    height: 60px;
    width: 90px;
    border-radius: 0 10px 10px 0;
    border: none;
}

#submit-cl-c{
    position: fixed;
    left: 0;
    top: 300px;
    background-color: #E30613;
    color: white;
    font-size: 1.2rem;
    height: 60px;
    width: 90px;
    border-radius: 0 10px 10px 0;
    border: none;
}

#submit-cl-c:hover{
    cursor: pointer;
}

#submit-prod-c :hover{
    background-color: red;
}



/* VISTA DETALLE CLIENTE */

.contenedor-detalle-c{
    width: 100%;
    display: flex;
    justify-content: center;
    
}

.formulario-detalle-c{
    width: 860px ;
    display: grid;
    grid-template-columns: 180px 250px 180px 1fr;
    grid-template-rows: auto ;
    font-size: 0.9rem;
    gap: 1px;
    vertical-align: middle;
}

.label-detalle-cliente{
    background-color: #295986;
    color: white;
    height: 30px;
    text-align: right;  
    padding: 1px 10px;
    display: flex;
    align-items: center;
    justify-content: right;
}

.data-detalle-cliente{
    padding-left: 10px;
    height: 30px; 
    background-color: #C9E8FB;
    display: flex;
    align-items: center;
}




#codigo-cliente{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
#codigo-cliente-data{
    grid-column: 2 / 5;
    grid-row: 1 / 2;
}

#nombre-comercial{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

#nombre-comercial-data{
    grid-column: 2 / 5;
    grid-row: 2 / 3;
}

#nombre-cliente{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

#nombre-cliente-data{
    grid-column: 2 / 5;
    grid-row: 3 / 4;
}

#ciudad{
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}

#ciudad-data{
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    /* width: 150px; */
}

#telefono{
    grid-column: 3 / 4;
    grid-row: 4 / 5;
}

#telefono-data{
    grid-column: 4 / 5;
    grid-row: 4 / 5;
    /* width: 150px; */
}

#direccion{
    grid-column: 1 / 2;
    grid-row: 5 / 6;
}

#direccion-data{
    grid-column: 2 / 5;
    grid-row: 5 / 6;
}

#password{
    grid-column: 1 / 2;
    grid-row: 6 / 7;
}

#password-data{
    grid-column: 2 / 3;
    grid-row: 6 / 7;
    /* width: 150px; */
}

#celular{
    grid-column: 3 / 4;
    grid-row: 6 / 7;
}

#celular-data{
    grid-column: 4 / 5;
    grid-row: 6 / 7;
    /* width: 150px; */
}

#ruc{
    grid-column: 1 / 2;
    grid-row: 7 / 8;
    
}

#ruc-data{
    grid-column: 2 / 3;
    grid-row: 7 / 8;
   /*  width: 150px; */
}

#email{
    grid-column: 3 / 4;
    grid-row: 7 / 8;
}

#email-data{
    grid-column: 4 / 5;
    grid-row: 7 / 8;
    /* width: 150px; */
}

#notas{
    grid-column: 1 / 2;
    grid-row: 8 / 10;
}

#notas-data{
    grid-column: 2 / 5;
    grid-row: 8 / 10;
}

#asesor{
    grid-column: 1 / 2;
    grid-row: 10 / 11;
}

#asesor-data{
    grid-column: 2 / 5;
    grid-row: 10 / 11;
}

#status{
    grid-column: 1 / 2;
    grid-row: 11 / 12;
}

#status-data{
    grid-column: 2 / 3;
    grid-row: 11 / 12;
}

#tipo-cliente{
    grid-column: 3 / 4;
    grid-row: 11 / 12;
}

#tipo-cliente-data{
    grid-column: 4 / 5;
    grid-row: 11 / 12;
}

.boton-submit{
    display: block;

}

.titulo{
    width: 100%;
    text-align: center;
    font-weight: bold;
    margin-bottom: 40px;
}


/**TABLA PASA ASIGNAR PRODUCTOS A CADA CLIENTE*/
.asignar-sku-tabla{
    width: 100%;
    background-color: white;

    position: relative;
    top: 80px;
    
}

.tabla-productos-clientes{
    /* display: flex;
    justify-content: center; */
    grid-area: mm;
}

table{
    border: 1;
    width: 80vw;
    /* margin: 0 125px; */
}

.encabezado-prod-cliente-general{
    height: 30px;
/*     display: grid;
    row-gap: 1px;
    column-gap: 1px;
    grid-template-columns: 0.5fr 3fr 1.5fr 0.25fr; */
    text-align: center;
    background-color: #295986;
    color: white;
    padding: 0 10px;
    

}



.cont-datos-prod-cliente-0{

    height: 30px;
/*     display: grid;
    grid-template-columns: 0.5fr 3fr 1.5fr 0.25fr; */
    text-align: left;
    background-color: #EAF7FD;
    padding: 0 10px;

}

.cont-datos-prod-cliente-1{

    height: 30px;
/*     display: grid;
    grid-template-columns: 0.5fr 3fr 1.5fr 0.25fr; */
    text-align: left;
    background-color: white;
    padding: 0 10px;

}



.checkbox{
    width: 15px;
    height: 15px;
}

.titulo-tabla-skus{
    text-align: center;
}
#tabla-prod-aut{
    width: 80%;
}

#precio-sin, #precio-con{
    width: 138px;
}

#sku-col{
    width: 105px;
}



.factor-in {
	width: 20px;
}

#factor-in-cont {
	text-align: center;
}

.master-footer {
	display: none;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 20px;
}

.creditos{
    padding-bottom: 30px;
}

.footer-credit{
    font-family: sans-serif;
    font-size: 0.7rem;
    text-align: center;

    

}

.footer-credit a{
    color: grey;
    text-decoration: none;
    display: inline;
}

.form-header{
    display: grid;
    grid-template-areas:    'a b c d'
                            'e f g h'
                            'i j k l';
    row-gap: 3px;
    column-gap: 3px;
    width: 800px;
}

.campo{
    background-color: #003F9A ;
    color: white;
}
.valor{
    border:#003F9A solid 1px ;
}

#local-campo{
    grid-area: a;
}
#local-valor{
    grid-area: b;
}
#cliente-campo{
    grid-area: c;
}
#cliente-valor{
    grid-area: d;
}
#ruc-campo{
    grid-area: e;
}
#ruc-valor{
    grid-area: f;
}
#telefono-campo{
    grid-area: g;
}
#telefono-valor{
    grid-area: h;
}
#direccion-campo{
    grid-area: i;
}
#direccion-valor{
    grid-area: j;
}
#ciudad-campo{
    grid-area: k;
}
#ciudad-valor{
    grid-area: l;
}

.header-productos-form{
    background-color: #003F9A ;
    color: white;
    height: 40px;

/*     display: flex;
    flex-direction: row; */
    display: grid;
    grid-template-columns: 60px 150px 600px 80px 80px 80px;
}

.row-form-oc{
    
    color: #003F9A;
    display: grid;
    grid-template-columns: 60px 150px 600px 80px 80px 80px;

}



/* #form-col-1{
    width: 53px;
}

#form-col-2{
    width: 150px;
}

#form-col-3{
    width: 600px;
}*/

#form-col-4{
    text-align: center;
}

#form-col-5{
    text-align: center;
}

#form-col-6{
    text-align: center;
} 

.row-form-oc a{
    text-decoration: none;

}

.precio{
    text-align: center;
}





/* .input-campos{
    text-align: center;
} */

#qty-input input {
	width: 70%;
	-webkit-appearance: none;
	border: 0.2px #003F9A solid;
	height: 72%;
	padding-bottom: 0.2px;
}

/**STYLES PARA RESULTADOS EN ORDEN DE COMPRA**/

.totales_oc{
    display: grid;
    grid-template-columns: 360px;
    grid-template-rows: 40px 45px;
    margin-left: 25px;
    text-align: center;

}

.head-totales-oc{
    
    display: grid;
    grid-template-columns: 120px 120px 120px;
    column-gap: 5px;
    color: white;
    
    
}

.result-totales-oc{
    display: grid;
    grid-template-columns: 120px 120px 120px;
    grid-template-rows: 45px;
    color: #003F9A;
    background-color: white;
    column-gap: 5px;
    font-size: 1.3rem;
}

.form-oc {
	width: 1050px;
	margin-left: 94px;
}

.bloque-1{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.result-oc{
    border-radius: 15px;
    border: 0.4px solid #003F9A;
    padding-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.titulos-head-oc{
    border-radius: 15px;
    background-color: #003F9A;  
    
    display: flex;
    align-items: center;
    justify-content: center;
}


/** CODIGO PARA LA VENTANA EMERGENTE DE ORDEN DE COMPRA***/

#contenedor-emergente-oc {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.6);
    display: none;
}

#contenedor-interno-oc {
	width: 60%;
	height: 90%;
	background-color: ivory;
	top: 57px;
	left: 231px;
	position: fixed;
    
}

.boton-emergente-oc{
    background-color: rgba(255, 255, 255, 0);
    border: none;
    font-size: 1rem;
}

.boton-emergente-oc:hover{
    cursor: pointer;
    color: red;
}

#botonera {
	position: absolute;
	bottom: 10px;
	text-align: center;
	width: 100%;
	border-top: 1px solid blue;
	border-bottom: 1px solid blue;
}

.campo-preview{
    text-align: center;
    background-color: #003F9A;
    color: white;
}
.valor-preview{
    text-align: center;
    border-top: 0.3px solid #003F9A;
    border-right: 0.3px solid #003F9A;
    border-bottom: 0.3px solid #003F9A;
    background-color: white;
    color: #003F9A;
}

#datos-informativos-preview{
    display: grid;
    grid-template-columns: repeat(4, 150px);
    row-gap: 3px;
    column-gap: 3px;
    font-size: 0.9rem;
}

span{
    font-size: 0.7rem;
    text-align: center;
}

.bloque-1 p{
margin: 0;
}

.titulo-preview{
    text-align: center;
}

.form-preview{
    display: grid;
    grid-template-columns: 60px 120px 386px 94px 80px;

}

.detalle-producto-preview{
    display: grid;
    grid-template-columns: 60px 120px 386px 94px 80px;
    font-size: 0.7rem;
}

.centrar{
    text-align: center;
}

.right{
    text-align:right;
}

#subtotal-label, #subtotal{
    border-top: 0.8px solid #003F9A;
}

#total-factura{
    white-space: nowrap;
    text-align: left;
}


/*FORMULARIO DE EDICION DE PRODUCTOS*/

#edit-update-prod-form{
    display: grid;
    grid-template-columns: 200px 500px;
    width: 60%;
}

#descripcion-sku-id{
    height: 200px;
}

.tabla-productos-clientes-2{
    max-width: 1000px;
    position: relative;
    margin-left: 120px;
}

#oc-detail-table{
    border: 1px solid black;
}
.oc-detail-datos-informativos{
    border-top: 1px solid black;
    background-color: #003F9A;
    color: white;
}
#oc-detail-titulo-tabla{
    font-size: 1.2rem;
    font-weight: bold;

}

.valor-centrado-oc-detail{
    text-align: center;
}
.valor-right-oc-detail{
    text-align: right;
    font-style: italic;
    font-weight: bolder;
}

#btn-preview {
	display: none;
	position: absolute;
	top: 261px;
	right: 135px;
}

#no-oc-txt-emp {
	color: white;
}

#titulo-oc{
    text-align: center;
}

#tabla-permisos {
	border: 1px solid black;
	margin-left: -76px;
	margin-top: 45px;
	grid-area: ii-start;
    text-align: center;
    border-collapse: collapse;
}

#tabla-permisos th{
    border-right : 1px solid black;
    border-bottom : 1px solid black;
    border-collapse: collapse;

}

#permisos {
	font-size: 0.8rem;
}

.permisos-titulo{
    width: 60px;
}

#area-gestion {
	background-color: #003F9A;
	color: white;
}

.permisos{
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 20px;
}

#botonera-colaboradores {
	display: grid;
	grid-template-columns: 25% 25% 25% 1fr;
}

#cod-c-lab-edit{
    grid-area: a;
}

#cod-c-edit{
    grid-area: b;
}

#email-c-lab-edit{
    grid-area: c;
}

#email-c-edit{
    grid-area: d;
}

#nombre-c-lab-edit{
    grid-area: e;
}

#nombre-c-edit{
    grid-area: f;
}

#telefono-c-lab-edit{
    grid-area: m;
}

#telefono-c-edit{
    grid-area: n;
}

#cel-c-lab-edit{
    grid-area: o;
}

#cel-c-edit{
    grid-area: p;
}

#password-c-lab-edit{
    grid-area: u;
}

#password-c-edit{
    grid-area: v;
}

#ciudad_c_lab-edit{
    grid-area: w;
}

#ciudad-c-edit{
    grid-area: nn;
}

#ciudad_c_lab-edit{
    grid-area: w;
}

#ciudad-c-edit{
    grid-area: nn;
}

#tipo-c-lab-edit{
    grid-area: aa;
}

#tipo-c-edit{
    grid-area: bb;
}

#activo-c-lab-edit{
    grid-area: cc;
}

#activo-c-edit{
    grid-area: dd;
}

.boton-guarda-estado-oc{
    border: none;
    padding: 0;
}

#tabla-permisos-detalle {
	border: 1px solid black;
	margin-left: 111px;
	margin-bottom: 50px;
	margin-top: 45px;
	grid-area: ii-start;
	text-align: center;
	border-collapse: collapse;
}

#boton-imprimir{
    margin: 0;
    padding: 0;
    border: none;
}

#img-boton-print{
    margin: 0;
    padding: 0;
    border: none;
    
}