/* SOS Saúde · sistema visual no estilo macOS, nas cores da marca (Guia da Marca v1.0: petróleo, marfim, coral). */
:root {
  --petroleo: #0B2830; --marfim: #F3F1E9; --coral: #EC705B; --coral-suave: #F29E86; --cinza-petroleo: #536B6D;
  /* tons de saúde (frios, AA em fundo claro): ação em verde-teal, destaque limão, coral só para urgência */
  --saude: #0E6E63; --saude-escuro: #0A4F48; --saude-claro: #E4F1EC; --limao: #D8EA7A; --limao-escuro: #B9CF52;
  --nevoa: #F5F8F6; --salvia: #6E8C84;
  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fundo-mesa: #d3dfdb;
  --janela: #fbfcfb; --janela-borda: rgba(11, 40, 48, .16);
  --lateral: rgba(232, 240, 237, .80); --lateral-solida: #e8f0ed; --lateral-texto: #22383e;
  --barra: rgba(251, 252, 251, .84);
  --texto: #0B2830; --texto-2: #536B6D; --texto-3: #8a9a9b;
  --linha: rgba(11, 40, 48, .10); --linha-forte: rgba(11, 40, 48, .18);
  --campo: #ffffff; --campo-borda: rgba(11, 40, 48, .22);
  --selecao: #0B2830; --selecao-texto: #F3F1E9; --selecao-suave: rgba(11, 40, 48, .08);
  --acento: #0E6E63; --acento-texto: #ffffff; --foco: rgba(14, 110, 99, .45);
  --zebra: rgba(11, 40, 48, .025);
  --vermelho: #d93a2b; --laranja: #e07b1a; --amarelo: #c79a12; --verde: #2f8a4d; --cinza: #8e9799;
  --sombra-janela: 0 24px 70px rgba(11, 40, 48, .28), 0 0 0 .5px rgba(11, 40, 48, .25);
  --sombra-menu: 0 10px 30px rgba(11, 40, 48, .22), 0 0 0 .5px rgba(11, 40, 48, .18);
  --raio: 10px; --raio-janela: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo-mesa: #061a20;
    --janela: #10262c; --janela-borda: rgba(243, 241, 233, .12);
    --lateral: rgba(14, 40, 47, .78); --lateral-solida: #0e282f; --lateral-texto: #dfe5e3;
    --barra: rgba(16, 38, 44, .82);
    --texto: #F3F1E9; --texto-2: #b9c4c3; --texto-3: #7f9293;
    --linha: rgba(243, 241, 233, .09); --linha-forte: rgba(243, 241, 233, .16);
    --campo: #0c2026; --campo-borda: rgba(243, 241, 233, .18);
    --selecao: #3FB3A2; --selecao-texto: #06201c; --selecao-suave: rgba(243, 241, 233, .07);
    --acento: #3FB3A2; --acento-texto: #06201c; --foco: rgba(63, 179, 162, .5);
    --zebra: rgba(243, 241, 233, .025);
    --sombra-janela: 0 24px 70px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(243, 241, 233, .14);
    --sombra-menu: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(243, 241, 233, .14);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 13px/1.45 var(--fonte); color: var(--texto); background: var(--fundo-mesa); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 1px; border-radius: 6px; }

/* ---------- mesa e janela */
.mesa { position: fixed; inset: 0; background: var(--fundo-mesa) url("/static/img/capa_boia.jpg") center/cover no-repeat; }
.mesa::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(40px) saturate(120%); background: rgba(11, 40, 48, .25); }
.janela { position: fixed; inset: 18px; z-index: 1; display: flex; flex-direction: column; background: var(--janela);
  border-radius: var(--raio-janela); box-shadow: var(--sombra-janela); overflow: hidden; }
@media (max-width: 760px) { .janela { inset: 0; border-radius: 0; } }
.titulo-janela { height: 52px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 16px;
  background: var(--barra); backdrop-filter: blur(24px) saturate(160%); border-bottom: .5px solid var(--linha-forte); }
