/*------------------------------ AREA TRABAJO */
.areaW, .areaW:hover {
    display:grid; 
    height:40px;
    width:100%;
    place-items:center;
    font-size:20px; 
    font-weight:bold; 
    letter-spacing:1px;
    word-spacing:4px;
    color:#077;
    letter-spacing:1px; 
}
/*----------------------------------------------------------------- META GLOBAL  */
.progresoBox {
    display: grid;
    width: 100%;
    grid-template-rows: 80px;
	grid-template-columns:  1fr  400px    1fr;
    grid-template-areas: "  .    progreso     .";
}
.progreso {  
    display:grid; 
    grid-area: progreso; 
    width:100%; 
    grid-template-rows: 25px 25px 30px;
    grid-template-columns: auto   20px    65px    1fr  1px  1fr   auto    20px    65px     1fr  1px  1fr  auto;
    grid-template-areas:"  titcC  titcC   titcC   .    lv   .     tit4C   tit4C   tit4C    .    lx   .    metaC"
                        "  convC  convC   convC   .    lv   .     conv4C  conv4C  conv4C   .    lx   .    tconC"
                        "  nconC  tasaC   convBC  .    lv   .     ncon4C  tasa4C  convB4C  .    lx   .    nmetaC";
}
.lv { grid-area:lv; background:#CCC; }
.lx { grid-area:lx; background:#CCC; }
@media screen and (max-width: 400px) {
    .progresoBox {
        grid-template-columns:  100%;
        grid-template-areas: "  progreso";
    }
    .progreso {  
        grid-template-columns: 1fr  auto   20px    60px    1fr  1px  1fr   auto    20px    60px     1fr  1px  1fr  auto   1fr;
        grid-template-areas:"  .    titcC  titcC   titcC   .    lv   .     tit4C   tit4C   tit4C    .    lx   .    metaC  ."
                            "  .    convC  convC   convC   .    lv   .     conv4C  conv4C  conv4C   .    lx   .    tconC  ."
                            "  .    nconC  tasaC   convBC  .    lv   .     ncon4C  tasa4C  convB4C  .    lx   .    nmetaC .";
    }
}

.metaC { grid-area: metaC; place-items: center }
.titcC { grid-area: titcC; place-items: center }
.tit4C { grid-area: tit4C; place-items: center }
.titcC,.tit4C,.metaC {
    display:grid;
    font-size: 14px;
    color:#AAA;
    letter-spacing:1px; }
.nmetaC {
    display: grid;
	grid-area: nmetaC;
    place-items: center;
    font-family: "Roboto";
    font-size: 16px; 
    font-weight: bold;
    letter-spacing:1px;
    color:#036; }
.convC { grid-area:convC }
.conv4C { grid-area:conv4C }
.convC, .conv4C, .titconvC { display: grid; place-items: center; font-size:16px; color:#06C;letter-spacing:1px }
.tconC { grid-area:tconC; display: grid; place-items: center end; font-size:16px; color: #009; letter-spacing:1px }
.tasaC { grid-area:tasaC }
.tasa4C { grid-area:tasa4C }
.tasaC,.tasa4C { font-size:15px; color:#AAA; display:grid; place-items:center start }
.nconC { grid-area: nconC }
.ncon4C { grid-area: ncon4C }
.nconC, .ncon4C {
    display: grid;
    width:100%;
    place-items: center;
    padding-right:2px;
    font-size: 15px;
    font-weight:bold;
    letter-spacing:1px;
    color:#111;}
.convBC { grid-area: convBC }
.convB4C { grid-area: convB4C; padding-right:15px }
.convBC, .convB4C, .proBC {  display:grid; place-items: center end; }
.barraC { width:70px; height:24px; }
.barraF { width:100px; height:24px; }

@media screen and (max-width: 370px) {
    .progresoBox { 
        grid-template-columns: 10px  auto   20px    60px    1fr     auto    20px    60px     1fr    auto    10px;
    }
    .barraC { width:60px; height:24px; } 
    .areaC, .areaC:hover {  font-size:18px; letter-spacing:0px; word-spacing:3px;}
    .titcC,.tit4C,.metaC {
        font-size: 12px;
        letter-spacing:0px; }
}
/*------------------------------------------------------- META 1.5% */
.contenedorF {
    display: grid;
    width: 100%;
    grid-template-rows: 64px;
	grid-template-columns:  1fr  400px    1fr;
    grid-template-areas: "  .    progresoF     .";
}
.progresoF{  
    display:grid; 
    grid-area: progresoF; 
    width:100%;
    height:54px;
    grid-template-rows: 24px  30px;
    grid-template-columns:  1fr    auto    30px   auto   30px   auto   1fr;
    grid-template-areas: "  .      enviaT  .      .      .      metaT  ."
                         "  .      nproF   .      proBF  .      nAntF  ."; 
}
@media screen and (max-width: 400px) {
    .contenedorF {
        grid-template-columns:  100%;
        grid-template-areas: "  progresoF";
    }
}
.enviaT { grid-area: enviaT; display:grid; place-items: end end; }
.metaT { grid-area: metaT; display:grid; place-items: end start; }
.enviaT,.metaT {
    font-size: 14px;
    color:#AAA;
    letter-spacing:1px; }
.nAntF { 
    grid-area:nAntF; 
    display: grid; 
    place-items: center start; 
    font-size:16px; 
    color: #009;
    font-weight:bold;
    letter-spacing:1px; 

}
.nproF {
    grid-area: nproF;
    display: grid;
    width:100%;
    place-items: center end;
    padding-right:2px;
    font-size: 16px;
    font-weight:bold;
    letter-spacing:1px;
    color:#06C;

}
.proBF { 
    grid-area: proBF;
    display: grid;
    place-items: center end;
}


/*---------------------------------------------------- LINEA DIVISORA */
.lineaBox {
    display: grid;
    width: 100%;
    height:auto;
	grid-template-columns:  1fr  400px      1fr;
    grid-template-areas: "  .    lineaDiv   .";
}
.lineaDiv { grid-area:lineaDiv; display:grid; margin:10px 0; border-bottom:1px solid #CCC;}