/* ====== REGISTRO DE FUENTES ====== */
@font-face {
    font-family: 'Roboto';
    src: url('./fuentes/roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900; /* admite rango de pesos */
    font-stretch: 75% 100%;
    font-style: normal;
}

/* Roboto italic (variable weight) */
@font-face {
    font-family: 'Roboto';
    src: url('./fuentes/roboto/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 75% 100%;
    font-style: italic;
}

/* ====== REGISTRO DE CONSTANTES ====== */
:root {
    --g-blue-dark: #213250;
    --g-gold: #CE9332;
    --g-white: #ffffff;
    --g-gray-light: #d3d3d3;
    --g-white-alpha-18: rgba(255, 255, 255, 0.18);
    --g-blue-light: #A4C5D9;
    --g-green-dark: #10362E;
    --g-yellow-bright: #fbbf24;
    --g-white-alpha-60: rgba(255, 255, 255, 0.6);
    --g-white-alpha-80: rgba(255, 255, 255, 0.8);
    --g-green-light: #a7f3d0;
    --g-green-medium: #6ee7b7;
    --g-gray-warm: #F5F4F1;
    --g-black: #000000;
}

/* ====== COMPONENTE: Título ====== */
.title-cnee_ {
    font-family: "Roboto", Sans-serif;
    font-weight: 700;
    color: var(--g-gold) !important;
}

/* ====== COMPONENTE: Seleccionador */
.select-cnee_container,
.select-cnee_container .columna_1,
.select-cnee_container .columna_2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.select-cnee_container {
    justify-content: space-between;
}
.select-cnee_ {
    width: auto;
    border-radius: 4rem;
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    background: url("./../img/arrow-select.svg") no-repeat right 10px center !important;
    background-size: 12px !important;
    border-color: var(--g-blue-dark) !important;
    color: var(--g-blue-dark) !important;
    padding: 5px 28px 5px 15px;
    line-height: 1;
    height: auto;
    font-weight: 400;
    cursor: pointer;
}

/* ====== COMPONENTE: Tabla ====== */
.tabla-cnee_container {
    background: var(--g-blue-dark);
    color: var(--g-white);
    overflow: hidden;
    font-family: "Roboto", Sans-serif;
}

.tabla-cnee_barra {
    height: 30px;
    background: var(--g-white);
    border: 1px solid var(--g-gray-light);
}

.tabla-cnee_fila {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--g-white-alpha-18);
}

.tabla-cnee_fila:last-child {
    border-bottom: none;
}

.tabla-cnee_label {
    font-size: 15px;
    line-height: 1.3;
    opacity: 0.95;
}

.tabla-cnee_valor {
    font-size: 15px;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
    min-width: 7ch;
}

@media (max-width: 480px){
    .tabla-cnee_fila {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .tabla-cnee_valor {
        text-align: left;
    }
}

/* ====== COMPONENTE: Párrafo ====== */
.parrafo-cnee_ {
    font-family: "Roboto", Sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 114%;
}

/* ====== COMPONENTE: Título de gráfica ====== */
.titulo-grafica-cnee_container {
    text-align: center;
    & h3 {
        margin-bottom: 0px;
    }
}

/* ====== COMPONENTE: Radio ====== */
.radio-cnee_container {
    background: var(--g-blue-dark);
    color: var(--g-white);
    font-family: "Roboto", Sans-serif;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
}
.radio-cnee_label {
    font-weight: 500;
    font-size: 15px;
}
.radio-cnee_opcion {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    gap: 6px;
    position: relative;
}
.radio-cnee_opcion input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.radio-cnee_custom {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    border: 3px solid var(--g-white);
    box-sizing: border-box;
}
.radio-cnee_opcion input[type="radio"]:checked + .radio-cnee_custom {
    background: var(--g-gold);
    border-color: var(--g-white);
}
.radio-cnee_opcion input[type="radio"]:not(:checked) + .radio-cnee_custom {
    border-color: var(--g-white);
}

/* ====== COMPONENTE: Ranking (barra %) ====== */
.ranking-cnee_container{
    background: var(--g-blue-light);          
    border-radius: 18px;
    padding: 25px 50px;
    max-width: 980px;              
    margin: 0 auto;
    font-family: "Roboto", Sans-serif;
}

.ranking-cnee_header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.ranking-cnee_title{
    color: var(--g-blue-dark);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px;
}

.ranking-cnee_year{
    color: var(--g-blue-dark);
    font-size: 22px;
    font-weight: 800;
}

.barra-cnee_container{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    max-width: 750px; 
}

.barra-cnee_track{
    flex: 1 1 auto;
    height: 16px;
    background: var(--g-blue-light);
    border-radius: 2px;
    overflow: hidden;
}

.barra-cnee_fill{
    height: 100%;
    background: var(--g-blue-dark);
}

.barra-cnee_info{
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.barra-cnee_porcentaje{
    color: var(--g-blue-dark);
    font-size: 18px;
    font-weight: 700;
}

.barra-cnee_porcentaje span{
    font-size: 14px;
    font-weight: 700;
    margin-left: 1px;
}

.barra-cnee_label{
    color: var(--g-blue-dark);
    font-size: 12px;
    opacity: .9;
}
@media (max-width: 640px){
    .ranking-cnee_container{ box-shadow: 0 0 0 6px var(--g-blue-dark); }
    .barra-cnee_label{ display: none; }
}

/* ====== COMPONENTE: Tarjetas ranking ====== */
.ranking-cards-cnee_container {
    display: flex;
    gap: 20px;
    justify-content: center;
    background: var(--g-blue-dark);
    padding: 20px;
    flex-wrap: wrap;
}

.ranking-cards-cnee_card {
    border: 1.5px solid rgba(255,255,255,0.7);
    border-radius: 12px;
    padding: 20px 30px;
    text-align: center;
    color: var(--g-white);
    min-width: 180px;
    flex: 1 1 180px;
    max-width: 240px;
}

.ranking-cards-cnee_num {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.ranking-cards-cnee_porcentaje {
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
}

.ranking-cards-cnee_porcentaje span {
    font-size: 24px;
    font-weight: 700;
}

.ranking-cards-cnee_label {
    font-size: 14px;
    margin-top: 6px;
    line-height: 1.3;
    opacity: 0.9;
}
@media (max-width: 640px) {
    .ranking-cards-cnee_container {
        gap: 12px;
        padding: 16px;
    }
    .ranking-cards-cnee_card {
        padding: 16px 20px;
    }
}

/* ====== COMPONENTE: Gráfica de barras simple ====== */
.grafica-barras-cnee_container {
    background: var(--g-blue-dark);
    padding: 20px;
    border-radius: 6px;
    display: inline-block;
}
.grafica-barras-cnee_chart {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    height: 200px;
    padding-bottom: 20px;
    position: relative;
}
.grafica-barras-cnee_bar {
    width: 40px;
    background: var(--g-gold);
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: height 0.4s ease;
}
.grafica-barras-cnee_bar::after {
    content: attr(data-label);
    position: absolute;
    bottom: -20px;
    color: var(--g-white);
    font-size: 14px;
}
.grafica-barras-cnee_bar:nth-child(2) {
    background: var(--g-white);
}

/* ====== COMPONENTE: Card de inicio de sesión ====== */
.login-cnee_card {
    max-width: 400px;
    width: 100%;
    background: var(--g-green-dark);
    mix-blend-mode: multiply;
    padding: 45px 75px;
    border-radius: 50px;
    color: var(--g-white);
    text-align: center;
    font-family: "Roboto", Sans-serif;
}

.login-cnee_title {
    font-size: 22px !important;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--g-yellow-bright) !important;
}

.login-cnee_form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-cnee_input {
    padding: 10px 14px !important;
    border: 1px solid var(--g-blue-light) !important;
    border-radius: 30px !important;
    background: transparent !important;
    color: var(--g-white);
    font-size: 14px !important;
}

.login-cnee_input::placeholder {
    color: var(--g-white-alpha-60);
}

.login-cnee_options {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 4px;
}

.login-cnee_remember {
    display: flex;
    align-items: center;
    gap: 4px;
}

.login-cnee_link {
    color: var(--g-white-alpha-80);
    text-decoration: none;
    font-size: 12px;
}

.login-cnee_link:hover {
    text-decoration: underline;
    color: #fff;
    font-weight: bold;
}

.login-cnee_button {
    background: var(--g-green-light);
    color: var(--g-green-dark);
    border: none;
    border-radius: 30px;
    padding: 10px;
    font-size: 14px;
    cursor: pointer;
    font-weight: bold !important;
    margin-top: 8px;
}

.login-cnee_button:hover {
    background: var(--g-green-medium);
}

.login-cnee_divider {
    font-size: 12px;
    color: var(--g-gray-warm);
    font-weight: bold;
    margin: 16px 0 8px;
}

.login-cnee_social {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.login-cnee_social-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--g-white);
    color: var(--g-black);
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
}
.login-cnee_social img {
    width: 35px;
}

.login-cnee_register {
    margin-top: 18px;
    font-size: 12px;
}