* {
    font-family:'Nanum Gothic', sans-serif; 
}
/*======================================================= TITULO */
.titulo1 { 
    font-weight: 700; 
    font-size:19px; 
    text-align:center; 
    padding-top:10px;
    padding-bottom:5px;
    letter-spacing:2px;
    color:#CCC;
}
.titulo2 { 
    font-weight: 700; 
    font-size:23px; 
    text-align:center; 
    padding-bottom:8px; 
    letter-spacing:2px; 
    color:#BBB;
}
hr.linea {
    border: 1px solid #DEE;
    margin-block-start: 0em;
    margin-block-end: 0em;
}
/*=============================================================================== AREA */
.area-box {
    display: grid;
    grid-template-rows:     50px;
    grid-template-columns:  1fr  200px      10px  22px      90px        22px      1fr;
    grid-template-areas: "  .    area-name  .     area-cst  area-barra  area-max  .";
}
.area-name {
    grid-area: area-name;
    display: grid;
    align-self: center;
}
a.area-name:link, a.area-name:visited {
    color:#009;
    text-decoration: none;
    font-family:'Nanum Gothic', sans-serif; 
    font-weight: 700; 
    font-size:23px; 
    letter-spacing:1px; 
}
.area-barra {
    grid-area: area-barra;
    display: grid;
    justify-self: center;
    align-self: center;
}
.barra {
    width: 90px;
    height: 35px;
}
.area-max {
    grid-area: area-max;
    display: grid;
    justify-content: center;
    align-items: center;
    font-size:13px;
    color:#777;
}
.area-cst {
    grid-area: area-cst;
    display: grid;
    justify-content: center;
    align-items: center;
    font-size:13px;
    color:#777;
}
@media screen and (max-width: 790px) {
    .area-box {
        grid-template-columns:  10px  auto       10px  22px      90px        22px      10px;
    }
}