.semaforo { display: flex; gap: 8px; margin-right: 6px; }
.semaforo i { width: 12px; height: 12px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18); }
.semaforo i:nth-child(1) { background: #ff5f57; } .semaforo i:nth-child(2) { background: #febc2e; } .semaforo i:nth-child(3) { background: #28c840; }
.titulo-janela h1 { font-size: 13px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titulo-janela .sub { color: var(--texto-2); font-weight: 400; }
.espaco { flex: 1; }
.corpo-janela { flex: 1; display: flex; min-height: 0; }

/* ---------- barra lateral (lista de fontes, como no Finder) */
.lateral { width: 232px; flex: none; display: flex; flex-direction: column; background: var(--lateral); color: var(--lateral-texto);
  backdrop-filter: blur(30px) saturate(180%); border-right: .5px solid var(--linha-forte); overflow-y: auto; padding: 8px 10px 10px; }
.lateral .marca { display: flex; justify-content: center; padding: 4px 0 8px; }
.lateral .marca img { width: 112px; height: auto; border-radius: 8px; }
.lateral h6 { font-size: 11px; font-weight: 600; color: var(--texto-3); margin: 14px 8px 4px; letter-spacing: .02em; }
.item-lateral { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; text-align: left; cursor: default;
  padding: 5px 8px; border-radius: 6px; font-size: 13px; color: inherit; text-decoration: none; }
.item-lateral:hover { background: var(--selecao-suave); }
.item-lateral.ativo { background: var(--selecao); color: var(--selecao-texto); }
.item-lateral svg { width: 16px; height: 16px; flex: none; opacity: .85; }
.item-lateral .contador { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.item-lateral.ativo .contador { color: inherit; opacity: .8; }
.item-lateral .ponto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* o rodapé (pessoa + Sair) fica preso embaixo mesmo quando o menu rola */
.lateral .rodape { margin-top: auto; padding-top: 10px; border-top: .5px solid var(--linha); position: sticky; bottom: -10px;
  margin-bottom: -10px; padding-bottom: 10px; background: var(--lateral-solida); }
.pessoa { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--petroleo); color: var(--marfim); display: grid; place-items: center;
  font-weight: 600; font-size: 12px; flex: none; }
.pessoa .nome { font-weight: 600; font-size: 12px; } .pessoa .papel { font-size: 11px; color: var(--texto-2); }
@media (max-width: 760px) { .lateral { position: fixed; z-index: 30; inset: 52px auto 0 0; transform: translateX(-100%); transition: transform .25s; }
  .lateral.aberta { transform: none; box-shadow: var(--sombra-menu); } }

/* ---------- conteúdo */
.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra-ferramentas { height: 46px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px;
  border-bottom: .5px solid var(--linha); background: var(--janela); }
.barra-ferramentas h2 { font-size: 15px; font-weight: 700; margin: 0 6px 0 0; white-space: nowrap; }
.rolagem { flex: 1; overflow: auto; min-height: 0; }
.pagina { padding: 22px 26px 40px; max-width: 1180px; }
.paineis { display: flex; flex: 1; min-height: 0; }
.paineis > .lista-painel { width: 380px; flex: none; border-right: .5px solid var(--linha); overflow: auto; }
.paineis > .detalhe-painel { flex: 1; min-width: 0; overflow: auto; }
@media (max-width: 1100px) { .paineis > .lista-painel { width: 300px; } }
@media (max-width: 860px) { .paineis { flex-direction: column; } .paineis > .lista-painel { width: auto; max-height: 45%; border-right: 0; border-bottom: .5px solid var(--linha); } }

/* ---------- botões e controles */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 7px;
  border: .5px solid var(--campo-borda); background: var(--campo); box-shadow: 0 .5px 1px rgba(0,0,0,.08); cursor: default; white-space: nowrap;
  font-size: 13px; font-weight: 500; }
.botao:hover { filter: brightness(.97); } .botao:active { filter: brightness(.92); }
.botao[disabled] { opacity: .45; pointer-events: none; }
.botao svg { width: 15px; height: 15px; }
.botao.primario { background: var(--acento); color: var(--acento-texto); border-color: transparent; font-weight: 600; }
.botao.escuro { background: var(--petroleo); color: var(--marfim); border-color: transparent; }
.botao.perigo { color: var(--vermelho); }
.botao.grande { height: 36px; padding: 0 18px; font-size: 14px; border-radius: 9px; }
.botao.icone { width: 30px; padding: 0; }
.botao.plano { background: none; border-color: transparent; box-shadow: none; }
.segmentado { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--selecao-suave); border: .5px solid var(--linha); }
.segmentado button { border: 0; background: none; height: 24px; padding: 0 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: default; }
.segmentado button.ativo { background: var(--campo); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 0 0 .5px var(--linha-forte); }
.campo, select.campo, textarea.campo { width: 100%; border: .5px solid var(--campo-borda); background: var(--campo); border-radius: 7px;
  padding: 6px 9px; min-height: 30px; box-shadow: inset 0 .5px 1px rgba(0,0,0,.05); }
textarea.campo { min-height: 84px; resize: vertical; line-height: 1.45; }
.campo:focus { outline: none; box-shadow: 0 0 0 3.5px var(--foco); border-color: var(--acento); }
.busca-campo { position: relative; } .busca-campo svg { position: absolute; left: 8px; top: 7px; width: 14px; height: 14px; opacity: .55; }
.busca-campo .campo { padding-left: 28px; border-radius: 8px; height: 28px; min-height: 28px; }
label.rotulo { display: block; font-size: 12px; font-weight: 600; margin: 0 0 4px; color: var(--texto); }
.ajuda { font-size: 12px; color: var(--texto-2); margin-top: 3px; }
.linha-form { margin-bottom: 14px; }
.grade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.interruptor { position: relative; width: 38px; height: 22px; flex: none; }
.interruptor input { opacity: 0; width: 0; height: 0; }
.interruptor span { position: absolute; inset: 0; border-radius: 22px; background: rgba(120, 120, 128, .32); transition: background .2s; }
.interruptor span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.interruptor input:checked + span { background: var(--verde); }
.interruptor input:checked + span::after { transform: translateX(16px); }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px; border: .5px solid var(--campo-borda);
  background: var(--campo); cursor: default; }
