/*============================================================================================== CLIENTE */
.cliente_box {
    width: 100%;
    height: 34px;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-rows: 34px;
    grid-template-columns: 1fr  auto     340px     1fr;
    grid-template-areas: " .   cliente1  cliente2  . ";
    background: rgb(1, 113, 128);
}
.cliente1 {
    grid-area: cliente1;
    width: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-rows: 34px;
    grid-template-columns: auto     auto         auto     auto;
    grid-template-areas: " tit_cli  pre_cliente  tit_ruc  pre_ruc";
    color: #FFF;
}
.cliente2 {
    grid-area: cliente2;
    width: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-rows: 34px;
    grid-template-columns: 100px   60px     60px     60px     60px;
    grid-template-areas: " pre_cp  btn_ruc  btn_dni  btn_sin  num_pre";
    color: #FFF;
}
.tit_cli {
    grid-area: tit_cli;
    width: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    font-size: 14px;
    color: rgb(174, 208, 212);
    padding: 0px 6px;
}
.pre_cliente  { 
    grid-area: pre_cliente;
    width: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    background: rgb(1, 113, 128);
}
.pre_cliente input {
    border: 0;
    height: 24px;
    width: 100%;
    border-radius: 5px;
    outline: none;
    font-weight: 300;
    font-size: 18px;
	font-weight: 400;
    font-family: Roboto;
    color:#e2e0fc;
    background: rgb(1, 113, 128);
}
.pre_cliente input::placeholder {
    color:rgb(64, 149, 160);
    font-size: 14px;
    letter-spacing: 1px;
}
.tit_ruc {
    grid-area: tit_ruc;
    display: grid;
    justify-items: center;
    align-items: center;
    font-size: 14px;
    color: rgb(174, 208, 212);
    letter-spacing: 1px;
    padding: 0px 5px 0px 20px;
}
.pre_ruc  { 
    grid-area: pre_ruc;
    height: 28px;
    display: grid;
    justify-items: center;
    align-items: center;
    background: rgb(1, 113, 128);
    font-size: 17px;
    color:#e2e0fc;
    padding: 0px 20px 0px 0px;
}
.pre_cp {
    grid-area: pre_cp;
    width: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    font-size: 16px;
    color: rgb(160, 252, 85);
    letter-spacing: 1px;
    text-decoration: none;
}
.btn_ruc {
    grid-area: btn_ruc;
    width: 100%;
    display: grid;
    justify-items: end;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: rgb(93, 167, 177);
    text-decoration: none;
    padding: 0px 0px 0px 25px;
}
.btn_dni {
    grid-area: btn_dni;
    width: 100%;
    display: grid;
    justify-items: end;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: rgb(93, 167, 177);
    text-decoration: none;
}
.btn_sin {
    grid-area: btn_sin;
    width: 100%;
    display: grid;
    justify-items: end;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: rgb(93, 167, 177);
    text-decoration: none;
}
.num_pre {
    grid-area: num_pre;
    width: 100%;
    display: grid;
    justify-items: end;
    align-items: center;
    font-size: 14px;
    color: rgb(172, 255, 62);
    letter-spacing: 1px;
    font-weight: bold;
    text-decoration: none;
}
/*------------------------------------------ 790 */
@media screen and (max-width:790px) {
    .cliente_box {
        height: 61px;
        grid-template-rows: 30px 1px 30px;
        grid-template-columns: 100%;
        grid-template-areas: "cliente1"
                             "p_divisionC"
                             "cliente2";
        background: rgb(1, 113, 128);
    }
    .cliente1 {
        grid-template-columns: 7px  auto         auto     auto;
        grid-template-areas: " .    pre_cliente  tit_ruc  pre_ruc";
    }
    .tit_cli {
        display: none;
    }
}
/* ================================================================================================ FILAS */
.p_box_fila {
    width: 100%;
    height: 51px;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-rows: 50px 1px;
    grid-template-columns: 1fr  24px         350px        330px        40px         40px         1fr;
    grid-template-areas:  ".    p_zona0      p_zona1      p_zona2      p_zona3      p_zona4      ."
                          ".    p_divisionB  p_divisionB  p_divisionB  p_divisionB  p_divisionB  .";
}
/*----------------------------------------------------------------------- ZONA 0 */
.p_zona0 {
    grid-area: p_zona0;
    width: 24px;
    height: 50px;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-rows: 50px;
    grid-template-columns: 24px;
    grid-template-areas: "p_numero1";
}
.p_numero1 {
    grid-area: p_numero1;
    width: 24px;
    height: 50px;
    display: grid;
    justify-items: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    background:#000;
    color: #AAA;
}
/*----------------------------------------------------------------------- ZONA 1 */
.p_zona1 {
    grid-area: p_zona1;
    width: 350px;
    height: 50px;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-rows: 50px;
    grid-template-columns: 70px     300px;
    grid-template-areas: " p_foto1  p_producto1";
}
.p_foto1 {
    grid-area: p_foto1;
    width: 70px; 
    height: 50px;
    display: grid;
    justify-items: center;
    align-items: center;
}
.p_foto1 img { 
    height: 50px;
}
/* ----------------------------------------------- PRODUCTO */
.p_producto1 {
    grid-area: p_producto1;
    width: 300px;
    height: 50px;
    display: grid;
    grid-template-rows: 6px 22px 15px 7px;
    grid-template-columns: auto 1fr; 
    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;
}
/*----------------------------------------------------------------------- ZONA2 */
.p_zona2 {
    grid-area: p_zona2;
    width: 330px;
    height: 50px;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-rows: 50px;
    grid-template-columns:  50px         100px    80px       100px;
    grid-template-areas: "  p_cantidad1  p_pack1  p_precio1  p_importe1";
}
.p_cantidad1 {
    grid-area: p_cantidad1;
    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;
}
.p_pack1 {
    grid-area: p_pack1;
    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;
}
.p_precio1 {
    grid-area: p_precio1;
    width: 100%;
    height: 100%;
    background: #EEE;
    display: grid;
    justify-items: center;
    align-items: center;
    color: #068;
    font-size: 20px;
    font-weight: bold;
    
}
.p_importe1 {
    grid-area: p_importe1;
    height: 50px;
    width: 100px;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-rows: 50px;
    grid-template-columns: 1fr auto      auto       auto; 
    grid-template-areas: ".    p_soles1  p_entero1  p_decimal1";
    background: #FFF;
}
.p_soles1 {
    grid-area: p_soles1;
    font-size: 18px;
    color: #CCC;
    letter-spacing: 1px;
    padding: 0px 5px;
}
.p_entero1 {
    grid-area: p_entero1;
    font-size: 22px;
    font-weight: bold;
}
.p_decimal1 {
    grid-area: p_decimal1;
    font-size: 22px;
    color: #777;
}
/*----------------------------------------------------------------------- ZONA 3 */
.p_zona3 {
    grid-area: p_zona3;
    width: 40px;
    height: 50px;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-rows: 50px;
    grid-template-columns:  40px;
    grid-template-areas: "  p_editar1";
    
}
.p_editar1 {
    grid-area: p_editar1;
    height: 50px;
    width: 40px;
    display: grid;
    justify-items: end;
    align-items: center;
}
.p_editar1 img{
    height: 20px;
}
/*------------------------------------------------------------------------ ZONA 4 */
.p_zona4 {
    grid-area: p_zona4;
    width: 40px;
    height: 50px;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns:  40px;
    grid-template-areas: "  p_eliminar1";
    
}
.p_eliminar1 {
    grid-area: p_eliminar1;
    height: 50px;
    width: 40px;
    display: grid;
    justify-items: end;
    align-items: center;
}
.p_eliminar1 img{
    height: 20px;
}
/*--------------------------------------------------------------------- DIVISIONES */
.p_divisionA {
    grid-area: p_divisionA;
    width: 100%;
    height: 1px;
    background:#EEE;
}
.p_divisionB {
    grid-area: p_divisionB;
    width: 100%;
    height: 2px;
    background:#999;
}
.p_divisionC {
    grid-area: p_divisionC;
    display: grid;
    justify-items: center;
    align-items: center;
    background: rgb(85, 160, 170);
    height: 1px;
    width: 100%;
}
/* ================================================================================================= TOTAL */
.total_box {
    width: 100%;
    height: 36px;
    display: grid;
    grid-template-columns: 1fr auto       1fr;
    grid-template-rows: 36px;
    grid-template-areas: ".    total_linea  .";
    background: #000;
}
.total_linea {
    grid-area: total_linea;
    width: 790px;
    display: grid;
    grid-template-rows: 36px;
    grid-template-columns: 200px    180px    50px     100px   80px     100px   80px;
    
    grid-template-areas: " accion1  accion2  accion3  .       moneda1  total1  fondo2";
}
.accion1 {
    grid-area: accion1;
    display: grid;
    justify-items: center;
    align-items: center;
    width: 100%;
    height: 36px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    background: #000;
    color: rgb(160, 252, 85);
    letter-spacing: 1px;
}
.accion2 {
    grid-area: accion2;
    display: grid;
    justify-items: center;
    align-items: center;
    width: 100%;
    height: 36px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    background: #000;
    color: rgb(160, 252, 85);
    letter-spacing: 1px;
}
.accion3 {
    grid-area: accion3;
    display: grid;
    justify-items: center;
    align-items: center;
    width: 100%;
    height: 36px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    background: #000;
    color: rgb(160, 252, 85);
    letter-spacing: 1px;
}
.moneda1 {
    grid-area: moneda1;
    display: grid;
    justify-items: center;
    align-items: center;
    width: 100%;
    height: 36px;
    background: #000;
    color: #AAA;
    font-size: 18px;
    font-weight: bold;
}
.total1 {
    grid-area: total1;
    display: grid;
    justify-items: center;
    align-items: center;
    width: 100%;
    height: 36px;
    font-size: 23px;
    font-weight: bold;
    background: #000;
    color: #EEE;
}
.fondo1 {
    grid-area: fondo1;
    width: 100%;
    height: 36px;
    font-size: 22px;
    font-weight: bold;
    background: #000;
    display: grid;
    justify-items: center;
    align-items: center;
}
.fondo2 {
    grid-area: fondo2;
    width: 100%;
    height: 36px;
    font-size: 22px;
    font-weight: bold;
    background: #000;
    display: grid;
    justify-items: center;
    align-items: center;
}
/*========================================================================================================= 790 */
@media screen and (max-width:790px) {
    /*----------------------------------------------------------------------------------------- FILA */
    .p_box_fila {
        width: 100%;
        height: 103px;
        display: grid;
        justify-items: center;
        align-items: center;
        grid-template-rows: 60px 1px 40px 2px;
        grid-template-columns: 24px         1fr          40px;
        grid-template-areas:  "p_zona0      p_zona1      p_zona3"
                              "p_zona0      p_divisionA  p_divisionA"
                              "p_zona0      p_zona2      p_zona4"
                              "p_divisionB  p_divisionB  p_divisionB";
    }
    /*----------------------------------------------------------------------- ZONA 0 */
    .p_zona0 {
        grid-area: p_zona0;
        width: 24px;
        height: 101px;
        display: grid;
        justify-items: center;
        align-items: center;
        grid-template-rows: 101px;
        grid-template-columns: 24px;
        grid-template-areas: "p_numero1";
        background:#000;
    }
    .p_numero1 {
        grid-area: p_numero1;
        width: 24px;
        height: 100%;
        display: grid;
        justify-items: center;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        background:#000;
        color: #AAA;
    }
    /*---------------------------------------------------------------------- ZONA1 */
    .p_zona1 {
        width: 100%;
        height: 60px;
        grid-template-rows: 60px;
        grid-template-columns: 70px     1fr;
        grid-template-areas:  "p_foto1  p_producto1";
    }
    .p_numero1 {  height: 60px;  }
    .p_foto1 {
        width: 70px; 
        height: 60px;
    }
    .p_foto1 img { 
        height: 60px; 
    }
    .p_producto1 {
        width: 100%;
        height: 60px;
        display: grid;
        grid-template-rows: 6px 27px 20px 7px;
        grid-template-columns: auto 1fr; 
        grid-template-areas: ".        ."
                             "p_nombre ."
                             "p_extra  ."
                             ".        .";
    }
    /*----------------------------------------------------------------------- ZONA 2 */
    .p_zona2 {
        width: 100%;
        height: 40px;
        grid-template-rows: 40px;
        grid-template-columns:  16%          30%      24%        30%;
        grid-template-areas: "  p_cantidad1  p_pack1  p_precio1  p_importe1";
    }
    .p_cantidad1 {  height: 40px;   }
    .p_pack1    {
        height: 40px;
        font-family:Roboto;
        font-size:20px; 
    }
    .p_precio1  {   height: 40px;   }
    .p_importe1 {
        height: 40px;
        grid-template-rows: 40px;
        grid-template-columns: 1fr  auto      auto       auto; 
        grid-template-areas: " .    p_soles1  p_entero1  p_decimal1";
        background: #FFF;
    }
    .p_soles1    {   font-size: 17px;    }
    .p_entero1   {   font-size: 22px;    }
    .p_decimal1  {   font-size: 22px;    }
    /*----------------------------------------------------------------------- ZONA 3 */
    .p_zona3 {
        width: 40px;
        height: 60px;
        grid-template-rows:     60px;
        grid-template-columns:  40px;
    }
    .p_editar1 {
        height: 60px;
        width: 40px;
        display: grid;
        justify-items: center;
        align-items: center;
    }
    /*----------------------------------------------------------------------- ZONA 4 */
    .p_zona4 {
        width: 40px;
        height: 40px;
        grid-template-rows: 40px;
        grid-template-rows: 40px;
    }
    .p_eliminar1 {
        height: 40px;
        width: 40px;
        display: grid;
        justify-items: center;
        align-items: center;
    }
    /*-------------------------------------------------------------------------------------------- TOTAL */
    .total_box {
        width: 100%;
        height: 36px;
        grid-template-rows: 36px;
        grid-template-columns: 100%;
        grid-template-areas: " total_linea";
    }
    .total_linea {
        width: 100%;
        grid-template-rows: 36px;
        grid-template-columns: 80px     80px     40px     1fr  30px      100px   40px;
        grid-template-areas: " accion1  accion2  accion3  .    moneda1   total1  .";
    }
    .accion1 {
        grid-area: accion1;
        width: 100%;
        height: 36px;
        display: grid;
        justify-items: center;
        align-items: center;
        font-size: 12px;
        letter-spacing: 1px;
        background: #000;
    }
    .accion2 {
        grid-area: accion2;
        width: 100%;
        height: 36px;
        display: grid;
        justify-items: center;
        align-items: center;
        font-size: 12px;
        letter-spacing: 1px;
        background: #000;
    }
    .moneda1 {
        grid-area: moneda1;
        display: grid;
        justify-items: end;
        align-items: center;
        width: 30px;
        height: 36px;
        background: #000;
        color: #AAA;
        font-size: 18px;
        font-weight: bold;
    }
    .total1 {
        grid-area: total1;
        display: grid;
        justify-items: end;
        align-items: center;
        width: 100%;
        height: 36px;
        font-size: 23px;
        font-weight: bold;
        background:#000;
        color: #EEE;
    }
    .fondo1 {
        grid-area: fondo1;
        width: 100%;
        height: 36px;
        font-size: 22px;
        font-weight: bold;
        background: #000;
        display: grid;
        justify-items: center;
        align-items: center;
    }
    .fondo2 {
        grid-area: fondo2;
        width: 100%;
        height: 36px;
        font-size: 22px;
        font-weight: bold;
        background: #000;
        display: grid;
        justify-items: center;
        align-items: center;
    }
}