@font-face { font-family: "TWK Lausanne"; src: url(../fonts/twk-lausanne-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "TWK Lausanne"; src: url(../fonts/twk-lausanne-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "TWK Lausanne"; src: url(../fonts/twk-lausanne-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --papel: #F2F1EE;
  --superficie: #FFFFFF;
  --tinta: #20201E;
  --tinta-2: #4A4945;
  --apagado: #6F6A62;
  --marca-apagado: #8F897E;
  --linha: #DCDAD4;
  --linha-forte: #C9C6BE;
  --suave: #E9E7E2;
  --suave-2: #F7F6F3;
  --verde: #69B7B9;
  --verde-tinta: #2F7173;
  --verde-fundo: #E3F0F0;
  --grafite: #20201E;
  --grafite-tinta: #E9E7E2;
  --grafite-apagado: #A39E93;
  --grafite-linha: #3A3935;
  --f-vermelho: #B4533F;
  --f-laranja: #9A5F24;
  --f-verde: #377C4B;
  --f-azul: #3A6EA5;
  --f-cinza: #8F897E;
  --f-vermelho-fundo: #F6E6E2;
  --f-laranja-fundo: #F4EADF;
  --f-verde-fundo: #E3EFE6;
  --f-azul-fundo: #E3EBF4;
  --f-cinza-fundo: #ECEAE5;
  --sombra-flutua: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .10);
  --fonte: "TWK Lausanne", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --raio: 14px;
  --raio-c: 10px;
  --entra: cubic-bezier(.16, 1, .3, 1);
  --sai: cubic-bezier(.7, 0, .84, 0);
  --d1: 120ms;
  --d2: 180ms;
  --d3: 260ms;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel: #161614; --superficie: #1F1F1D; --tinta: #E9E7E2; --tinta-2: #C2BFB8; --apagado: #A9A49A; --marca-apagado: #7A756C;
    --linha: #34332F; --linha-forte: #45443F; --suave: #2A2926; --suave-2: #232321; --verde: #69B7B9; --verde-tinta: #8FCBCD; --verde-fundo: #213233;
    --grafite: #2C2B28; --grafite-tinta: #EDEBE6; --grafite-apagado: #A39E93; --grafite-linha: #45443F;
    --f-vermelho: #E08A76; --f-laranja: #D9A066; --f-verde: #7CC08F; --f-azul: #86AEDD; --f-cinza: #7A756C;
    --f-vermelho-fundo: #3A2622; --f-laranja-fundo: #3A2E20; --f-verde-fundo: #213325; --f-azul-fundo: #1F2B3A; --f-cinza-fundo: #2A2926;
    --sombra-flutua: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .4);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo-fixo, 0px) + 16px); }