.opcao input { accent-color: var(--petroleo); }
.opcao:has(input:checked) { border-color: var(--petroleo); box-shadow: 0 0 0 1.5px var(--petroleo); }

/* ---------- cartões, grupos (como Ajustes do Sistema) */
.grupo { background: var(--campo); border: .5px solid var(--linha-forte); border-radius: var(--raio); margin-bottom: 16px; overflow: hidden; }
.grupo > h3 { font-size: 12px; font-weight: 600; color: var(--texto-2); margin: 0; padding: 10px 14px 6px; }
.grupo .item { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-top: .5px solid var(--linha); min-height: 40px; }
.grupo .item:first-of-type { border-top: 0; }
.grupo .item .chave { color: var(--texto-2); width: 210px; flex: none; }
.grupo .item .valor { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.grupo .corpo { padding: 12px 14px; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.cartao { background: var(--campo); border: .5px solid var(--linha-forte); border-radius: var(--raio); padding: 14px 16px; }
.cartao .numero { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cartao .legenda { color: var(--texto-2); font-size: 12px; }
.cartao.alerta .numero { color: var(--vermelho); }
.secao-titulo { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.secao-sub { color: var(--texto-2); margin: 0 0 18px; }

/* ---------- tabelas e listas */
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.tabela th { position: sticky; top: 0; background: var(--janela); text-align: left; font-weight: 600; color: var(--texto-2); font-size: 11.5px;
  padding: 6px 10px; border-bottom: .5px solid var(--linha-forte); z-index: 1; }
.tabela td { padding: 7px 10px; border-bottom: .5px solid var(--linha); vertical-align: top; }
.tabela tr:nth-child(even) td { background: var(--zebra); }
.tabela tr.clicavel:hover td { background: var(--selecao-suave); cursor: default; }
.tabela tr.ativo td { background: var(--selecao) !important; color: var(--selecao-texto); }
.linha-lista { display: flex; gap: 10px; padding: 10px 14px; border-bottom: .5px solid var(--linha); cursor: default; }
.linha-lista:hover { background: var(--selecao-suave); }
.linha-lista.ativo { background: var(--selecao); color: var(--selecao-texto); }
.linha-lista.ativo .apagado { color: inherit; opacity: .75; }
.linha-lista .titulo { font-weight: 600; } .linha-lista .meio { flex: 1; min-width: 0; }
.linha-lista .resumo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apagado { color: var(--texto-2); } .pequeno { font-size: 11.5px; } .mono { font-family: var(--fonte-mono); font-size: 12px; }
.etiqueta { display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 7px; border-radius: 10px; font-size: 11px; font-weight: 600;
  background: var(--selecao-suave); color: var(--texto); white-space: nowrap; }
.etiqueta.vermelho { background: rgba(217,58,43,.14); color: var(--vermelho); } .etiqueta.laranja { background: rgba(224,123,26,.15); color: var(--laranja); }
.etiqueta.amarelo { background: rgba(199,154,18,.16); color: #9a7608; } .etiqueta.verde { background: rgba(47,138,77,.14); color: var(--verde); }
.etiqueta.cinza { background: rgba(142,151,153,.18); color: var(--texto-2); } .etiqueta.coral { background: rgba(236,112,91,.18); color: #b4472f; }
.bolinha { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; margin-top: 4px; }
.bolinha.VERMELHO { background: var(--vermelho); } .bolinha.LARANJA { background: var(--laranja); } .bolinha.AMARELO { background: var(--amarelo); }
.bolinha.CINZA { background: var(--cinza); } .bolinha.VERDE { background: var(--verde); }

/* ---------- folha (modal que desce do topo), menu, notificação */
.cortina { position: fixed; inset: 0; z-index: 50; background: rgba(11, 40, 48, .18); display: flex; justify-content: center; align-items: flex-start;
  animation: aparecer .15s ease-out; }
.folha { margin-top: 58px; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 90px); display: flex; flex-direction: column;
  background: var(--janela); border-radius: 12px; box-shadow: var(--sombra-menu); animation: descer .22s cubic-bezier(.2,.9,.3,1.1); overflow: hidden; }
.folha.larga { width: min(860px, calc(100vw - 24px)); }
.folha header { padding: 16px 20px 6px; } .folha header h3 { margin: 0; font-size: 15px; } .folha header p { margin: 4px 0 0; color: var(--texto-2); }
.folha .corpo-folha { padding: 10px 20px; overflow: auto; }
.folha footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; }
@keyframes descer { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.notificacoes { position: fixed; top: 14px; right: 14px; z-index: 80; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 28px)); }
.notificacao { background: var(--barra); backdrop-filter: blur(24px) saturate(180%); border-radius: 14px; box-shadow: var(--sombra-menu);
  padding: 11px 14px; display: flex; gap: 10px; align-items: flex-start; animation: deslizar .25s ease-out; }
.notificacao .icone { width: 26px; height: 26px; border-radius: 7px; background: var(--petroleo); flex: none; display: grid; place-items: center; }
.notificacao .icone img { width: 20px; height: 20px; border-radius: 4px; }
.notificacao strong { display: block; font-size: 12.5px; } .notificacao span { font-size: 12.5px; color: var(--texto-2); }
.notificacao.erro .icone { background: var(--vermelho); }
@keyframes deslizar { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.carregando { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--linha-forte); border-top-color: var(--texto-2);
  animation: girar .8s linear infinite; vertical-align: middle; }
@keyframes girar { to { transform: rotate(360deg); } }
.vazio { text-align: center; color: var(--texto-2); padding: 60px 20px; }
.vazio svg { width: 44px; height: 44px; opacity: .35; margin-bottom: 8px; }
.vazio strong { display: block; color: var(--texto); font-size: 15px; margin-bottom: 4px; }
.aviso { border-radius: 9px; padding: 10px 12px; background: rgba(236,112,91,.12); border: .5px solid rgba(236,112,91,.4); margin-bottom: 14px; }
.aviso.info { background: var(--selecao-suave); border-color: var(--linha-forte); }
pre.codigo { font-family: var(--fonte-mono); font-size: 11.5px; background: var(--selecao-suave); border-radius: 8px; padding: 12px; overflow: auto; max-height: 360px; white-space: pre-wrap; }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--linha-forte); }
.linha-tempo li { position: relative; padding: 0 0 12px 10px; }
.linha-tempo li::before { content: ""; position: absolute; left: -22px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--janela);
  border: 2px solid var(--cinza-petroleo); }
