/*----------------------------------------------------------------------------------------- TITULO */
.contenedorA {
    display: grid;
    width: 100%;
    height:50px;
    grid-template-rows: 40px 5px;
	grid-template-columns:  1fr  400px    1fr;
    grid-template-areas: "  .    tituloK  ."
                         "  .    lineaK1  .";
}
.tituloK {
    display: grid;
    grid-area: tituloK;
    width: 400px;
    height:45px;
    font-size:22px;
    place-items: center;
}
.lineaK1 { display:grid; grid-area:lineaK1; border-bottom:1px solid #CCC;}
@media screen and (max-width: 400px) {
    .contenedorA {
        grid-template-columns:  100%;
        grid-template-areas: "  tituloK"
                             "  lineaK1";
    }
    .tituloK { width:100%; font-size: 21px; }
}
@media screen and (max-width: 370px) {
    .tituloK { font-size: 20px; }
}
@media screen and (max-width: 340px) {
    .tituloK { font-size: 19px; }
}
/*------------------------------------------------------------------------------------------- PROGRESO */
.contenedorB {
    display: grid;
    width: 100%;
    grid-template-rows: 90px;
	grid-template-columns:  1fr  400px    1fr;
    grid-template-areas: "  .    progresoK     .";
}
.progresoK {  
    display:grid; 
    grid-area: progresoK; 
    width:100%; 
    grid-template-columns:  90px  1fr    70px   1fr    85px;
    grid-template-areas:"  areaK  areaK  areaK  areaK  areaK"
                        "  metaK  jovK   jovK   jasK   jasK"
                        "  nmetK  njovK  jovBK  njasK  jasBK"; 
}
@media screen and (max-width: 400px) {
    .contenedorB {
        grid-template-columns:  100%;
        grid-template-areas: "  progresoK";
    }
}

.areaK { grid-area: areaK; }
.areaK, .areaK:hover {
    display:grid;
    place-items:center;
    font-size:20px; 
    font-weight:bold; 
    letter-spacing:1px;
    word-spacing:4px;
    padding-top: 8px;
    padding-bottom:8px;
    color:#077;
    letter-spacing:1px; 
}
.metaK {
	grid-area: metaK;
	display: grid;
    height:20px;
    place-items: center;
    font-size: 14px;
    letter-spacing:1px; 
    color:#AAA; }
.jovK { grid-area: jovK; display: grid; place-items: center end;}
.jasK { grid-area: jasK; display: grid; place-items: center end; padding-right:15px}
.titjovK {
    display: grid; 
    place-items: center end; 
    font-size: 14px;
    color:#AAA;
    letter-spacing:1px; }
.nmetaK {
    display: grid;
	grid-area: nmetK;
    height:25px; 
    place-items: center;
    font-family: "Roboto";
    font-size: 16px; 
    font-weight: bold;
    letter-spacing:1px;
    color: #004C99; }
.njovK { grid-area: njovK }
.njasK { grid-area: njasK }
.njovK, .njasK {
    display: grid;
    height:25px; 
    width:100%;
    place-items: center end;
    padding-right:6px;
    font-size: 13px; 
    color:#111;}
.jovbarK { grid-area: jovBK }
.jasbarK { grid-area: jasBK }
.jovbarK, .jasbarK {  display:grid; place-items: center start; }
.barraK { width:70px; height:25px; }

@media screen and (max-width: 370px) {
    .progresoK {   grid-template-columns:  80px  1fr    60px   1fr    75px; }
    .barraK { width:60px; height:25px; }
    .areaK {  font-size:19px; }
    .areaK:hover { font-size:19px; }
}
/*-------------------------------------------------------------------------------------------- MENU */
.contenedorC {
    display: grid;
    width: 100%;
    grid-template-rows: 24px;
	grid-template-columns:  1fr  400px    1fr;
    grid-template-areas: "  .    menuK     .";
}
@media screen and (max-width: 400px) {
    .contenedorC {
        grid-template-columns:  100%;
        grid-template-areas: "  menuK";
    }
}
.menu1K, .menu2K, .menu3K, .menu4K { 
    display:grid; 
    grid-area: menuK; 
    width:100%; 
    place-items: center center;
    background-color: #FFEFDF;
}
.menu0K {
    display: grid;
    grid-area: menuK; 
    width: 100%;
    place-items: center center;
}
.lineaMenu {
    position: relative;
    top: 4px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #FAE5CC;
}
  
.menu1K {   grid-template-columns:  100%;
            grid-template-areas:"   mRef1"; 
        }
.menu2K {   grid-template-columns:  1fr auto  60px  auto   1fr;
            grid-template-areas:"   .   mRef1 .     mRef2  ."; 
        }
.menu3K {   grid-template-columns:  1fr auto  50px  auto   50px  auto   1fr;
            grid-template-areas:"   .   mRef1 .     mRef2  .     mRef3  ."; 
        }
.menu4K {   grid-template-columns:  1fr auto  25px  auto   25px  auto   25px  auto   1fr;
            grid-template-areas:"   .   mRef1 .     mRef2  .     mRef3  .     mRef4  ."; 
        }
.mRef0  { grid-area: mRef0; border-top: 1px solid #FF8000; }
.mRef1  { grid-area: mRef1; }
.mRef2  { grid-area: mRef2; }
.mRef3  { grid-area: mRef3; }
.mRef4  { grid-area: mRef4; }
.mRef1, .mRef1:hover, .mRef2, .mRef2:hover, .mRef3, .mRef3:hover, .mRef4, .mRef4:hover
{ font-size:14px; color:#FF8000; text-decoration:none }
/*-------------------------------------------------------------------------------------------- GRAFICOS */
.contenedorD {
    display: grid;
    width: 100%;
    height:100%;
	grid-template-columns:  1fr  400px      1fr;
    grid-template-areas: "  .    graficosK   .";
}
.graficosK {
    display: grid;
    grid-area: graficosK;
    width: 100%;
    grid-template-columns:  100%;
    grid-template-areas: "  linK2"
                         "  story1";
}
@media screen and (max-width: 400px) {
    .contenedorD {
        grid-template-columns:  100%;
        grid-template-areas: "  graficosK";
    }
}
.lineaK2 { grid-area:linK2; display:grid; margin:18px 0; border-bottom:1px solid #CCC;}

/*------------------------------------------------------------------------------------- PROGRESO */
.zonaTitulo {
    display:grid; 
    place-items:center;
    font-size:20px; 
    font-weight:bold; 
    letter-spacing:1px;
    word-spacing:4px;
    color:#077;
    letter-spacing:1px; 
}
/*------------------------------------------------------------------------------------------------------- STORY */
.story1 {
    display: grid;
    grid-area: story1;
    width: 100%;
    grid-template-rows: 15px 22px 110px 23px;
    grid-template-columns:  1fr   1fr   1fr   1fr   3px     1fr   1fr   1fr   1fr;
    grid-template-areas: "  jovS  jovS  jovS  jovS  medio  jasS  jasS  jasS  jasS"
                         "  val1  val2  val3  val4  medio  val5  val6  val7  val8"
                         "  bar1  bar2  bar3  bar4  medio  bar5  bar6  bar7  bar8"
                         "  yea1  yea2  yea3  yea4  medio  yea5  yea6  yea7  yea8";
}
@media screen and (max-width: 400px) {
    .story1 {  width: 100%;  }
}
.jovS { grid-area:jovS; letter-spacing:3px }
.jasS { grid-area:jasS; letter-spacing:6px }
.jovS,.jasS { display:grid; place-items: center; font-size:13px; font-weight:bold }
.val1,.val2,.val3,.val4,.val5,.val6,.val7,.val8,
.yea1,.yea2,.yea3,.yea4,.yea5,.yea6,.yea7,.yea8
{ display:grid; place-items: center; font-size:13px; color:#999; }
.medio { grid-area:medio; background:#CCC }
.bar1 { grid-area:bar1 }
.bar2 { grid-area:bar2 }
.bar3 { grid-area:bar3 }
.bar4 { grid-area:bar4 }
.bar5 { grid-area:bar5 }
.bar6 { grid-area:bar6 }
.bar7 { grid-area:bar7 }
.bar8 { grid-area:bar8 }
.bar1,.bar2,.bar3,.bar4,.bar5,.bar6,.bar7,.bar8
{ display:grid; place-items: end center; height:105px }
.col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8
{   width:18px;
    box-shadow: 2px 2px 3px #999;
    border-radius: 2px; 
}
.col1,.col5 { background-color:#0C0; }
.col2,.col6 { background-color:#066; }
.col3,.col7 { background-color:#FF8000; }
.col4,.col8 { background-color:#006; }
.yea1 { grid-area:yea1 }
.yea2 { grid-area:yea2 }
.yea3 { grid-area:yea3 }
.yea4 { grid-area:yea4 }
.yea5 { grid-area:yea5 }
.yea6 { grid-area:yea6 }
.yea7 { grid-area:yea7 }
.yea8 { grid-area:yea8 }







.story { display: grid;  grid-area: story; width:100% }
.titjovT { text-align:center; font-size:13px; font-weight:bold; letter-spacing:2px}
.titjasT { text-align:center; font-size:13px; font-weight:bold; letter-spacing:4px}
.njovT   { display:grid; place-items: end center; height:25px; font-size:13px; color:#999; }
   
.barBox4 {
    display:grid;
    height:110px;
    width:100%;
    grid-template-columns:  1fr      1fr      1fr      1fr;
    grid-template-areas: "  verdBar  azulBar  naraBar  celeBar";
    place-items: end center;
}
.verdBar { display:grid; grid-area:verdBar; background-color:#0C0; }
.azulBar { display:grid; grid-area:azulBar; background-color:#066; }
.naraBar { display:grid; grid-area:naraBar; background-color:#FF8000; }
.celeBar { display:grid; grid-area:celeBar; background-color:#006; }
.verdBar, .azulBar, .naraBar, .celeBar {
    width:20px;
    box-shadow: 2px 2px 3px #999;
    border-radius: 2px;
}
.medT { width:3px; background:#CCC }

.anioT { display:grid; place-items: end center; font-size:13px; color:#999; height:25px; width:100% }

/*----------------------------------------------------------------------------------------------- TITULO UNIDADES */
.contenedor1 {
    display: grid;
    width: 100%;
    height:100%;
	grid-template-columns:  1fr  400px      1fr;
    grid-template-areas: "  .    cajaBox1    .";
}
.cajaBox1 {
    display: grid;
    grid-area: cajaBox1;
    width: 400px;
    grid-template-rows:  28px;
    grid-template-columns:  100px  18px   1fr    70px   1fr    85px;
    grid-template-areas: "  tuniJ  tuniJ  tjovJ  tjovJ  tjasJ  tjasJ";
}
.titunidadJ {
	grid-area: tuniJ;
	display: grid;
    place-items: end start;
    font-size: 12px;
    letter-spacing:1px; 
    color:#AAA;}
.titjovenesJ {
	grid-area: tjovJ;
	display: grid;
    place-items: end end;
    font-size: 12px;
    color:#AAA;
    letter-spacing:1px; }
.titjasJ {
	grid-area: tjasJ;
	display: grid;
    place-items: end end;
    font-size: 12px;
    color:#AAA;
    padding-right:15px;
    letter-spacing:2px; }
@media screen and (max-width: 400px) {
    .contenedor1 {
        grid-template-columns:  100%;
        grid-template-areas: "  cajaBox1";
    }
    .cajaBox1 { width: 100% }
    .titunidadJ { padding-left:12px }
}

/*----------------------------------------------------------------------------------------------------- UNIDADES */
.contenedor2 {
    display: grid;
    width: 100%;
    height:36px;
	grid-template-columns:  1fr  400px      1fr;
    grid-template-areas: "  .    cajaBox2   .";}
.cajaBox2 {
    display: grid;
    grid-area: cajaBox2;
    width: 400px;
    height:36px;
    grid-template-columns:  100px 18px  1fr    70px   1fr    85px;
    grid-template-areas: "  uniJ  numJ  pjovJ  jovBJ  pjasJ  jasBJ";
    place-items: center start;}
.pjovJ {
	grid-area: pjovJ;
	display: grid;
    padding-right:6px;
    justify-self: right;
    font-size: 13px; }
.pjasJ {
	grid-area: pjasJ;
	display: grid;
    justify-self: right;
    padding-right:6px;
    font-size: 13px; }
.jovBJ { grid-area: jovBJ; }
.jasBJ { grid-area: jasBJ; }
.barraJ  { width:70px; height:25px; }
.numJ {
    grid-area:numJ;
    display: grid;
    font-size: 13px;
    justify-self: right;
    color:#FF8000; }
@media screen and (max-width: 400px) {
    .contenedor2 {
        grid-template-columns:  100%;
        grid-template-areas: "  cajaBox2";
    }
    .cajaBox2 { width: 100% }
    .uniJ0,.uniJ1 { padding-left:12px }
}

/*------------------------------------------------------------------------------------------------ CONTENEDOR 3 */
.contenedor3 {
    display: grid;
    width: 100%;
    height:36px;
	grid-template-columns:  1fr  400px      1fr;
    grid-template-areas: "  .    cajaBox3   .";}
.cajaBox3 {
    display: grid;
    grid-area: cajaBox3;
    width: 400px;
    height:36px;
    grid-template-columns:  120px 18px  1fr    65px   1fr    80px;
    grid-template-areas: "  uniJ  numJ  pjovJ  jovBJ  pjasJ  jasBJ";
    place-items: center start;}
.barraJ  { width:65px; height:25px; }

.uniJ0 { grid-area: uniJ; color:#004C99 }
.uniJ1 { grid-area: uniJ; color:#111 }
.uniJ2 { grid-area: uniJ; color:#600 }
.uniJ1,.uniJ0,.uniJ2 { font-size:18px }
.uniJ1:hover,.uniJ0:hover,.uniJ2:hover { font-size:18px; color:#006 }
@media screen and (max-width: 400px) {
    .contenedor3 {
        grid-template-columns:  100%;
        grid-template-areas: "  cajaBox3";
    }
    .cajaBox3 { width: 100% }
    .uniJ0,.uniJ1,.uniJ2 { padding-left:12px }
}
@media screen and (max-width: 370px) {
    .cajaBox3 { 
        width: 100%;
        grid-template-columns:  110px 18px  1fr  55px  1fr  65px;
    }
    .uniJ1,.uniJ0,.uniJ2 { padding-left:8px }
    .barraJ { width:55px; }
}
/*----------------------------------------------------------------------------------------- LEYENDA */
.downley { display:grid; width:100%; height:20px; place-items: start center; font-size:15px;font-weight:bold }

/*-------------------------------------------------------------------------- CONTENEDOR 4: Unidades de Conversos */
.contenedor4 {
    display: grid;
    width: 100%;
    height:36px;
	grid-template-columns:  1fr  400px      1fr;
    grid-template-areas: "  .    cajaBox4   .";}
.cajaBox4 {
    display: grid;
    grid-area: cajaBox4;
    width: 400px;
    height:36px;
    grid-template-columns:  110px 18px  1fr    65px     1fr     80px;
    grid-template-areas: "  uniL  numL  convL  conbarL  conv4L  conbar4L";
    place-items: center start;}
.barraL  { width:65px; height:25px; }

.uniL0 { grid-area: uniL; color:#004C99 }
.uniL1 { grid-area: uniL; color:#111 }
.uniL2 { grid-area: uniL; color:#600 }
.uniL1,.uniL0,.uniL2 { font-size:18px;text-decoration:none }
.uniL1:hover,.uniL0:hover,.uniL2:hover { font-size:18px; color:#006;text-decoration:none }
.numL {
    grid-area:numL;
    display: grid;
    font-size: 13px;
    justify-self: right;
    color:#FF8000; }
.convL  { grid-area: convL  }
.conv4L { grid-area: conv4L }
.convL,.conv4L { 
    display: grid;
    justify-self: right;
    padding-right:6px;
    font-weight:bold;
    font-size: 15px; }
.conbarL  { grid-area: conbarL; }
.conbar4L { grid-area: conbar4L; }
@media screen and (max-width: 400px) {
    .contenedor4 {
        grid-template-columns:  100%;
        grid-template-areas: "  cajaBox4";
    }
    .cajaBox4 { 
        width: 100%;
        grid-template-columns:  100px  18px  1fr    65px     1fr     80px; }
    .uniL0,.uniL1,.uniL2 { padding-left:12px; font-size:17.5px }
}
@media screen and (max-width: 370px) {
    .cajaBox3 { 
        width: 100%;
        grid-template-columns:  90px 18px  1fr  55px  1fr  65px;
    }
    .uniL1,.uniL0,.uniL2 { padding-left:8px;font-size:17px }
    .barraL { width:55px; }
    .convL,.conv4L { font-size: 14px; }
}