body {font-family:Roboto; margin:0;}
/* ------------------------------------------------------------------------------------- MENU */
.menu {
	margin:0;
	background:#CEEE9F; 
	height:28px; 
	width:100%;
	display: grid;
    justify-items: center;
    align-items: center;
	grid-template-rows: 28px;
    grid-template-columns: 8px auto     1fr  45px     45px    45px;
    grid-template-areas: " .   titulo1  .    opcionB  opcionA home";
}
.titulo1 {
	grid-area: titulo1;
    width: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
	font-family:Roboto;
	font-weight:bold;
	font-size:20px;
}
.opcionB {
	grid-area: opcionB;
    display: grid;
    justify-items: center;
    align-items: center;
}
.opcionA {
	grid-area: opcionA;
    display: grid;
    justify-items: center;
    align-items: center;
}
.home {
	grid-area: home;
    display: grid;
    justify-items: center;
    align-items: center;
}
.linea {  border-bottom:1px solid #ccc; clear:both; padding-bottom: 8px; margin-bottom: 8px;}
.celda {
    width:50px;
}
/*-------------------------------------------------------------------------------------- INGRESO CODIGO */
.titulo {
    font-family: Roboto;
    font-size: 20px;
    text-align: center;
    padding: 30px 0px  20px 0px;
}
.subtit {
    font-family: Roboto;
    font-size: 20px;
    text-align: center;
    padding: 8px 0px;
}
.cod_box {
    cursor:pointer; 
    width: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 30px;
    grid-template-columns: 1fr  100px   1fr;
    grid-template-areas: " .    in_cod  .";
}
.in_cod {
    grid-area: in_cod;
    width: 100%;
    background: #FF6600;
    padding: 2px;
    border-radius: 18px;
    display: grid;
    justify-items: center;
    align-items: center;
}
.in_cod input {
    width: 100%;
    border:0; 
    border-radius: 16px;
    outline: none;
    font-family:Roboto;
    font-size:21px; 
    font-weight: bold;
    box-sizing: border-box;
    padding:7px 5px 7px 12px;
    text-align: center;
}
.p_producto {
    text-align: center;
    font-family: Roboto;
    font-size: 24px;
    color: blue;
    padding-top: 20px;
    padding-bottom: 10px;
}
.p_codigo {
    text-align: center;
    font-family: Roboto;
    font-size: 15px;
    color: #AAA;
    word-spacing: 3px;
    letter-spacing: 1px;
}
.p_pack {
    text-align: center;
    font-family: Roboto;
    font-size: 18px;
    color:#066;
    padding-top: 5px;
    padding-bottom: 5px;
}
/*--------------------------------------------------------------------------------------------- STOCK */
.box_stock {
    width: 100%;
    height: 34px;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1fr   300px       1fr;
    grid-template-areas: " .     fila_stock  . ";
}
.fila_stock {
    grid-area: fila_stock;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 100px  100px      100px;
    grid-template-areas: " label  facturado  noFacturado";
    font-family: Roboto;
    font-size: 18px;
    border-top:1px solid #ccc;
}
.label {
    grid-area: label;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: end;
    align-items: center;
}
.facturado {
    grid-area: facturado;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    font-weight: 700;
    font-size: 22px;
}
.noFacturado {
    grid-area: noFacturado;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    font-weight: 700;
    font-size: 22px;
    color:rgb(0, 43, 99)
}
/*--------------------------------------------------------------------------------------------- STOCK */
.box_almacen {
    width: 100%;
    height: 34px;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1fr   300px          1fr;
    grid-template-areas: " .     fila_almacen  . ";
}
.fila_almacen {
    grid-area: fila_almacen;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 100px  100px   100px;
    grid-template-areas: " Kout   Kstk    Kin";
    font-family: Roboto;
    font-size: 20px;
    font-weight: 700;
    border-top:1px solid #ccc;
    color: #90A;
}
.Kout {
    grid-area: Kout;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
}
.Kstk {
    grid-area: Kstk;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
}
.Kin {
    grid-area: Kin;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
}
/* ------------------------------------------------------------------------------------- STOCK */
.stock_box {
	height:28px; 
	width:100%;
    display: grid;
    justify-items: center;
    align-items: center;
	grid-template-rows: 27px 1px;
    grid-template-columns: 8px   300px   70px  70px  70px  70px  70px    80px     70px    70px   70px   70px   70px    1fr;
    grid-template-areas: " .     nombre  out   nor   in    Astk  codigo  compras  ventas  stock  Alote  Plote  Pcosto  . "
                         " line  line    line  line  line  line  line    line     line    line   line   line   line    line ";
    background:#CEEE9F; 
    font-family:Roboto;
    font-size:17px;
    font-weight:bold;
}
.nombre {
	grid-area: nombre;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: start;
    align-items: center;
    font-weight: 100;
}
.out {
	grid-area: out;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
}
.nor {
	grid-area: nor;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
}
.in {
	grid-area: in;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
}
.stock {
	grid-area: stock;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    font-family:Roboto;
    color:rgb(3, 0, 204);
}
.Astk {
	grid-area: Astk;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    font-family:Roboto;
    color:rgb(3, 0, 204);
}
.Alote {
	grid-area: Alote;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    font-family:Roboto;
    color:rgb(23, 99, 0);
}
.Plote {
	grid-area: Plote;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    font-family:Roboto;
    color:rgb(23, 99, 0);
}
.Pcosto {
	grid-area: Pcosto;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    font-family:Roboto;
    color:rgb(0, 43, 99);
}
.codigo {
	grid-area: codigo;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    font-family:Roboto;
    color:#C60;
}
.compras {
	grid-area: compras;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    font-family:Roboto;
}
.ventas {
	grid-area: ventas;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;

    font-family:Roboto;
}
.line {
    grid-area: line;
    width: 100%;
    height: 100%;
    background: #555;
}