/* -------------------------------- 

BOXES (layout antigo):

Atenção
Dica
Glossário
Material Complementar
Para refletir
Saiba Mais

-------------------------------- */


/* -------------------------------- 

Elementos comuns a todos os boxes

-------------------------------- */

.box-especifico {
    /* CORES */
     /* --- CORES BASE - (escala HSL - Hue, Saturation (%), Light (%))--- */
     --ifht-ref-cor-turquesa: 175, 54%;/* hue, saturation% */
     --ifht-ref-cor-laranja: 18; /*Hue*/
     --ifht-ref-cor-amarelo: 39, 100%; /* hue, saturation% */
     --ifht-ref-cor-roxo: 250, 49%; /* hue, saturation% */
     --ifht-ref-cor-rosa: 315, 95%; /* hue, saturation% */

     --ifht-ref-cor-turquesa-10:hsl(var(--ifht-ref-cor-turquesa), 10%); 
     --ifht-ref-cor-turquesa-20:hsl(var(--ifht-ref-cor-turquesa), 20%);
     --ifht-ref-cor-turquesa-30:hsl(var(--ifht-ref-cor-turquesa), 30%);
     --ifht-ref-cor-turquesa-40:hsl(var(--ifht-ref-cor-turquesa), 40%);
     --ifht-ref-cor-turquesa-50:hsl(var(--ifht-ref-cor-turquesa), 50%);
     --ifht-ref-cor-turquesa-60:hsl(var(--ifht-ref-cor-turquesa), 60%);
     --ifht-ref-cor-turquesa-70:hsl(var(--ifht-ref-cor-turquesa), 70%);
     --ifht-ref-cor-turquesa-80:hsl(var(--ifht-ref-cor-turquesa), 80%);
     --ifht-ref-cor-turquesa-90:hsl(var(--ifht-ref-cor-turquesa), 90%);
     --ifht-ref-cor-turquesa-95:hsl(var(--ifht-ref-cor-turquesa), 95%);
     --ifht-ref-cor-turquesa-99:hsl(var(--ifht-ref-cor-turquesa), 99%);
 
     --ifht-ref-cor-laranja-10:hsl(var(--ifht-ref-cor-laranja), 69%, 10%); 
     --ifht-ref-cor-laranja-20:hsl(var(--ifht-ref-cor-laranja), 71%, 20%);
     --ifht-ref-cor-laranja-30:hsl(var(--ifht-ref-cor-laranja), 70%, 30%);
     --ifht-ref-cor-laranja-40:hsl(var(--ifht-ref-cor-laranja), 90%, 40%);
     --ifht-ref-cor-laranja-50:hsl(var(--ifht-ref-cor-laranja), 80%, 50%);
     --ifht-ref-cor-laranja-60:hsl(var(--ifht-ref-cor-laranja), 80%, 60%);
     --ifht-ref-cor-laranja-70:hsl(var(--ifht-ref-cor-laranja), 80%, 70%);
     --ifht-ref-cor-laranja-80:hsl(var(--ifht-ref-cor-laranja), 80%, 80%);
     --ifht-ref-cor-laranja-90:hsl(var(--ifht-ref-cor-laranja), 80%, 90%);
     --ifht-ref-cor-laranja-95:hsl(var(--ifht-ref-cor-laranja), 80%, 95%);
     --ifht-ref-cor-laranja-99:hsl(var(--ifht-ref-cor-laranja), 80%, 99%);
 
     --ifht-ref-cor-amarelo-10:hsl(var(--ifht-ref-cor-amarelo), 10%); 
     --ifht-ref-cor-amarelo-20:hsl(var(--ifht-ref-cor-amarelo), 20%);
     --ifht-ref-cor-amarelo-30:hsl(var(--ifht-ref-cor-amarelo), 30%);
     --ifht-ref-cor-amarelo-40:hsl(39, 83%, 46%);
     --ifht-ref-cor-amarelo-50:hsl(var(--ifht-ref-cor-amarelo), 50%);
     --ifht-ref-cor-amarelo-60:hsl(var(--ifht-ref-cor-amarelo), 60%);
     --ifht-ref-cor-amarelo-70:hsl(var(--ifht-ref-cor-amarelo), 70%);
     --ifht-ref-cor-amarelo-80:hsl(var(--ifht-ref-cor-amarelo), 80%);
     --ifht-ref-cor-amarelo-90:hsl(var(--ifht-ref-cor-amarelo), 90%);
     --ifht-ref-cor-amarelo-95:hsl(var(--ifht-ref-cor-amarelo), 95%);
     --ifht-ref-cor-amarelo-99:hsl(var(--ifht-ref-cor-amarelo), 99%);
 
     --ifht-ref-cor-roxo-10:hsl(var(--ifht-ref-cor-roxo), 10%); 
     --ifht-ref-cor-roxo-20:hsl(var(--ifht-ref-cor-roxo), 20%);
     --ifht-ref-cor-roxo-30:hsl(var(--ifht-ref-cor-roxo), 30%);
     --ifht-ref-cor-roxo-40:hsl(var(--ifht-ref-cor-roxo), 40%);
     --ifht-ref-cor-roxo-50:hsl(var(--ifht-ref-cor-roxo), 50%);
     --ifht-ref-cor-roxo-60:hsl(var(--ifht-ref-cor-roxo), 60%);
     --ifht-ref-cor-roxo-70:hsl(var(--ifht-ref-cor-roxo), 70%);
     --ifht-ref-cor-roxo-80:hsl(var(--ifht-ref-cor-roxo), 80%);
     --ifht-ref-cor-roxo-90:hsl(var(--ifht-ref-cor-roxo), 90%);
     --ifht-ref-cor-roxo-95:hsl(var(--ifht-ref-cor-roxo), 95%);
     --ifht-ref-cor-roxo-99:hsl(var(--ifht-ref-cor-roxo), 99%);
 
     --ifht-ref-cor-rosa-10:hsl(var(--ifht-ref-cor-rosa), 10%); 
     --ifht-ref-cor-rosa-20:hsl(var(--ifht-ref-cor-rosa), 20%);
     --ifht-ref-cor-rosa-30:hsl(var(--ifht-ref-cor-rosa), 30%);
     --ifht-ref-cor-rosa-40:hsl(var(--ifht-ref-cor-rosa), 40%);
     --ifht-ref-cor-rosa-50:hsl(var(--ifht-ref-cor-rosa), 50%);
     --ifht-ref-cor-rosa-60:hsl(var(--ifht-ref-cor-rosa), 60%);
     --ifht-ref-cor-rosa-70:hsl(var(--ifht-ref-cor-rosa), 70%);
     --ifht-ref-cor-rosa-80:hsl(var(--ifht-ref-cor-rosa), 80%);
     --ifht-ref-cor-rosa-90:hsl(var(--ifht-ref-cor-rosa), 90%);
     --ifht-ref-cor-rosa-95:hsl(var(--ifht-ref-cor-rosa), 95%);
     --ifht-ref-cor-rosa-99:hsl(var(--ifht-ref-cor-rosa), 99%);
     
    /* Primárias: Cores presentes na maior parte da interface e relacionadas diretamente com a marca. Aplicação em elementos centrais. */
    --ifht-sys-cor-primaria-1-extralight:var(--ifht-ref-cor-azul-95);
    --ifht-sys-cor-primaria-1-light:var(--ifht-ref-cor-azul-50);
    --ifht-sys-cor-primaria-1-normal:var(--ifht-ref-cor-azul-40);
    --ifht-sys-cor-primaria-1-dark:var(--ifht-ref-cor-azul-30);
    --ifht-sys-cor-primaria-1-extradark:var(--ifht-ref-cor-azul-20);

    --ifht-sys-cor-primaria-2-extralight:var(--ifht-ref-cor-marinho-95);
    --ifht-sys-cor-primaria-2-light:var(--ifht-ref-cor-marinho-40);
    --ifht-sys-cor-primaria-2-normal:var(--ifht-ref-cor-marinho-30);
    --ifht-sys-cor-primaria-2-dark:var(--ifht-ref-cor-marinho-20);
    --ifht-sys-cor-primaria-2-extradark:var(--ifht-ref-cor-marinho-10);

    --ifht-sys-cor-primaria-1: var(--ifht-sys-cor-primaria-1-normal);
    --ifht-sys-cor-primaria-1-hover: var(--ifht-sys-cor-primaria-1-light);
    --ifht-sys-cor-primaria-1-pressed: var(--ifht-sys-cor-primaria-1-dark);

    --ifht-sys-cor-primaria-2: var(--ifht-sys-cor-primaria-2-dark);
    --ifht-sys-cor-primaria-2-hover: var(--ifht-sys-cor-primaria-2-normal);
    --ifht-sys-cor-primaria-2-pressed: var(--ifht-sys-cor-primaria-2-extradark);

    /* Secundárias: Cor utilizada para harmonizar com as cores do logo. Aplicação em elementos de menor ênfase e decorativos ao longo da interface. */
    --ifht-sys-cor-secundaria-extralight:var(--ifht-ref-cor-turquesa-90);
    --ifht-sys-cor-secundaria-light:var(--ifht-ref-cor-turquesa-50);
    --ifht-sys-cor-secundaria-normal:var(--ifht-ref-cor-turquesa-30);
    --ifht-sys-cor-secundaria-dark:var(--ifht-ref-cor-turquesa-20);
    --ifht-sys-cor-secundaria-extradark:var(--ifht-ref-cor-turquesa-10);

    /* Terciárias: Cores utilizadas para dar contraste com as cores do logo. Aplicação bastante pontual em elementos que precisem de destaque na interface. */
    --ifht-sys-cor-terciaria-1-extralight:var(--ifht-ref-cor-amarelo-90);
    --ifht-sys-cor-terciaria-1-light:var(--ifht-ref-cor-amarelo-60);
    --ifht-sys-cor-terciaria-1-normal:var(--ifht-ref-cor-amarelo-50);
    --ifht-sys-cor-terciaria-1-dark:var(--ifht-ref-cor-amarelo-40);
    --ifht-sys-cor-terciaria-1-extradark:var(--ifht-ref-cor-amarelo-20);

    --ifht-sys-cor-terciaria-2-extralight:var(--ifht-ref-cor-laranja-90);
    --ifht-sys-cor-terciaria-2-light:var(--ifht-ref-cor-laranja-60);
    --ifht-sys-cor-terciaria-2-normal:var(--ifht-ref-cor-laranja-50);
    --ifht-sys-cor-terciaria-2-dark:var(--ifht-ref-cor-laranja-40);
    --ifht-sys-cor-terciaria-2-extradark:var(--ifht-ref-cor-laranja-30);

    --ifht-sys-cor-terciaria-3-extralight:var(--ifht-ref-cor-roxo-95);
    --ifht-sys-cor-terciaria-3-light:var(--ifht-ref-cor-roxo-60);
    --ifht-sys-cor-terciaria-3-normal:var(--ifht-ref-cor-roxo-50);
    --ifht-sys-cor-terciaria-3-dark:var(--ifht-ref-cor-roxo-40);
    --ifht-sys-cor-terciaria-3-extradark:var(--ifht-ref-cor-roxo-30);

    --ifht-sys-cor-terciaria-4-extralight:var(--ifht-ref-cor-rosa-95);
    --ifht-sys-cor-terciaria-4-light:var(--ifht-ref-cor-rosa-50);
    --ifht-sys-cor-terciaria-4-normal:var(--ifht-ref-cor-rosa-40);
    --ifht-sys-cor-terciaria-4-dark:var(--ifht-ref-cor-rosa-30);
    --ifht-sys-cor-terciaria-4-extradark:var(--ifht-ref-cor-rosa-20);
}

