/*
Theme Name: PF-795
Theme URI:	https://softfocus.com.br/
Author: Rafael Forcadell
Version: 1.0
*/


/* 
Súmula de julgamento
--------------------------------------------
*/


.sumula { display: flex; width: var(--listagem); margin: 0 auto var(--espaco); padding: 24px 30px 40px; border: 1px solid var(--cor-borda); background-color: var(--cor-fundo-claro); }

.sumula span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sumula span span { display: inline-block; vertical-align: top; max-width: 100%; overflow: visible; }

/*.sumula span span.info:before { position: absolute; top: 3px; right: -9px; width: 6px; height: 6px; border-radius: 100%; background-color: #42B2FC; content: ""; }*/

.sumula .botao-simples { font-size: var(--h6-font-size); line-height: 1.6em; }

.sumula .operacao { width: 24%; padding-right: 25px; }
.sumula .operacao > div { margin-bottom: 10px; }

.sumula .operacao .ref-bacen { display: table; font-size: var(--h2-font-size); font-weight: var(--font-weight-regular); line-height: var(--h2-font-size); margin-bottom: 2px; }

.sumula .operacao .beneficiario,
.sumula .operacao .modalidade { display: block; margin-bottom: 3px; font-size: var(--h3-font-size); font-weight: var(--font-weight-regular); line-height: var(--h2-font-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sumula .operacao .contratacao,
.sumula .operacao .data-cop,
.sumula .operacao .analista { font-size: var(--h4-font-size); font-weight: var(--font-weight-regular); }

.sumula .detalhes { display: flex; flex-wrap: wrap; align-content: flex-start; width: 40%; }

.sumula .empreendimento { width: 50%; padding-right: 25px; padding-left: 25px; border-left: 1px solid var(--cor-borda); margin-bottom: 30px; }
.sumula .empreendimento > div { margin-bottom: 10px; }

.sumula .empreendimento strong { display: block; font-size: var(--h3-font-size); font-weight: var(--font-weight-regular); line-height: var(--h2-font-size); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sumula .empreendimento .area { display: block; font-size: var(--h3-font-size); font-weight: var(--font-weight-regular); line-height: var(--h2-font-size); margin-bottom: 2px; }
.sumula .empreendimento .area .unidade { display: inline-block; vertical-align: middle; font-size: var(--h6-font-size); line-height: var(--h6-font-size); }
.sumula .empreendimento .area + a.botao-simples { margin-top: -2px; }
.sumula .empreendimento .area .diferenca { margin-left: 4px; }
.sumula .empreendimento .area .diferenca.positiva { color:  var(--cor-primaria); }
.sumula .empreendimento .area .diferenca.negativa { color:  var(--cor-perigo); }

.sumula .empreendimento .encarregado { font-size: var(--h4-font-size); font-weight: var(--font-weight-regular); }

.sumula .evento { width: 50%; padding-right: 25px; margin-bottom: 30px; }
.sumula .evento > div { margin-bottom: 10px; }

.sumula .evento .periodo { font-size: var(--h4-font-size); font-weight: var(--font-weight-regular); }
.sumula .evento .data {}

.moeda {}
.moeda .real { top: -1px; display: inline-block; vertical-align: bottom; font-weight: var(--font-weight-regular); font-size: var(--h6-font-size); line-height: var(--h6-font-size); margin-right: 3px; }
.moeda .valor { display: inline-block; vertical-align: middle; font-weight: var(--font-weight-regular); font-size: var(--h2-font-size); line-height: var(--h2-font-size); }
.moeda .centavos { display: inline-block; vertical-align: top; font-weight: var(--font-weight-medium); font-size: var(--h6-font-size); line-height: var(--h2-font-size); }

.sumula .valores-financiados { width: 50%; padding-right: 25px; padding-left: 25px; border-left: 1px solid var(--cor-borda); }
.sumula .valores-financiados > div { margin-bottom: 10px; }

.sumula .cobertura { width: 50%; padding-right: 25px; padding-left: 25px; border-left: 1px solid var(--cor-borda); }
.sumula .cobertura > div { margin-bottom: 10px; }
.sumula .cobertura span strong { margin-left: 4px; }

.sumula .progresso { width: 36%; text-align: right; }

.sumula .situacao { padding-right: 25px; margin-bottom: 30px; }
.sumula .situacao > div { margin-bottom: 10px; }

.sumula .situacao span { display: inline-block; vertical-align: top; }
.sumula .situacao strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--h3-font-size); font-weight: var(--font-weight-regular); line-height: var(--h2-font-size); margin-bottom: 2px; }
.sumula .situacao .resultado { display: inline-block; }

.sumula .situacao .documentacao,
.sumula .situacao .comprovacao,
.sumula .situacao .resultado { display: flex; justify-content: flex-end; padding-left: 0; padding-right: 17px; }
.sumula .situacao .documentacao:before,
.sumula .situacao .comprovacao:before,
.sumula .situacao .resultado:before { position: absolute; top: 7px; right: 0; width: 10px; height: 10px; border-radius: 100%; box-sizing: border-box; content: ""; }

.sumula .situacao .entregue:before { background-color: var(--cor-cinza-claro); }
.sumula .situacao .desistido:before { background-color: var(--cor-cinza-claro); }
.sumula .situacao .aguardando-julgamento:before { border: 1px solid var(--cor-cinza-medio); }
.sumula .situacao .pendente:before { border: 1px solid var(--cor-cinza-medio); }
.sumula .situacao .em-analise:before { background-color: var(--cor-secundaria); }
.sumula .situacao .parcial:before { background-color: var(--cor-secundaria); }
.sumula .situacao .completa:before { background-color: var(--cor-secundaria); }
.sumula .situacao .aprovada:before { background-color: var(--cor-primaria); }
.sumula .situacao .finalizada:before { background-color: var(--cor-primaria); }
.sumula .situacao .deferido:before { background-color: var(--cor-primaria); }
.sumula .situacao .irregular:before { background-color: var(--cor-perigo); }
.sumula .situacao .indeferido:before { background-color: var(--cor-perigo); }
.sumula .situacao .indeferido-sumariamente:before { background-color: var(--cor-perigo); }

.sumula .situacao .resultado.irregular,
.sumula .situacao .resultado.atencao { padding-left: 19px; }
.sumula .situacao .resultado.irregular:before,
.sumula .situacao .resultado.atencao:before { border-radius: 0; width: 12px; background-color: transparent; background-position: center; background-repeat: no-repeat; }
.sumula .situacao .resultado.irregular:before { background-image: url(imagens/icones/resultado-irregular.svg); }
.sumula .situacao .resultado.atencao:before { background-image: url(imagens/icones/resultado-atencao.svg); }

.sumula .situacao .apos-plantio:before { }
.sumula .situacao .documentacao-irregular:before { }

.sumula .situacao .analista { display: block; font-size: var(--h4-font-size); font-weight: var(--font-weight-regular); }

.sumula .prazo .atrasado { color: var(--cor-perigo); }

.sumula .situacao .legenda { position: absolute; top: 0; right: 0; width: 5px; height: 100%; }
.sumula.envio-sicor-agendado .situacao .legenda { width: 6px; }

.sumula.voce.aguardando-analise:after,
.sumula.aguardando-analise .situacao .legenda { background-color: var(--cor-borda); }
.sumula.voce.em-analise:after,
.sumula.em-analise .situacao .legenda { background-color: var(--cor-cinza-claro); }
.sumula.voce.em-revisao:after,
.sumula.em-revisao .situacao .legenda { background-color: var(--cor-secundaria); }
.sumula.voce.envio-sicor-agendado:after,
.sumula.envio-sicor-agendado .situacao .legenda { border: 1px solid var(--cor-cinza-claro); border-width: 1px 0; }
.sumula.envio-sicor-agendado .situacao .legenda:before { position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background-color: var(--cor-cinza-claro); content: ""; }
.sumula.voce.registrando:after,
.sumula.registrando .situacao .legenda { background-color: var(--cor-secundaria); }
.sumula.voce.erro:after,
.sumula.erro .situacao .legenda { background-color: var(--cor-perigo); }
.sumula.erro .situacao strong { color: var(--cor-perigo); }
.sumula.voce.julgada:after,
.sumula.julgada .situacao .legenda { background-color: var(--cor-primaria); }
.sumula.voce.desistido:after,
.sumula.desistido .situacao .legenda { background-color: var(--cor-borda); }
.sumula.voce.aguardando-revisao-cer:after,
.sumula.aguardando-revisao-cer .situacao .legenda { background-color: var(--cor-alerta); }

.sumula .progresso > .documentacao,
.sumula .progresso > .comprovacao { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 15px; }

.sumula .progresso > .documentacao strong,
.sumula .progresso > .comprovacao strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--h3-font-size); font-weight: var(--font-weight-regular); line-height: var(--h2-font-size); margin-bottom: 2px; }

