/* -------------*/
/* Custom       */
/* -------------*/

:root {
    /* Font families */

    --ff-uibase: 'Inter', sans-serif;
    --ff-display: 'Poppins', sans-serif;
    --ff-idnumber: 'Oxanium', cursive;

    /* colors */

    /* light theme neutrals */
    --theme-N0:         #FFFFFF;
    --theme-N1:         #F2F3F7;
    --theme-N2:         #E2E2EA;
    --theme-N3:         #C6CBD9;
    --theme-N4:         #9A9AAF;
    --theme-N5:         #7E7E8F;
    --theme-N6:         #656575;
    --theme-N7:         #535362;
    --theme-N8:         #2E2E3A;
    --theme-N9:         #262631;
    --theme-N10:        #16161E;
    --theme-N11:        #07070C;

    /* Brand colors */
    --mit-brand:        #811197;
    --mit-brand_dark:   #5A0C6A;
    --mit-brand_accent: #E01E5A;

    /* System colors */

    --blue400:          #0052CC;
    --blue300:          #0065FF;

    /* custom colors */

    --mark-green:       #24CA49;
    --mark-red:         #FD4438;

    /* Skill levels */
    --skill_level4:     #05C766;
    --skill_level3:     #FFB443;
    --skill_level2:     #FF8743;
    --skill_level1:     #D53B58;
    --skill_levelsub:   #86225C;

    /* Area colors */
    --area_lc:          #06D7F6;
    --area_mat:         #62F783;
    --area_soc:         #F4946B;
    --area_cn:          #F9B546;
    --area_eng:         #A466F1;

    /* Font sizes */
    --fs-super: 56px;   /* display1 */
    --fs-extra: 48px;   /* display2 */
    --fs-large: 44px;   /* display3 */
    --fs-900:   40px;   /* display4 */
    --fs-800:   36px;   /* display5 */
    --fs-700:   32px;   /* display6 */
    --fs-600:   28px;   /* h1 - Page title and main subject */
    --fs-500:   24px;   /* h2 - Subtitles */
    --fs-400:   20px;   /* h3 - Section titles */
    --fs-300:   18px;   /* h4 - Body Large */
    --fs-200:   16px;   /* h5 - Body Medium */
    --fs-100:   14px;   /* h6 - Body Small --micro captions-- usar con cuidado*/

    /* elevation */

    --elevation-1:
        0.5px 2.4px 2.2px rgba(0, 0, 0, 0.014),
        1.8px 7.7px 5.4px rgba(0, 0, 0, 0.02),
        4px 17.3px 10.1px rgba(0, 0, 0, 0.025),
        7.8px 33.9px 18.1px rgba(0, 0, 0, 0.03),
        14.6px 64px 33.8px rgba(0, 0, 0, 0.036),
        32px 140px 81px rgba(0, 0, 0, 0.05);
    
    --elevation-2:
        0px -4.1px 9.8px rgba(0, 0, 0, 0.115),
        0px 0.5px 20.4px rgba(0, 0, 0, 0.156),
        0px 13.3px 33.6px rgba(0, 0, 0, 0.18),
        0px 32.6px 51.3px rgba(0, 0, 0, 0.2),
        0px 55px 76.9px rgba(0, 0, 0, 0.225),
        0px 76px 121px rgba(0, 0, 0, 0.3);
}

/* -------------*/
/* Reset        */
/* -------------*/

/* Box sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Reset margins */
body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
picture {
    margin: 0; 
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-weight: 400;
}

/* set up the body */

body {
    font-family: var(--ff-display);
    color: var(--theme-N7);
    background-color: var(--theme-N1);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
}

/* reset images */
img,
picture {
    max-width: 100%;
    display: block;
}

/* reset form elements */
input,
button,
textarea,
select {
    font: inherit;
}

/* --------------*/
/* Utilities     */
/* --------------*/

/* layouts */



