/* Tema 1 · Original (mesmos tokens do protótipo). */
/* Curvas e durações de movimento: um só lugar (Plano, 9.9). Trocar aqui muda o app inteiro. */
:root { --ease-padrao: cubic-bezier(.4, 0, .2, 1); --dur-rapido: .15s; --dur-normal: .2s; --dur-entrada: .35s; --dur-lenta: .9s; }
:root {
  /* Valores do tema 1; os demais temas vêm de temas.css (data-tema no <html>). */
  --fundo: #F4F5F7; --card: #FFFFFF; --borda: #E3E6EB; --texto: #14161A; --suave: #5B6270;
  --pri: #1D4ED8; --nav: #101828; --nav-texto: #C9D1DE; --nav-ativo-bg: #1D4ED8; --nav-ativo: #FFFFFF;
  --ok: #15803D; --erro: #B91C1C; --alerta: #B45309; --raio: 12px; --sombra: none;
  --fonte-titulo: "Space Grotesk", Inter, sans-serif; --input-bg: #FFFFFF; --input-borda: #D5DAE1;
}
:root, [data-tema] {
  --borda2: color-mix(in srgb, var(--borda) 55%, var(--card));
  --texto2: color-mix(in srgb, var(--texto) 80%, var(--suave));
  --pri2: color-mix(in srgb, var(--pri) 82%, white);
  --nav2: color-mix(in srgb, var(--nav-texto) 12%, transparent);
  --ok-bg: color-mix(in srgb, var(--ok) 15%, transparent);
  --erro-bg: color-mix(in srgb, var(--erro) 15%, transparent);
  --alerta-bg: color-mix(in srgb, var(--alerta) 18%, transparent);
  --info-bg: color-mix(in srgb, var(--pri) 15%, transparent);
  --sombra-base: 0 1px 2px rgba(16, 24, 40, .06);
}
* { box-sizing: border-box; }
html { background: var(--fundo); min-height: 100%; }
body { margin: 0; background: transparent; color: var(--texto); font: 14px/1.45 Inter, system-ui, sans-serif; }
h1, h2, h3 { font-family: var(--fonte-titulo); margin: 0; letter-spacing: -.01em; }
h1 { font-size: 22px; } h2 { font-size: 16px; } h3 { font-size: 14px; }
button, input, select { font: inherit; }
a { color: var(--pri); }

/* Estrutura */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.lateral { background: var(--nav); color: var(--nav-texto); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--nav-ativo-txt, var(--nav-texto)); font: 600 15px var(--fonte-titulo); padding: 4px 8px 18px; }
.marca img { width: 28px; height: 28px; }
.lateral a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--nav-texto);
  text-decoration: none; font-weight: 500; }
.lateral a:hover { background: var(--nav2); color: var(--nav-texto); }
.lateral a.ativo { background: var(--nav-ativo-bg); color: var(--nav-ativo); }
.lateral a.ativo .sigla { background: color-mix(in srgb, var(--nav-ativo) 20%, transparent); }
.lateral .sigla { width: 26px; height: 22px; border-radius: 6px; background: var(--nav2); display: grid; place-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.lateral .rodape { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--nav2); font-size: 12px; }
.lateral .rodape button { margin-top: 8px; background: transparent; border: 1px solid var(--nav2); color: var(--nav-texto);
  border-radius: 8px; padding: 6px 10px; cursor: pointer; width: 100%; }
.principal { padding: 24px 28px 48px; min-width: 0; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.topo p { margin: 2px 0 0; color: var(--suave); }
.menu-movel { display: none; }

/* Componentes */
.cartao { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra, var(--sombra-base)); padding: 16px; color: var(--texto); }
.cartao + .cartao { margin-top: 16px; }
.cartao > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.grade { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-bottom: 16px; }
.kpi .rotulo { color: var(--suave); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.kpi .valor { font: 600 24px "Space Grotesk"; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi .nota { color: var(--suave); font-size: 12px; margin-top: 2px; }
.duas { grid-template-columns: 1.4fr 1fr; }
.btn { border: 1px solid var(--borda); background: var(--card); color: var(--texto); border-radius: calc(var(--raio) * .7); border-radius: 8px; padding: 7px 12px;
  cursor: pointer; font-weight: 500; white-space: nowrap; }
.btn:hover { border-color: var(--suave); }
.btn.pri { background: var(--pri); border-color: var(--pri); color: var(--pri-texto, #fff); }
.btn.pri:hover { background: var(--pri2); }
.btn.perigo { color: var(--erro); }
.btn.peq { padding: 4px 9px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }
.acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; color: var(--suave); font-weight: 500; padding: 8px; border-bottom: 1px solid var(--borda); }
td { padding: 9px 8px; border-bottom: 1px solid var(--borda2); vertical-align: middle; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
.tabela { overflow-x: auto; }
.selo { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--borda2); color: var(--texto2); }
.selo.ok { background: var(--ok-bg); color: var(--ok); }
.selo.alerta { background: var(--alerta-bg); color: var(--alerta); }
.selo.erro { background: var(--erro-bg); color: var(--erro); }
.selo.info { background: var(--info-bg); color: var(--pri); }
.vazio { color: var(--suave); padding: 18px 8px; text-align: center; }
.baixo { color: var(--erro); font-weight: 600; }

/* Formulários */
form.linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--suave); font-weight: 500; }
input, select { border: 1px solid var(--borda); border-radius: 8px; padding: 7px 10px; background: var(--input-bg); color: var(--texto); min-width: 0; border-color: var(--input-borda); }
input:focus, select:focus { outline: 2px solid var(--info-bg); border-color: var(--pri2); }
.abas { display: flex; gap: 4px; background: var(--borda2); padding: 3px; border-radius: 9px; }
.abas button { border: 0; background: transparent; padding: 6px 12px; border-radius: 7px; cursor: pointer; color: var(--texto2); font-weight: 500; }
.abas button.ativo { background: var(--card); color: var(--texto); box-shadow: var(--sombra-base); }

/* Alertas */
.alerta-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borda2); align-items: start; }
.alerta-item:last-child { border-bottom: 0; }
.alerta-item .ponto { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; }
.alta { background: var(--erro); } .media { background: var(--alerta); } .baixa-g { background: var(--suave); }
.alerta-item p { margin: 2px 0 0; color: var(--texto2); }
.alerta-item .rec { color: var(--pri); font-weight: 500; }