.sumula .progresso > .documentacao small,
.sumula .progresso > .comprovacao small { font-size: var(--h6-font-size); }

.porcentagem { width: 72px; }
.porcentagem svg { display: block; }
.porcentagem path { position: absolute; top: 0; left: 0; stroke-width: 2.5; stroke: var(--cor-secundaria); fill: none; stroke-linecap: round; }
.porcentagem.concluida path { stroke: transparent; }
.porcentagem circle { stroke-width: .3; stroke: var(--cor-cinza-mais-claro); fill: none; }
.porcentagem div { position: absolute; top: 0; left: 2px; width: 100%; height: 100%; font-size: var(--h1-font-size); font-weight: var(--font-weight-semibold); line-height: 72px; text-align: center; color: var(--cor-cinza-claro); }
.porcentagem div:after { display: inline-block; vertical-align: top; font-size: var(--font-size-menor); content: "%"; }

.sumula .progresso > .documentacao svg,
.sumula .progresso > .comprovacao svg { max-width: 72px; max-height: 72px; }

.sumula .progresso > .documentacao .porcentagem,
.sumula .progresso > .comprovacao .porcentagem { margin-left: 15px; }


@media screen and (min-width: 1080px) and (max-width: 1349px) {

	

}


@media screen and (min-width: 1280px) and (max-width: 1349px) {
	
	.sumula .operacao { width: 24%; }
	.sumula .detalhes { width: 46%; }
	.sumula .progresso { width: 30%; }

}