.container {
    padding-inline: 1.5rem; /* espacio a izquierda y derecha */
    margin-inline: auto; /* el contenido siempre va a quedar centrado */
    max-width: 90rem; /* ancho máximo de 1280px */
    display: flex;
    flex-direction: column;
    gap: 2rem;
}



/* organizar contenidos y espaciarlos en un bloque */
.content_block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.col-2 {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.col-3 {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}




/* link styles */

.normal-link,
.soft-link,
.neutral-link  {
    font-weight: 600;
}

.normal-link,
.soft-link {
    color: var(--blue400);
}

.soft-link {
    text-decoration: none;
}

.neutral-link {
    text-decoration: none;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.normal-link:hover,
.soft-link:hover,
.neutral-link:hover {
    text-decoration: underline;
    color: var(--blue300);
}

.widget {
    border-radius: 24px;
    box-shadow: var(--elevation-1);
    background-color: var(--theme-N0);
    overflow: hidden;
}


/* text utilities */

.caption_micro {
    font-size: var(--fs-100); 
    font-weight: 500; 
    letter-spacing: 0.8px;
} 

.caption_small {
    font-size: var(--fs-200); 
    font-weight: 400; 
    letter-spacing: 0.4px;
    line-height: 1.2rem;
}

.caption_medium {
    font-size: var(--fs-300); 
    font-weight: 500;
    line-height: 1.3rem;
}

.hint {
    line-height: 1.3em;
    color: var(--theme-N5);
}

.hint_bold {
    font-weight: 600;
}

/* --------------*/
/* Components    */
/* --------------*/

.btn_line {
    cursor: pointer;
    color: var(--blue400);
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-200);
    padding-inline: 1.5rem;
    border-radius: 44px;
    background-color: var(--theme-N0);
    border: 1px solid var(--blue400);
    height: 44px;
}

.btn_line_dark {
    cursor: pointer;
    color: var(--theme-N0);
    font-family: var(--ff-display);
    font-weight: 500;
    border-radius: 44px;
    background-color: transparent;
    border: 1px solid var(--theme-N0);
    height: 44px;
}

.btn_line:hover,
.btn_line_dark:hover {
    color: var(--theme-N0);
    border: 1px solid var(--blue300);
    background-color: var(--blue300);
}

.btn_box {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 35em) {
    .btn_box {
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }
}

/* mobile header */


.menu_toggle {
    border: none;
    background-color: transparent;
    cursor: pointer;
    stroke: var(--theme-N4);
    height: 64px;
    aspect-ratio: 1;
}

.menu_toggle:hover {
    stroke: var(--mit-brand_dark);
}

.logo{
    margin-left: 1.5rem;
    cursor: pointer;
}

.mobile_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.sidebar_menu {
    display: none;
}

.page_title {
    font-family: var(--ff-display);
    font-size: var(--fs-600);
    font-weight: 600;
    color: var(--theme-N7);
}


/* school card */

.school_card {
    color: var(--theme-N3);
    background: linear-gradient(104deg, #0E1F39 1%, #60206D 100%);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    border-radius: 28px;
    padding: 24px;
    box-shadow: var(--elevation-1);
}

.school_name {
    color: var(--theme-N0);
    font-family: var(--ff-display);
    font-size: var(--fs-600);
    font-weight: 600;
    line-height: 1.2em;
    letter-spacing: 0.8px;
}

.school_id {
    color: white;
    font-family: var(--ff-idnumber);
    font-size: var(--fs-600);
    font-weight: 400;
    letter-spacing: 1.5px;
    pointer-events: none; 
}


.school_id > a {
    text-decoration: none;
    color: inherit;
}/*safari convierte el DANE en teléfono */

.caption_small span {
    font-weight: 700;
    color: white;
}

.school_card .btn_line_dark {
    margin-top: 1rem;
}


/* widget clasificación plantel */

.school_rank {
    border-radius: 24px;
    box-shadow: var(--elevation-1);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    background-color: var(--theme-N0);
    box-shadow: var(--elevation-1);
}

.rank_widget_title {
    font-size: var(--fs-400);
    font-weight: 600;
}

.widget_rank_ref {
    font-size: var(--fs-100);
    font-family: var(--ff-uibase);
    color: var(--theme-N5);
    line-height: 1.2rem;
    margin-top: auto;
}

.rank_items {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin-bottom: 8px;
    margin-top: auto;
}

.rank_content {
    align-self: center;
    line-height: 24px;
}

.school_rank_badge {
    justify-self: end;
}

.school_rank_badge img {
    min-width: 150px;
}


/* widget estudiantes evaluados */

.students_counter {
    border-radius: 24px; 
    background-color: var(--theme-N0);
    box-shadow: var(--elevation-1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.super_counter {
    font-size: var(--fs-800);
    font-weight: 600;
    line-height: 44px;
    font-family: var(--ff-display);
    text-align: center;
    padding-top: 1.5rem;
    margin-top: auto;
}

.students_counter_caption {
    font-weight: 400;
    line-height: 1.2rem;
    text-align: center;
    padding-inline: 2rem;
}

.students_counter img {
    height: 120px;
    aspect-ratio: 1/1;
    margin: 0 auto;
    margin-top: auto;
}




/*-----------------------------------*/
/* componente filtro comparativo */
/*-----------------------------------*/

.mit_filter_section {
    display: flex;
    align-items: center;
  }
  
  .mit_filter {
    display: flex;
    align-items: center;  
    padding-left: 1rem;
    padding-right: 1rem;
    border: 1px solid var(--theme-N5);
    height: 48px;
    min-width: 180px;
    border-radius: 12px;
    color: var(--theme-N6);
    cursor: pointer;
    position: relative;
  }
  
  .mit_filter:hover {
    background-color: white;
    color: #1A73E8;
    border: 1px solid #1A73E8;
    box-shadow: 0 6px 20px rgb(56, 56,116, 0.3);
  }
  
  .mit_filter_active {
    background-color: white;
    color: #1A73E8;
    border: 1px solid #1A73E8;
    box-shadow: 0 6px 20px rgb(56, 56,116, 0.3);
  }
  
  .mit_filter_selection {
    margin-left: 8px;
    margin-right: auto;
    font-family: var(--ff-display);
    font-weight: 600;
  }
  
  .mit_filter_arrow {
    padding-top: 8px;
  }
  
  /* opciones de la lista en el filtro */
  
  .mit_filter_menu {
    position: absolute;  
    background-color: white;
    padding: 24px;
    top: 110%;
    visibility: hidden;
    color: var(--theme-N7);
    border-radius: 1rem;
    z-index: 1;  
    left: 0px;
    width: 260px;
    box-shadow: 0 6px 20px rgb(56, 56,116, 0.3);
    overflow: hidden;
  }
  
  .mit_filter_menu.show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;  
    opacity: 1;
  }
  @-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
  }
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }
  
  /*sirve para voltear la flecha cuando está activo el filtro*/
  .flipped {
    transform: rotate(180deg);
  }
  
  
  .mit_filter_caption {
    color: var(--theme-N5);
  }
  
  .mit_filter_list {
    position: relative;
    color: var(--theme-N6);
    list-style: none;
    padding-left: 0;
  }
  
  .mit_filter_item {  
    padding-left: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: auto;
    line-height: 2rem;
    transition: color 0.2s;
  }
  
  .mit_filter_item:hover {
    background-color: #DEEBFF;
    border-radius: 8px;
  }
  
  .active_option {
    color: #1A73E8;
    cursor: pointer;
  }
  
  .active_option::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 24px;
    height: 20px;
  }
  
  .mit_filter_list_option{
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 21px;
  }
  
  .mit_filter_list_caption {
    color: var(--theme-N5);
    font-family: var(--ff-display);
    line-height: 1.5rem;
  }