.box-especifico .card {
    overflow: visible;
}

.box-especifico .atencao .card h4,
.box-especifico .dica .card h4,
.box-especifico .glossario .card h4,
.box-especifico .material-complementar .card h4,
.box-especifico .para-refletir .card h4,
.box-especifico .saiba-mais .card h4 {
    font-weight: 700;
    margin:0 0 20px;
    padding-bottom:10px;
    text-transform:uppercase;
}

.box-especifico .atencao .card h4::before,
.box-especifico .dica .card h4::before,
.box-especifico .glossario .card h4::before,
.box-especifico .material-complementar .card h4::before,
.box-especifico .para-refletir .card h4::before,
.box-especifico .saiba-mais .card h4::before  {
    display: block;
    width: 70px;
    position: absolute;
    top: -25px;
    left: -30px;
}

.box-especifico .atencao .card ul,
.box-especifico .dica .card ul,
.box-especifico .glossario .card ul,
.box-especifico .material-complementar .card ul,
.box-especifico .para-refletir .card ul,
.box-especifico .saiba-mais .card ul {
    list-style: none;
    padding: 0;
    margin: 0 var(--ifht-sys-spacing-padding-lg);
}

.box-especifico .atencao .card ol,
.box-especifico .dica .card ol,
.box-especifico .glossario .card ol,
.box-especifico .material-complementar .card ol,
.box-especifico .para-refletir .card ol,
.box-especifico .saiba-mais .card ol {
    margin: 0 var(--ifht-sys-spacing-padding-lg);
}