.bolha { max-width: 78%; padding: 8px 12px; border-radius: 16px; margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bolha.entrada { background: var(--selecao-suave); border-bottom-left-radius: 5px; }
.bolha.saida { background: var(--petroleo); color: var(--marfim); margin-left: auto; border-bottom-right-radius: 5px; }
.dispositivo { padding: 10px 12px; border-radius: 8px; border: .5px solid var(--linha); margin-bottom: 6px; background: var(--campo); }
.dispositivo.destaque { border-color: var(--acento); box-shadow: 0 0 0 2px var(--foco); }
.resultado { padding: 12px 14px; border-radius: 10px; border: .5px solid var(--linha-forte); background: var(--campo); margin-bottom: 10px; }
.resultado .cabeca { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.resultado .texto { white-space: pre-wrap; }
.barra-progresso { height: 4px; background: var(--linha); border-radius: 4px; overflow: hidden; }
.barra-progresso i { display: block; height: 100%; background: var(--acento); transition: width .3s; }
.grafico-barras { display: flex; flex-direction: column; gap: 6px; }
.grafico-barras .b { display: grid; grid-template-columns: 170px 1fr 54px; align-items: center; gap: 10px; font-size: 12px; }
.grafico-barras .b i { display: block; height: 14px; border-radius: 4px; background: var(--petroleo); }
@media (prefers-color-scheme: dark) { .grafico-barras .b i { background: var(--acento); } }

/* ---------- janela de login */
.janela-login { position: fixed; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(400px, calc(100vw - 24px));
  background: var(--janela); border-radius: var(--raio-janela); box-shadow: var(--sombra-janela); overflow: hidden; }
.login-corpo { padding: 22px 28px 26px; text-align: center; }
.login-logo { width: 200px; height: auto; border-radius: 10px; margin-bottom: 18px; }
.login { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.login .campo { height: 34px; }
.login .botao { width: 100%; margin-top: 4px; }
.botao-menu { display: none; }
@media (max-width: 760px) { .botao-menu { display: inline-flex; } .titulo-janela .apagado { display: none; } }

/* ---------- dossiê do caso */
.rolagem.sem-rolagem { overflow: hidden; display: flex; flex-direction: column; }
.quadro { display: contents; }   /* área de cada navegação do painel (equipe.js, rotear) */
.cabeca-caso { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.linha-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.acoes-caso { display: flex; flex-wrap: wrap; gap: 6px; }
.caso .segmentado { margin-bottom: 14px; flex-wrap: wrap; }
.aba-conteudo { min-height: 200px; }
.conversa { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px 12px; }
.conversa .bolha .pequeno { opacity: .7; margin-top: 3px; }
.enviar-mensagem { display: flex; gap: 8px; align-items: flex-end; position: sticky; bottom: 0; background: var(--janela); padding: 10px 0; }
.enviar-mensagem textarea { min-height: 60px; }
.vencido { color: var(--vermelho); font-weight: 600; }
.acoes-celula { white-space: nowrap; text-align: right; }
.acoes-celula .botao { height: 24px; padding: 0 8px; }
a.cartao { text-decoration: none; color: inherit; } a.cartao:hover { box-shadow: 0 0 0 2px var(--foco); }
.senha-provisoria { font-size: 18px; letter-spacing: .04em; padding: 12px; border-radius: 8px; background: var(--selecao-suave); text-align: center; user-select: all; margin: 6px 0 10px; }
.espaco-v { height: 12px; }
.linha-busca { display: flex; gap: 8px; margin-bottom: 10px; }
.linha-busca .busca-campo { flex: 1; }
.busca-campo.grande .campo { height: 36px; min-height: 36px; font-size: 14px; padding-left: 32px; border-radius: 10px; }
.busca-campo.grande svg { top: 11px; left: 11px; }
.resultados { margin-top: 16px; }
.rodape-resultado { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
details summary { cursor: default; margin-top: 6px; }

/* curadoria: opções de resposta e instrução do advogado */
.opcoes-decisao { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 14px; }
.opcoes-decisao .opcao { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: .5px solid var(--linha-forte); border-radius: 8px; cursor: default; }
.opcoes-decisao .opcao:has(input:checked) { border-color: var(--acento); background: var(--selecao-suave); }
.opcoes-decisao .opcao .etiqueta { margin-left: auto; }
.instrucao { font-size: 13px; padding: 8px 10px; border-left: 3px solid var(--acento); background: var(--selecao-suave); border-radius: 4px; margin: 6px 0; }

/* login: passo do código e troca entre código e senha */
.login-passo { display: flex; flex-direction: column; gap: 10px; }
.link-login { background: none; border: 0; color: var(--texto-2); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 6px; }

/* campo com botão de copiar (tela do WhatsApp) */
.copiar-linha { display: flex; gap: 8px; align-items: center; }
.copiar-linha .campo { flex: 1; min-width: 0; }
.acoes-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }

/* ---------- sino de pendências (topo da janela) */
.sino-caixa { position: relative; }
.botao.sino { position: relative; }
.botao.sino svg { width: 18px; height: 18px; }
.sino-contador { position: absolute; top: -3px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--saude);
  color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--janela); }
.sino-contador.grave { background: var(--vermelho); animation: pulsar-sino 2.4s ease-in-out infinite; }
@keyframes pulsar-sino { 50% { box-shadow: 0 0 0 2px var(--janela), 0 0 0 6px rgba(217, 58, 43, .18); } }
@media (prefers-reduced-motion: reduce) { .sino-contador.grave { animation: none; } }
.sino-lista { position: absolute; right: 0; top: calc(100% + 8px); width: min(380px, calc(100vw - 24px)); max-height: min(520px, 70vh); overflow: auto; z-index: 60;
  background: var(--janela); border: 1px solid var(--janela-borda); border-radius: 14px; box-shadow: var(--sombra-menu); padding: 6px; }
.sino-cabeca { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 10px 6px; }
.sino-item { display: flex; gap: 10px; padding: 10px; border-radius: 10px; text-decoration: none; color: var(--texto); }
.sino-item:hover, .sino-item:focus-visible { background: var(--selecao-suave); outline: none; }
.sino-ponto { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--texto-3); }
.sino-item.g1 .sino-ponto { background: var(--vermelho); } .sino-item.g2 .sino-ponto { background: var(--laranja); }
.sino-item.g3 .sino-ponto { background: var(--saude); }
.sino-titulo { font-weight: 600; font-size: 13.5px; } .sino-texto { color: var(--texto-2); font-size: 12.5px; margin-top: 2px; }
.sino-vazio { display: flex; gap: 8px; align-items: center; padding: 18px 12px; color: var(--texto-2); }
.sino-vazio svg { width: 18px; height: 18px; color: var(--saude); }
.botao.ajuda-tour span { font-weight: 700; font-size: 14px; }
@media (max-width: 700px) { .some-celular { display: none; } }

/* ---------- tour */
.tour-fundo { position: fixed; inset: 0; z-index: 200; }
.tour-fundo.centro { background: rgba(16, 32, 30, .45); }
.tour-destaque { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(16, 32, 30, .45), 0 0 0 3px var(--saude);
  transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease; pointer-events: none; }
.tour-caixa { position: fixed; width: min(360px, calc(100vw - 24px)); background: var(--janela); color: var(--texto); border-radius: 16px; padding: 20px 20px 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25); border: 1px solid var(--janela-borda); transition: top .3s ease, left .3s ease; }
.tour-caixa h3 { margin: 0 24px 8px 0; font-size: 16px; } .tour-caixa p { margin: 0 0 16px; color: var(--texto-2); line-height: 1.5; font-size: 13.5px; }
.tour-acoes { display: flex; align-items: center; gap: 8px; } .tour-acoes .espaco { flex: 1; }
.tour-contador { font-size: 12px; color: var(--texto-3); }
.tour-fechar { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--texto-3); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .tour-destaque, .tour-caixa { transition: none; } }