/*-----------------------------------*/
/* FIN filtro comparativo */
/*-----------------------------------*/

.global_score {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 2rem;
}

.global_score_grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    margin-bottom: 1rem;
    align-items: center;
}

.chart_global_score {
    padding: 1rem;
}

/* --------widget for scores component-----------*/

.score_grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.widget_area .score_grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.widget_score {
    background-color: var(--theme-N0);
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: var(--elevation-1);
    flex: 1 1 320px;
}

.widget_score .caption_medium {
    font-size: var(--fs-400);
    color: var(--theme-N5);
    font-weight: 600;
}

.score_result {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.score_result_year {
    font-family: var(--ff-uibase);
    font-weight: 600;
    font-size: var(--fs-400);
    color: var(--theme-N5);
    line-height: 1.2rem;
}

.score {
    font-size: var(--fs-600);
    font-weight: 600;
    line-height: 1em;
    color: var(--theme-N6);
    font-family: var(--ff-display);
    letter-spacing: -0.4px;
}

.score_ref {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    gap: 1rem;
}

.score_check {
    font-size: var(--fs-400);
    font-family: var(--ff-uibase);
    letter-spacing: -0.4px;
    font-weight: 600;
    line-height: 2rem;
    margin-left: 2rem;
    position: relative;
}

.score_check_label {
    line-height: 1rem;
    font-weight: 400;
    font-size: var(--fs-100);
    color: var(--theme-N4);
    font-family: var(--ff-uibase);
}
.label_ref_bold {
    font-weight: 600;
}

.score_ref .score_up {
    color: var(--mark-green);
}

.score_up::before {
    position: absolute;
    right: 24px;
    bottom: 8px;
    content: "";
    background-image: url(../images/arrow-up.svg);
    background-size: 24px 24px;
    width: 24px;
    height: 24px;
}

.score_ref .score_down {
    color: var(--mark-red);
}

.score_down::before {
    position: absolute;
    right: 24px;
    bottom: 8px;
    content: "";
    background-image: url(../images/arrow-down.svg);
    background-size: 24px 24px;
    width: 24px;
    height: 24px;
}

.data_bar {
    height: 4px;
    border-radius: 4px;
    background: var(--theme-N3);
    margin: 12px 0;
}

.data_bar_marker {
    height: 4px;
    border-radius: 4px;
}

.global_score .data_bar_marker {
    background: linear-gradient(90deg, #E323FF, #7517F8);
    box-shadow:
      0.2px 1.1px 2.2px rgba(227, 35, 255, 0.169),
      0.4px 2.5px 5.3px rgba(227, 35, 255, 0.242),
      0.8px 4.8px 10px rgba(227, 35, 255, 0.3),
      1.3px 8.5px 17.9px rgba(227, 35, 255, 0.358),
      2.5px 15.9px 33.4px rgba(227, 35, 255, 0.431),
      6px 38px 80px rgba(227, 35, 255, 0.6);
      overflow: hidden;
}

.widget_area_lc .data_bar_marker {
    background-color: var(--area_lc);
    box-shadow:
        0px 1.8px 3.6px rgba(6, 215, 246, 0.26),
        0px 5px 10px rgba(6, 215, 246, 0.169),
        0px 12.1px 24.1px rgba(6, 215, 246, 0.13),
        0px 40px 80px rgba(6, 215, 246, 0.091);
        overflow: hidden;
}

.widget_area_mat .data_bar_marker {
    background-color: var(--area_mat);
    box-shadow:
        0px 1.8px 3.6px rgba(98, 247, 131, 0.26),
        0px 5px 10px rgba(98, 247, 131, 0.169),
        0px 12.1px 24.1px rgba(98, 247, 131, 0.13),
        0px 40px 80px rgba(98, 247, 131, 0.091);
        overflow: hidden;
}

.widget_area_soc .data_bar_marker {
    background-color: var(--area_soc);
    box-shadow:
        0px 1.8px 3.6px rgba(255, 144, 101, 0.26),
        0px 5px 10px rgba(255, 144, 101, 0.169),
        0px 12.1px 24.1px rgba(255, 144, 101, 0.13),
        0px 40px 80px rgba(255, 144, 101, 0.091);
        overflow: hidden;
}

.widget_area_cn .data_bar_marker {
    background-color: var(--area_cn);
    box-shadow:
        0px 1.8px 3.6px rgba(255, 180, 67, 0.26),
        0px 5px 10px rgba(255, 180, 67, 0.169),
        0px 12.1px 24.1px rgba(255, 180, 67, 0.13),
        0px 40px 80px rgba(255, 180, 67, 0.091);
        overflow: hidden;
}

.widget_area_eng .data_bar_marker {
    background-color: var(--area_eng);
    box-shadow:
        0px 1.8px 3.6px rgba(161, 98, 247, 0.26),
        0px 5px 10px rgba(161, 98, 247, 0.169),
        0px 12.1px 24.1px rgba(161, 98, 247, 0.13),
        0px 40px 80px rgba(161, 98, 247, 0.091);
        overflow: hidden;
}


.widget_title {
    font-size: var(--fs-600);
    font-weight: 600;
}



/* widget areas - General */

.widget_area {
    padding-inline: 8px;
    padding-bottom: 1rem;
    border-radius: 2rem;
    box-shadow: var(--elevation-1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    background-image: url(../images/bg_area.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.widget_area_lc { background-color: var(--area_lc);}
.widget_area_mat { background-color: var(--area_mat);}
.widget_area_soc { background-color: var(--area_soc);}
.widget_area_cn { background-color: var(--area_cn);}
.widget_area_eng { background-color: var(--area_eng);}

.widget_area_eng .widget_title {
    color: var(--theme-N0);
}

.area_header_image {
    object-fit: none;
    width: 200px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
}


.widget_area .widget_title {
    text-align: center;
    font-weight: 600;
}

.widget_area .btn_line {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* tarjetas dentro de los widgets de area */
.widget_area .widget {
    background-color: var(--theme-N0);
    padding: 1rem;
    border-radius: 12px;
}

.widget_subtitle {
    font-size: var(--fs-400);
    font-weight: 500;
}

.widget hr {
    height: 1px;
    background-color: var(--theme-N2);
    border: none;
}

.calculated_summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 12px 0;
    border: 2px dotted var(--theme-N3);
    border-radius: 12px;
}

.summary_description {
    color: var(--theme-N5);
    font-size: var(--fs-200);
    line-height: 20px;
    margin-left: 1rem;
}

.summary_description_bold {
    font-weight: 600;
}

.average_score {
    color: var(--theme-N0);
    font-size: var(--fs-600);
    font-family: var(--ff-display);
    text-align: right;
    font-weight: 600;
    
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 12px;
    margin-right: 8px;
}

.widget_area_lc .average_score { background-color: var(--area_lc); }
.widget_area_mat .average_score { background-color: var(--area_mat); }
.widget_area_soc .average_score { background-color: var(--area_soc); }
.widget_area_cn .average_score { background-color: var(--area_cn); }
.widget_area_eng .average_score { background-color: var(--area_eng); }

.skillbars {
    display: flex;
    justify-content: space-around;
    padding-top: 1rem;
    margin-bottom: 1rem;
}

.skillbar_year {
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
}

.skillbar_year:hover {
    background-color: var(--theme-N1);
}

.skillbar_stack {
    height: 8rem;
    border-radius: 8px;
    overflow: hidden;
}

.skillbar_year .caption_medium {
    padding-inline: 4px;
    margin-top: 10px;
    color: var(--theme-N5);
    font-family: var(--ff-uibase);
    font-weight: 600;
}

.level4 { background-color: var(--skill_level4)}
.level3 { background-color: var(--skill_level3)}
.level2 { background-color: var(--skill_level2)}
.level1 { background-color: var(--skill_level1)}
.levelsub { background-color: var(--skill_levelsub)}

/* sección para explicar los puntajes y niveles de desempeño */

.small_hint {
    font-size: var(--fs-100);
    margin-top: 8px;
    line-height: 20px;
}

.skills_guide {
    padding-top: 1rem;
}

.skill_levels {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
}

.skill_level_tag {
    border: 1px solid var(--theme-N3);
    border-radius: 36px;
    padding: 8px 14px;
    cursor: pointer;
}

.skill_level {
    color: var(--theme-N7);
    font-weight: 600;
    font-size: var(--fs-200);
    line-height: 18px;
    margin-left: 16px;
    margin-right: 4px;
    position: relative;
}

.skill_level::before {
    position: absolute;
    content: "";
    left: -14px;
    top: 0px;
    width: 8px;
    height: 16px;
    border-radius: 2px;
}

.lsub::before { background-color: var(--skill_levelsub);}
.l1::before { background-color: var(--skill_level1);}
.l2::before { background-color: var(--skill_level2);}
.l3::before { background-color: var(--skill_level3);}
.l4::before { background-color: var(--skill_level4);}


.skill_levels_stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* sección hacia las evidencias de aprendizajes */

.skills_detail_cta {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 8px 1rem;
    margin-top: 1rem;
    border-radius: 24px;
    border: 1px solid var(--theme-N2);
    background-color: var(--theme-N1);
}

.skills_detail_cta:hover {
    border: 1px solid var(--blue400);
    background-color: var(--theme-N0);
    box-shadow: var(--elevation-1);
}

.skills_badge {
    width: 80px;
}

.arrow_right {
    margin-left: auto;
    stroke: var(--theme-N5);
}

.skills_detail_cta:hover .arrow_right {
    stroke: var(--blue300);
}

.widget_area button {
    margin-inline: 1rem;
}

.skills_scale {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 1rem;
}

.skills_scale p {
    color: var(--theme-N5);
    font-size: var(--fs-200);
    font-family: var(--ff-uibase);
    font-weight: 600;
    text-align: right;
}

.range20 {
    width: 20%;
}

.range20_bar {
    background-color: var(--skill_level4);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    height: 8px;
}

.range40 {
    width: 20%;
}

.range40_bar {
    background-color: var(--skill_level3);
    height: 8px;
}

.range70 {
    width: 30%;
}

.range70_bar {
    background-color: var(--skill_level2);
    height: 8px;
}

.range100 {
    width: 30%;
}

.range100_bar {
    background-color: var(--skill_level1);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    height: 8px;
}

.skill_item {
    background-color: var(--theme-N1);
    padding: 1.5rem;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.skill_item_label {
    font-weight: 700;
    font-size: var(--fs-300);
}

.skill_item_content p {
    font-weight: 500;
    font-size: var(--fs-300);
    line-height: 1.5rem;
}

.skill_item_content.component p{
    font-weight: 600;
    font-size: var(--fs-400);
    line-height: 1.5rem;
    text-transform: uppercase;
}

.skill_item_results {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    row-gap: 1rem;
}

.skill_item_result {
    background-color: var(--theme-N0);
    box-shadow: var(--elevation-1);
    padding: 8px 1rem;
    border-radius: 12px;
    text-align: center;
}

.skill_item_data {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: var(--fs-600);
    font-weight: 700;
    font-family: var(--ff-uibase);
    letter-spacing: -0.8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-N0);
    text-align: right;
    padding-right: 8px;
    box-shadow: -2px 4px 8px rgba(0, 0, 0, 0.3) inset;
}

.skill_item_data::after {
    position: absolute;
    content: "%";
    font-size: 12px;
    top: 28px;
    right: 8px;
}

.skill_item_year {
    font-family: var(--ff-uibase);
    font-size: var(--fs-200);
    font-weight: 700;
    color: var(--theme-N5);
    padding-top: 8px;
}

.skill_item_data .level4 { background-color: var(--skill_level4); }
.skill_item_data .level3 { background-color: var(--skill_level3); }
.skill_item_data .level2 { background-color: var(--skill_level2); }
.skill_item_data .level1 { background-color: var(--skill_level1); }

/* --------Analizador ---------*/

.analizador {
    background-color: white;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background-image: url(../images/bg_analizador.svg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 1rem;
}

@media (min-width: 40rem) {
    .analizador {
        align-self: start;
    }
}


.analizador_banner {
    margin: 0 auto;
}

.analizador_title {
    font-size: var(--fs-500);
    font-weight: 700;
    text-align: center;
}

.instruction {
    color: var(--theme-N6);
    text-align: center;
}

.logros_badge,
.retos_badge {
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logros_badge img,
.retos_badge img {
    width: 50px;
    aspect-ratio: 1;
}

.analizador .label_main {
    font-size: var(--fs-400);
    font-weight: 700;
    line-height: 24px;
}

.analizador .label_sub {
    font-size: var(--fs-100);
    font-family: var(--ff-uibase);
    color: var(--theme-N5);
    text-transform: uppercase;
}

.counter_badge {
    margin-left: auto;
    font-size: var(--fs-400);
    font-weight: 600;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
}

.logros_badge .counter_badge {
    background-color: #1B9937;
}

.retos_badge .counter_badge {
    background-color: var(--mark-red);
}

/*tabla de resumen*/

.analizador table {
    background-color: white;
    border-radius: 12px;
    padding: 1rem 8px ;
    font-weight: 600;
    box-shadow: var(--elevation-1);
    overflow: hidden;
}

th, td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--theme-N2);
}

.analizador th {
    font-size: 12px;
    font-weight: 600;
    font-family: var(--ff-uibase);
    color: var(--theme-N5);
}

.left{
    text-align: left;
}

.right {
    text-align: right;
}

.logro {
    color: #1B9937;
    text-align: right; 
    font-family: var(--ff-uibase);
    font-size: var(--fs-300);
}

.reto {
    color: var(--mark-red);
    text-align: right; 
    font-family: var(--ff-uibase);
    font-size: var(--fs-300);
}

.footer {
    padding: 1.5rem 1rem;
    text-align: center;
}

/* ----------------------
*********MODALES*********
------------------------*/
/* esta clase se agrega por js cuando se abre un modal */
body.no-scroll,
html.no-scroll {
  overflow: hidden;
}

/* backdrop */
.modal_container {
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    width: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.modal_container.show_modal {
    pointer-events: auto;
    opacity: 1;
}

/*contenedor del modal*/

.modal_content_wrapper {
    position: relative;
    background-color: white;
    background-image: url(../images/modal_bg.png);
    background-repeat: no-repeat;
    background-origin: border-box;
    background-position: right top;
    padding: 1rem;
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.mit_modal_title {
    color: var(--theme-N8);
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.5rem;
}

.mit_modal_title2 {
    color: var(--theme-N6);
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-300);
    line-height: 1.5rem;
    letter-spacing: 0.2px;
}

.mit_plain_datagroup {
    padding-bottom: 1rem;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 2rem;
}

.data_markers {
    border: 1px solid var(--theme-N2);
    border-radius: 12px;
    padding: 10px 16px;
    box-shadow: var(--elevation-1);
}

.mit_informer_md {
    font-size: 28px;
    font-family: var(--ff-uibase);
    font-weight: 600;
    text-align: center;
    line-height: 2.3rem;
}

.mit_informer_label {
    color: var(--theme-N5);
    font-size: var(--fs-300);
    font-family: var(--ff-uibase);
    line-height: 1.4rem;
}

.mit_informer_index {
    font-size: var(--fs-200);
    text-align: center;
    font-weight: 700;
    font-family: var(--ff-uibase);
}

.mit_modal_subtitle {
    color: var(--theme-N5);
    font-size: var(--fs-200);
}

.modal_toggle {
    margin-left: auto;
}

.modal_titles {
    margin-left: 1rem;
}

.mit_close_modal {
    background-color: var(--theme-N0);
    color: var(--theme-N4);
    padding: 1rem 1rem;
    line-height: 0.8rem;
    font-weight: 700;
    font-size: 1.5rem;
    font-family: var(--ff-uibase);
    display: inline-block;
    border-radius: 50%;
    box-shadow: var(--elevation-1);
    cursor: pointer;
    border: 1px solid var(--theme-N1);
    
}

.mit_close_modal:hover {
    color: var(--blue300);
    border-color: var(--blue300);
}

.mit_modal_header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 32em) {
    .modal_content_wrapper {
        border-radius: 1.5rem;
        max-width: 50%;
        max-height: 70%;
        box-shadow:var(--elevation-2);
        padding: 2rem;
    }
    .mit_modal_header {
        flex-direction: row;
        justify-content: space-between;
        align-content: center;
    }

    .modal_titles {
        order: 1;
    }

    .modal_toggle {
        order: 2;
        margin-left: 0;
    }
} /* fin media query para el tamaño de los modales */

.modal_content {
    padding: 1rem;
    color: var(--theme-N7);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal_content_title {
    font-family: var(--ff-display);
    font-size: var(--fs-600);
    font-weight: 600;
    line-height: 1.3em;
}

.modal_content .small_caption {
    font-size: var(--fs-200);
    color: var(--theme-N5);
    font-weight: 600;
    padding-top: 1rem;
}

.modal_content .medium_caption {
    font-size: var(--fs-300);
    color: var(--theme-N7);
    font-weight: 600;
}



@media (min-width: 40rem) {
    .col-2 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 2rem;
    }
    .col-3 {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .school_card {
        flex: 1 320px;
    }
    .students_counter {
        flex: 1 180px;
    }
    .school_rank {
        flex: 1 280px;
    }
}

/* ANALIZADOR MODAL */

.insight_badge {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.insight_badge img {
    width: 80px;
    aspect-ratio: 1/1;
}

.insights_widget {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.insights_widget .label_main {
    font-size: var(--fs-400);
    font-weight: 600;
}

.insights_widget .label_sub {
    color: var(--theme-N5);
    font-weight: 500;
    font-family: var(--ff-uibase);
    font-size: var(--fs-300);
}

.insights_widget ol {
    padding-left: 1rem;
    margin-top: 0px;
    margin-bottom: 0px;
    background: var(--theme-N1);
    border-radius: 12px;
    padding-left: 32px;
    padding-right: 8px;
}

ol li::marker {
    color: var(--theme-N4);
    font-weight: 500;
    font-size: var(--fs-500);
    
}

ol li {
    margin: 8px;
    background: var(--theme-N0);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: var(--fs-300);
    color: var(--theme-N7);
    font-family: var(--ff-uibase);
}

.no_insights {
    background-color: var(--theme-N1);
    padding: 1rem 24px;
    font-family: var(--ff-uibase);
    border-radius: 12px;
    color: var(--theme-N5);
    font-size: var(--fs-300);
}


/* Modal detalle porcentajes de desempeño */

.skills_data_detail_header {
    display: flex;
    align-items: center;
}

.skills_data_detail_header img {
    width: 80px;
    aspect-ratio: 1/1;
}

.skills_data_area {
    font-size: var(--fs-400);
    font-weight: 600;
    line-height: 1.5rem;
}

.skills_data_period {
    color: var(--theme-N5);
    font-family: var(--ff-uibase);
    font-weight: 500;
    font-size: var(--fs-300);
}

.skills_data_info {
    display: flex;
    gap: 1.5rem;
}

.skills_data_bar {
    width: 1.2rem;
    border-radius: 8px;
    overflow: hidden;
}

.skills_data_stack {
    display: flex;
    flex-direction: column;
    gap: 10px;

}

.skill_data_stack_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--theme-N1);
    border-radius: 12px;
    padding: 1rem;
    min-width: 260px;
    box-shadow: var(--elevation-1);
}

.skill_level_name {
    font-size: var(--fs-500);
    font-weight: 600;
    font-family: var(--ff-uibase);
    color: var(--theme-N5);
    position: relative;
    padding-left: 28px;
    
}

.skill_level_name::before {
    content: "";
    position: absolute;
    left: 8px;
    width: 10px;
    height: 34px;
    border-radius: 4px;
}

.skill_data {
    color: var(--theme-N7);
    font-size: var(--fs-500);
    font-weight: 600;
}