/* =====================================================================
   INTEGRATALENTOS — tokens e componentes de identidade visual.

   Paleta extraída da logo: azul-petróleo #0B2B3C (as pessoas e a palavra
   "Integra"), verde #0E7A33 e verde-limão #7AC70C (o círculo e a folha).
   O azul é a base institucional; o verde é crescimento — que é
   literalmente o tema do sistema.

   Regra de cor do produto: verde NUNCA significa "nota alta" sozinho.
   Num sistema de desempenho, pintar de vermelho quem tirou nota baixa
   transforma relatório em julgamento. Escala de nota usa a rampa
   --it-n1..n5 (âmbar → azul → verde), reservando vermelho só para
   estado operacional de verdade: prazo vencido, envio com erro.
   ===================================================================== */
:root{
  --it-navy:#0B2B3C;
  --it-navy-soft:#254B5E;
  --it-green:#0E7A33;
  --it-green-deep:#0A5A26;
  --it-leaf:#3FA524;
  --it-lime:#7AC70C;
  --it-ink:#10242E;
  --it-ink-soft:#3C5460;
  --it-muted:#6E8391;
  --it-line:#E2EAE6;
  --it-surface:#FFFFFF;
  --it-bg:#F4F7F5;
  --it-mint:#E9F4EA;
  --it-sky:#E9F0F4;

  --it-ok:#12864A;
  --it-warn:#B26A00;
  --it-danger:#C62828;
  --it-info:#0B6FC6;

  /* Rampa de nota (1 a 5). Deliberadamente sem vermelho. */
  --it-n1:#C98A00;
  --it-n2:#8FA31E;
  --it-n3:#4A9D5F;
  --it-n4:#1E7F3C;
  --it-n5:#0A5A26;

  --it-grad:linear-gradient(135deg,#0B2B3C 0%,#0E7A33 58%,#4FB02A 100%);
  --it-grad-green:linear-gradient(135deg,#3FA524 0%,#0E7A33 100%);
  --it-shadow:0 1px 2px rgba(16,36,46,.04), 0 8px 24px -12px rgba(16,36,46,.16);
}

/* Sem esta regra, todo bloco com x-show aparece por um instante antes do
   Alpine inicializar — a "piscada" clássica de quem usa CDN sem build. */
[x-cloak]{display:none !important}

.it-gradient{background:var(--it-grad)}
.it-gradient-green{background:var(--it-grad-green)}
.it-gradient-text{background:var(--it-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ------------------------------------------------------------ formulário */
.it-field{width:100%;border:1px solid #D6E2DA;border-radius:.75rem;background:#fff;padding:.75rem 1rem;
  color:var(--it-ink);outline:none;transition:.15s;font-size:.925rem}
.it-field::placeholder{color:#9BAFA3}
.it-field:focus{border-color:var(--it-green);box-shadow:0 0 0 3px rgba(14,122,51,.14)}
.it-field:disabled{background:#F6F8F7;color:var(--it-muted)}
.it-label{display:block;font-size:.78rem;font-weight:700;color:var(--it-ink-soft);margin-bottom:.35rem}
.it-hint{font-size:.75rem;color:var(--it-muted);line-height:1.5}

/* --------------------------------------------------------------- botões */
.it-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;
  padding:.8rem 1.2rem;font-size:.9rem;font-weight:700;color:#fff;background:var(--it-grad);
  box-shadow:0 10px 22px -10px rgba(11,43,60,.55);transition:.15s;border:0;cursor:pointer}
.it-btn:hover{filter:brightness(1.08)}
.it-btn:active{transform:translateY(1px)}
.it-btn[disabled]{opacity:.75;cursor:progress}
/* Ação destrutiva precisa trocar o background-IMAGE: `.it-btn` pinta com
   gradiente, e um `bg-red-*` do Tailwind mexe só no background-color —
   ficaria embaixo do gradiente e o botão continuaria verde numa ação que
   não é segura. */
.it-btn-perigo{background-image:linear-gradient(135deg,#C62828 0%,#8E1C1C 100%);
  box-shadow:0 10px 22px -10px rgba(198,40,40,.55)}
.it-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;
  padding:.68rem 1.05rem;font-size:.875rem;font-weight:600;color:var(--it-ink-soft);background:#fff;
  border:1px solid var(--it-line);transition:.15s;cursor:pointer}
.it-btn-ghost:hover{background:#F3F8F4;border-color:#CFDFD5}
.it-btn-sm{padding:.45rem .8rem;font-size:.8rem;border-radius:.6rem}

/* ---------------------------------------------------------------- cards */
.it-card{background:var(--it-surface);border:1px solid var(--it-line);border-radius:1rem;box-shadow:var(--it-shadow)}
.it-card-pad{padding:1.15rem 1.25rem}
.it-card-titulo{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--it-muted)}

/* ------------------------------------------------- status de avaliação */
.it-status{display:inline-flex;align-items:center;gap:.35rem;border-radius:9999px;padding:.2rem .6rem;
  font-size:.72rem;font-weight:700;letter-spacing:.02em}
.it-status::before{content:"";width:.45rem;height:.45rem;border-radius:9999px;background:currentColor}
.it-status-pendente{color:var(--it-muted);background:rgba(110,131,145,.12)}
.it-status-em_andamento{color:var(--it-info);background:rgba(11,111,198,.1)}
.it-status-respondida{color:var(--it-ok);background:rgba(18,134,74,.1)}
.it-status-atrasada{color:var(--it-danger);background:rgba(198,40,40,.1)}
.it-status-cancelada{color:#6B21A8;background:rgba(107,33,168,.1)}
.it-status-rascunho{color:var(--it-warn);background:rgba(178,106,0,.12)}
.it-status-encerrado{color:var(--it-navy-soft);background:rgba(37,75,94,.1)}

/* ------------------------------------------------------- barra de progresso */
.it-progress{height:.5rem;border-radius:9999px;background:#E8EFE9;overflow:hidden}
.it-progress>span{display:block;height:100%;border-radius:9999px;background:var(--it-grad-green);transition:width .3s}

/* ------------------------------------------------------------- tabelas */
.it-table{width:100%;border-collapse:collapse;font-size:.875rem}
.it-table thead th{text-align:left;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--it-muted);padding:.7rem .85rem;border-bottom:1px solid var(--it-line);white-space:nowrap}
.it-table tbody td{padding:.72rem .85rem;border-bottom:1px solid #F0F5F1;color:var(--it-ink)}
.it-table tbody tr:last-child td{border-bottom:0}
.it-table tbody tr:hover{background:#FAFCFA}
.it-table .num{text-align:right;font-variant-numeric:tabular-nums}
/* `.it-table thead th` (0,1,2) vence `.text-right` do Tailwind (0,1,0) —
   sem estas duas linhas o cabeçalho alinhado à direita não obedece. */
.it-table thead th.text-right{text-align:right}
.it-table thead th.text-center{text-align:center}

/* --------------------------------------------------------------- notas */
.it-nota{display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;padding:.15rem .5rem;
  border-radius:.5rem;font-weight:800;font-size:.85rem;font-variant-numeric:tabular-nums;color:#fff}
.it-nota-1{background:var(--it-n1)} .it-nota-2{background:var(--it-n2)}
.it-nota-3{background:var(--it-n3)} .it-nota-4{background:var(--it-n4)}
.it-nota-5{background:var(--it-n5)}
.it-nota-vazia{background:#E8EFE9;color:var(--it-muted)}

/* ----------------------------------------------------------- matriz 9 box */
.it-9box{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.it-9box-cel{position:relative;border:1px solid var(--it-line);border-radius:.75rem;padding:.75rem;
  min-height:7rem;background:#fff;transition:.15s}
.it-9box-cel:hover{border-color:#BFD6C6}
/* Fundo por posição: quanto mais alto nos dois eixos, mais saturado.
   Tom, e não semáforo — ninguém deve ler "quadrante vermelho". */
.it-9box-n1{background:#FBFCFB} .it-9box-n2{background:#F3F8F4}
.it-9box-n3{background:#EAF4EC} .it-9box-n4{background:#DFEFE3}
.it-9box-n5{background:#D2E9D8}
.it-9box-rotulo{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--it-ink-soft)}
.it-9box-contagem{font-size:1.5rem;font-weight:800;color:var(--it-navy);line-height:1.1}
.it-9box-curva{font-size:.68rem;color:var(--it-muted)}
.it-9box-desvio-acima{color:var(--it-warn);font-weight:700}
.it-9box-desvio-abaixo{color:var(--it-info);font-weight:700}

/* ----------------------------------------- navegação (layout do app)
   Barra lateral ESCURA, e não branca como nos outros sistemas da casa.
   Não é diferença por diferença: a coluna escura tira a navegação da
   disputa visual com o conteúdo, e o conteúdo aqui é gente — nome, rosto
   e nota de pessoa de verdade. Quem abre o sistema tem que bater o olho
   na pessoa, não no menu. */
.it-sidebar{background:linear-gradient(180deg,#0B2B3C 0%,#0A2430 55%,#0B2A25 100%)}

.nav-link{display:flex;align-items:center;gap:.65rem;border-radius:.6rem;padding:.55rem .75rem;
  font-size:.875rem;color:rgba(255,255,255,.66);transition:.12s;position:relative}
.nav-link:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-link.is-active{background:rgba(255,255,255,.1);color:#fff;font-weight:600}
/* Marcador verde na borda: sozinho, o fundo mais claro é sutil demais
   sobre o escuro para dizer "você está aqui". */
.nav-link.is-active::before{content:"";position:absolute;left:-.75rem;top:.45rem;bottom:.45rem;
  width:3px;border-radius:0 3px 3px 0;background:var(--it-lime)}
.nav-group>summary{display:flex;align-items:center;gap:.65rem;cursor:pointer;list-style:none;border-radius:.6rem;
  padding:.55rem .75rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.4);transition:.12s;user-select:none}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.7)}
.nav-group .chev{margin-left:auto;transition:transform .15s}
.nav-group[open]>summary .chev{transform:rotate(90deg)}
.nav-sub{padding-left:.9rem;margin-top:.15rem;border-left:1px solid rgba(255,255,255,.12);margin-left:.85rem}
.nav-breve{margin-left:auto;border-radius:9999px;background:rgba(255,255,255,.1);padding:.1rem .4rem;
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.5)}

/* ------------------------------------------------ abertura do painel
   Bloco de boas-vindas com a ação principal. Existe porque a pergunta
   de quem abre um sistema de desempenho nunca é "quantos" — é "o que
   eu preciso fazer, e até quando". O número vem depois. */
.it-hero{position:relative;overflow:hidden;border-radius:1.25rem;background:var(--it-grad);color:#fff}
.it-hero-arte{position:absolute;inset:0;pointer-events:none;opacity:.5}

/* ------------------------------------------------ etapas do ciclo
   O processo de avaliação tem começo, meio e fim, e quase ninguém sabe
   em que pedaço está. Mostrar a régua é metade do trabalho de adesão.

   Blocos em GRADE, não linha com conectores. O conector horizontal é
   bonito em tela larga e some no celular — ou pior, vira rolagem lateral
   dentro de um card, que ninguém descobre que existe. Aqui cada etapa é
   um bloco que ocupa a própria coluna: 1 coluna no celular, 2 no tablet,
   4 no desktop, sempre preenchendo a largura inteira.

   A barra de cima carrega o estado. Ela é a única coisa que muda de cor
   — o texto continua legível em qualquer etapa, inclusive nas que ainda
   não chegaram. */
.it-etapas{display:grid;gap:.75rem;grid-template-columns:1fr}
@media (min-width:640px){.it-etapas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.it-etapas{grid-template-columns:repeat(4,minmax(0,1fr))}}

.it-etapa{border:1px solid var(--it-line);border-radius:.85rem;padding:.9rem 1rem 1rem;background:#fff;
  transition:.15s;min-width:0}
.it-etapa-barra{height:.3rem;border-radius:9999px;background:var(--it-line);margin-bottom:.85rem}
.it-etapa-cabeca{display:flex;align-items:center;gap:.5rem}
.it-etapa-marca{display:flex;height:1.5rem;width:1.5rem;flex-shrink:0;align-items:center;justify-content:center;
  border-radius:9999px;border:1.5px solid var(--it-line);background:#fff;color:var(--it-muted);
  font-size:.7rem;font-weight:800}
.it-etapa-titulo{font-size:.82rem;font-weight:700;color:var(--it-ink);min-width:0}
.it-etapa-desc{margin-top:.5rem;font-size:.74rem;line-height:1.5;color:var(--it-muted)}
.it-etapa-tag{margin-left:auto;flex-shrink:0;border-radius:9999px;background:var(--it-mint);
  padding:.1rem .45rem;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--it-green-deep)}

.it-etapa-feita .it-etapa-barra{background:var(--it-green)}
.it-etapa-feita .it-etapa-marca{border-color:var(--it-green);background:var(--it-green);color:#fff}

.it-etapa-atual{border-color:rgba(14,122,51,.35);box-shadow:0 0 0 3px rgba(14,122,51,.08)}
.it-etapa-atual .it-etapa-barra{background:var(--it-grad-green)}
.it-etapa-atual .it-etapa-marca{border-color:var(--it-green);color:var(--it-green);background:var(--it-mint)}
.it-etapa-atual .it-etapa-titulo{color:var(--it-green-deep)}

/* --------------------------------------------------- linha de pessoa
   Item de lista com rosto. Substituiu a tabela seca: numa tela de RH,
   a pessoa é o registro — não uma célula da primeira coluna.

   `flex-wrap` + `min-width` no miolo: em tela estreita a coluna da
   direita (prazo, status) desce para a linha de baixo em vez de espremer
   o nome até virar reticências. Nome de pessoa truncado é exatamente o
   dado que não pode sumir aqui. */
.it-pessoa{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .85rem;
  padding:.8rem 1rem;transition:.12s}
.it-pessoa:hover{background:#F7FAF8}
.it-pessoa-corpo{flex:1 1 12rem;min-width:0}
.it-pessoa-fim{margin-left:auto;text-align:right;flex-shrink:0}
@media (min-width:640px){.it-pessoa{padding:.8rem 1.25rem}}

/* ------------------------------------------------------------- avatar
   Seis tons rotativos pelo nome (não aleatórios: a mesma pessoa tem
   sempre a mesma cor, em qualquer tela). Numa lista de trinta liderados,
   todos com o mesmo gradiente, o olho não distingue linha nenhuma. */
.it-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;
  background:var(--it-grad);color:#fff;font-weight:700;font-size:.78rem;letter-spacing:.02em;
  width:2rem;height:2rem;flex-shrink:0}
.it-avatar-0{background:linear-gradient(135deg,#0B2B3C,#1E7F3C)}
.it-avatar-1{background:linear-gradient(135deg,#0E7A33,#7AC70C)}
.it-avatar-2{background:linear-gradient(135deg,#254B5E,#3FA524)}
.it-avatar-3{background:linear-gradient(135deg,#0A5A26,#4A9D5F)}
.it-avatar-4{background:linear-gradient(135deg,#123A5C,#0E7A33)}
.it-avatar-5{background:linear-gradient(135deg,#3FA524,#0A5A26)}

/* --------------------------------------------------- vitrine do login
   Painéis que se alternam sozinhos na lateral da tela de entrada.

   Conteúdo é descrição do sistema, não atividade real: número de
   colaboradores ou de avaliações respondidas numa página pública seria
   vazar dado do quadro da cooperativa para quem nem entrou.

   Os slides ficam empilhados em grid (todos na mesma célula 1/1) em vez
   de `position:absolute`: assim o container toma a altura do slide mais
   alto sozinho, sem altura fixa chutada que corta texto quando alguém
   acrescenta uma linha. */
.it-vitrine{display:grid}
.it-slide{grid-area:1/1;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .6s ease,transform .6s ease}
.it-slide.is-active{opacity:1;transform:none;pointer-events:auto}
.it-dots{display:flex;gap:.4rem}
.it-dot{width:1.4rem;height:.2rem;border-radius:9999px;background:rgba(255,255,255,.28);
  border:0;padding:0;cursor:pointer;transition:background .3s,width .3s}
.it-dot.is-active{background:rgba(255,255,255,.9);width:2.2rem}

/* Trilhas de carreira do fundo do login: o traçado fica parado, quem se
   mexe são as pessoas e os marcos.
   Sem `mix-blend-mode`: soft-light sobre um gradiente já claro lavava o
   desenho até quase sumir. A transparência vive no próprio SVG
   (stroke-opacity), que é onde dá para calibrar traço a traço. */

/* Quem pediu menos movimento no sistema operacional continua vendo a
   troca de conteúdo — só sem o deslize. Parar de alternar esconderia
   informação; tirar o movimento resolve o incômodo real. As pessoas
   percorrendo as trilhas são pura decoração, então essas somem: SMIL
   não obedece a media query, mas obedece a `display:none`. */
@media (prefers-reduced-motion: reduce){
  .it-slide{transform:none;transition:opacity .4s ease}
  .it-trilhas-pessoas{display:none}
  .it-trilhas circle animate{display:none}
}

/* ------------------------------------------------------------- flashes */   Toda criação e edição do sistema acontece em modal — decisão de
   produto, para o RH nunca perder a lista e os filtros de onde veio.

   Usa <dialog> nativo: foco preso dentro, `::backdrop` de graça, e
   acessibilidade que uma div com position:fixed não tem.

   NÃO fecha por clique fora nem por Esc (o `cancel` é cancelado no JS):
   formulário de colaborador tem doze campos, e um clique torto na
   listagem jogaria tudo fora sem perguntar. A saída é sempre o botão
   Fechar/Cancelar — visível, e o primeiro item do tab order. */
.it-modal{width:min(44rem,calc(100vw - 2rem));max-height:calc(100vh - 3rem);padding:0;border:0;
  border-radius:1.1rem;background:var(--it-surface);color:var(--it-ink);
  box-shadow:0 24px 60px -20px rgba(16,36,46,.45);overflow:visible}
.it-modal::backdrop{background:rgba(11,43,60,.55);backdrop-filter:blur(2px)}
.it-modal[open]{animation:it-modal-entra .16s ease-out}
@keyframes it-modal-entra{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.it-modal[open]{animation:none}}

.it-modal-caixa{display:flex;flex-direction:column;max-height:calc(100vh - 3rem)}
.it-modal-topo{display:flex;align-items:flex-start;gap:1rem;padding:1.15rem 1.35rem;
  border-bottom:1px solid var(--it-line)}
.it-modal-titulo{font-size:1rem;font-weight:800;letter-spacing:-.01em}
.it-modal-sub{margin-top:.15rem;font-size:.78rem;color:var(--it-muted);line-height:1.5}
.it-modal-fechar{margin-left:auto;flex-shrink:0;border:0;background:transparent;cursor:pointer;
  border-radius:.6rem;padding:.4rem;color:var(--it-muted);transition:.12s}
.it-modal-fechar:hover{background:var(--it-mint);color:var(--it-ink)}
/* O corpo é quem rola — o topo e o rodapé ficam presos, então o botão
   Salvar nunca some num formulário longo. */
.it-modal-corpo{padding:1.25rem 1.35rem;overflow-y:auto;flex:1 1 auto}
.it-modal-rodape{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.6rem;
  padding:1rem 1.35rem;border-top:1px solid var(--it-line);background:#FAFCFB;
  border-radius:0 0 1.1rem 1.1rem}
@media (max-width:480px){
  .it-modal{width:100vw;max-width:100vw;max-height:100vh;border-radius:0}
  .it-modal-caixa{max-height:100vh}
  .it-modal-rodape{border-radius:0}
  .it-modal-rodape > *{flex:1 1 100%}
}

/* ---------------------------------------------------------- formulário
   Grade de campos: 1 coluna no celular, 2 a partir do tablet. `.it-col-2`
   marca o campo que sempre ocupa a linha inteira (e-mail, observação). */
.it-form{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:640px){
  .it-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .it-col-2{grid-column:1 / -1}
}
.it-erro-lista{border-radius:.8rem;border:1px solid #F5C6C6;background:#FDECEC;padding:.75rem 1rem;
  font-size:.82rem;color:#8E1C1C;line-height:1.6}
.it-erro-lista ul{margin:.35rem 0 0;padding-left:1.1rem;list-style:disc}
.it-check{display:flex;align-items:flex-start;gap:.6rem;border:1px solid var(--it-line);
  border-radius:.75rem;padding:.7rem .85rem;cursor:pointer;transition:.12s}
.it-check:hover{border-color:#CFDFD5;background:#FAFCFB}
.it-check input{margin-top:.15rem;accent-color:var(--it-green);width:1rem;height:1rem;flex-shrink:0}

/* ------------------------------------------------------------- filtros */
.it-filtros{display:grid;gap:.75rem;grid-template-columns:1fr}
@media (min-width:640px){.it-filtros{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.it-filtros{grid-template-columns:2fr 1fr 1fr 1fr auto}}

/* -------------------------------------------------------------- toasts
   Aviso de "salvou / editou / desativou" que aparece e some sozinho.

   Fica no canto superior direito, abaixo do cabeçalho: empurrar a página
   para baixo com uma barra fixa reposiciona a lista inteira no momento
   exato em que a pessoa está olhando para a linha que acabou de mudar.

   REGRA: sucesso e informação somem em 5s; ERRO não some. Erro é coisa
   para ler e agir — sumir sozinho transforma em "apareceu algo vermelho
   e eu não consegui ler". Fecha no X. */
.it-toasts{position:fixed;top:4.75rem;right:1rem;z-index:60;display:flex;flex-direction:column;
  gap:.5rem;width:min(24rem,calc(100vw - 2rem));pointer-events:none}
@media (max-width:640px){
  .it-toasts{top:auto;bottom:1rem;left:1rem;right:1rem;width:auto}
}
.it-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:.65rem;border-radius:.85rem;
  border:1px solid;padding:.8rem .9rem;font-size:.85rem;line-height:1.5;background:#fff;
  box-shadow:0 12px 32px -12px rgba(16,36,46,.35);animation:it-toast-entra .22s ease-out}
.it-toast-saindo{animation:it-toast-sai .25s ease-in forwards}
@keyframes it-toast-entra{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes it-toast-sai{to{opacity:0;transform:translateX(16px)}}
@media (max-width:640px){
  @keyframes it-toast-entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes it-toast-sai{to{opacity:0;transform:translateY(16px)}}
}
@media (prefers-reduced-motion: reduce){
  .it-toast,.it-toast-saindo{animation:none}
}
.it-toast-sucesso{border-color:#C6E3CB;background:var(--it-mint);color:#0A5A26}
.it-toast-erro{border-color:#F5C6C6;background:#FDECEC;color:#8E1C1C}
.it-toast-aviso{border-color:#F3DDB0;background:#FFF6E5;color:#7A4A00}
.it-toast-info{border-color:#CCDEE8;background:var(--it-sky);color:#0A4C73}
.it-toast-x{margin-left:auto;flex-shrink:0;border:0;background:transparent;cursor:pointer;
  color:currentColor;opacity:.55;padding:.1rem;border-radius:.4rem;transition:.12s}
.it-toast-x:hover{opacity:1;background:rgba(0,0,0,.06)}

/* ------------------------------------------------------------- flashes */
.it-flash{display:flex;align-items:flex-start;gap:.6rem;border-radius:.85rem;padding:.8rem 1rem;
  font-size:.875rem;border:1px solid;line-height:1.5}
.it-flash-sucesso{background:var(--it-mint);border-color:#C6E3CB;color:#0A5A26}
.it-flash-erro{background:#FDECEC;border-color:#F5C6C6;color:#8E1C1C}
.it-flash-aviso{background:#FFF6E5;border-color:#F3DDB0;color:#7A4A00}
.it-flash-info{background:var(--it-sky);border-color:#CCDEE8;color:#0A4C73}

/* --------------------------------------------------------- impressão */
@media print{
  aside, header, .nao-imprimir{display:none !important}
  .it-card{box-shadow:none;border-color:#DDD}
  body{background:#fff}
}