﻿:root {
    --rkPastillaMarginLeft: 2%;
    --rkPastillaMarginRigth: 2%;
    --rkPastillaAuditoriaWidth: 15%;
    --rkPastillaItemMarginInner: 0.15%;
    --rkPastillaItemMarginOuter: 0.8%;
    --rkPastillaTituloHeight: 54px;
    --rkPastillaItemHeight: 60px;
    --rkPastillaGraficaHeight: 50px;
    --rkPastillaColor: #6D6E6C;
    --rkTablaMargin: 0.2%;
    --rkTablaFilaHeight: 23px;
    --rkTablaFilaPadding: 0px;
}

.rk-container {
    position: relative;
    width: 100%;
    /*margin-left: var(--rkPastillaMarginLeft);
    margin-right: var(--rkPastillaMarginRigth);*/
    margin-left: 2%;
    margin-right: 2%;
}

.rk-pastillas {
    position:relative;
    z-index: 1;
    /*height: var(--rkPastillaItemHeight);*/
    height: 60px;
}

.rk-pastillas-titulo {
    padding: 10px;
    /*height: var(--rkPastillaTituloHeight);*/
    height: 54px;
    float: left;
    text-align: center;
    line-height: 15px;
}

    .rk-pastillas-titulo.auditoria {
        /*width: var(--rkPastillaAuditoriaWidth);*/
        width: 15%;
    }

    .rk-pastillas-titulo-xxl {
        font-size: 3vw;
        font-weight: bolder;
        color: var(--rkPastillaColor);
    }

    .rk-pastillas-titulo-l {
        font-size: 1.4vw;
        color: var(--rkPastillaColor);
    }

    .rk-pastillas-titulo-m {
        font-size: 1vw;
        color: var(--rkPastillaColor);
    }

    .rk-pastillas-titulo-xs {
        font-size: 0.75vw;
        color: var(--rkPastillaColor);
    }

    .rk-pastillas-titulo-xxs {
        font-size: 0.5vw;
        color: var(--rkPastillaColor);
    }

    .rk-pastillas-titulo.x1 {
        /*width: calc(100% - var(--rkPastillaAuditoriaWidth) - 1%);*/
        width: 84%;
    }

    .rk-pastillas-titulo.x2 {
        /*width: calc(((100% - var(--rkPastillaAuditoriaWidth)) - 1%) / 2);*/
        width: 42%;
    }

    .rk-pastillas-titulo.x3 {
        /*width: calc(((100% - var(--rkPastillaAuditoriaWidth)) - 1%) / 3);*/
        width: 28%;
    }

    .rk-pastillas-titulo.x4 {
        /*width: calc(((100% - var(--rkPastillaAuditoriaWidth)) - 1%) / 4);*/
        width: 21%;
    }