/* ---------- novo caso */
.novo-caso { display: grid; gap: 16px; }
.cartao-secao { background: var(--janela); border: 1px solid var(--linha); border-radius: 14px; padding: 18px 20px; }
.cartao-secao.destaque { border-color: var(--saude); background: linear-gradient(180deg, var(--janela), color-mix(in srgb, var(--saude) 5%, var(--janela))); }
.cartao-secao h3 { margin: 0 0 12px; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.cartao-secao h3 svg { width: 17px; height: 17px; color: var(--saude); }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; }
.campo-nc { display: grid; gap: 6px; align-content: start; } .campo-nc.largo { grid-column: 1 / -1; }
.campo-nc .rotulo { font-size: 13px; font-weight: 600; } .obrigatorio { color: var(--vermelho); }
.campo-nc.com-erro .campo, .campo-nc.com-erro .opcoes-linha { outline: 2px solid color-mix(in srgb, var(--vermelho) 55%, transparent); outline-offset: 2px; border-radius: 8px; }
.erro-campo { color: var(--vermelho); font-size: 12.5px; }
.opcoes-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.pilula { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--campo-borda); border-radius: 999px; cursor: pointer;
  font-size: 13px; background: var(--campo); transition: background .15s, border-color .15s; }
.pilula input { position: absolute; opacity: 0; pointer-events: none; }
.pilula:hover { border-color: var(--saude); }
.pilula.ativa { background: color-mix(in srgb, var(--saude) 12%, var(--campo)); border-color: var(--saude); color: var(--saude-escuro); font-weight: 600; }
.pilula:focus-within { box-shadow: 0 0 0 3px var(--foco); }
.novo-caso .aceite { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--campo-borda); background: var(--campo); font-size: 13px; line-height: 1.5; }
.novo-caso .aceite input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--saude); flex: none; }
[hidden] { display: none !important; }
.tour-caixa.trocando { opacity: .55; }