.box-especifico .atencao .card ul .bi,
.box-especifico .card ul .bi,
.box-especifico .dica .card .glossario ul .bi,
.box-especifico .material-complementar .card ul .bi,
.box-especifico .para-refletir .card ul .bi,
.box-especifico .saiba-mais .card ul .bi {
    font-size:1.2rem;
}


/* -------------------------------- 

Box de Atenção

-------------------------------- */

.box-especifico .atencao .card {
    border: var(--ifht-sys-espessura-borda-xs) solid var(--ifht-sys-cor-terciaria-2-normal);
    border-top:6px solid var(--ifht-sys-cor-terciaria-2-normal);
}

.box-especifico .atencao .card h4 {
    color: var(--ifht-sys-cor-terciaria-2-normal);
    border-bottom:var(--ifht-sys-espessura-borda-xs) solid var(--ifht-sys-cor-terciaria-2-normal);
}

.box-especifico .atencao .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-atencao.svg');
}

.box-especifico .atencao .card  a {color: var(--ifht-sys-cor-terciaria-2-normal);}

.box-especifico .atencao .card  ul .bi {color: var(--ifht-sys-cor-terciaria-2-normal);}

.box-especifico .atencao .card .h1,
.box-especifico .atencao .card .h2,
.box-especifico .atencao .card .h3,
.box-especifico .atencao .card .h4,
.box-especifico .atencao .card .h5,
.box-especifico .atencao .card .h6 {
    color: var(--ifht-sys-cor-terciaria-2-normal);
}