body.hub { margin: 0; background: var(--papel); color: var(--tinta); font: 14px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
:where(body.hub) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(body.hub) :where(h1, h2, h3, h4) { margin: 0; text-wrap: balance; letter-spacing: -.01em; }
:where(body.hub) h1 { font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
:where(body.hub) h2 { font-size: 22px; font-weight: 600; line-height: 1.2; }
:where(body.hub) h3 { font-size: 16px; font-weight: 600; line-height: 1.3; }
:where(body.hub) p { margin: 0; text-wrap: pretty; }
:where(body.hub) a { color: var(--verde-tinta); text-underline-offset: 2px; }
:where(body.hub) :focus-visible { outline: 2px solid var(--verde-tinta); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fora-da-tela { position: fixed; left: -9999px; top: 0; opacity: 0; }
.pular { position: absolute; left: 8px; top: -60px; background: var(--tinta); color: var(--papel) !important; padding: 8px 12px; border-radius: 8px; z-index: 100; }
.pular:focus { top: 8px; }
.num { font-variant-numeric: tabular-nums; }
.apagado { color: var(--apagado); }
.pequeno { font-size: 13px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.rotulo { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); margin: 0; }

/* casca */
.casca { display: grid; grid-template-columns: 64px minmax(0, 1fr); min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; border-right: 1px solid var(--linha); background: var(--papel); z-index: 30; }
.lateral-marca { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 10px; }
.lateral-marca img { width: 32px; height: 32px; display: block; }
.lat-item { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--tinta-2); text-decoration: none; border: 0; background: none; cursor: pointer; transition: background var(--d1), color var(--d1); }
.lat-item svg { width: 20px; height: 20px; }
.lat-item:hover { background: var(--suave); color: var(--tinta); }
.lat-item[aria-current="page"] { background: var(--tinta); color: var(--papel); }
.lat-item .dica { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px); background: var(--tinta); color: var(--papel); font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--d2), transform var(--d2) var(--entra); }
.lat-item:hover .dica, .lat-item:focus-visible .dica { opacity: 1; transform: translateY(-50%); }
.lateral-pe { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.av { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 12px; font-weight: 600; background: var(--suave); color: var(--tinta-2); letter-spacing: 0; }
.av-p { width: 26px; height: 26px; font-size: 10.5px; }
.av-equipe { background: var(--verde-fundo); color: var(--verde-tinta); }
.av-c0 { background: #E7E0F3; color: #5A3E8C; } .av-c1 { background: #F4E4D6; color: #7A4A1E; } .av-c2 { background: #DDEBE3; color: #2E6544; } .av-c3 { background: #DCE6F2; color: #2E5482; } .av-c4 { background: #F2DEE4; color: #8A3550; } .av-c5 { background: #E6E3D6; color: #5C5630; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .av[class*="av-c"] { background: var(--suave); color: var(--tinta-2); } }
.principal { min-width: 0; padding: 24px clamp(16px, 3vw, 40px) 64px; }
.migalha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--apagado); margin: 0 0 16px; list-style: none; padding: 0; }
.migalha a { color: var(--tinta-2); text-decoration: none; }
.migalha a:hover { color: var(--tinta); text-decoration: underline; }
.migalha li + li::before { content: "›"; margin-right: 6px; color: var(--marca-apagado); }
.migalha li:last-child { color: var(--tinta); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 7px 14px; border-radius: var(--raio-c); border: 1px solid var(--tinta); background: var(--tinta); color: var(--papel); font-size: 13px; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--d1), border-color var(--d1), color var(--d1), opacity var(--d1), transform var(--d1); }
.btn:hover { opacity: .88; color: var(--papel); }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-sec { background: var(--superficie); color: var(--tinta); border-color: var(--linha); }
.btn-sec:hover { opacity: 1; border-color: var(--tinta); color: var(--tinta); }
.btn-fantasma { background: none; border-color: transparent; color: var(--tinta-2); }
.btn-fantasma:hover { opacity: 1; background: var(--suave); color: var(--tinta); }
.btn-perigo { background: var(--superficie); color: var(--f-vermelho); border-color: var(--linha); }
.btn-perigo:hover { opacity: 1; border-color: var(--f-vermelho); color: var(--f-vermelho); }
.btn-p { min-height: 30px; padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.btn-icone { width: 32px; min-height: 32px; padding: 0; border-radius: 8px; }
.btn .giro { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: girar .75s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.link-btn { border: 0; background: none; padding: 0; color: var(--verde-tinta); font-weight: 500; cursor: pointer; text-decoration: none; font-size: inherit; }
.link-btn:hover { text-decoration: underline; }

/* pílulas */
.pilula { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 500; white-space: nowrap; border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta-2); }
.pilula svg { width: 13px; height: 13px; flex: none; }
.pilula .ponto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.p-pronta { border-color: color-mix(in srgb, var(--f-verde) 40%, transparent); color: var(--f-verde); background: var(--f-verde-fundo); }
.p-processando { border-color: color-mix(in srgb, var(--f-azul) 35%, transparent); color: var(--f-azul); background: var(--f-azul-fundo); }
.p-processando .ponto { animation: pulsar 1.4s ease-in-out infinite; }
.p-gravando { border-color: color-mix(in srgb, var(--f-vermelho) 40%, transparent); color: var(--f-vermelho); background: var(--f-vermelho-fundo); }
.p-gravando .ponto { animation: pulsar 1.4s ease-in-out infinite; }
.p-erro { border-color: color-mix(in srgb, var(--f-vermelho) 40%, transparent); color: var(--f-vermelho); background: var(--f-vermelho-fundo); }
.p-ignorada { color: var(--apagado); background: var(--f-cinza-fundo); border-color: transparent; }
.p-encerrada { color: var(--tinta-2); background: var(--suave); border-color: transparent; }
.p-verde { color: var(--f-verde); background: var(--f-verde-fundo); border-color: transparent; }
.p-laranja { color: var(--f-laranja); background: var(--f-laranja-fundo); border-color: transparent; }
.p-vermelho { color: var(--f-vermelho); background: var(--f-vermelho-fundo); border-color: transparent; }
.p-azul { color: var(--f-azul); background: var(--f-azul-fundo); border-color: transparent; }
.p-cinza { color: var(--tinta-2); background: var(--suave); border-color: transparent; }
.p-marca { color: var(--verde-tinta); background: var(--verde-fundo); border-color: transparent; }
.p-tracejada { border-style: dashed; color: var(--apagado); background: none; }
@keyframes pulsar { 50% { opacity: .35; } }

/* anéis */
.anel { position: relative; display: inline-grid; place-items: center; flex: none; }
.anel svg { display: block; transform: rotate(-90deg); }
.anel .trilho { fill: none; stroke: var(--suave); }
.anel .arco { fill: none; stroke: currentColor; stroke-linecap: round; transition: stroke-dashoffset 600ms var(--entra); }
.anel .anel-num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); letter-spacing: -.01em; }
.anel-40 .anel-num { font-size: 12.5px; }
.anel-104 .anel-num { font-size: 26px; }
.anel-120 .anel-num { font-size: 32px; line-height: 1; align-content: center; gap: 2px; }
.anel-120 .anel-num small { font-size: 12px; font-weight: 400; color: var(--apagado); letter-spacing: 0; }
.fx-vermelho { color: var(--f-vermelho); } .fx-laranja { color: var(--f-laranja); } .fx-verde { color: var(--f-verde); } .fx-azul { color: var(--f-azul); } .fx-cinza { color: var(--f-cinza); }
.anel.fx-cinza .anel-num { color: var(--apagado); font-weight: 500; }