@media screen and (min-width: 1080px) and (max-width: 1279px) {
	
	.sumula .operacao { width: 24%; }
	.sumula .detalhes { width: 46%; }
	.sumula .progresso { width: 30%; }

}



/* 
Ações
--------------------------------------------
*/


.sumula + ul.acoes { display: flex; justify-content: center; width: 100%; max-width: var(--listagem); margin: 0 auto var(--espaco); padding: 0; list-style: none; border-bottom: 1px solid var(--cor-borda); }
.sumula + ul.acoes li { font-size: var(--h3-font-size); line-height: 3em; margin: 0 30px; padding: 0 10px; cursor: pointer; }
.sumula + ul.acoes li:before { position: absolute; bottom: -3px; right: 0; width: 0; height: 5px; background-color: var(--cor-cinza-mais-claro); content: ""; transition: width 100ms ease-in-out; }
.sumula + ul.acoes li:hover:before,
.sumula + ul.acoes li:focus:before { left: 0; right: auto; width: 100%; }
.sumula + ul.acoes li.selecionado { cursor: default; }
.sumula + ul.acoes li.selecionado:before { width: 100%; background-color: var(--cor-primaria-clara); }



/* 
Valores
--------------------------------------------
*/


.valores { display: flex; flex-direction: column; width: 100%; max-width: calc(var(--listagem) - (var(--recuo) * 2)); margin: calc(var(--espaco) * 2) auto; padding-right: 140px; }

.valores .rotulo { position: absolute; top: -25px; left: 22px; font-size: var(--h6-font-size); white-space: nowrap; }