/* -------------------------------- 

Box de Dica

-------------------------------- */

.box-especifico .dica .card {
    border: var(--ifht-sys-espessura-borda-xs) solid var(--ifht-sys-cor-terciaria-1-normal);
    border-top:6px solid var(--ifht-sys-cor-terciaria-1-normal);
}

.box-especifico .dica h4 {
    color: var(--ifht-sys-cor-terciaria-1-dark);
    border-bottom:var(--ifht-sys-espessura-borda-xs) solid var(--ifht-sys-cor-terciaria-1-dark);
  }

.box-especifico .dica h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-dica.svg');
}

.box-especifico .dica a {color: var(--ifht-sys-cor-terciaria-1-normal);}

.box-especifico .dica ul .bi {color: var(--ifht-sys-cor-terciaria-1-normal);}

/* -------------------------------- 

Box de Glossário

-------------------------------- */

.box-especifico .glossario .card {
    border: var(--ifht-sys-espessura-borda-xs) solid var(--ifht-sys-cor-primaria-2-dark);
    border-top:6px solid var(--ifht-sys-cor-primaria-2-dark);
}

.box-especifico .glossario .card h4 {
    color: var(--ifht-sys-cor-primaria-2-dark);
    border-bottom:var(--ifht-sys-espessura-borda-xs) solid var(--ifht-sys-cor-primaria-2-dark);
  }

.box-especifico .glossario .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-glossario.svg');
}

.box-especifico .glossario .card a {color: var(--ifht-sys-cor-primaria-2-dark);}

.box-especifico .glossario .card ul .bi {color: var(--ifht-sys-cor-primaria-2-dark);}


/* -------------------------------- 

Material Complementar

-------------------------------- */

.box-especifico .material-complementar .card {
    border: var(--ifht-sys-espessura-borda-xs) solid var(--ifht-sys-cor-secundaria-normal);
    border-top:6px solid var(--ifht-sys-cor-secundaria-normal);
}

.box-especifico .material-complementar .card h4 {
    color: var(--ifht-sys-cor-secundaria-normal);
    border-bottom:var(--ifht-sys-espessura-borda-xs) solid var(--ifht-sys-cor-secundaria-normal);
}

.box-especifico .material-complementar .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-materialComplementar.svg');
}

.box-especifico .material-complementar .card a {color: var(--ifht-sys-cor-secundaria-normal);}