/* cartões e faixas */
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; min-width: 0; }
.faixa-aviso { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linha); background: var(--superficie); margin: 0 0 16px; }
.faixa-aviso > svg { width: 18px; height: 18px; margin-top: 1px; }
.faixa-aviso strong { display: block; font-weight: 600; }
.faixa-aviso p { color: var(--tinta-2); font-size: 13px; }
.faixa-aviso .faixa-acao { align-self: center; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.faixa-aviso.perigo { background: var(--f-vermelho-fundo); border-color: color-mix(in srgb, var(--f-vermelho) 30%, transparent); }
.faixa-aviso.perigo > svg { color: var(--f-vermelho); }
.faixa-aviso.atencao { background: var(--f-laranja-fundo); border-color: color-mix(in srgb, var(--f-laranja) 30%, transparent); }
.faixa-aviso.atencao > svg { color: var(--f-laranja); }
.faixa-aviso.info > svg { color: var(--verde-tinta); }
.faixa-aviso ul { margin: 4px 0 0; padding-left: 18px; color: var(--tinta-2); font-size: 13px; }

/* avisos (toasts do comum.js) */
.avisos { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; z-index: 200; pointer-events: none; width: min(420px, calc(100vw - 32px)); }
.aviso { background: var(--tinta); color: var(--papel); padding: 10px 16px; border-radius: 10px; font-size: 13px; box-shadow: var(--sombra-flutua); transition: opacity 300ms var(--sai), transform 300ms var(--sai); animation: subir var(--d3) var(--entra); }
.aviso-erro { background: var(--f-vermelho); color: #fff; }
.aviso.saindo { opacity: 0; transform: translateY(6px); }
@keyframes subir { from { opacity: 0; transform: translateY(6px); } }

/* login */
.entrada-tela { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.entrada-cartao { width: 100%; max-width: 380px; display: grid; gap: 16px; }
.entrada-cartao .entrada-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.entrada-cartao .entrada-marca img { width: 36px; height: 36px; }
.entrada-cartao .entrada-marca b { display: block; font-size: 15px; font-weight: 600; line-height: 1.1; }
.entrada-cartao .entrada-marca span { font-size: 12px; color: var(--apagado); }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > span { font-size: 13px; font-weight: 500; color: var(--tinta-2); }
.entrada, .campo input:not([type="checkbox"]), .campo select, .campo textarea, .seletor { width: 100%; min-height: 38px; padding: 8px 11px; border-radius: 9px; border: 1px solid var(--linha); background: var(--superficie); font-size: 14px; transition: border-color var(--d1); }
.campo textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus, .seletor:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 35%, transparent); }
.campo small { font-size: 12px; color: var(--apagado); }
.erro-form { color: var(--f-vermelho); font-size: 13px; font-weight: 500; min-height: 1.2em; margin: 0; }
.marcar { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--tinta-2); cursor: pointer; }
.marcar input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--verde-tinta); }

/* cabeçalho de página */
.cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cabeca-t { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cabeca-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.selo-meet { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-2); }
.selo-meet .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--f-cinza); flex: none; }
.selo-meet.ligada .ponto { background: var(--f-verde); }
.selo-meet.falha .ponto { background: var(--f-vermelho); }

/* filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.campo-busca { position: relative; flex: 1 1 240px; max-width: 320px; }
.campo-busca svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--apagado); pointer-events: none; }
.campo-busca input { padding-left: 34px; }
.seletor { width: auto; min-width: 0; padding-right: 30px; cursor: pointer; flex: 0 1 auto; max-width: 100%; }
.filtros-botao { display: none !important; }
.filtro-datas { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.filtro-datas input { width: 150px; }

/* tabela */
.tabela-caixa { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.tabela-reunioes { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-reunioes th { text-align: left; font-size: 12px; font-weight: 500; color: var(--apagado); padding: 10px 12px; border-bottom: 1px solid var(--linha); white-space: nowrap; background: var(--superficie); }
.tabela-reunioes th.c-num, .tabela-reunioes td.c-num { text-align: center; width: 112px; }
.tabela-reunioes th.c-status, .tabela-reunioes td.c-status { width: 132px; }
.tabela-reunioes th.c-menu, .tabela-reunioes td.c-menu { width: 48px; text-align: right; }
.tabela-reunioes td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela-reunioes tbody tr:last-child td { border-bottom: 0; }
.linha-reuniao { cursor: pointer; transition: background var(--d1); animation: subir var(--d3) var(--entra) both; animation-delay: calc(min(var(--i, 0), 10) * 18ms); }
.linha-reuniao:hover { background: var(--suave-2); }
.cel-reuniao { display: flex; gap: 12px; align-items: center; min-width: 0; }
.cel-reuniao > div { min-width: 0; }
.titulo-reuniao { font-size: 14px; font-weight: 500; color: var(--tinta); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titulo-reuniao:hover { text-decoration: underline; }
.meta-reuniao { display: flex; flex-wrap: wrap; color: var(--apagado); font-size: 12.5px; margin: 2px 0 0 -14px; clip-path: inset(0 0 0 14px); }
.meta-reuniao span { white-space: nowrap; }
.meta-reuniao span::before { content: "·"; display: inline-block; width: 14px; text-align: center; }
.cel-anel { display: inline-grid; justify-items: center; gap: 2px; }
.cel-anel .anel-legenda { display: none; font-size: 11px; color: var(--apagado); }
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--linha); font-size: 13px; color: var(--tinta-2); }
.paginacao .pag-botoes { display: flex; gap: 4px; align-items: center; }
.paginacao .pag-botoes span { padding: 0 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.esqueleto-linha td { padding: 14px 12px; }
.esq { display: block; height: 10px; border-radius: 5px; background: var(--suave); animation: esmaecer 1.4s ease-in-out infinite; }
.esq-circ { width: 40px; height: 40px; border-radius: 50%; margin: 0 auto; }
@keyframes esmaecer { 50% { opacity: .5; } }
.vazio { text-align: center; padding: 48px 16px; display: grid; justify-items: center; gap: 8px; color: var(--tinta-2); }
.vazio strong { font-size: 16px; color: var(--tinta); font-weight: 600; }
.vazio p { max-width: 52ch; }
.vazio .cabeca-acoes { justify-content: center; margin-top: 8px; }

/* menu e popover */
.menu-ancora { position: relative; display: inline-block; }
.menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 200px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra-flutua); padding: 4px; z-index: 40; display: grid; transform-origin: top right; transition: opacity var(--d2) var(--entra), transform var(--d2) var(--entra); }
.menu[data-estado="fechado"] { opacity: 0; transform: translateY(-2px) scale(.97); pointer-events: none; transition-duration: 130ms; transition-timing-function: var(--sai); }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 8px; text-align: left; font-size: 13px; color: var(--tinta); text-decoration: none; cursor: pointer; }
.menu a:hover, .menu button:hover, .menu a:focus-visible, .menu button:focus-visible { background: var(--suave); outline: none; }
.menu svg { width: 16px; height: 16px; color: var(--tinta-2); flex: none; }
.popover { position: absolute; z-index: 45; width: min(440px, calc(100vw - 32px)); max-height: min(60vh, 420px); overflow: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra-flutua); padding: 16px; display: grid; gap: 10px; transform-origin: top left; transition: opacity var(--d2) var(--entra), transform var(--d2) var(--entra); }
.popover[data-estado="fechado"] { opacity: 0; transform: translateY(-2px) scale(.97); pointer-events: none; transition-duration: 130ms; }
.popover-topo { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.popover p { color: var(--tinta-2); white-space: pre-wrap; user-select: text; }

/* diálogo */
dialog.dialogo { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); color: var(--tinta); box-shadow: 0 8px 30px rgb(0 0 0 / .12); }
dialog.dialogo[open] { animation: aparecer var(--d2) var(--entra); }
dialog.dialogo::backdrop { background: rgb(20 20 18 / .42); }
@keyframes aparecer { from { opacity: 0; transform: scale(.97); } }
.dialogo-corpo { padding: 20px; display: grid; gap: 14px; }
.dialogo-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dialogo-topo p { color: var(--tinta-2); font-size: 13px; margin-top: 4px; }
.dialogo-pe { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.passos-ext { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--tinta-2); }
.passos-ext strong { color: var(--tinta); font-weight: 500; }
.codigo { font-family: var(--mono); font-size: 12.5px; background: var(--suave); padding: 1px 6px; border-radius: 5px; }