.valores .porcentagem { position: absolute; z-index: 2; top: -15px; right: calc(100% - 15px); width: auto; min-width: 30px; height: 30px; font-size: var(--font-size-menor); line-height: 28px; color: #ffffff; text-align: right; padding: 0 6px; border-radius: 30px; background-color: var(--cor-info); }

.valores .enquadrado { display: flex; flex-direction: column; height: 1px; justify-content: center; }
.valores .enquadrado:before { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: var(--cor-borda); content: ""; }
.valores .enquadrado > .valor { align-self: flex-end; text-align: center; transform: translateX(100%); padding-left: 20px; }
.valores .enquadrado .rotulo { display: block; }
.valores .enquadrado .moeda .valor { font-size: var(--h1-font-size); line-height: var(--h1-font-size); }

.valores .enquadrado .apresentado { position: absolute; top: -1px; left: 0; width: 0; min-width: 3px; height: 3px; background-color: var(--cor-cinza-mais-claro); }
.valores .enquadrado .comprovado { position: absolute; top: -3px; left: 0; width: 0; min-width: 7px; height: 7px; background-color: var(--cor-secundaria); }

.valores > .apresentado { margin-bottom: 25px; }
.valores > .apresentado > div { display: inline-flex; align-items: center; }
.valores > .apresentado > div.invertido { transform: translateX(-100%); }
.valores > .apresentado > div.invertido a.adicionar { order: -1; }
.valores > .apresentado .moeda { display: table; padding: 9px 12px 12px 12px; color: var(--cor-cinza-escuro); background-color: var(--cor-cinza-mais-claro); }
.valores > .apresentado .moeda:before { position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-top: 10px solid var(--cor-cinza-mais-claro); border-right: 10px solid transparent; content: ""; }
.valores > .apresentado > div.invertido .moeda:before { left: auto; right: 0; border-right: none; border-left: 10px solid transparent; }
.valores > .apresentado .moeda .valor { font-size: var(--h1-font-size); line-height: var(--h1-font-size); }
.valores > .apresentado a.adicionar { margin-left: 15px; padding-left: 15px; }
.valores > .apresentado > div.invertido a.adicionar { margin-left: 0; margin-right: 15px; }
.valores > .apresentado a.adicionar:before { display: inline-block; vertical-align: top; margin-right: 5px; font-size: var(--h2-font-size); content: "+"; }

.valores > .comprovado { margin-top: 25px; }
.valores > .comprovado > div { display: inline-flex; align-items: center; }
.valores > .comprovado > div.invertido { transform: translateX(-100%); }
.valores > .comprovado > div.invertido a.adicionar { order: -1; }
.valores > .comprovado .rotulo { top: auto; bottom: -25px; }
.valores > .comprovado .porcentagem { top: auto; bottom: -15px; }
.valores > .comprovado .moeda { display: table; padding: 9px 12px 12px 12px; color: var(--cor-cinza-escuro); background-color: var(--cor-secundaria); }
.valores > .comprovado .moeda:before { position: absolute; top: -10px; left: 0; width: 0; height: 0; border-bottom: 10px solid var(--cor-secundaria); border-right: 10px solid transparent; content: ""; }
.valores > .comprovado > div.invertido .moeda:before { left: auto; right: 0; border-right: none; border-left: 10px solid transparent; }
.valores > .comprovado .moeda .valor { font-size: var(--h1-font-size); line-height: var(--h1-font-size); }



/* 
Índice
--------------------------------------------
*/


.valores + .indice { display: flex; justify-content: center; width: 100%; max-width: var(--listagem); margin: calc(var(--espaco) * 2.5) auto calc(var(--espaco) * 2); }
.valores + .indice:before { position: absolute; top: 0; left: 50%; width: 100vw; height: 1px; margin-left: -50vw; background-color: var(--cor-borda); content: ""; }

.valores + .indice .rotulo { font-size: var(--h6-font-size); line-height: 1.2em; text-align: center; }

.valores + .indice > div { text-align: center; }
.valores + .indice > a { display: block; text-align: center; }
.valores + .indice > a:hover,
.valores + .indice > a:focus { background-size: 0; }

.valores + .indice .adicionadas { margin: 0 calc(var(--espaco) * .7) ; }
.valores + .indice .adicionadas span { display: inline-block; vertical-align: top; min-width: 66px; height: 66px; border-radius: 33px; padding: 0 20px; margin: -33px auto 7px; font-size: var(--h1-font-size); font-weight: var(--font-weight-medium); line-height: 66px; color: var(--cor-fundo-claro); background-color: var(--cor-info); }

.valores + .indice .disponiveis { margin: 0 calc(var(--espaco) * .7) ; }
.valores + .indice .disponiveis .quantidades { display: flex; justify-content: center; }
.valores + .indice .disponiveis span { display: table; min-width: 36px; height: 36px; border-radius: 18px; padding: 0 10px; margin: -18px 3px 10px; font-size: var(--h4-font-size); font-weight: var(--font-weight-medium); line-height: 36px; text-align: center; color: var(--cor-fundo-claro); background-color: var(--cor-info); }
.valores + .indice .disponiveis span.completas { background-color: var(--cor-primaria); }
.valores + .indice .disponiveis span.resumidas { background-color: var(--cor-secundaria); }
.valores + .indice .disponiveis span.manuais { background-color: var(--cor-complementar); }
.valores + .indice .disponiveis span.terceiros { background-color: var(--cor-alerta); }

.valores + .indice .aguardando { margin: 0 calc(var(--espaco) * .7) ; }
.valores + .indice .aguardando span { display: inline-block; vertical-align: top; min-width: 36px; height: 36px; border-radius: 18px; padding: 0 10px; margin: -18px 3px 8px; font-size: var(--h4-font-size); font-weight: var(--font-weight-medium); line-height: 36px; text-align: center; color: var(--cor-fundo-claro); background-color: var(--cor-cinza-claro); }

.valores + .indice .rejeitadas { position: absolute; top: 0; right: var(--espaco); }
.valores + .indice .rejeitadas span { display: inline-block; vertical-align: top; min-width: 36px; height: 36px; border-radius: 18px; padding: 0 10px; margin: -18px 3px 8px; font-size: var(--h4-font-size); font-weight: var(--font-weight-medium); line-height: 36px; text-align: center; color: var(--cor-fundo-claro); background-color: var(--cor-perigo); }



/* 
Notas fiscais
--------------------------------------------
*/


.notas-fiscais { display: flex; align-items: flex-start; width: 100%; max-width: var(--listagem); margin: 0 auto calc(var(--espaco) * 2); }

.notas-fiscais .sumario { position: sticky; top: calc(var(--voltar-ao-topo) + var(--espaco)); left: 0; width: 280px; padding-right: var(--recuo); }

.notas-fiscais .sumario > div { margin-bottom: 10px; }

.notas-fiscais .sumario .modalidade { display: table; padding: 2px 9px 4px; margin-bottom: 15px; font-family: var(--h-font-family); font-weight: var(--font-weight-medium); font-size: var(--font-size); line-height: var(--line-height); color: var(--cor-fundo-claro); white-space: nowrap; background-color: var(--cor-cinza-escuro); box-shadow: 0 3px 6px rgba(0,0,0,.15); }

.notas-fiscais .sumario .rotulo { display: table; font-size: var(--h6-font-size); }

.notas-fiscais .sumario .ref-bacen { display: table; font-size: var(--h2-font-size); font-weight: var(--font-weight-regular); line-height: var(--h2-font-size); }
.notas-fiscais .sumario .beneficiario { display: block; font-size: var(--h4-font-size); line-height: var(--h3-font-size); font-weight: var(--font-weight-regular); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.notas-fiscais .sumario .progresso { display: flex; align-items: center; margin-top: 20px; margin-bottom: 15px; }
.notas-fiscais .sumario .progresso > .porcentagem { top: -5px; left: -10px; width: 92px; height: 92px; border-radius: 100%; padding: 12px; margin-right: 5px; background-color: var(--cor-fundo-claro); }
.notas-fiscais .sumario .progresso > .porcentagem > div { line-height: 92px; }

.notas-fiscais .sumario .progresso > .porcentagem path.apresentado { stroke-width: 1.5; stroke: #b7b7b7; }

.notas-fiscais .sumario .progresso .rotulo { line-height: 1.2em; }

.notas-fiscais .sumario .progresso > div > .valor { margin-bottom: 12px; }

.notas-fiscais .sumario .valor.enquadrado .real,
.notas-fiscais .sumario .valor.comprovado .real { font-size: var(--font-size-menor); line-height: var(--font-size-menor); margin-right: 3px;  }
.notas-fiscais .sumario .valor.enquadrado .valor,
.notas-fiscais .sumario .valor.comprovado .valor { font-size: var(--h3-font-size); line-height: var(--h3-font-size); }
.notas-fiscais .sumario .valor.enquadrado .centavos,
.notas-fiscais .sumario .valor.comprovado .centavos { font-size: var(--font-size-menor); line-height: var(--h3-font-size);  }

.notas-fiscais .sumario .valor .porcentagem { position: absolute; z-index: 2; top: -7px; left: -40px; width: auto; min-width: 30px; height: 30px; font-size: var(--font-size-menor); line-height: 28px; color: #ffffff; text-align: right; padding: 0 6px; border-radius: 30px; background-color: var(--cor-info); }

.notas-fiscais .sumario .valor.enquadrado .rotulo,
.notas-fiscais .sumario .valor.comprovado .rotulo,
.notas-fiscais .sumario .valor.enquadrado .moeda,
.notas-fiscais .sumario .valor.comprovado .moeda { opacity: .5; }

.notas-fiscais .sumario a.adicionar { display: table; margin: 0 auto 25px; padding-left: 15px; }
.notas-fiscais .sumario a.adicionar:before { display: inline-block; vertical-align: top; margin-right: 5px; font-size: var(--h2-font-size); content: "+"; }

.notas-fiscais .sumario .indice { left: -5px; margin-bottom: 25px; }
.notas-fiscais .sumario .indice,
.notas-fiscais .sumario .indice .disponiveis { display: flex; align-items: center; justify-content: center; }
.notas-fiscais .sumario .indice > div,
.notas-fiscais .sumario .indice a { display: block; margin: 0 5px; }
.notas-fiscais .sumario .indice a:hover,
.notas-fiscais .sumario .indice a:focus { background-size: 0; }

.notas-fiscais .sumario .indice .adicionadas { min-width: 50px; height: 50px; border-radius: 25px; padding: 0 15px; font-size: var(--h3-font-size); font-weight: var(--font-weight-regular); line-height: 50px; color: var(--cor-fundo-claro); text-align: center; background-color: var(--cor-info); }

.notas-fiscais .sumario .indice .disponiveis div,
.notas-fiscais .sumario .indice .aguardando,
.notas-fiscais .sumario .indice .rejeitadas { min-width: 30px; height: 30px; border-radius: 15px; padding: 0 8px; font-size: var(--h6-font-size); font-weight: var(--font-weight-regular); line-height: 30px; color: var(--cor-fundo-claro); text-align: center; }

.notas-fiscais .sumario .indice .disponiveis div { margin-right: -4px; }
.notas-fiscais .sumario .indice .disponiveis div:last-child { margin-right: 0; }

.notas-fiscais .sumario .indice .disponiveis .completas { z-index: 4; background-color: var(--cor-primaria); }
.notas-fiscais .sumario .indice .disponiveis .resumidas { z-index: 3; background-color: var(--cor-secundaria); }
.notas-fiscais .sumario .indice .disponiveis .manuais { z-index: 2; background-color: var(--cor-complementar); }
.notas-fiscais .sumario .indice .disponiveis .terceiros { z-index: 1; background-color: var(--cor-alerta); }
.notas-fiscais .sumario .indice .aguardando { background-color: var(--cor-cinza-claro); }
.notas-fiscais .sumario .indice .rejeitadas { background-color: var(--cor-perigo); }

.notas-fiscais .sumario ul.indice-detalhes { margin: 0; padding: 0; list-style: none; font-size: var(--h6-font-size); }
.notas-fiscais .sumario ul.indice-detalhes li { white-space: nowrap; margin-bottom: 5px; }
.notas-fiscais .sumario ul.indice-detalhes li:before { position: absolute; top: 50%; left: -10px; width: 8px; height: 8px; border-radius: 100%; margin-top: -4px; background-color: var(--cor-cinza-claro); content: ""; }
.notas-fiscais .sumario ul.indice-detalhes strong { display: inline-block; vertical-align: middle; min-width: 36px; font-size: var(--h3-font-size); font-weight: var(--font-weight-regular); text-align: center; }

.notas-fiscais .sumario ul.indice-detalhes li.adicionadas:before { background-color: var(--cor-info); }
.notas-fiscais .sumario ul.indice-detalhes li.completas:before { background-color: var(--cor-primaria); }
.notas-fiscais .sumario ul.indice-detalhes li.resumidas:before { background-color: var(--cor-secundaria); }
.notas-fiscais .sumario ul.indice-detalhes li.manuais:before { background-color: var(--cor-complementar); }
.notas-fiscais .sumario ul.indice-detalhes li.terceiros:before { background-color: var(--cor-alerta); }
.notas-fiscais .sumario ul.indice-detalhes li.aguardando:before { background-color: var(--cor-cinza-claro); }
.notas-fiscais .sumario ul.indice-detalhes li.rejeitadas:before { background-color: var(--cor-perigo); }

.notas-fiscais > div:last-child { flex-grow: 1; }
.notas-fiscais > div:last-child > h3 { font-family: var(--font-family); margin: var(--recuo) 0 30px 30px; }
.notas-fiscais > div:last-child > h3:first-child { margin-top: 0; }
.notas-fiscais > div:last-child > h3.nenhuma { opacity: .5; }

.notas-fiscais > div:last-child .disponiveis,
.notas-fiscais > div:last-child .aguardando,
.notas-fiscais > div:last-child .rejeitadas { min-height: 1px; /*background-color: var(--cor-fundo-claro);*/ }

.notas-fiscais > div:last-child .disponiveis,
.notas-fiscais > div:last-child .rejeitadas { margin-bottom: var(--espaco); }

.notas-fiscais > div:last-child .disponiveis + div,
.notas-fiscais > div:last-child .rejeitadas + div { display: flex; align-items: center; justify-content: space-between; padding: 0 30px 0 20px; }
.notas-fiscais > div:last-child .rejeitadas + div { justify-content: flex-end; }

.notas-fiscais > div:last-child .disponiveis + div > .valor,
.notas-fiscais > div:last-child .rejeitadas + div > .valor { display: flex; align-items: center; }
.notas-fiscais > div:last-child .disponiveis + div .rotulo,
.notas-fiscais > div:last-child .rejeitadas + div .rotulo { margin-right: 25px; font-size: var(--h6-font-size); }

.notas-fiscais > div:last-child .disponiveis + div .moeda,
.notas-fiscais > div:last-child .rejeitadas + div .moeda { display: table; padding: 9px 12px 12px 12px; }
.notas-fiscais > div:last-child .disponiveis + div .moeda { color: var(--cor-cinza-escuro); background-color: var(--cor-cinza-mais-claro); }
.notas-fiscais > div:last-child .rejeitadas + div .moeda { color: var(--cor-fundo-claro); background-color: var(--cor-perigo);  }
.notas-fiscais > div:last-child .disponiveis + div .moeda:before,
.notas-fiscais > div:last-child .rejeitadas + div .moeda:before { position: absolute; top: -10px; right: 0; width: 0; height: 0; border-bottom: 10px solid; border-left: 10px solid transparent; content: ""; }
.notas-fiscais > div:last-child .disponiveis + div .moeda:before { border-bottom-color: var(--cor-cinza-mais-claro); }
.notas-fiscais > div:last-child .rejeitadas + div .moeda:before { border-bottom-color: var(--cor-perigo); }
.notas-fiscais > div:last-child .disponiveis + div .moeda .valor,
.notas-fiscais > div:last-child .rejeitadas + div .moeda .valor { font-size: var(--h1-font-size); line-height: var(--h1-font-size); }

.notas-fiscais > div:last-child .rejeitadas .nota-fiscal .situacao:before { background-color: var(--cor-perigo); }

.notas-fiscais > div:last-child .rejeitadas .nota-fiscal .outras-operacoes,
.notas-fiscais > div:last-child .rejeitadas .nota-fiscal .resumo,
.notas-fiscais > div:last-child .rejeitadas .nota-fiscal .total,
.notas-fiscais > div:last-child .rejeitadas .nota-fiscal .excluir .default { opacity: .5; }

.notas-fiscais > div:last-child .rejeitadas .nota-fiscal .excluir:hover .default,
.notas-fiscais > div:last-child .rejeitadas .nota-fiscal .excluir:focus .default { opacity: 1; }

.notas-fiscais > div:last-child .aguardando .nota-fiscal { display: flex; }



/* 
Nota fiscal
--------------------------------------------
*/


.nota-fiscal { z-index: auto; width: 100%; padding: 25px 30px; margin-top: -1px; border: 1px solid var(--cor-borda); background-color: var(--cor-fundo-claro); transition-property: width, margin-left, background-color, box-shadow; transition-duration: 200ms; transition-timing-function: ease-in-out; }
.nota-fiscal:first-child { margin-top: 0; }
.notas-fiscais .disponiveis .nota-fiscal:not(.editando),
.notas-fiscais .disponiveis .nota-fiscal:not(.editando) * { cursor: pointer; }
.notas-fiscais .disponiveis .nota-fiscal:not(.editando):hover,
.notas-fiscais .disponiveis .nota-fiscal:not(.editando):focus { background-color: var(--cor-fundo); }

.nota-fiscal.editando { z-index: 2; width: calc(100% + 50px); margin-left: -25px; background-color: var(--cor-fundo-claro); box-shadow: 0 0 var(--sombra-blur) var(--sombra); }
.nota-fiscal.editando + .nota-fiscal { z-index: 1; }

.nota-fiscal .situacao { display: inline-block; vertical-align: top; font-size: var(--h4-font-size); font-weight: var(--font-weight-medium); margin-bottom: 13px; }
.nota-fiscal .situacao:before { position: absolute; top: 50%; left: -45px; width: 30px; height: 5px; margin-top: -2px; background-color: var(--cor-cinza-claro); content: ""; }
.nota-fiscal .situacao.completa:before { background-color: var(--cor-primaria); }
.nota-fiscal .situacao.resumida:before { background-color: var(--cor-secundaria); }
.nota-fiscal .situacao.manual:before { background-color: var(--cor-complementar); }
.nota-fiscal .situacao.terceiro:before { background-color: var(--cor-alerta); }
.nota-fiscal .situacao + .situacao { margin-left: 64px; }

.nota-fiscal .outras-operacoes { font-size: var(--h6-font-size); margin-top: -8px; margin-bottom: 13px; }
.nota-fiscal .outras-operacoes a { color: var(--cor-cinza-medio); }

.nota-fiscal .relacao.terceiro { display: flex; margin-bottom: 13px; }
.nota-fiscal .relacao.terceiro > div { flex: 0 0 auto; }
.nota-fiscal .relacao.terceiro > div,
.nota-fiscal .relacao.terceiro .input { margin-right: var(--espaco); }
.nota-fiscal .relacao.terceiro .input { margin-right: 0; }
.nota-fiscal .relacao.terceiro .input.text { display: table; cursor: text; padding-right: 10px; }
.nota-fiscal .relacao.terceiro .input.text:before { position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px; background-color: var(--cor-borda); content: ""; pointer-events: none; }
.nota-fiscal .relacao.terceiro .input.text:hover:before { background-color: var(--cor-cinza-claro); }
.nota-fiscal .relacao.terceiro .input.text:focus:before { bottom: -6px; height: 5px; background-color: var(--cor-cinza-claro); }
.nota-fiscal .relacao.terceiro .rotulo { display: table; font-size: var(--font-size); font-weight: var(--font-weight-light); line-height: var(--line-height); }

.nota-fiscal .relacao.terceiro .relacao {}

.nota-fiscal .resumo { display: flex; }
.nota-fiscal .resumo > div { font-size: var(--h3-font-size); font-weight: var(--font-weight-regular); line-height: 1.3em; margin-right: var(--espaco); }
.nota-fiscal .resumo .rotulo { display: table; font-size: var(--font-size); font-weight: var(--font-weight-light); line-height: var(--line-height); }

.nota-fiscal .itens { height: 0; overflow: hidden; /*margin-top: calc(var(--line-height) * -1);*/ margin-left: -30px; margin-right: -30px; padding: 0 30px; transition: height 200ms ease-in-out 100ms; }
.nota-fiscal .itens .ocultar { position: absolute; z-index: 2; top: 0; right: 30px; cursor: pointer; }
.nota-fiscal .itens .ocultar:after { position: absolute; top: 50%; left: -17px; width: 7px; height: 7px; margin-top: -6px; transform: rotate(45deg); border: solid var(--cor-cinza-medio); border-width: 0 1px 1px 0; content: ""; pointer-events: none; }
.nota-fiscal .itens .ocultar:hover:after, 
.nota-fiscal .itens .ocultar:focus:after { margin-top: -1px; transform: rotate(-135deg); }
.nota-fiscal .itens ul { padding: var(--espaco) 0 0; margin: 0 0 60px; list-style: none; }
.nota-fiscal .itens li { display: flex; border-bottom: 1px solid var(--cor-borda); }
.nota-fiscal .itens li:before { position: absolute; top: -1px; left: -30px; width: calc(100% + 60px); height: 100%; border: 1px solid var(--cor-borda); border-width: 1px 0; background-color: var(--cor-fundo); content: ""; opacity: 0; transition: opacity 100ms ease-in-out; }
.nota-fiscal .itens li:not(:first-child):hover:before,
.nota-fiscal .itens li:focus-within:before { opacity: 1; }
.nota-fiscal .itens li:first-child { padding-bottom: 10px; }
.nota-fiscal .itens li > div { align-self: center; margin: 0 15px; text-align: center; }
.nota-fiscal .itens li > div:first-child { flex-grow: 1; margin-left: 0; text-align: left; }
.nota-fiscal .itens li > div:last-child { margin-right: 0; }
.nota-fiscal .itens li > .editavel:before { position: absolute; z-index: 1; bottom: -1px; left: 0; width: 100%; height: 1px; background-color: var(--cor-cinza-claro); content: ""; opacity: 0; transition: opacity 100ms ease-in-out; }
.nota-fiscal .itens li:hover > .editavel:before,
.nota-fiscal .itens li:focus-within > .editavel:before { opacity: 1; }
.nota-fiscal .itens li > .editavel:focus-within:before { bottom: -3px; height: 5px; }
.nota-fiscal .itens li .produto { }
.nota-fiscal .itens li .cfop { width: 60px; }
.nota-fiscal .itens li .quantidade { width: 100px; }
.nota-fiscal .itens li .valor-unitario { width: 110px; }
.nota-fiscal .itens li .valor-total { width: 130px; }
.nota-fiscal .itens li > div > input { width: 100%; padding: 0; font-size: var(--h3-font-size); line-height: 56px; border: 0; }
.nota-fiscal .itens li:not(:first-child) .produto,
.nota-fiscal .itens li:not(:first-child) .cfop { font-size: var(--h3-font-size); font-weight: var(--font-weight-regular); line-height: 56px; }
.nota-fiscal .itens li .cfop input,
.nota-fiscal .itens li .quantidade input { text-align: center; }
.nota-fiscal .itens li .cfop.invalido input { color: var(--cor-perigo); }
.nota-fiscal .itens li > .invalido:before { background-color: var(--cor-perigo); }
.nota-fiscal .itens li:not(:first-child) .quantidade { font-size: var(--h3-font-size); font-weight: var(--font-weight-regular); }
.nota-fiscal .itens li .quantidade .unidade { font-size: var(--font-size); font-weight: var(--font-weight-light); text-transform: uppercase; }

.nota-fiscal.editando .itens { display: block; height: auto; transition-delay: 200ms; }

.nota-fiscal .salvar { position: absolute; bottom: 0; left: 30px; }

.nota-fiscal .total { position: absolute; z-index: 4; bottom: 0; right: 15px; display: flex; align-items: flex-end; padding: 0 15px 25px; }
.nota-fiscal .total:before { position: absolute; bottom: -3px; left: 0; width: 100%; height: 5px; content: ""; }
.nota-fiscal .total.completa:before { background-color: var(--cor-primaria); }
.nota-fiscal .total.resumida:before { background-color: var(--cor-secundaria); }
.nota-fiscal .total.manual:before { background-color: var(--cor-complementar); }
.nota-fiscal .total.terceiro:before { background-color: var(--cor-alerta); }
.nota-fiscal .total .rotulo { top: -2px; margin-right: 13px; line-height: var(--h6-font-size); }
.nota-fiscal .total .moeda .valor { font-size: var(--h1-font-size); line-height: var(--h1-font-size); }
.nota-fiscal .total .moeda .centavos { font-size: var(--h6-font-size); line-height: var(--h1-font-size); }
.nota-fiscal .total.terceiro .rotulo,
.nota-fiscal .total.terceiro .moeda { opacity: .5; }

.nota-fiscal .chave { width: 450px; }
.nota-fiscal .chave,
.nota-fiscal .consulta { font-size: var(--h4-font-size); font-weight: var(--font-weight-regular); }
.nota-fiscal .chave .rotulo,
.nota-fiscal .consulta .rotulo { display: table; font-size: var(--font-size); font-weight: var(--font-weight-light); line-height: var(--line-height); }
.nota-fiscal .chave .rotulo:before { position: absolute; top: 50%; left: -45px; width: 30px; height: 5px; margin-top: -2px; background-color: var(--cor-cinza-claro); content: ""; }

.nota-fiscal .excluir { position: absolute; top: 26px; right: 30px; }
.nota-fiscal .excluir,
.nota-fiscal .excluir * { cursor: pointer; }
.nota-fiscal .excluir .rotulos { display: inline-block; vertical-align: top; height: var(--line-height); text-align: right; overflow: hidden; }

.nota-fiscal .excluir .default,
.nota-fiscal .excluir .confirmacao { transition: transform 100ms ease-in-out; }
.nota-fiscal .excluir .confirmacao { width: 0; overflow: hidden; }

.nota-fiscal .excluir .confirmar { display: inline-block; vertical-align: top; margin-right: 8px; }
.nota-fiscal .excluir .confirmar:hover,
.nota-fiscal .excluir .confirmar:focus { color: var(--cor-perigo); }
.nota-fiscal .excluir .confirmar:before { position: absolute; top: 0; right: -8px; width: 1px; height: 100%; background-color: var(--cor-borda); content: ""; }
.nota-fiscal .excluir .cancelar { margin-left: 8px; }
.nota-fiscal .excluir .cancelar:hover,
.nota-fiscal .excluir .cancelar:focus { color: var(--cor-info); }

.nota-fiscal .excluir.confirmando .rotulos > * { transform: translateY(-100%); }
.nota-fiscal .excluir.confirmando .confirmacao { width: auto; }

.nota-fiscal .excluir .icone { display: inline-block; vertical-align: text-bottom; width: 23px; height: 17px; margin-left: 5px; border-radius: 4px; overflow: hidden; transition: width 100ms ease-in-out; }
.nota-fiscal .excluir .icone svg:first-child { position: absolute; top: 0; left: 0; }
.nota-fiscal .excluir .icone svg:first-child path { fill: var(--cor-cinza-claro); transition: width 100ms ease-in-out; }
.nota-fiscal .excluir:hover .icone svg:first-child path,
.nota-fiscal .excluir:focus .icone svg:first-child path { fill: var(--cor-perigo); }
.nota-fiscal .excluir .icone svg:last-child { position: absolute; top: 0; right: 1px; }
.nota-fiscal .excluir.confirmando .icone { width: 42px; }
.nota-fiscal .excluir.confirmando .icone svg:first-child path { fill: var(--cor-perigo); }

.nota-fiscal.excluindo { animation: excluindo 300ms ease-in-out; }