.titulo {
    width: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    font-size: 26px;
    font-weight: bold;
    color:#009;
    padding: 8px 0px;
}
.in_cliente {
    width: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color:rgb(0, 99, 145);
    text-decoration: none;
    padding: 7px 0px;
}
/* ------------------------------------------------------------------- FILAS */
.p_fila_box {
    width: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 50px 1px;
    grid-template-areas: ". p_fila     ."
                         ". p_division .";
}
.p_fila {
    grid-area: p_fila;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 20px     60px   300px      50px       100px  80px     100px     40px     40px;
    grid-template-rows: 50px;
    grid-template-areas: " p_numero p_foto p_producto p_cantidad p_pack p_precio p_importe p_editar p_eliminar";
    height: 50px;
}
.p_division {
    grid-area: p_division;
    display: grid;
    justify-items: center;
    align-items: center;
    background:#AAA;
    height: 1px;
    width: 100%;
}
.p_numero {
    grid-area: p_numero;
    width: 20px;
    height: 50px;
    display: grid;
    justify-items: center;
    align-items: center;
    background: #EEE;
    font-size: 18px;
    font-weight: bold;
    color: #AAA;
}
.p_foto {
    display: grid;
    justify-items: center;
    align-items: center;
    background: #FFF;
}
.p_foto img { height: 50px; }
/* ------------------------------------------------------------------- PRODUCTO */
.p_producto {
    grid-area: p_producto;
    width: 300px;
    height: 50px;
    display: grid;
    grid-template-columns: auto 1fr; 
    grid-template-rows: 6px 22px 15px 7px;
    grid-template-areas: ".        ."
                         "p_nombre ."
                         "p_extra  ."
                         ".        .";
}
/*----------------------------------- NOMBRE */
.p_nombre {
    grid-area: p_nombre;
    width: auto;
    height: 22px;
    display: grid;
    grid-template-columns: auto auto 1fr; 
    grid-template-rows: 22px;
    grid-template-areas: "p_parte1 p_parte2 .";
}
.p_parte1 {
    grid-area: p_parte1;
    width: auto;
    height: 22px;
    font-size: 17px;
    font-weight: bold;
    color: #000;
    display: grid ;
    justify-items: start;
    align-items: center;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}
.p_parte2 {
    grid-area: p_parte2;
    width: auto;
    height: 22px;
    font-size: 17px;
    font-weight: bold;
    color: #06C;
    padding:0px 9px;
    display: grid ;
    justify-items: start;
    align-items: center;
}
/*------------------------------------ EXTRA */
.p_extra {
    grid-area: p_extra;
    width: auto;
    height: 15px;
    display: grid;
    grid-template-columns: auto auto 1fr; 
    grid-template-rows: 15px;
    grid-template-areas: "p_parte3 p_parte4 .";
}
.p_parte3 {
    grid-area: p_parte3;
    width: auto;
    height: 15px;
    font-size: 14px;
    font-weight: bold;
    color: #777;
    display: grid;
    justify-items: start;
    align-items: center;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}
.p_parte4 {
    grid-area: p_parte4;
    width: auto;
    height: 15px;
    font-size: 14px;
    font-weight: bold;
    color: #C60;
    padding:0px 9px;
    display: grid;
    justify-items: start;
    align-items: center;
}
/* ------------------------------------------------------------------ CANTIDAD */
.p_cantidad {
    grid-area: p_cantidad;
    width: 100%;
    height: 50px;
    display: grid;
    justify-items: center;
    align-items: center;
    font-family:lato;
    font-size: 23px;
    font-weight: bold;
    color: #000;
    background: #EEE;
}
/* --------------------------------------------------------------------- PACK */
.p_pack {
    grid-area: p_pack;
    height: 100%;
    background: #FFF;
    display: grid;
    align-items: center;
    justify-items: center;
    font-family:lato;
    font-size:22px; 
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
    color:#009;
}
/*-------------------------------------------------------------------- PRECIO */
.p_precio {
    grid-area: p_precio;
    width: 100%;
    height: 100%;
    background: #EEE;
    display: grid;
    justify-items: center;
    align-items: center;
    color: #068;
    font-size: 20px;
    font-weight: bold;
    
}
/* ----------------------------------------------------------------- IMPORTE */
.p_importe {
    grid-area: p_importe;
    height: 100%;
    width: 100%;
    background: #FFF;
    display: grid;
    justify-items: end;
    align-items: center;
}
.p_importe_box {
    display: grid;
    grid-template-columns: 1fr auto auto auto; 
    grid-template-areas: ". p_soles p_entero p_decimal";
    justify-items: center;
    align-items: end;
}
.p_soles {
    grid-area: p_soles;
    font-size: 22px;
    color: #CCC;
    letter-spacing: 1px;
    padding: 0px 5px;
}
.p_entero {
    grid-area: p_entero;
    font-size: 25px;
    font-weight: bold;
}
.p_decimal {
    grid-area: p_decimal;
    font-size: 23px;
    color: #777;
}
/* ---------------------------------------------------------- Editar */
.p_editar {
    grid-area: p_editar;
    height: 100%;
    width: 100%;
    display: grid;
    justify-items: end;
    align-items: center;
}
/* -------------------------------------------------------- Eliminar */
.p_eliminar {
    grid-area: p_eliminar;
    height: 100%;
    width: 100%;
    display: grid;
    justify-items: end;
    align-items: center;
}
/* ------------------------------------------------------------------- TOTAL */
.pre_total_box {
    width: 100%;
    height: 50px;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1fr 530px     80px        100px      80px    1fr;
    grid-template-rows: 50px;
    grid-template-areas: " .   pre_pagar pre_moneda  pre_total  p_fondo . ";
    color: #FFF;
    background: #000;
}
.pre_pagar {
    grid-area: pre_pagar;
    width: 530px;
    height: 50px;
    display: grid;
    justify-items: center;
    align-items: center;
    background: #000;
    font-size: 18px;
    font-weight: bold;
    color: #EEE;
    text-decoration: none;
}
.pre_moneda {
    grid-area: pre_moneda;
    width: 80px;
    height: 50px;
    display: grid;
    justify-items: center;
    align-items: center;
    background: #000;
    font-size: 18px;
    font-weight: bold;
    color: #EEE;
}
.pre_total {
    grid-area: pre_total;
    width: 100px;
    height: 50px;
    display: grid;
    justify-items: center;
    align-items: center;
    background: #000;
    font-size: 22px;
    font-weight: bold;
    color: #EEE;
}