/* relatório */
.relatorio { display: grid; grid-template-columns: 272px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 32px 40px; align-items: start; }
.rel-cabeca { grid-column: 2; grid-row: 1; }
.rel-conteudo { grid-column: 2; grid-row: 2; }
.rel-lateral { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 20px; padding-right: 4px; scrollbar-width: thin; }
.ancoras { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.ancoras a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; border-radius: 99px; color: var(--tinta-2); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: background var(--d1), color var(--d1); }
.ancoras a:hover { background: var(--suave); color: var(--tinta); }
.ancoras a[aria-current="true"] { background: var(--tinta); color: var(--papel); }
.ancoras a .cont { font-size: 12px; font-weight: 400; opacity: .75; font-variant-numeric: tabular-nums; }
.bloco-lateral { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--linha); }
.ficha-lateral { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13px; }
.ficha-lateral dt { color: var(--apagado); }
.ficha-lateral dd { margin: 0; color: var(--tinta); font-variant-numeric: tabular-nums; }
.tipo-status { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 8px; font-size: 13px; }
.tipo-status svg { width: 18px; height: 18px; color: var(--f-verde); }
.tipo-status.alerta svg { color: var(--f-laranja); }
.tipo-status b { font-weight: 500; }
.tipo-status p { grid-column: 2; color: var(--apagado); font-size: 12.5px; }
.participantes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.participante { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; }
.participante .p-nome { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.participante .p-meta { font-size: 12px; color: var(--apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.participante .p-meta b { font-weight: 500; color: var(--tinta-2); }
.acoes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.acoes-lista button, .acoes-lista a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; background: none; border-radius: 8px; text-align: left; font-size: 13px; color: var(--tinta); text-decoration: none; cursor: pointer; transition: background var(--d1); }
.acoes-lista button:hover, .acoes-lista a:hover { background: var(--suave); }
.acoes-lista button:disabled { opacity: .45; cursor: not-allowed; }
.acoes-lista button:disabled:not(.acao-principal) { background: none; }
.acoes-lista svg { width: 16px; height: 16px; color: var(--tinta-2); flex: none; }
.acoes-lista .acao-principal { background: var(--tinta); color: var(--papel); font-weight: 500; padding: 9px 10px; margin-bottom: 4px; }
.acoes-lista .acao-principal svg { color: var(--papel); }
.acoes-lista .acao-principal:hover { background: var(--tinta); opacity: .88; }
.acoes-lista .acao-perigo { color: var(--f-vermelho); }
.acoes-lista .acao-perigo svg { color: var(--f-vermelho); }
.reprocessar-caixa { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); margin: 4px 0; }
.rel-conteudo { min-width: 0; display: grid; gap: 48px; }
.rel-cabeca { display: grid; gap: 8px; }
.rel-cabeca .rel-sub { color: var(--tinta-2); font-size: 14px; }
.rel-cabeca .rel-pilulas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.secao-rel { display: grid; gap: 16px; scroll-margin-top: 16px; min-width: 0; }
.secao-cabeca { display: grid; gap: 2px; }
.secao-cabeca p { color: var(--apagado); font-size: 13px; }
.sub-secao { display: grid; gap: 12px; min-width: 0; align-content: start; }
.secao-rel > .sub-secao + .sub-secao { margin-top: 16px; }
.sub-cabeca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.sub-cabeca .sub-t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sub-cabeca h3 { margin: 0; }
.sub-cabeca + p { margin: -6px 0 0; }
.contagem { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 99px; background: var(--suave); color: var(--tinta-2); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dg2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.kpi .kpi-r { font-size: 12.5px; color: var(--apagado); }
.kpi .kpi-v { font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .kpi-v small { font-size: 14px; font-weight: 500; color: var(--apagado); letter-spacing: 0; }
.kpi .kpi-d { font-size: 12px; color: var(--apagado); }
.kpi .kpi-indisp { font-size: 13px; color: var(--apagado); font-weight: 500; }
.barra-fala { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--suave); gap: 2px; }
.barra-fala span { display: block; height: 100%; }
.barra-fala .b-cliente { background: var(--verde); }
.barra-fala .b-equipe { background: var(--tinta); }
.legenda-fala { display: flex; gap: 12px; font-size: 12px; color: var(--apagado); }
.legenda-fala i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }

/* score */
.card-score { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 24px; }
.score-lado { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; }
.score-lado .rotulo { margin-top: 4px; }
.score-lado .faixa-nome { font-size: 15px; font-weight: 600; }
.score-lado .conf { font-size: 12.5px; color: var(--apagado); }
.score-info { display: grid; gap: 16px; align-content: start; min-width: 0; }
.score-info .analise { color: var(--tinta-2); }
.sinais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 16px; border-top: 1px solid var(--linha); }
.sinais ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.sinal { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13px; }
.sinal svg { width: 16px; height: 16px; margin-top: 1px; }
.sinal.positivo.det { color: var(--tinta); } .sinal.positivo.det svg { color: var(--f-verde); }
.sinal.negativo.det { color: var(--tinta); } .sinal.negativo.det svg { color: var(--f-vermelho); }
.sinal.aus { color: var(--apagado); } .sinal.aus svg { color: var(--marca-apagado); }

