*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body{font-family:Verdana,sans-serif;background-color:#fff;margin:10px;overflow-x:hidden;color:#53534f}
@media screen and (min-width:400px){body{margin:0 auto;max-width:400px}}

.cabeza {
    width: 100%;
    display: grid;
    grid-template-rows:    19px  19px  19px;
    grid-template-columns: auto  1fr   auto;
    grid-template-areas:"  logo  .     dias"
                        "  logo  .     horas"
                        "  logo  .     fecha";
    justify-items: start;
    align-items: center;
}
.logo { grid-area: logo; 
    height: 100%;
    display: grid;
    align-items: end;
}
.logo img { height:44px; }
.dias {
    grid-area: dias;
    font-size:14px;
    font-weight: bold;
    display: grid;
    justify-items: end;
    align-items: center;
}
.horas {
    grid-area: horas;
    font-size:14px;
    font-weight: bold;
    display: grid;
    justify-items: end;
    align-items: center;
}
.fecha {
    grid-area: fecha;
    font-size:14px;
    font-weight: bold;
    display: grid;
    justify-items: end;
    align-items: center;
}

/*-------------------------------------------------------------------------------------------------------- TITULO */
.titulo22 { 
    font-size:23px; 
    padding-top: 20px;
    padding-bottom: 8px;
    text-align:center;  
    letter-spacing:1; 
    word-spacing:6; 
    color: #006;
    font-weight: bold;
}
.titulo18 { font-size:18px; padding:1px 0px; text-align:center; letter-spacing:1; word-spacing:6;
    display:grid; justify-items: center; font-weight: bold; }
.linea {  border-bottom:1px solid #ccc; clear:both; padding:10px 0;}

/*-------------------------------------------------------------------------------------------------------- ESTACA */
.index_box {
    width: 100%;
    height: 16px;
    display: grid;
    grid-template-columns: 50px  1fr     50px;
    grid-template-areas:"  .     indexar  .";
    font-size:12px;
    font-weight: 600;
    justify-items: end;
    align-items: center;
    padding: 0px 0px 40px 0px;
}
.indexar {
    grid-area: indexar;
    width: 100%;
    height: 16px;
    display: grid;
    grid-template-columns: auto     1fr;
    grid-template-areas:"  revisar  .";
    border-top-right-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
    justify-items: end;
    align-items: center;
    background-color: #FFCC00;
    color: #FF6600;
    padding-right: 5px;
}
.revisar {
    grid-area: revisar;
    width: 100%;
    height: 16px;
    background-color: #FF6600;
    color: #FFCC00;
    display: grid;
    justify-items: end;
    align-items: center;
    padding-right: 5px;
}
/*-------------------------------------------------------------------------------------------------------- MENU */
.menu3_box {
    width: 100%;
    height: 4px;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1fr  auto   40px  auto   40px  auto   1fr;
    grid-template-areas:"  .    menu1  .     menu2  .     menu3  .";
}
.menu1 {
    grid-area: menu1;
    color: #DAF;
    display: grid;
    justify-items: center;
    align-items: center;
    font-size:13px;
}
.menu2 {
    grid-area: menu2;
    color: #DAF;
    display: grid;
    justify-items: center;
    align-items: center;
    font-size:13px;
}
.menu3 {
    grid-area: menu3;
    color: #DAF;
    display: grid;
    justify-items: center;
    align-items: center;
    font-size:13px;
}
/*--------------------------------------------------------------------------------------------------------- LEYENDA */
.titulo_box {
    width: 100%;
    height: 20px;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 100px  90px   130px     1fr 50px;
    grid-template-areas:"  stk    units  promedio  .   indexer";
}
.stk {  color:#CCC; font-size: 12px; display: grid; justify-items: start;}
.units {  color:#CCC; font-size: 12px; display: grid; justify-items: start;}
.promedio  {  color:#CCC; font-size: 12px; display: grid; justify-items: start;}
.indexer {  width:100%; color:#CCC; font-size: 12px; display: grid; justify-items: end;}
/*-------------------------------------------------------------------------------------------------------- UNIDADES */
.unidad_box {
    width: 100%;
    height: 35px;
    display: grid;
    justify-items: left;
    align-items: center;
    grid-template-columns: 110px   20px      auto      40px     1fr 50px;
    grid-template-areas:"  estaca  unidades  indexarU  puntaje  .   indexadores";
}
.estaca {
    grid-area: estaca;
    width: 110px;
    height: 35px;
    display: grid;
    justify-items: left;
    align-items: center;
    font-size:18px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    text-decoration: none;
    font-weight: bold;
}
.indexarU {
    grid-area: indexarU;
    width: 100%;
    height: 16px;
    display: grid;
    grid-template-columns: auto      1fr;
    grid-template-areas:"  revisarU  .";
    border-top-right-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
    justify-items: end;
    align-items: center;
    background-color: #FFCC00;
    color: #FF6600;
    padding-right: 5px;
    font-size:12px;
    font-weight: 600;
}
.revisarU {
    grid-area: revisarU;
    width: 100%;
    height: 16px;
    background-color: #FF6600;
    color: #FFCC00;
    display: grid;
    justify-items: center;
    align-items: center;
    
}
.puntaje {
    grid-area: puntaje;
    width: 50px;
    height: 16px;
    color: #BBB;
    display: grid;
    justify-items: end;
    align-items: center;
    padding-right: 5px;
}
.unidades {
    grid-area: unidades;
    width: 20px;
    height: 16px;
    color: #C60;
    display: grid;
    justify-items: end;
    align-items: center;
    font-size: 13px;
    padding-right: 4px;
}
.indexadores {
    grid-area: indexadores;
    width: 100%;
    height: 16px;
    color: #08F;
    display: grid;
    justify-items: end;
    align-items: center;
    font-size: 13px;
    padding-right: 4px;
}

/*-------------------------------------------------------------------------------------------------------- LEYENDA */
.leyenda_box {
    width: 100%;
    height: 14px;
    display: grid;
    grid-template-columns: 20px  70px    70px    1fr;
    grid-template-areas:"  .     indexo  reviso  .";
    font-size:10px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 8px 0px;
}
.barrio {
    grid-area: barrio;
    font-size:14px;
    font-weight: bold;
}
.rama {
    grid-area: rama;
    font-size:14px;
    font-weight: bold;
    color:#88B;
    padding-left: 5px;
}
.mision {
    grid-area: mision;
    font-size:14px;
    font-weight: bold;
    color:#B06;
    padding-left: 5px;
}
.indexo {
    grid-area: indexo;
    width: 100%;
    height: 100%;
    background-color: #FF6600;
    color: #FFCC00;
    border-top-left-radius: 5px 5px;
    border-bottom-left-radius: 5px 5px;
    display: grid;
    justify-items: center;
    align-items: center;
}
.reviso {
    grid-area: reviso;
    width: 100%;
    height: 100%;
    
    background-color: #FFCC00;
    color: #FF6600;
    border-top-right-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
    display: grid;
    justify-items: center;
    align-items: center;
}
/*-------------------------------------------------------------- CONSEJOS */
.consejos_box {
    width: 100%;
    height: 50px;
    display: grid;
    grid-template-rows: 25px  25px;
    grid-template-columns: 10%  40%       40%       10%;
    grid-template-areas:"  .    consejo1  consejo2  ."
                        "  .    consejo3  consejo4  .";
    font-size:17px;
    font-weight: 600;
    letter-spacing: 1px;
}
.consejo1 {
    grid-area: consejo1;
    width: 100%;
    height: 100%;
    color: #900;
    display: grid;
    justify-items: start;
    align-items: center;
}
.consejo2 {
    grid-area: consejo2;
    width: 100%;
    height: 100%;
    color: #009;
    display: grid;
    justify-items: end;
    align-items: center;
}
.consejo3 {
    grid-area: consejo3;
    width: 100%;
    height: 100%;
    color: #808;
    display: grid;
    justify-items: start;
    align-items: center;
}
.consejo4 {
    grid-area: consejo4;
    width: 100%;
    height: 100%;
    color: #000;
    display: grid;
    justify-items: end;
    align-items: center;
}
/*-------------------------------------------------- CORREDORES */
.corredores {
    cursor: pointer;
    position: fixed;
    bottom: 0px;
    right: 30px;        
}