.rk-pastillas-item {
    padding: 10px;
    /*height: var(--rkPastillaItemHeight);*/
    height: 60px;
    float: left;
    text-align: center;
    line-height: 15px;
}

    .rk-pastillas-item-xxl {
        font-size: 2.5vw;
    }

    .rk-pastillas-item-l {
        font-size: 1.5vw;
    }

    .rk-pastillas-item-m {
        font-size: 1vw;
    }

    .rk-pastillas-item-s {
        font-size: 0.85vw;
    }

    .rk-pastillas-item.superior {
        border-radius: 25px 25px 0px 0px;
        padding-top: 15px;
        font-weight: bolder;
    }

    .rk-pastillas-item.inferior {
        border-radius: 0px 0px 25px 25px;
        margin-top: -20px;
        font-weight: bolder;
    }

    .rk-pastillas-item.x1 {
        /*width: calc((100% - (var(--rkPastillaAuditoriaWidth) + ((var(--rkPastillaItemMarginInner) + var(--rkPastillaItemMarginOuter)) * 2 )) - 1%) / 2);*/
        width: 41.55%;
    }

    .rk-pastillas-item.x2 {
        /*width: calc((100% - (var(--rkPastillaAuditoriaWidth) + ((var(--rkPastillaItemMarginInner) + var(--rkPastillaItemMarginOuter)) * 4 )) - 1%) / 4);*/
        width: 20.05%;
    }

    .rk-pastillas-item.x3 {
        /*width: calc((100% - (var(--rkPastillaAuditoriaWidth) + ((var(--rkPastillaItemMarginInner) + var(--rkPastillaItemMarginOuter)) * 6 )) - 1%) / 6);*/
        width: 13.05%;
    }

    .rk-pastillas-item.x4 {
        /*width: calc((100% - (var(--rkPastillaAuditoriaWidth) + ((var(--rkPastillaItemMarginInner) + var(--rkPastillaItemMarginOuter)) * 8 )) - 1%) / 8);*/
        width: 9.55%;
    }

    .rk-pastillas-item.superior.ranking {
        border: 2px solid #DCDCDC;
        background-color: #DCDCDC;
        color: white;
        /*margin-left: var(--rkPastillaItemMarginInner);
        margin-right: var(--rkPastillaItemMarginOuter);*/
        margin-left: 0.15%;
        margin-right: 0.8%;
    }

    .rk-pastillas-item.inferior.ranking {
        border: 2px solid #8c8c8c;
        background-color: #8c8c8c;
        color: white;
        /*margin-left: var(--rkPastillaItemMarginInner);
        margin-right: var(--rkPastillaItemMarginOuter);*/
        margin-left: 0.15%;
        margin-right: 0.8%;
    }

    .rk-pastillas-item.superior.bajo {
        border: 2px solid #FFBAAB;
        background-color: #FFBAAB;
        color: white;
        /*margin-left: var(--rkPastillaItemMarginOuter);
        margin-right: var(--rkPastillaItemMarginInner);*/
        margin-left: 0.8%;
        margin-right: 0.15%;
    }

    .rk-pastillas-item.inferior.bajo {
        border: 2px solid #FC5C39;
        background-color: #FC5C39;
        color: white;
        /*margin-left: var(--rkPastillaItemMarginOuter);
        margin-right: var(--rkPastillaItemMarginInner);*/
        margin-left: 0.8%;
        margin-right: 0.15%;
    }

    .rk-pastillas-item.superior.medio {
        border: 2px solid #FCFFAB;
        background-color: #FCFFAB;
        color: var(--rkPastillaColor);
        /*margin-left: var(--rkPastillaItemMarginOuter);
        margin-right: var(--rkPastillaItemMarginInner);*/
        margin-left: 0.8%;
        margin-right: 0.15%;
    }

    .rk-pastillas-item.inferior.medio {
        border: 2px solid #F7FC39;
        background-color: #F7FC39;
        color: var(--rkPastillaColor);
        /*margin-left: var(--rkPastillaItemMarginOuter);
        margin-right: var(--rkPastillaItemMarginInner);*/
        margin-left: 0.8%;
        margin-right: 0.15%;
    }

    .rk-pastillas-item.superior.alto {
        border: 2px solid #CBFFB2;
        background-color: #CBFFB2;
        color: white;
        /*margin-left: var(--rkPastillaItemMarginOuter);
        margin-right: var(--rkPastillaItemMarginInner);*/
        margin-left: 0.8%;
        margin-right: 0.15%;
    }

    .rk-pastillas-item.inferior.alto {
        border: 2px solid #17D401;
        background-color: #17D401;
        color: white;
        /*margin-left: var(--rkPastillaItemMarginOuter);
        margin-right: var(--rkPastillaItemMarginInner);*/
        margin-left: 0.8%;
        margin-right: 0.15%;
    }

.rk-grafica {
    position:relative;
    z-index: 1;
    /*height: var(--rkPastillaGraficaHeight);*/
    height: 50px;
}

.rk-valoracion {
    padding: 10px;
    /*height: var(--rkPastillaGraficaHeight);*/
    height: 50px;
    float: left;
    text-align: center;
    line-height: 15px;
}

    .rk-valoracion.titulo {
        padding: 20px;
        /*width: var(--rkPastillaAuditoriaWidth);*/
        width: 15%;
    }

    .rk-valoracion.valores {
        /*width: calc(100% - var(--rkPastillaAuditoriaWidth) - 1%);*/
        /*width: 1%;*/
    }