/* ---------- aplicativo em tela cheia (sem moldura de janela): o estilo do Mac fica nos componentes */
.mesa { background: linear-gradient(160deg, #EEF4F2, #E3ECE9); }
.mesa::after { content: none; }
.semaforo { display: none; }
.app { position: fixed; inset: 0; display: flex; background: var(--janela); }
.app > .lateral { height: 100%; }
.topo-app { height: 52px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px;
  background: var(--barra); backdrop-filter: blur(24px) saturate(160%); border-bottom: .5px solid var(--linha-forte); }
.topo-app h1 { font-size: 15px; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-app .botao-menu { display: none; }
@media (max-width: 760px) {
  .topo-app .botao-menu { display: inline-flex; }
  .app > .lateral { position: fixed; z-index: 30; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .25s; }
  .app > .lateral.aberta { transform: none; box-shadow: var(--sombra-menu); }
}
.janela-login { border-radius: 18px; }

/* ---------- documentos do caso: lista + visor na mesma tela */
.docs-visor { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 14px; margin-top: 14px; min-height: 70vh; }
@media (max-width: 980px) { .docs-visor { grid-template-columns: 1fr; } }
.lista-docs { display: flex; flex-direction: column; gap: 6px; max-height: 78vh; overflow: auto; padding-right: 2px; }
.doc-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--linha); background: var(--janela); color: inherit; }
.doc-item:hover { border-color: var(--saude); }
.doc-item.ativo { border-color: var(--saude); background: color-mix(in srgb, var(--saude) 8%, var(--janela)); }
.doc-item[disabled] { opacity: .55; cursor: not-allowed; }
.doc-item svg { width: 18px; height: 18px; flex: none; color: var(--saude); }
.doc-item .meio { flex: 1; min-width: 0; display: grid; } .doc-item .titulo { font-weight: 600; }
.doc-item .meio .pequeno { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor-doc { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; background: var(--janela); min-height: 70vh; }
.visor-cabeca { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--linha); }
.visor-cabeca .meio { flex: 1; min-width: 0; }
.visor-quadro { flex: 1; width: 100%; min-height: 72vh; border: 0; background: #eef2f1; }
.visor-imagem { flex: 1; display: grid; place-items: center; background: #eef2f1; padding: 12px; overflow: auto; }
.visor-imagem img { max-width: 100%; max-height: 72vh; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.visor-midia { flex: 1; display: grid; place-items: center; padding: 24px; background: #eef2f1; }
.visor-midia video { max-width: 100%; max-height: 70vh; border-radius: 8px; background: #000; } .visor-midia audio { width: min(520px, 100%); }
.visor-cabeca { flex-wrap: wrap; } .visor-cabeca .meio { flex: 1 1 100%; }
.visor-doc.ampliado { position: fixed; inset: 14px; z-index: 120; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.visor-doc.ampliado .visor-quadro { min-height: 0; }
.visor-doc.ampliado .visor-imagem img, .visor-doc.ampliado .visor-midia video { max-height: calc(100vh - 140px); }
@media (min-width: 1200px) { .docs-visor { grid-template-columns: 260px minmax(0, 1fr); } }

/* ---------- atendimento em tempo real */
.atendimento { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); height: 100%; min-height: 0; }
@media (max-width: 900px) { .atendimento { grid-template-columns: 1fr; } }
.at-lista { border-right: .5px solid var(--linha); overflow: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.at-item { display: flex; gap: 10px; width: 100%; text-align: left; padding: 10px; border: 0; border-radius: 10px; background: none; color: inherit; cursor: pointer; }
.at-item:hover { background: var(--selecao-suave); }
.at-item.ativo { background: color-mix(in srgb, var(--saude) 12%, var(--janela)); }
.at-item.nao-lida strong { font-weight: 800; }
.at-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: color-mix(in srgb, var(--saude) 16%, var(--janela)); color: var(--saude-escuro); }
.at-avatar.grande { width: 44px; height: 44px; font-size: 15px; }
.at-avatar.cor-vermelho { box-shadow: 0 0 0 2px var(--vermelho); } .at-avatar.cor-laranja { box-shadow: 0 0 0 2px var(--laranja); }
.at-meio { flex: 1; min-width: 0; display: grid; gap: 2px; }
.at-linha { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; min-width: 0; }
.at-linha strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-hora { font-size: 11.5px; color: var(--texto-3); flex: none; }
.at-previa { color: var(--texto-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-contador { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--saude); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.at-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--zebra, rgba(0,0,0,.05)); color: var(--texto-2); }
.chip.ia { background: color-mix(in srgb, #5b6cff 14%, var(--janela)); color: #3a45b8; }
.chip.humano { background: color-mix(in srgb, var(--saude) 14%, var(--janela)); color: var(--saude-escuro); }
.chip.verde { background: color-mix(in srgb, var(--saude) 14%, var(--janela)); color: var(--saude-escuro); margin-left: 6px; }
.chip.laranja { background: color-mix(in srgb, var(--laranja) 16%, var(--janela)); color: #8a4a0c; margin-left: 6px; }
.at-conversa { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.at-cabeca { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: .5px solid var(--linha); flex-wrap: wrap; }
.at-rolagem { position: relative; flex: 1; min-height: 0; display: flex; }
.at-mensagens { flex: 1; overflow: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px;
  background: color-mix(in srgb, var(--saude) 4%, var(--janela)); }
.at-dia { align-self: center; font-size: 11.5px; color: var(--texto-3); background: var(--janela); border: .5px solid var(--linha); padding: 3px 10px; border-radius: 999px; margin: 10px 0 4px; }
.at-bolha { max-width: min(640px, 78%); padding: 8px 12px 6px; border-radius: 16px; font-size: 14px; line-height: 1.45; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.at-bolha.familia { align-self: flex-start; background: var(--janela); border: .5px solid var(--linha); border-bottom-left-radius: 6px; }
.at-bolha.nossa { align-self: flex-end; background: color-mix(in srgb, var(--saude) 16%, var(--janela)); border-bottom-right-radius: 6px; }
.at-bolha.ia { background: color-mix(in srgb, #5b6cff 10%, var(--janela)); }
.at-autor { font-size: 11px; font-weight: 700; color: var(--saude-escuro); margin-bottom: 2px; } .at-bolha.ia .at-autor { color: #3a45b8; }
.at-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.at-hora-msg { font-size: 10.5px; color: var(--texto-3); text-align: right; margin-top: 2px; }
.at-midia { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--texto-2); } .at-midia svg { width: 15px; height: 15px; }
.at-sistema { align-self: center; font-size: 12px; color: var(--texto-2); background: var(--janela); border: .5px dashed var(--linha-forte); padding: 4px 10px; border-radius: 8px; }
.at-avaliacao { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; padding-top: 6px; border-top: .5px solid var(--linha); font-size: 12px; color: var(--texto-2); }
.at-avaliacao button { border: .5px solid var(--linha-forte); background: var(--janela); border-radius: 999px; padding: 2px 9px; font-size: 12px; cursor: pointer; color: inherit; }
.at-avaliacao button:hover { border-color: var(--saude); }
.at-avaliacao.ok > span:first-child { color: var(--saude-escuro); font-weight: 600; } .at-avaliacao.ruim > span:first-child { color: var(--vermelho); font-weight: 600; }
.at-avaliacao .motivo { flex-basis: 100%; font-style: italic; }
.at-ir-fim { position: absolute; right: 18px; bottom: 14px; border: 0; border-radius: 999px; padding: 7px 14px; background: var(--saude); color: #fff; font-weight: 600; box-shadow: var(--sombra-menu); cursor: pointer; }
.at-escrever { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px; border-top: .5px solid var(--linha); background: var(--janela); }
.at-escrever textarea { flex: 1; resize: none; min-height: 40px; max-height: 180px; line-height: 1.45; }
.at-avatar svg { width: 18px; height: 18px; }

/* textos do site: prévia da página com edição direta (moldura da mesma origem) */
.previa-editor { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 16px 20px; box-sizing: border-box; }
.previa-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.previa-palco { position: relative; flex: 1; min-height: 420px; overflow: hidden; border-radius: 12px; background: var(--linha, rgba(0, 0, 0, .06)); }
.previa-site { position: absolute; top: 0; border: 0; background: #fff; transform-origin: 0 0; box-shadow: 0 8px 28px rgba(16, 48, 43, .10); }
.previa-palco[data-aparelho="computador"] .previa-site { border-radius: 10px; }
.previa-palco[data-aparelho="tablet"] .previa-site, .previa-palco[data-aparelho="celular"] .previa-site { border-radius: 22px; outline: 10px solid #1b2b28; outline-offset: -1px; top: 12px; }
/* curadoria: rótulo dos grupos da lateral ("Para o senhor decidir", "O sistema resolve") */
.grupo-lista { padding: 14px 20px 6px; font-weight: 600; letter-spacing: .01em; }

/* base de conhecimento: rede (estilo Obsidian) e lista, com o item aberto ao lado */
.conhecimento { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.con-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 20px; border-bottom: 1px solid var(--linha); }
.con-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--linha-forte);
  background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; opacity: .55; }
.con-chip.ligado { opacity: 1; background: var(--selecao-suave, rgba(14, 124, 102, .08)); }
.con-bolinha { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.con-dica { margin-left: auto; }
.con-corpo { flex: 1; display: flex; min-height: 0; }
.con-palco { flex: 1; position: relative; min-width: 0; overflow: auto; }
.con-rede { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab;
  background: radial-gradient(circle at 50% 40%, rgba(14, 124, 102, .05), transparent 60%); }
.con-legenda { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 12px; align-items: center; padding: 6px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .85); box-shadow: 0 2px 10px rgba(11, 40, 48, .08); }
.con-legenda > span { display: inline-flex; gap: 6px; align-items: center; }
.con-lado { width: min(440px, 42%); flex: none; overflow: auto; padding: 18px 20px 28px; border-left: 1px solid var(--linha);
  background: var(--janela, #fff); box-shadow: -8px 0 24px rgba(11, 40, 48, .05); }
.con-lado h3 { margin: 10px 0 8px; font-size: 19px; line-height: 1.3; }
.con-lado-topo { display: flex; align-items: center; gap: 8px; }
.con-etiquetas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.con-liberar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--selecao-suave, rgba(14, 124, 102, .08)); margin-bottom: 14px; }
.con-conteudo { font-size: 14px; line-height: 1.55; }
.con-conteudo p { margin: 0 0 8px; white-space: pre-wrap; }
.con-dl { display: grid; grid-template-columns: minmax(90px, 34%) 1fr; gap: 6px 12px; margin: 0; }
.con-dl dt { color: var(--texto-2, #4D6661); font-size: 12.5px; padding-top: 2px; }
.con-dl dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
.con-dl ul { margin: 0; padding-left: 18px; }
.con-sub { padding: 6px 0; border-top: 1px dashed var(--linha); }
.con-relacionados { margin-top: 18px; }
.con-relacionados h4 { margin: 0 0 8px; font-size: 14px; }
.con-rel { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 8px; border: 0; border-radius: 8px; background: none;
  color: inherit; font: inherit; font-size: 13.5px; cursor: pointer; }
.con-rel:hover { background: var(--selecao-suave, rgba(14, 124, 102, .08)); }
.con-lista { padding: 16px 20px 30px; }
.con-grupo-titulo { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; }
.con-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.con-cartao { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linha);
  background: var(--janela, #fff); color: inherit; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.con-cartao:hover { border-color: var(--linha-forte); box-shadow: 0 6px 18px rgba(11, 40, 48, .07); }
.con-cartao p { margin: 0; color: var(--texto-2, #4D6661); }
.con-cartao-topo { display: flex; justify-content: space-between; gap: 8px; align-items: center; }

/* fluxo do WhatsApp: mensagens à esquerda, edição no meio, como fica no celular à direita */
.fluxo { display: grid; grid-template-columns: minmax(220px, 280px) minmax(380px, 1fr) minmax(280px, 340px); height: 100%; min-height: 0; }
.fluxo > * { min-height: 0; overflow: auto; }
.fluxo .lista-painel .titulo { display: flex; gap: 8px; align-items: center; }
.fluxo-ajuda { padding: 12px 16px 4px; margin: 0; }
.fluxo-editor { border-left: 1px solid var(--linha); border-right: 1px solid var(--linha); }
.fluxo-editor h3 { margin: 18px 0 8px; }
.fluxo-inicial { display: flex; gap: 8px; align-items: center; margin: 6px 0 4px; }
.fluxo-opcoes { display: flex; flex-direction: column; gap: 10px; }
.fluxo-opcao { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--linha); border-radius: 12px; background: var(--janela, #fff); }
.fluxo-opcao-topo { display: flex; align-items: center; gap: 6px; }
.fluxo-extra { display: flex; flex-direction: column; gap: 6px; }
.fluxo-previa { padding: 18px; background: var(--fundo-2, #f4f6f5); }
.fluxo-celular { margin-top: 10px; padding: 16px 12px; border-radius: 22px; background: #e9e2d6; min-height: 340px;
  box-shadow: inset 0 0 0 8px #1b2b28; display: flex; flex-direction: column; gap: 10px; }
.fluxo-balao { align-self: flex-start; max-width: 92%; background: #fff; border-radius: 4px 12px 12px 12px; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); overflow: hidden; }
.fluxo-balao-texto { padding: 8px 10px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; color: #111b21; }
.fluxo-botao { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 9px 10px; border-top: 1px solid rgba(0, 0, 0, .08);
  color: #027eb5; font-size: 14px; font-weight: 500; }
.fluxo-botao svg { width: 16px; height: 16px; }
.fluxo-lista { background: #fff; border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.fluxo-lista-item { padding: 8px 2px; border-bottom: 1px solid rgba(0, 0, 0, .06); font-size: 14px; color: #111b21; }