/* Barras do fluxo de caixa */
.barras { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; align-items: end; height: 180px; padding-top: 8px; }
.barra { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; font-size: 11px; color: var(--suave); }
.barra .par { display: flex; gap: 3px; align-items: flex-end; height: 140px; }
.barra .e { width: 12px; background: var(--pri); border-radius: 3px 3px 0 0; }
.barra .s { width: 12px; background: color-mix(in srgb, var(--suave) 45%, transparent); border-radius: 3px 3px 0 0; }
.legenda { display: flex; gap: 14px; font-size: 12px; color: var(--suave); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* Login */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.entrada .cartao { width: 100%; max-width: 380px; padding: 28px; }
.entrada form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.entrada .dica { margin-top: 16px; font-size: 12px; color: var(--suave); background: var(--bg); border-radius: 8px; padding: 10px 12px; }
.erro-msg { color: var(--erro); font-size: 13px; min-height: 18px; }

#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--texto); color: var(--card);
  padding: 10px 16px; border-radius: 10px; opacity: 0; transition: var(--dur-normal); pointer-events: none; max-width: calc(100vw - 32px); z-index: 50; }
#toast.on { opacity: 1; transform: translateX(-50%); }
#toast.erro { background: var(--erro); }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 260px; background: var(--nav-solida, var(--nav)); z-index: 40; transform: translateX(-100%); transition: transform var(--dur-normal); }
  .shell.aberto .lateral { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
  .principal { padding: 16px 16px 40px; }
  .menu-movel { display: inline-flex; }
  .duas { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi .valor { font-size: 20px; }
  .barras { gap: 4px; } .barra .e, .barra .s { width: 8px; }
}
.grade > * { min-width: 0; }
code { word-break: break-word; }

/* Painel: números clicáveis */
.kpi.clicavel { font: inherit; text-align: left; cursor: pointer; width: 100%; transition: border-color var(--dur-rapido), transform var(--dur-rapido); }
.kpi.clicavel:hover { border-color: var(--pri); transform: translateY(-1px); }
.kpi.clicavel:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.kpi.clicavel .nota::after { content: " · ver registros"; color: var(--pri); }
dialog#origem { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--card); color: var(--texto);
  padding: 18px; width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
dialog#origem::backdrop { background: rgba(0, 0, 0, .45); }
dialog#origem > header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
dialog#origem > header p { margin: 2px 0 0; color: var(--suave); }
tr.total td { border-top: 2px solid var(--borda); font-weight: 600; }

/* Formulários com vários itens */
form[data-form=pedido], form[data-form=compra] { display: flex; flex-direction: column; gap: 10px; }
.itens { display: flex; flex-direction: column; gap: 8px; }
.item .btn.peq { margin-bottom: 4px; }

/* Configurar visual */
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.tema { font: inherit; color: var(--texto); background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.tema:hover { border-color: var(--suave); }
.tema.ativo { border-color: var(--pri); box-shadow: 0 0 0 2px var(--pri); }
.amostra { display: grid; grid-template-columns: 22% 1fr; gap: 6px; height: 74px; border-radius: 8px; padding: 6px; border: 1px solid rgba(127, 127, 127, .25); }
.amostra i { border-radius: 4px; }
.amostra b { border-radius: 4px; display: flex; align-items: flex-end; padding: 6px; }
.amostra u { display: block; height: 26px; width: 40%; border-radius: 3px; }
.tema .nome { font-weight: 600; }
.tema .sub { font-size: 12px; color: var(--suave); }

/* Quiz */
.sub { margin: 4px 0 0; color: var(--suave); font-size: 13px; }
.cartao.quiz { border-color: var(--pri); background: color-mix(in srgb, var(--pri) 7%, var(--card)); }
.cartao.quiz:not(.pergunta):not(.resultado) { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cartao.quiz p { margin: 4px 0 0; color: var(--suave); }
.cartao.quiz h2 { margin: 6px 0 12px; }
.cartao.quiz ul { margin: 0 0 14px; padding-left: 18px; color: var(--texto2); }
.progresso { height: 6px; border-radius: 3px; background: var(--borda2); overflow: hidden; }
.progresso i { display: block; height: 100%; background: var(--pri); transition: width var(--dur-rapido) var(--ease-padrao); }
.opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; }
.opcao { font: inherit; text-align: left; cursor: pointer; background: var(--card); color: var(--texto); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.opcao:hover { border-color: var(--pri); }
.opcao span { color: var(--suave); font-size: 13px; }
.cartao.destaque { border-left: 4px solid var(--pri); }
.cartao.destaque p { margin: 6px 0 0; color: var(--suave); }
.amostra.m-topo { grid-template-columns: 1fr; grid-template-rows: 12px 1fr; }
.amostra.m-icones { grid-template-columns: 10% 1fr; }

/* Estruturas de menu (só em telas largas; no celular o menu é sempre gaveta) */
.lateral .rodape button + button { margin-top: 6px; }
/* As estruturas (menu, densidade, indicadores...) ficam em estruturas.css. */


/* Gráfico mensal */
.grafico { width: 100%; height: auto; display: block; }
.grafico text { fill: var(--suave); font-size: 12px; }
.g-eixo { stroke: var(--borda); }
.grafico .g-receita { fill: var(--serie-1, var(--pri)); }
.grafico .g-custo { fill: var(--serie-2, color-mix(in srgb, var(--suave) 45%, transparent)); }
.legenda i.g-receita { background: var(--serie-1, var(--pri)); }
.legenda i.g-custo { background: var(--serie-2, color-mix(in srgb, var(--suave) 45%, transparent)); }
.abas.periodo { width: fit-content; margin-bottom: 14px; }

/* Configurar visual: opções à esquerda, prévia ao vivo à direita (como no protótipo) */
.visual { display: grid; grid-template-columns: minmax(320px, 440px) 1fr; gap: 18px; align-items: start; }
.visual-opcoes { min-width: 0; }
.visual-opcoes .temas { grid-template-columns: repeat(2, 1fr); }
.visual-previa { position: sticky; top: 16px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.visual-previa > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.previa-janela { border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 12px 32px rgba(16, 24, 40, .14); }
.barra-janela { height: 30px; background: #E9ECF1; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.barra-janela i { width: 10px; height: 10px; border-radius: 50%; background: #F87171; }
.barra-janela i:nth-child(2) { background: #FBBF24; } .barra-janela i:nth-child(3) { background: #34D399; }
.barra-janela span { margin-left: 10px; font-size: 11px; color: #5B6270; }
.previa-area { overflow: auto; max-height: 72vh; }
.previa-zoom { width: 1180px; }
@media (max-width: 1100px) {
  .visual { grid-template-columns: 1fr; }
  .visual-previa { position: static; order: -1; }
}

.btn.confirmar { background: var(--erro); border-color: var(--erro); color: #fff; }

/* Implantação */
.passos { display: grid; gap: 12px; margin: 16px 0; }
.passos .cartao + .cartao { margin-top: 0; }
.passo h2 { display: flex; align-items: center; gap: 10px; }
.passo .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px;
  background: var(--borda2); color: var(--texto2); }
.passo.feito .num { background: var(--ok-bg); color: var(--ok); }
.simulacao { margin-top: 12px; padding: 12px; border-radius: calc(var(--raio) * .7); background: var(--ok-bg); }
.simulacao.com-erro { background: var(--erro-bg); }
.simulacao p { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.simulacao .tabela { background: var(--card); border-radius: 8px; }
.erros { margin: 0 0 6px; padding-left: 18px; color: var(--erro); max-height: 220px; overflow: auto; }
details.nova-empresa { margin-top: 14px; border-top: 1px solid var(--borda); padding-top: 12px; }
details.nova-empresa summary { cursor: pointer; color: var(--pri); font-weight: 500; }
.implantacao-topo { display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: 20px; align-items: start; }
.modelo-completo { display: flex; flex-direction: column; gap: 8px; }
.legenda-modelo { display: flex; flex-wrap: wrap; gap: 6px; }
.lg { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 4px; border: 1px solid #D5DAE1; }
.lg.obrig { background: #1D4ED8; color: #fff; } .lg.opc { background: #DCE6FB; color: #1E3A8A; }
.lg.auto { background: #F1F3F6; color: #5B6270; font-style: italic; } .lg.falta { background: #FDE2E2; color: #B91C1C; }
details.colunas { margin: 4px 0 10px; }
details.colunas summary { cursor: pointer; color: var(--pri); font-weight: 500; font-size: 13px; }
details.colunas .tabela { margin-top: 8px; }
.passo > header .acoes { flex-wrap: wrap; }
@media (max-width: 860px) { .implantacao-topo { grid-template-columns: 1fr; } }

/* ---------- Módulos complementares ---------- */
.crud form.linha { margin-bottom: 12px; }
.ajuda { border-left: 4px solid var(--pri); margin-bottom: 16px; }
.ajuda p { margin: 6px 0 0; color: var(--texto2); }
.delta { display: block; font-size: 12px; margin-top: 2px; color: var(--suave); }
.delta.sobe { color: var(--ok); } .delta.desce { color: var(--erro); }
.kpi.clicavel .nota .delta::after { content: none; }
.analise ul.causas { margin: 8px 0; padding-left: 18px; } .analise li { margin-bottom: 6px; }
.personalizar summary { cursor: pointer; font-weight: 600; }
.personalizar .linha { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--texto); font-size: 14px; }
.plano { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: end; }
.plano-mes { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; text-align: center; }
.plano-barra { position: relative; width: 44px; height: 150px; display: flex; align-items: flex-end; }
.plano-barra b { display: block; width: 100%; background: var(--pri); border-radius: 4px 4px 0 0; min-height: 2px; }
.plano-barra .meta { position: absolute; left: -6px; right: -6px; border-top: 2px dashed var(--suave); }
.sim-grade { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 20px; }
.sim-controles { display: flex; flex-direction: column; gap: 14px; }
.sim-controles output { float: right; font-weight: 600; color: var(--texto); }
.sim-controles input[type=range] { width: 100%; accent-color: var(--pri); }
.sim-destaque { padding: 12px 14px; border-radius: calc(var(--raio) * .7); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.sim-destaque strong { font: 600 22px var(--fonte-titulo); }
.sim-destaque.pos { background: var(--ok-bg); color: var(--ok); } .sim-destaque.neg { background: var(--erro-bg); color: var(--erro); }
.nivel-th { font-size: 11px; text-align: center; } .nivel-td { text-align: center; }
.nivel { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borda); background: var(--card); color: var(--pri); font-size: 16px; cursor: pointer; }
.nivel.ativo { background: var(--pri); color: var(--pri-texto, #fff); border-color: var(--pri); }
.nivel:disabled { opacity: .35; cursor: not-allowed; }
.nivel.ativo:disabled { opacity: 1; }
.niveis-ajuda { margin: 12px 0 0; padding-left: 18px; }
.relatorios { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.rel-lista { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.rel-lista button { text-align: left; border: 0; background: transparent; color: var(--texto); padding: 9px 10px; border-radius: 8px; cursor: pointer; font: inherit; }
.rel-lista button:hover { background: var(--borda2); }
.rel-lista button.ativo { background: var(--info-bg); color: var(--pri); font-weight: 600; }
.sc { border-top: 1px solid var(--borda2); padding: 12px 0; }
.sc p { margin: 0 0 8px; }
.sc tr.melhor td { background: var(--ok-bg); }
.sc form { margin-top: 8px; }
code.token { display: inline-block; padding: 4px 8px; background: var(--borda2); border-radius: 6px; user-select: all; word-break: break-all; }
.assistente-btn { position: fixed; right: 20px; bottom: 20px; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--pri);
  color: var(--pri-texto, #fff); font: 700 22px var(--fonte-titulo); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); cursor: pointer; z-index: 45; }
.assistente { position: fixed; right: 20px; bottom: 84px; width: min(380px, calc(100vw - 32px)); height: min(480px, calc(100vh - 120px));
  background: var(--card); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
  display: flex; flex-direction: column; z-index: 46; }
.assistente header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--borda2); }
.assistente .conversa { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.assistente .msg { padding: 8px 10px; border-radius: 10px; max-width: 88%; line-height: 1.4; }
.assistente .msg.eu { align-self: flex-end; background: var(--pri); color: var(--pri-texto, #fff); }
.assistente .msg.sistema { align-self: flex-start; background: var(--borda2); }
.assistente form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--borda2); }
.assistente form input { flex: 1; }
@media (max-width: 860px) {
  .sim-grade, .relatorios { grid-template-columns: 1fr; }
  .plano { grid-template-columns: repeat(3, 1fr); }
  .assistente-btn { right: 14px; bottom: 14px; }
}
@media print {
  .lateral, .topo, .nao-imprimir, .rel-lista, .assistente, .assistente-btn, #toast, .ajuda { display: none !important; }
  .shell { display: block !important; } .principal { padding: 0 !important; }
  .relatorios { display: block; } .cartao { box-shadow: none !important; border: 0 !important; }
  html, body { background: #fff !important; color: #000; }
}
.relatorios > * { min-width: 0; } .rel-corpo > header { flex-wrap: wrap; }
[hidden] { display: none !important; }

/* ---------- Lapidação ---------- */
.crud > header h2 { display: flex; align-items: center; gap: 8px; }
.filtro { max-width: 220px; }
form.editando { background: var(--alerta-bg); padding: 10px; border-radius: calc(var(--raio) * .7); }
tr.linha-editando td { background: var(--alerta-bg); }
select.conta { max-width: 260px; }
.confianca { display: inline-block; min-width: 54px; padding: 1px 6px; border-radius: 999px; font-size: 12px;
  background: linear-gradient(90deg, var(--info-bg) var(--c), transparent var(--c)); border: 1px solid var(--borda); }
.meta-barra { height: 6px; background: var(--borda2); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.meta-barra i { display: block; height: 100%; background: var(--erro); transition: width var(--dur-rapido) var(--ease-padrao), background-color var(--dur-rapido) ease; }
.meta-barra i.quase { background: var(--alerta); } .meta-barra i.ok { background: var(--ok); }
.ranking { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--borda2); }
.ranking span { width: 22px; height: 22px; border-radius: 50%; background: var(--info-bg); color: var(--pri); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.ranking em { font-style: normal; font-variant-numeric: tabular-nums; }
.cartao.hoje { margin-bottom: 16px; border-left: 4px solid var(--alerta); }
.cartao.hoje h2 { margin-bottom: 8px; }
.pendencias { display: flex; flex-wrap: wrap; gap: 8px; }
.pendencia { padding: 6px 12px; border-radius: 999px; background: var(--alerta-bg); color: var(--texto); text-decoration: none; font-size: 13px; font-weight: 500; }
.pendencia:hover { outline: 1px solid var(--alerta); }
.assistente .sugestoes { display: flex; gap: 6px; overflow-x: auto; padding: 0 10px 8px; }
.assistente .sugestoes button { flex: none; border: 1px solid var(--borda); background: var(--card); color: var(--pri); border-radius: 999px;
  padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.assistente .msg ul { margin: 6px 0 0; padding-left: 16px; }
.montar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 10px; }
.montar h3 { margin-bottom: 8px; }
.ordem-kpis { margin: 0; padding-left: 20px; }
.ordem-kpis li { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--borda2); }
.montar > div > label.check { padding: 4px 0; }
.painel-corpo.so-um { grid-template-columns: 1fr !important; }
.salvar-cenario { display: flex; gap: 8px; } .salvar-cenario input { flex: 1; }
.equilibrio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.equilibrio > div { background: var(--borda2); border-radius: calc(var(--raio) * .7); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.equilibrio strong { font: 600 16px var(--fonte-titulo); }
.grafico.projecao { margin-top: 6px; }
tr.melhor td { background: var(--ok-bg); }
.maquinas-status { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.maq { border: 1px solid var(--borda); border-radius: calc(var(--raio) * .7); padding: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.maq strong { font-size: 14px; } .maq.conectada { border-color: var(--ok); background: var(--ok-bg); }
.maq.sem-sinal { border-color: var(--alerta); background: var(--alerta-bg); } .maq.sem-leituras span { color: var(--suave); }
@media (max-width: 860px) { .montar, .equilibrio { grid-template-columns: 1fr; } }
.sim-grade > *, .montar > * { min-width: 0; } .salvar-cenario input { min-width: 0; }
select, input { max-width: 100%; } form.linha > label { max-width: 100%; min-width: 0; } form.linha select { text-overflow: ellipsis; }

/* ---- Visual: busca, filtros, criador e polimento (foco, toque, movimento reduzido) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ferramentas-visual { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 12px; }
.ferramentas-visual .busca { flex: 1 1 220px; min-width: 0; }
.ferramentas-visual input[type="search"] { width: 100%; padding: 9px 12px; border: 1px solid var(--input-borda); border-radius: 10px;
  background: var(--input-bg); color: var(--texto); font: inherit; }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 8px 0; }
.campos > label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--suave); min-width: 0; }
.campos select, .campos input[type="text"] { padding: 8px 10px; border: 1px solid var(--input-borda); border-radius: 8px;
  background: var(--input-bg); color: var(--texto); font: inherit; width: 100%; }
.campos input[type="color"] { width: 100%; height: 38px; padding: 2px; border: 1px solid var(--input-borda); border-radius: 8px; background: var(--input-bg); cursor: pointer; }
.campos input[type="range"] { width: 100%; accent-color: var(--pri); }
.criar h3 { margin: 18px 0 4px; font-size: 15px; }
.meus { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.meus li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px; }
.meus li > span { overflow-wrap: anywhere; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--pri); outline-offset: 2px; }
.tema, .estrutura { transition: transform var(--dur-rapido) ease, box-shadow var(--dur-rapido) ease, border-color var(--dur-rapido) ease; }
.tema:hover, .estrutura:hover { transform: translateY(-2px); }
.tema:active, .estrutura:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .tema, .estrutura { transition: none; } .tema:hover, .estrutura:hover { transform: none; } }
/* Motion: easing em vez de linear, entrada em cascata, micro-movimento no hover. */
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
main .kpi, main .tema, main .estrutura { animation: entrar var(--dur-entrada) var(--ease-padrao) both; }
main .kpi:nth-child(2) { animation-delay: 80ms; } main .kpi:nth-child(3) { animation-delay: 160ms; } main .kpi:nth-child(4) { animation-delay: 240ms; }
button { transition: transform var(--dur-rapido) var(--ease-padrao), filter var(--dur-rapido) ease; }
button:hover:not(:disabled) { transform: translateY(-1px); }
button:active:not(:disabled) { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { main .kpi, main .tema, main .estrutura, button { animation: none; transition: none; } button:hover:not(:disabled), button:active:not(:disabled) { transform: none; } }
/* Movimento escolhido na empresa: "on" (padrão) mostra as animações mesmo com "reduzir movimento" do sistema; "reduzido" desliga. */
:root[data-movimento="on"] main .kpi, :root[data-movimento="on"] main .tema, :root[data-movimento="on"] main .estrutura { animation: entrar var(--dur-entrada) var(--ease-padrao) both; }
:root[data-movimento="on"] .tema, :root[data-movimento="on"] .estrutura { transition: transform var(--dur-rapido) ease, box-shadow var(--dur-rapido) ease, border-color var(--dur-rapido) ease; }
:root[data-movimento="on"] .tema:hover, :root[data-movimento="on"] .estrutura:hover { transform: translateY(-2px); }
:root[data-movimento="on"] button { transition: transform var(--dur-rapido) var(--ease-padrao), filter var(--dur-rapido) ease; }
:root[data-movimento="on"] button:hover:not(:disabled) { transform: translateY(-1px); }
:root[data-movimento="on"] button:active:not(:disabled) { transform: scale(.98); }
:root[data-movimento="reduzido"] *, :root[data-movimento="reduzido"] *::before, :root[data-movimento="reduzido"] *::after { animation: none !important; transition: none !important; }
/* Motion padrão em todas as abas (layout e design). Some só com "Animações: Reduzidas" no perfil da empresa. */
:root:not([data-movimento="reduzido"]) .topo h1 { animation: entrar var(--dur-normal) var(--ease-padrao) both; }
:root:not([data-movimento="reduzido"]) main .cartao, :root:not([data-movimento="reduzido"]) main .grade > * { animation: entrar var(--dur-entrada) var(--ease-padrao) both; }
:root:not([data-movimento="reduzido"]) main .cartao:nth-child(2), :root:not([data-movimento="reduzido"]) main .grade > *:nth-child(2) { animation-delay: 60ms; }
:root:not([data-movimento="reduzido"]) main .cartao:nth-child(3), :root:not([data-movimento="reduzido"]) main .grade > *:nth-child(3) { animation-delay: 120ms; }
:root:not([data-movimento="reduzido"]) main .cartao:nth-child(n+4), :root:not([data-movimento="reduzido"]) main .grade > *:nth-child(n+4) { animation-delay: 180ms; }
:root:not([data-movimento="reduzido"]) .cartao { transition: transform var(--dur-normal) var(--ease-padrao), box-shadow var(--dur-normal) ease; }
:root:not([data-movimento="reduzido"]) .cartao:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
:root:not([data-movimento="reduzido"]) .lateral a { transition: background-color var(--dur-normal) ease, transform var(--dur-normal) var(--ease-padrao); }
:root:not([data-movimento="reduzido"]) .lateral a:hover { transform: translateX(3px); }
:root:not([data-movimento="reduzido"]) .abas button { transition: background-color var(--dur-normal) ease, color var(--dur-normal) ease, transform var(--dur-rapido) var(--ease-padrao); }
:root:not([data-movimento="reduzido"]) table tr { transition: background-color var(--dur-rapido) ease; }
:root:not([data-movimento="reduzido"]) input, :root:not([data-movimento="reduzido"]) select, :root:not([data-movimento="reduzido"]) textarea { transition: border-color var(--dur-rapido) ease, box-shadow var(--dur-rapido) ease; }
/* Botões: sobem no hover, afundam ao clicar e ganham sombra; o principal clareia um pouco. */
:root:not([data-movimento="reduzido"]) .btn { transition: transform var(--dur-rapido) var(--ease-padrao), box-shadow var(--dur-normal) ease, background-color var(--dur-normal) ease, border-color var(--dur-normal) ease, filter var(--dur-normal) ease; }
:root:not([data-movimento="reduzido"]) .btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
:root:not([data-movimento="reduzido"]) .btn.pri:hover:not(:disabled) { filter: brightness(1.06); }
:root:not([data-movimento="reduzido"]) .btn:active:not(:disabled) { transform: translateY(0) scale(.97); box-shadow: 0 2px 6px rgba(0, 0, 0, .15); transition-duration: var(--dur-rapido); }
:root:not([data-movimento="reduzido"]) .btn:disabled { transform: none; box-shadow: none; }
/* Catálogo de aplicativos (Integrações) */
.apps-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.app-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--borda); border-radius: 10px; background: var(--card); }
:root:not([data-movimento="reduzido"]) .app-card { transition: transform var(--dur-normal) var(--ease-padrao), box-shadow var(--dur-normal) ease, border-color var(--dur-normal) ease; }
:root:not([data-movimento="reduzido"]) .app-card:hover { transform: translateY(-2px); border-color: var(--suave); box-shadow: 0 8px 18px rgba(0, 0, 0, .14); }
/* Simulador de cenários: resultado entra com motion a cada ajuste; controles reagem ao toque */
:root:not([data-movimento="reduzido"]) #sim-resultado > * { animation: entrar var(--dur-normal) var(--ease-padrao) both; }
:root:not([data-movimento="reduzido"]) #simulador input[type=range]::-webkit-slider-thumb { transition: transform var(--dur-rapido) var(--ease-padrao); }
:root:not([data-movimento="reduzido"]) #simulador input[type=range]:hover::-webkit-slider-thumb, :root:not([data-movimento="reduzido"]) #simulador input[type=range]:active::-webkit-slider-thumb { transform: scale(1.2); }
:root:not([data-movimento="reduzido"]) #simulador .btn { transition: transform var(--dur-rapido) var(--ease-padrao), box-shadow var(--dur-normal) ease, background-color var(--dur-normal) ease, border-color var(--dur-normal) ease; }
:root:not([data-movimento="reduzido"]) #simulador .btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
:root:not([data-movimento="reduzido"]) #simulador .btn:active:not(:disabled) { transform: translateY(0) scale(.97); box-shadow: 0 2px 6px rgba(0, 0, 0, .15); transition-duration: var(--dur-rapido); }
/* Gráficos interativos: barras crescem da base em cascata, destacam no hover; linha da projeção se desenha. */
:root:not([data-movimento="reduzido"]) .grafico g rect, :root:not([data-movimento="reduzido"]) .barra .e, :root:not([data-movimento="reduzido"]) .barra .s {
  transform-box: fill-box; transform-origin: 50% 100%; animation: crescer var(--dur-entrada) var(--ease-padrao) both; animation-delay: calc(var(--i, 0) * 70ms); }
:root:not([data-movimento="reduzido"]) .barra .s { animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
@keyframes crescer { from { transform: scaleY(0); } to { transform: scaleY(1); } }
:root:not([data-movimento="reduzido"]) .grafico g { cursor: pointer; transition: opacity var(--dur-normal) ease; }
:root:not([data-movimento="reduzido"]) .grafico:hover g { opacity: .55; }
:root:not([data-movimento="reduzido"]) .grafico g:hover { opacity: 1; }
:root:not([data-movimento="reduzido"]) .grafico g:hover rect { filter: brightness(1.15); transition: filter var(--dur-rapido) ease; }
:root:not([data-movimento="reduzido"]) .grafico circle { transition: r var(--dur-rapido) var(--ease-padrao); cursor: pointer; }
:root:not([data-movimento="reduzido"]) .grafico circle:hover { r: 6; }
:root:not([data-movimento="reduzido"]) .grafico .linha-proj { stroke-dasharray: 100; stroke-dashoffset: 100; animation: desenhar var(--dur-lenta) var(--ease-padrao) var(--dur-normal) forwards; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
:root:not([data-movimento="reduzido"]) .barra { transition: opacity var(--dur-normal) ease; }
:root:not([data-movimento="reduzido"]) .barras:hover .barra { opacity: .6; }
:root:not([data-movimento="reduzido"]) .barras .barra:hover { opacity: 1; }
/* Área de importação: tracejada, acende ao arrastar, mostra o arquivo escolhido */
.arquivo-drop { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 58px; border: 1.5px dashed var(--borda2, var(--borda)); border-radius: 10px; background: var(--card); color: var(--suave); cursor: pointer; font-size: .92rem; }
.arquivo-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.arquivo-icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--borda2, var(--borda)); color: var(--texto); font-size: 18px; flex: none; }
.arquivo-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arquivo-drop.escolhido { border-style: solid; border-color: var(--pri); color: var(--texto); }
.arquivo-drop:focus-within { outline: 2px solid var(--pri); outline-offset: 2px; }
:root:not([data-movimento="reduzido"]) .arquivo-drop { transition: border-color var(--dur-normal) ease, background-color var(--dur-normal) ease, transform var(--dur-normal) var(--ease-padrao); }
:root:not([data-movimento="reduzido"]) .arquivo-drop:hover, .arquivo-drop.sobre { border-color: var(--pri); }
:root:not([data-movimento="reduzido"]) .arquivo-drop.sobre { transform: scale(1.01); background: color-mix(in srgb, var(--pri) 10%, var(--card)); }
:root:not([data-movimento="reduzido"]) .arquivo-icone { transition: transform var(--dur-normal) var(--ease-padrao); }
:root:not([data-movimento="reduzido"]) .arquivo-drop.sobre .arquivo-icone, :root:not([data-movimento="reduzido"]) .arquivo-drop:hover .arquivo-icone { transform: translateY(-3px); }
:root:not([data-movimento="reduzido"]) .acao-passo { transition: transform var(--dur-rapido) var(--ease-padrao), box-shadow var(--dur-normal) ease, background-color var(--dur-normal) ease; }
:root:not([data-movimento="reduzido"]) .acao-passo:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
/* Ajustes do simulador: rótulo + valor em pílula, trilho preenchido até o ponto e polegar com motion */
.sim-controles .ajuste { display: flex; flex-direction: column; gap: 8px; }
.ajuste-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--suave); font-size: .92rem; }
.sim-controles .ajuste output { float: none; min-width: 64px; text-align: center; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--borda); background: var(--card); color: var(--texto); font-variant-numeric: tabular-nums; }
.sim-controles input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--pri) 0, var(--pri) var(--p, 50%), var(--borda) var(--p, 50%), var(--borda) 100%); }
.sim-controles input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--pri); border: 3px solid var(--card); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.sim-controles input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--pri); border: 3px solid var(--card); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.sim-controles input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--suave); }
.sim-controles .ajuste output.pulso { animation: pulso var(--dur-normal) var(--ease-padrao); }
@keyframes pulso { from { transform: scale(1.14); } to { transform: scale(1); } }
:root[data-movimento="reduzido"] .sim-controles .ajuste output.pulso { animation: none; }
@media (max-width: 640px) { .campos { grid-template-columns: 1fr; } .ferramentas-visual > .btn { width: 100%; } }

/* ---- Feedback por elemento (menu de contexto da prévia) ---- */
.menu-elemento { position: fixed; z-index: 1000; width: 290px; background: var(--card); color: var(--texto); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: 0 12px 32px rgba(0, 0, 0, .25); padding: 8px; display: grid; gap: 4px; }
.menu-elemento .menu-titulo { font-weight: 600; padding: 4px 8px; color: var(--suave); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.menu-elemento button { font: inherit; text-align: left; background: transparent; color: var(--texto); border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.menu-elemento button:hover, .menu-elemento button:focus-visible { background: color-mix(in srgb, var(--pri) 14%, transparent); }
.menu-sugestoes { display: grid; gap: 2px; border-top: 1px solid var(--borda); margin-top: 4px; padding-top: 6px; }
.menu-sugestoes[hidden] { display: none; }
[data-el] { cursor: context-menu; }

/* ---- Paleta de séries nas miniaturas de tema (Power BI) ---- */
.amostra .paleta { position: absolute; left: 6px; bottom: 6px; display: flex; gap: 2px; }
.amostra .paleta i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); display: block; }
.tema .amostra { position: relative; }

/* Menu no topo com todos os módulos: quebra em mais de uma linha em vez de empurrar o usuário/Sair para fora da tela. */
[data-menu="topo"] .lateral { flex-wrap: wrap; row-gap: 6px; }
[data-menu="topo"] .lateral .rodape { margin-left: auto; }

/* Prévia somente leitura (perfil leitor): esconde formulários e ações de alteração. */
[data-leitor] main form button[type=submit], [data-leitor] main [data-acao]:not([data-acao-global]) { display: none !important; }

/* ---- Celular (até 640px): alvos de toque maiores, uma coluna, barra inferior de atalhos ---- */
.barra-inferior { display: none; }
@media (max-width: 640px) {
  .btn { min-height: 44px; }
  .btn.peq { min-height: 40px; padding: 8px 12px; }
  .lateral a, .abas button, .rel-lista button { min-height: 44px; }
  input:not([type=checkbox]):not([type=range]):not([type=file]), select, textarea { min-height: 44px; font-size: 16px; }
  .grade.kpis { grid-template-columns: 1fr; }
  main.principal { padding-bottom: 92px; }
  .barra-inferior { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-around; gap: 4px;
    background: var(--card); border-top: 1px solid var(--borda); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .barra-inferior a, .barra-inferior button { flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: none; border: 0; border-radius: 10px; color: var(--suave); font: inherit; font-size: 11px; text-decoration: none; cursor: pointer; }
  .barra-inferior a.ativo { color: var(--pri); font-weight: 600; background: color-mix(in srgb, var(--pri) 12%, transparent); }
  .barra-inferior .sigla { font-weight: 700; font-size: 13px; }
  .assistente-btn { bottom: 96px; right: 14px; }
  .assistente { bottom: 158px; right: 14px; }
  #toast { bottom: 100px; }
  .topo h1 { font-size: 20px; }
  .acoes { flex-wrap: wrap; }
  .cartao { padding: 14px; }
  .sim-controles input[type=range] { height: 8px; }
  .sim-controles input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; }
  .sim-controles .ajuste { gap: 10px; }
}
:root:not([data-movimento="reduzido"]) .barra-inferior a, :root:not([data-movimento="reduzido"]) .barra-inferior button { transition: background-color var(--dur-normal) ease, color var(--dur-normal) ease, transform var(--dur-rapido) var(--ease-padrao); }
:root:not([data-movimento="reduzido"]) .barra-inferior a:active, :root:not([data-movimento="reduzido"]) .barra-inferior button:active { transform: scale(.94); }
/* Celular: gráficos são SVG escalado; o texto precisa de tamanho em unidades do viewBox para ficar legível */
@media (max-width: 640px) {
  .grafico text { font-size: 18px; }
  .lateral .sigla { font-size: 11px; }
  .rodape button { min-height: 44px; }
}

/* Trocar elemento no próprio lugar: painel flutuante + destaque pulsante no elemento escolhido */
.troca-previa { position: fixed; right: 16px; bottom: 16px; z-index: 70; width: min(340px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; padding: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .28); }
.troca-previa header { margin-bottom: 4px; }
.troca-opcoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.troca-opcoes button { font: inherit; font-size: .9rem; padding: 8px 12px; min-height: 40px; border-radius: 999px; border: 1px solid var(--borda); background: var(--card); color: var(--texto); cursor: pointer; }
.troca-opcoes button[aria-pressed="true"] { border-color: var(--pri); background: color-mix(in srgb, var(--pri) 18%, var(--card)); font-weight: 600; }
.alvo-troca { outline: 3px solid var(--pri); outline-offset: 3px; border-radius: 10px; }
:root:not([data-movimento="reduzido"]) .troca-previa { animation: entrar var(--dur-normal) var(--ease-padrao) both; }
:root:not([data-movimento="reduzido"]) .alvo-troca { animation: pulsoAlvo 1.4s ease-in-out infinite; }
@keyframes pulsoAlvo { 0%, 100% { outline-color: var(--pri); } 50% { outline-color: transparent; } }
@media (max-width: 640px) { .troca-previa { left: 12px; right: 12px; width: auto; bottom: 96px; max-height: 50vh; } }

/* Recrutamento: vagas, pipeline por etapa e cartões de candidato */
.rec-vagas { display: flex; flex-wrap: wrap; gap: 8px; }
.rec-pipeline { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 12px 0; align-items: start; }
.rec-coluna h3 { font-size: .95rem; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; }
.rec-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; margin-bottom: 8px; border: 1px solid var(--borda); border-radius: 10px; background: var(--card); }
.rec-card .acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.integra-cand { margin-top: 8px; }
:root:not([data-movimento="reduzido"]) .rec-card { transition: transform var(--dur-normal) var(--ease-padrao), box-shadow var(--dur-normal) ease; }
:root:not([data-movimento="reduzido"]) .rec-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .14); }

/* Automações: cartão no topo de cada aba e avisos */
.aut-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.aut-item { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--borda); border-radius: 10px; }
.aut-aviso { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.aut-aviso p { margin: 2px 0 0; }
.aut-vazio { margin: 0 0 8px; font-size: .9rem; }

/* Segurança da conta (2FA) */
dialog.seguranca { max-width: min(440px, 92vw); border: 1px solid var(--borda); border-radius: 14px; background: var(--card); color: var(--texto); padding: 18px; }
dialog.seguranca::backdrop { background: rgba(0, 0, 0, .45); }
dialog.seguranca code.token { word-break: break-all; }