.rk-tabla {
    /*height: var(--rkTablaFilaHeight);*/
    height: 23px;
    line-height: 15px;
    float: left;
    text-align: center;
    width: 100%;
}

    .rk-tabla-indicador {
        float: left;
        /*width: var(--rkPastillaAuditoriaWidth);*/
        width: 15%;
    }

    .rk-tabla-columna {
        float: left;
        /*width: calc((100% - (var(--rkPastillaAuditoriaWidth) + var(--rkTablaMargin) + 1%))/16);*/
    }

    .rk-tabla-indicador.titulo {
        border-radius: 25px 25px 0px 0px;
        padding-top: var(--rkTablaFilaPadding);
        padding-bottom: var(--rkTablaFilaPadding);
        font-weight: bold;
        border: 2px solid #FF9B30;
        background-color: #FF9B30;
        color: white;
        margin-left: var(--rkTablaMargin);
        /*width: var(--rkPastillaAuditoriaWidth);*/
        width: 15%;
    }

    .rk-tabla-indicador.valores {
        border-radius: 0px;
        padding-top: var(--rkTablaFilaPadding);
        padding-bottom: var(--rkTablaFilaPadding);
        font-weight: bold;
        border: 2px solid #DCDCDB;
        background-color: #DCDCDB;
        color: var(--rkPastillaColor);
        margin-left: var(--rkTablaMargin);
        /*width: var(--rkPastillaAuditoriaWidth);*/
        width: 15%;
    }

    .rk-tabla-columna.titulo {
        border-radius: 25px 25px 0px 0px;
        padding-top: var(--rkTablaFilaPadding);
        padding-bottom: var(--rkTablaFilaPadding);
        font-weight: bold;
        border: 2px solid #FF9B30;
        background-color: #FF9B30;
        color: white;
        margin-left: var(--rkTablaMargin);
        /*width: calc((100% - (var(--rkPastillaAuditoriaWidth) + (var(--rkTablaMargin) * 17) + 1%)) / 16);*/
        width: 5.04%;
    }

    .rk-tabla-columna.valores {
        border-radius: 0px;
        padding-top: var(--rkTablaFilaPadding);
        padding-bottom: var(--rkTablaFilaPadding);
        font-weight: bold;
        border: 2px solid #F3F3F3;
        background-color: #F3F3F3;
        color: var(--rkPastillaColor);
        margin-left: var(--rkTablaMargin);
        /*width: calc((100% - (var(--rkPastillaAuditoriaWidth) + (var(--rkTablaMargin) * 17) + 1%)) / 16);*/
        width: 5.04%;
    }

    .rk-tabla-indicador-titulo-m {
        font-size: 1vw;
        color: white;
    }

    .rk-tabla-indicador-valores-m {
        font-size: 0.8vw;
        color: var(--rkPastillaColor);
    }

    .rk-tabla-columna-titulo-m {
        font-size: 1vw;
        color: white;
    }

    .rk-tabla-columna-valores-m {
        font-size: 0.8vw;
        color: var(--rkPastillaColor);
    }

.rk-clasificacion {
    padding: 10px;
    text-align: center;
    line-height: 20px;
}

    .rk-titulo {
        font-weight: bolder;
        color: white;
        background-color: #FFA500;
    }

    .rk-fila {
        font-weight: normal;
        color: black;
    }

    .rk-par {
        background-color: #FFE5B0;
    }

    .rk-impar {
        background-color: #FFF6E2;
    }

.rk-resultados {
    position: relative;
    z-index: 1;
    height: 600px;
}

@media screen and (max-width: 1000px) {
    .rk-pastillas {
        height: 85px;
    }

    .rk-pastillas-item {
        padding: 8px;
        height: 82px;
        line-height: 13px;
        border-radius: 30px 30px 30px 30px;
    }
}

@media screen and (max-width: 700px) {
    .rk-pastillas {
        height: 70px;
    }

    .rk-pastillas-item {
        padding: 0px;
        height: 68px;
        line-height: 15px;
        border-radius: 20px 20px 20px 20px;
    }
}