.box-especifico .material-complementar .card ul .bi {color: var(--ifht-sys-cor-secundaria-normal);}


/* -------------------------------- 

Para Refletir

-------------------------------- */

.box-especifico .para-refletir .card {
    border: var(--ifht-sys-espessura-borda-xs) solid var(--ifht-sys-cor-terciaria-3-normal);
    border-top:6px solid var(--ifht-sys-cor-terciaria-3-normal);
}

.box-especifico .para-refletir .card h4 {
    color: var(--ifht-sys-cor-terciaria-3-normal);
    border-bottom:var(--ifht-sys-espessura-borda-xs) solid var(--ifht-sys-cor-terciaria-3-normal);
  }

  .box-especifico .para-refletir .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-paraRefletir.svg');
}

.box-especifico .para-refletir .card a {color: var(--ifht-sys-cor-terciaria-3-normal);}

.box-especifico .para-refletir .card ul .bi {color: var(--ifht-sys-cor-terciaria-3-normal);}

/* -------------------------------- 

Saiba Mais

-------------------------------- */

.box-especifico .saiba-mais .card {
    border: var(--ifht-sys-espessura-borda-xs) solid var(--ifht-sys-cor-terciaria-4-normal);
    border-top:6px solid var(--ifht-sys-cor-terciaria-4-normal);
}

.box-especifico .saiba-mais .card h4 {
    color: var(--ifht-sys-cor-terciaria-4-normal);
    border-bottom:var(--ifht-sys-espessura-borda-xs) solid var(--ifht-sys-cor-terciaria-4-normal);
}

.box-especifico .saiba-mais .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-saibamais.svg');
}

.box-especifico .saiba-mais .card a {color: var(--ifht-sys-cor-terciaria-4-normal);}

.box-especifico .saiba-mais .card ul .bi {color: var(--ifht-sys-cor-terciaria-4-normal);}

/* Ajuste dos Boxes dentro de accordions */

.accordion .atencao .card,
.accordion .dica .card,
.accordion .glossario .card,
.accordion .material-complementar .card,
.accordion .para-refletir .card,
.accordion .saiba-mais .card {
    overflow:visible;
}

.accordion .atencao .card:first-of-type,
.accordion .dica .card:first-of-type,
.accordion .glossario .card:first-of-type,
.accordion .material-complementar .card:first-of-type,
.accordion .para-refletir .card:first-of-type,
.accordion .saiba-mais .card:first-of-type {
    border-bottom: var(--ifht-sys-espessura-borda-xs) solid;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.accordion .atencao .card:first-of-type {border-bottom-color: var(--ifht-sys-cor-terciaria-2-normal); }
.accordion .dica .card:first-of-type {border-bottom-color:var(--ifht-sys-cor-terciaria-1-normal); }
.accordion .glossario .card:first-of-type {border-bottom-color: var(--ifht-sys-cor-primaria-2); }
.accordion .material-complementar .card:first-of-type {border-bottom-color: var(--ifht-sys-cor-secundaria-normal); }
.accordion .para-refletir .card:first-of-type {border-bottom-color: var(--ifht-sys-cor-terciaria-3-normal); }
.accordion .saiba-mais .card:first-of-type {border-bottom-color: var(--ifht-sys-cor-terciaria-4-normal); }

/* Ajuste dos boxes dentro dos Títulos Ordenados */

.titulos-ordenados > li .atencao .card h4::before,
.titulos-ordenados > li .dica .card h4::before,
.titulos-ordenados > li .glossario .card h4::before,
.titulos-ordenados > li .material-complementar .card h4::before,
.titulos-ordenados > li .para-refletir .card h4::before,
.titulos-ordenados > li .saiba-mais .card h4::before {
    display: block;
    width: 70px;
    position: absolute;
    top: -25px;
    left: -30px;
    margin-left:0;
    background: transparent;
}


.titulos-ordenados > li .atencao .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-atencao.svg');
}

.titulos-ordenados > li .dica .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-dica.svg');
}

.titulos-ordenados > li .glossario .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-glossario.svg');
}

.titulos-ordenados > li .material-complementar .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-materialComplementar.svg');
}

.titulos-ordenados > li .para-refletir .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-paraRefletir.svg');
}

.titulos-ordenados > li .saiba-mais .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-saibamais.svg');
}