/**
* GUIA DE ESTILOS
DE LA FUENTE
Para registrar la fuente existen 3 formas, ambas funcionales:
1. Por medio de registro en el HEAD
Agregar las siguientes lineas en la etiqueta del HTML
2. Por medio del archivo CSS
Agregar el siguiente código al archivo CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
3. Por medio del archivo .ttf
Estos archivos los encontrará en el zip que descargó en la carpeta /fuentes/roboto/
DE LOS COLORES
Acontinuación los colores corporativos utilizados
*/
:root {
--blue-dark: #212f4b;
--blue: #213250;
--blue-2: #005386;
--blue-3: #2c5584;
--gold: #c1953f;
--green: #10362e;
--gray: #666869;
--light:#dcdddd;
--light-blue: #a4c5d9;
--light-gold: #f1e7cc;
--light-green: #c7e1d0;
--light-gray: #c6d5df;
--bg-gradient: linear-gradient(90deg, #005386 0%, #102E4F 100%);
--transition: 0.3s all ease-in-out;
--box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 25%);
}
/* ====== COMPONENTE: Título ====== */
.title-cnee_ {
font-family: "Roboto", Sans-serif;
font-weight: 700;
color: #CE9332 !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: 100%;
border-radius: 4rem;
font-size: 14px;
appearance: none;
-webkit-appearance: none;
background: url("./../images/arrow-select.svg") no-repeat right 10px center !important;
background-size: 12px !important;
border-color: #213250 !important;
color: #213250 !important;
padding: 5px 28px 5px 15px;
line-height: 1;
height: auto;
font-weight: 400;
cursor: pointer;
}
/* ====== COMPONENTE: Tabla ====== */
.tabla-cnee_container {
background: #213250;
color: #ffffff;
overflow: hidden;
font-family: "Roboto", Sans-serif;
justify-content: flex-end;
}
.tabla-cnee_barra {
height: 30px;
background: #fff;
border: 1px solid #d3d3d3;
}
.tabla-cnee_fila {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 16px;
padding: 12px 18px;
border-top: 1px solid rgba(255, 255, 255, 0.18); /* separador semitransparente */
}
.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: 14px;
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: #213250;
color: #ffffff;
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 #fff;
box-sizing: border-box;
}
.radio-cnee_opcion input[type="radio"]:checked + .radio-cnee_custom {
background: #CE9332;
border-color: #fff;
}
.radio-cnee_opcion input[type="radio"]:not(:checked) + .radio-cnee_custom {
border-color: #fff;
}
/* ====== COMPONENTE: Ranking (barra %) ====== */
.ranking-cnee_container{
background: #A4C5D9;
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: #213250;
font-size: 16px;
font-weight: 700;
margin: 0 0 4px;
}
.ranking-cnee_year{
color: #213250;
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: #A4C5D9;
border-radius: 2px;
overflow: hidden;
}
.barra-cnee_fill{
height: 100%;
background: #213250;
}
.barra-cnee_info{
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.barra-cnee_porcentaje{
color: #213250;
font-size: 18px;
font-weight: 700;
}
.barra-cnee_porcentaje span{
font-size: 14px;
font-weight: 700;
margin-left: 1px;
}
.barra-cnee_label{
color: #213250;
font-size: 12px;
opacity: .9;
}
@media (max-width: 640px){
.ranking-cnee_container{ box-shadow: 0 0 0 6px #213250; }
.barra-cnee_label{ display: none; }
}
/* ====== COMPONENTE: Tarjetas ranking ====== */
.ranking-cards-cnee_container {
display: flex;
gap: 20px;
justify-content: center;
background: #213250;
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: #ffffff;
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: #213250;
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: #CE9332;
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: #fff;
font-size: 14px;
}
.grafica-barras-cnee_bar:nth-child(2) {
background: #ffffff;
}
/* ====== COMPONENTE: Card de inicio de sesión ====== */
.login-cnee_card {
max-width: 400px;
background: #10362E;
mix-blend-mode: multiply;
padding: 45px;
border-radius: 16px;
color: #fff;
text-align: center;
font-family: "Roboto", Sans-serif;
}
.login-cnee_title {
font-size: 22px !important;
font-weight: 700;
margin-bottom: 20px;
color: #fbbf24 !important;
}
.login-cnee_form {
display: flex;
flex-direction: column;
gap: 12px;
}
.login-cnee_input {
padding: 10px 14px;
border: 1px solid #A4C5D9 !important;
border-radius: 30px !important;
background: transparent;
color: #fff;
font-size: 14px;
}
.login-cnee_input::placeholder {
color: rgba(255,255,255,0.6);
}
.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: rgba(255,255,255,0.8);
text-decoration: none;
font-size: 12px;
}
.login-cnee_link:hover {
text-decoration: underline;
}
.login-cnee_button {
background: #a7f3d0;
color: #10362e;
border: none;
border-radius: 30px;
padding: 10px;
font-size: 14px;
cursor: pointer;
font-weight: bold !important;
margin-top: 8px;
}
.login-cnee_button:hover {
background: #6ee7b7;
}
.login-cnee_divider {
font-size: 12px;
color: #F5F4F1;
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: #fff;
color: #000;
font-weight: bold;
cursor: pointer;
font-size: 16px;
}
.login-cnee_social img {
width: 35px;
}
.login-cnee_register {
margin-top: 18px;
font-size: 12px;
}
.radio-style {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 1px solid #1d1d1dff;
border-radius: 50%;
display: inline-block;
position: relative;
top: 7px;
}
.radio-style:checked::before {
content: '';
width: 10px;
height: 10px;
background: #555;
border-radius: 50%;
position: absolute;
top: 3px;
left: 3px;
}