/* recolhível */
.recolhivel { position: relative; }
.recolhivel-resto { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d3) var(--entra); }
.recolhivel-resto > div { min-height: 0; overflow: hidden; }
.recolhivel[data-aberto] .recolhivel-resto { grid-template-rows: 1fr; }
.recolhivel-sombra { position: absolute; left: 0; right: 0; bottom: 44px; height: 56px; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--superficie) 0%, transparent), var(--superficie)); transition: opacity var(--d3); }
.recolhivel.sem-cartao .recolhivel-sombra { background: linear-gradient(to bottom, color-mix(in srgb, var(--papel) 0%, transparent), var(--papel)); }
.recolhivel[data-aberto] .recolhivel-sombra { opacity: 0; }
.ver-mais { display: flex; justify-content: center; padding-top: 8px; }
.ver-mais button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--tinta-2); font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 8px; cursor: pointer; min-height: 32px; }
.ver-mais button:hover { background: var(--suave); color: var(--tinta); }
.ver-mais svg { width: 16px; height: 16px; transition: transform var(--d3) var(--entra); }
.recolhivel[data-aberto] .ver-mais svg { transform: rotate(180deg); }

/* dados */
.grade-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.dado { align-content: start; padding: 12px 8px; border-bottom: 1px solid var(--linha); display: grid; gap: 4px; min-width: 0; transition: background var(--d1); }
.dado:hover { background: var(--suave-2); }
.dado .rotulo { display: flex; align-items: center; gap: 6px; }
.dado .dado-v { color: var(--tinta); }
.dado .dado-v.vazio-v { color: var(--apagado); }
.ponto-custom { width: 7px; height: 7px; border-radius: 50%; background: var(--f-verde); display: inline-block; }
.dg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dado-longo .dado-v { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dado-longo[data-aberto] .dado-v { -webkit-line-clamp: unset; display: block; }
.dado .ler-tudo { justify-self: start; }
.grade-dados-ultima { border-bottom: 0; }

/* bant */
.bant-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.bant { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bant-item { border: 1px solid var(--linha); border-radius: 12px; padding: 16px; display: grid; gap: 6px; align-content: start; background: var(--superficie); }
.bant-topo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.bant-topo .rotulo { display: flex; align-items: center; gap: 6px; }
.bant-topo .rotulo i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bant-pct { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bant-item h4 { margin: 0; font-size: 15px; font-weight: 600; }
.bant-item p { color: var(--tinta-2); font-size: 13px; }

/* proposta comercial */
.pc { display: grid; gap: 16px; }
.pc-bloco { display: grid; gap: 8px; }
.precos { list-style: none; margin: 0; padding: 0; display: grid; }
.preco { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 8px; border-bottom: 1px solid var(--linha); border-radius: 6px; transition: background var(--d1); }
.preco:hover { background: var(--suave-2); }
.preco:last-child { border-bottom: 0; }
.preco b { font-weight: 500; }
.preco .inclui { grid-column: 1; color: var(--tinta-2); font-size: 13px; }
.preco .valor { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preco .valor.sem-valor { font-weight: 400; color: var(--apagado); }
.preco .valor small { display: block; font-weight: 400; color: var(--apagado); font-size: 12px; }
.ficha { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 13.5px; }
.ficha dt { color: var(--apagado); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; }
.ficha dd { margin: 0; color: var(--tinta); }

/* desempenho */
.desempenho { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.conf-card { display: grid; justify-items: center; align-content: center; gap: 8px; text-align: center; }
.conf-card .media { font-size: 13px; font-weight: 500; }
.conf-card .media.acima { color: var(--f-verde); }
.conf-card .media.abaixo { color: var(--f-vermelho); }
.conf-card .media.igual { color: var(--apagado); }
.conf-card .media-det { font-size: 12px; color: var(--apagado); }
.criterios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.criterio { border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; align-content: start; background: var(--superficie); min-width: 0; }
.criterio-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.criterio-topo h4 { margin: 0; font-size: 14px; font-weight: 600; }
.nota { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nota small { font-weight: 400; color: var(--apagado); }
.barra { height: 6px; border-radius: 99px; background: var(--suave); overflow: hidden; }
.barra span { display: block; height: 100%; border-radius: 99px; background: currentColor; transform-origin: left; transition: transform 600ms var(--entra); }
.criterio .resumo-crit { color: var(--tinta-2); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.criterio .ler { justify-self: start; font-size: 12.5px; }
.criterio-pop { position: relative; }

/* checklist e listas de itens */
.lista-itens { list-style: none; margin: 0; padding: 0; display: grid; }
.ck-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 16px 4px; border-bottom: 1px solid var(--linha); }
.ck-item:first-child { padding-top: 4px; }
.lista-itens > :last-child { border-bottom: 0; }
.ck-icone { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.ck-icone svg { width: 14px; height: 14px; }
.ck-icone.feito { background: var(--f-verde-fundo); color: var(--f-verde); }
.ck-icone.nao { background: var(--f-vermelho-fundo); color: var(--f-vermelho); }
.ck-corpo { display: grid; gap: 8px; min-width: 0; }
.ck-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ck-topo b { font-weight: 600; margin-right: 2px; }
.ck-topo .conf { font-size: 12px; color: var(--apagado); }
.ck-corpo > p { color: var(--tinta-2); font-size: 13px; }
.resumo-ck { color: var(--tinta-2); }
.evidencia { border-left: 2px solid var(--linha-forte); padding: 2px 0 2px 12px; display: grid; gap: 4px; }
.evidencia.ok { border-left-color: var(--verde); }
.evidencia .rotulo { font-size: 11px; }
.evidencia q, .citacao q { quotes: "\201C" "\201D"; color: var(--tinta-2); font-size: 13px; }
.cit-autor { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--apagado); flex-wrap: wrap; }
.cit-autor button { border: 0; background: none; padding: 2px 0; font-size: 12px; color: var(--verde-tinta); font-weight: 500; cursor: pointer; font-variant-numeric: tabular-nums; }
.cit-autor button:hover { text-decoration: underline; }
.nao-localizada { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--f-laranja); font-weight: 500; }
.nao-localizada svg { width: 14px; height: 14px; }
.citacao { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; }
.citacao > svg { width: 16px; height: 16px; color: var(--marca-apagado); margin-top: 2px; }
.citacao > div { display: grid; gap: 4px; min-width: 0; }
.cartoes-itens { display: grid; gap: 10px; }
.cartao-item { border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; background: var(--superficie); display: grid; gap: 8px; min-width: 0; align-content: start; }
.cartao-item .ci-valor { font-size: 18px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.grade-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ficha-aninhada { padding-top: 8px; border-top: 1px solid var(--linha); }
.ficha-aninhada dd { display: grid; gap: 6px; margin-bottom: 6px; }
.rel-pilulas { display: flex; gap: 6px; flex-wrap: wrap; }
.secao-t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cartao-item .ci-topo { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.cartao-item .ci-topo b { font-weight: 600; flex: 1 1 240px; min-width: 0; }
.cartao-item > p { color: var(--tinta-2); font-size: 13px; }
.cartao-item .ficha { font-size: 13px; }
.insight { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
.insight > svg { width: 20px; height: 20px; color: #B38A1E; }
.insight > div { display: grid; gap: 8px; min-width: 0; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: passo; }
.passo { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; background: var(--superficie); }
.passo-n { width: 28px; height: 28px; border-radius: 50%; background: var(--verde-tinta); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.passo-corpo { display: grid; gap: 6px; min-width: 0; }
.passo-meta { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--apagado); align-items: center; }
.passo-meta b { font-weight: 500; color: var(--tinta-2); }

/* abas */
.abas { justify-self: start; display: inline-flex; gap: 4px; background: var(--suave); border-radius: 12px; padding: 4px; flex-wrap: wrap; max-width: 100%; }
.abas button { border: 0; background: none; border-radius: 9px; padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--tinta-2); cursor: pointer; min-height: 32px; transition: background var(--d1), color var(--d1); }
.abas button:hover { color: var(--tinta); }
.abas button[aria-selected="true"] { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.resumo-texto { white-space: pre-wrap; color: var(--tinta); max-width: 75ch; }
.resumo-pe { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* transcrição */
.tr-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tr-barra .campo-busca { max-width: 280px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 10px 2px 3px; border-radius: 99px; border: 1px solid var(--linha); background: var(--superficie); font-size: 12.5px; color: var(--tinta-2); cursor: pointer; max-width: 100%; transition: border-color var(--d1), background var(--d1), opacity var(--d1); }
.chip:hover { border-color: var(--tinta); }
.chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip[aria-pressed="false"] { opacity: .5; background: none; }
.falas { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; max-height: 640px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); scrollbar-width: thin; }
.fala { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 10px; transition: background 1.2s var(--entra); }
.fala-topo { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; }
.fala-topo b { font-weight: 600; font-size: 13px; }
.fala-topo time { color: var(--apagado); font-variant-numeric: tabular-nums; }
.fala-topo .lado { color: var(--apagado); }
.fala p { color: var(--tinta); }
.fala.acesa { background: var(--verde-fundo); transition: background var(--d1); }
.fala mark { background: color-mix(in srgb, #E9C46A 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.tr-vazio { padding: 24px; text-align: center; color: var(--apagado); }

/* processando */
.processando { background: var(--grafite); color: var(--grafite-tinta); border-color: var(--grafite); display: grid; gap: 16px; padding: 24px; }
.processando .rotulo { color: var(--grafite-apagado); }
.processando h2 { font-size: 20px; }
.processando .proc-sub { color: var(--grafite-apagado); font-size: 13px; }
.proc-barra { height: 4px; border-radius: 99px; background: var(--grafite-linha); overflow: hidden; }
.proc-barra span { display: block; height: 100%; background: var(--verde); transform-origin: left; transition: transform 400ms var(--entra); }
.etapas { list-style: none; margin: 0; padding: 0; display: grid; }
.etapa { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; font-size: 13.5px; border-top: 1px solid var(--grafite-linha); animation: abrir var(--d3) var(--entra); }
.etapa:first-child { border-top: 0; }
.etapa .e-ic { width: 18px; height: 18px; display: grid; place-items: center; }
.etapa .e-ic svg { width: 16px; height: 16px; }
.etapa.ok .e-ic { color: var(--verde); }
.etapa.erro .e-ic { color: var(--f-vermelho); }
.etapa.fila { color: var(--grafite-apagado); }
.etapa.rodando .e-ic::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--verde); border-right-color: transparent; animation: girar .75s linear infinite; }
.etapa.fila .e-ic::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--grafite-apagado); }
.etapa time { font-size: 12px; color: var(--grafite-apagado); font-variant-numeric: tabular-nums; }
.desenha { stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenhar 260ms var(--entra) forwards; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
@keyframes abrir { from { opacity: 0; transform: translateY(-3px); } }
.carregando-rel { display: inline-flex; align-items: center; gap: 10px; color: var(--apagado); }
.carregando-rel::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--linha-forte); border-right-color: transparent; animation: girar .75s linear infinite; }

/* config */
.config { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.arquivos { display: grid; gap: 16px; }
.arquivos ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.arquivos button { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 13px; color: var(--tinta-2); cursor: pointer; font-family: var(--mono); }
.arquivos button:hover { background: var(--suave); color: var(--tinta); }
.arquivos button[aria-current="true"] { background: var(--tinta); color: var(--papel); }
.arquivos button small { font-family: var(--fonte); font-size: 11.5px; opacity: .75; }
.editor-cfg { display: grid; gap: 12px; min-width: 0; }
.editor-topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.editor-topo .editor-t { display: grid; gap: 4px; min-width: 0; }
textarea.codigo-ed { width: 100%; min-height: 460px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; padding: 14px; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta); resize: vertical; tab-size: 2; white-space: pre; overflow: auto; }
textarea.codigo-ed:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 35%, transparent); }
textarea.codigo-ed[aria-invalid="true"] { border-color: var(--f-vermelho); }
.editor-pe { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.estado-ed { font-size: 13px; color: var(--apagado); }
.estado-ed.ok { color: var(--f-verde); }
.estado-ed.erro { color: var(--f-vermelho); }
.historico { list-style: none; margin: 0; padding: 0; display: grid; }
.historico li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linha); font-size: 13px; flex-wrap: wrap; }
.historico li:first-child { border-top: 0; }
.tabela-simples { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-simples th { text-align: left; font-size: 12px; font-weight: 500; color: var(--apagado); padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela-simples td { padding: 9px 10px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela-simples tr:last-child td { border-bottom: 0; }
.tabela-simples .dir { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rolagem-x { overflow-x: auto; }
.secoes-config { display: grid; gap: 32px; margin-top: 40px; }

/* redirecionamento */
.redireciona { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desempenho { grid-template-columns: minmax(0, 1fr); }
  .conf-card { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 16px; }
  .conf-card .anel { grid-row: span 3; }
}
@media (max-width: 960px) {
  .relatorio { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .rel-lateral { display: contents; }
  .rel-cabeca { order: 0; }
  .ancoras-caixa { order: 1; position: sticky; top: 0; z-index: 20; margin: 0 calc(-1 * clamp(16px, 3vw, 40px)); padding: 8px clamp(16px, 3vw, 40px); background: var(--papel); border-bottom: 1px solid var(--linha); }
  .bl-tipo { order: 2; }
  .bl-acoes { order: 3; }
  .rel-conteudo { order: 4; }
  .bl-reuniao { order: 5; }
  .bl-participantes { order: 6; }
  .bl-execucao { order: 7; }
  .ancoras { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .ancoras::-webkit-scrollbar { display: none; }
  .ancoras a { white-space: nowrap; padding: 6px 12px; }
  .bl-acoes .acoes-lista { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .bl-acoes .acoes-lista > li:has(.acao-principal), .bl-acoes .acoes-lista > #reprocessar-li { grid-column: 1 / -1; }
  .config { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .casca { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: sticky; top: 0; height: 56px; flex-direction: row; padding: 0 12px; border-right: 0; border-bottom: 1px solid var(--linha); gap: 4px; }
  .lateral-marca { margin: 0 8px 0 0; }
  .lateral-pe { margin: 0 0 0 auto; flex-direction: row; }
  .lat-item .dica { display: none; }
  .lat-item { width: 44px; height: 44px; }
  .principal { padding: 16px 16px 56px; }
  :where(body.hub) h1 { font-size: 24px; }
  :where(body.hub) h2 { font-size: 19px; }
  .cabeca-acoes { width: 100%; }
  .cabeca-acoes .btn { flex: 1 1 calc(50% - 4px); min-height: 44px; }
  .cabeca > .cabeca-acoes .btn:first-child { flex-basis: 100%; }
  .filtros-botao { display: inline-flex !important; flex: none; min-height: 44px; }
  .filtros:not(.abertos) .seletor, .filtros:not(.abertos) .filtro-datas { display: none !important; }
  .filtros .seletor { flex: 1 1 100% !important; }
  .filtros .campo-busca { flex: 1 1 0 !important; max-width: none; }
  .tr-barra .campo-busca { flex: 1 1 100%; max-width: none; }
  .filtros .seletor { min-height: 44px; }
  .filtro-datas { flex-basis: 100%; }
  .filtro-datas input { flex: 1 1 120px; width: auto; min-height: 44px; }
  .tabela-reunioes thead { display: none; }
  .tabela-reunioes, .tabela-reunioes tbody { display: block; }
  .tabela-reunioes tr.linha-reuniao { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; padding: 14px 12px; border-bottom: 1px solid var(--linha); }
  .tabela-reunioes tr.linha-reuniao:last-child { border-bottom: 0; }
  .tabela-reunioes tr.linha-reuniao td { display: block; padding: 0; border: 0; width: auto; }
  .tabela-reunioes td.c-reuniao { grid-column: 1 / -1; grid-row: 1; }
  .tabela-reunioes td.c-status { grid-column: 1 / span 2; grid-row: 3; align-self: center; }
  .tabela-reunioes td.c-menu { grid-column: 3; grid-row: 3; align-self: center; justify-self: end; }
  .cel-anel .anel-legenda { white-space: nowrap; }
  .tabela-reunioes td.c-num { grid-row: 2; text-align: center; }
  .titulo-reuniao { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .cel-anel .anel-legenda { display: block; }
  .esqueleto-linha { display: block; padding: 14px 12px; }
  .esqueleto-linha td { display: block; padding: 4px 0; border: 0; }
  .esqueleto-linha td.c-num, .esqueleto-linha td.c-status, .esqueleto-linha td.c-menu { display: none; }
  .btn-icone { width: 44px; min-height: 44px; }
  .paginacao .btn-icone { width: 40px; min-height: 40px; }
  .card-score { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; }
  .sinais, .dg2, .dg3, .bant, .criterios, .grade-dados, .grade-2 { grid-template-columns: minmax(0, 1fr); }
  .cartao { padding: 16px; }
  .kpi { padding: 12px; }
  .kpi .kpi-v { font-size: 20px; }
  .kpi .kpi-r { font-size: 12px; }
  .bl-acoes .acoes-lista { grid-template-columns: 1fr 1fr; gap: 4px; }
  .bl-acoes .acoes-lista button:not(.acao-principal), .bl-acoes .acoes-lista a:not(.acao-principal) { border: 1px solid var(--linha); background: var(--superficie); justify-content: flex-start; font-size: 12.5px; padding: 6px 10px; }
  .bl-acoes > .rotulo, .bl-tipo > .rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bl-tipo, .bl-acoes { border-top: 0; padding-top: 0; }
  .preco { grid-template-columns: minmax(0, 1fr); }
  .preco .valor { grid-column: 1; grid-row: auto; text-align: left; }
  .ficha { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ficha dd { margin-bottom: 8px; }
  .falas { max-height: 70vh; }
  .ancoras-caixa { top: 56px; margin: 0 -16px; padding: 8px 16px; }
  .acoes-lista button, .acoes-lista a { min-height: 44px; }
  .chip { min-height: 36px; }
  .abas button { min-height: 40px; }
  .entrada, .campo input:not([type="checkbox"]), .campo select, .campo textarea, .seletor { font-size: 16px; }
  dialog.dialogo { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  textarea.codigo-ed { min-height: 320px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(:not(.mantem-movimento)), :where(:not(.mantem-movimento))::before, :where(:not(.mantem-movimento))::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
@media print {
  .lateral, .rel-lateral, .tr-barra, .ver-mais, .recolhivel-sombra, .avisos { display: none !important; }
  .casca, .relatorio { display: block; }
  .recolhivel-resto { grid-template-rows: 1fr !important; }
  .falas { max-height: none; overflow: visible; }
  body.hub { background: #fff; }
}
.tr-barra .espaco { flex: 1; }
.legenda-fala .b-cliente { background: var(--verde); }
.legenda-fala .b-equipe { background: var(--tinta); }
.legenda-fala { gap: 4px 14px; flex-wrap: wrap; }
.legenda-fala span { white-space: nowrap; }
#ed-nome { font-size: 15px; font-weight: 600; }
.popover:focus { outline: none; }
@media (max-width: 760px) {
  .faixa-aviso { grid-template-columns: 20px minmax(0, 1fr); }
  .faixa-aviso .faixa-acao { grid-column: 2; justify-content: flex-start; }
  .faixa-aviso .faixa-acao:empty { display: none; }
}