/* Conecta — estilos principais. COM-004: TODA cor vem dos tokens do plataforma.css
   (importado ANTES deste arquivo). As vars antigas viram apelidos dos tokens durante a
   migração; bolhas de conversa = únicos tokens próprios da SOFIA (mockup), definidas
   por REFERÊNCIA aos tokens — nenhum hex neste arquivo. */
:root {
  --bolha-paciente: var(--superficie);
  --bolha-clinica: var(--acento-suave);
  --cor-primaria: var(--acento);
  --cor-secundaria: var(--acento);
  --cor-acento: var(--acento);
  --cor-fundo: var(--fundo);
  --cor-superficie: var(--superficie);
  --cor-mensagem-enviada: var(--bolha-clinica);
  --cor-texto-principal: var(--texto);
  --cor-texto-secundario: var(--texto-2);
  --cor-borda: var(--borda);
  --cor-fila: var(--atencao);
  --cor-erro: var(--erro);
  --cor-sofia: var(--acento);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--fonte); font-size: var(--tam-corpo);
  background: var(--cor-fundo); color: var(--cor-texto-principal);
  /* 100dvh (viewport dinâmica): no iPhone o 100vh conta a área atrás da barra do Safari, então a
     tela ficava mais alta que o visível e a lista "não rolava" no celular. dvh acompanha a barra. */
  height: 100vh; height: 100dvh; overflow: hidden;
}

/* Ícones SVG (COM-004: emoji não é ícone) — alinhamento com o texto ao lado. */
.ic { vertical-align: -2px; flex-shrink: 0; }
button .ic { pointer-events: none; }

/* ── LOGIN ─────────────────────────────────────────────── */
#tela-login { display: flex; align-items: center; justify-content: center; height: 100vh; height: 100dvh; background: var(--cor-primaria); }
.login-card { background: var(--superficie); border-radius: 12px; padding: 40px 36px; width: 360px; box-shadow: 0 8px 32px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 20px; }
.login-logo { text-align: center; }
/* ⛔ A PALAVRA é MÁSCARA aqui também: quem pinta é o background-color. No login o cartão é
   claro (--superficie), então a cor é --cor-primaria (o verde), e NÃO --superficie como na barra
   verde — lá o fundo é o verde e a palavra é que fica clara. Mesmo arquivo, cor oposta, porque o
   que está atrás é oposto. Trocar por <img> pintaria a palavra de preto nos dois lugares. */
.login-logo .marca { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.login-logo .marca .nx-anel { width: 34px; height: 35px; display: block; }
.login-logo .marca .nx-palavra { width: 104px; height: calc(104px * 75.40 / 628.61);
  background-color: var(--cor-primaria);
  -webkit-mask: url(../solonexa-palavra.svg) no-repeat center/contain;
          mask: url(../solonexa-palavra.svg) no-repeat center/contain; }
.login-logo h1 { font-size: 18px; font-weight: 700; color: var(--cor-primaria); margin-top: 8px; }
.login-logo p { font-size: 13px; color: var(--cor-texto-secundario); margin-top: 2px; }
.login-campo { display: flex; flex-direction: column; gap: 6px; }
.login-campo label { font-size: 13px; font-weight: 600; color: var(--cor-texto-secundario); text-transform: uppercase; letter-spacing: .5px; }
.login-opcional { font-weight: 400; text-transform: none; letter-spacing: 0; }
.login-campo input { border: 1.5px solid var(--cor-borda); border-radius: 8px; padding: 12px 14px; font-size: 15px; outline: none; transition: border-color .2s; }
.login-campo input:focus { border-color: var(--cor-secundaria); }
.login-campo input.erro { border-color: var(--cor-erro); }
.login-msg-erro { font-size: 13px; color: var(--cor-erro); min-height: 16px; }
.btn-login { background: var(--cor-acento); color: var(--superficie); border: none; border-radius: 8px; padding: 14px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s; }
.btn-login:hover { background: var(--acento); }
.btn-login:disabled { opacity: .6; cursor: not-allowed; }
.login-versao { text-align: center; font-size: 13px; color: var(--cor-texto-secundario); }

/* ── DASHBOARD ─────────────────────────────────────────── */
#tela-dashboard { display: none; flex-direction: column; height: 100vh; height: 100dvh; }
#tela-dashboard.visivel { display: flex; animation: fadein .3s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.header { background: var(--cor-primaria); color: var(--superficie); height: 48px; display: flex; align-items: center; padding: 0 16px; gap: 12px; flex-shrink: 0; z-index: 10; }
/* Trava deitada da marca (22/08/2026). `flex:1` continua: esta caixa é o espaçador que
   empurra status/operador/botões pra direita. ⛔ A palavra SOLONEXA é uma MÁSCARA: o SVG entra como
   -webkit-mask/mask e quem dá cor é o background-color. Máscara lê o ALFA da imagem — trocar por um
   arquivo sem canal alfa pinta um retângulo sólido e NÃO dá erro nenhum (custou um deploy no Atlas).
   ⛔ A cor sai de --superficie, o MESMO token que .header já usa em `color` — assim a palavra
   acompanha o tema escuro junto com o resto do texto da barra. Nada de hex aqui (COM-004).
   ⚠️ A regra antiga `.header-marca span { color: var(--cor-acento) }` foi embora com o <span>: ela
   pintava "Conecta" com --cor-acento, que é o MESMO token do fundo da barra — o nome do módulo só
   era legível porque o `color` do .header cascateava por cima. */
.header-marca { font-size: 19px; font-weight: 700; flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; }
.header-marca .nx-anel { width: 28px; height: 29px; flex: none; display: block; }
.header-marca .nx-palavra { width: 84px; height: calc(84px * 75.40 / 628.61); flex: none;
  background-color: var(--superficie);
  -webkit-mask: url(../solonexa-palavra.svg) no-repeat center/contain;
          mask: url(../solonexa-palavra.svg) no-repeat center/contain; }
/* ⭐ 22/08/2026 — a trava e o nome do módulo AFASTADOS da palavra, e "Conecta" na MESMA
   ALTURA DE LETRA do SOLONEXA (opção B, escolhida pelo Dr. André). Os 14px não são estética
   solta: a máscara do SOLONEXA tem 84px de largura por 10.07px de altura de caixa alta
   (84 × 75.40 / 628.61), e a maiúscula da fonte do sistema a 14px mede 10.2px — as duas
   palavras passam a assentar na mesma linha. ⛔ Mexer nos 84px da palavra sem refazer esta
   conta desalinha as duas de novo.
   ⚠️ `font-size` aqui vence os 19px do `.header-marca` só porque este seletor é mais
   específico; não trocar por `.header-marca > b` achando que é o mesmo. */
.header-marca .brand-risco { width: 1px; height: 26px; flex: none; background: var(--superficie); opacity: .45;
  margin-left: 8px; }
.header-marca b { font-weight: 700; letter-spacing: -.2px; white-space: nowrap;
  margin-left: 8px; font-size: 14px; }
.header-status { font-size: 13px; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: 5px; }
.header-status::before { content: '●'; color: var(--cor-acento); }
.header-usuario { font-size: 13px; background: rgba(255,255,255,.15); padding: 5px 12px; border-radius: 20px; cursor: pointer; }
.header-config { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; }
.header-config:hover { background: rgba(255,255,255,.15); }

/* Seletor do modo da IA no header (Adm): bolinha de status + select estilo header-usuario. */
.header-ia { align-items: center; gap: 6px; }
.header-ia-dot { width: 9px; height: 9px; border-radius: 999px; flex: none; background: var(--ok); box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.header-ia-dot.ia-paga { background: var(--info); }
.header-ia-dot.ia-max { background: var(--ok); }
.header-ia-dot.ia-desligada { background: var(--atencao); }
.header-ia-dot.canal-digisac { background: var(--info); }
.header-ia-dot.canal-proprio { background: var(--ok); }

.layout { display: flex; flex: 1; overflow: hidden; }

/* ── COLUNA A ─────────────────────────────────────────── */
.col-a { width: 320px; flex-shrink: 0; background: var(--superficie); border-right: 1px solid var(--cor-borda); display: flex; flex-direction: column; overflow: hidden; min-width: 220px; max-width: 760px; }
.col-resizer { width: 6px; flex-shrink: 0; cursor: col-resize; background: transparent; transition: background .15s; }
.col-resizer:hover, .col-resizer.arrastando { background: var(--cor-secundaria); }
body.redimensionando { cursor: col-resize; user-select: none; }
/* Abas roláveis de lado (mouse: roda/arrastar — abas-scroll.js; celular: dedo) */
.abas { display: flex; border-bottom: 1px solid var(--cor-borda); flex-shrink: 0; overflow-x: auto; user-select: none; scrollbar-width: thin; scrollbar-color: var(--cor-borda) transparent; }
.abas::-webkit-scrollbar { height: 5px; }
.abas::-webkit-scrollbar-thumb { background: var(--cor-borda); border-radius: 999px; }
.abas .aba { flex-shrink: 0; }
.aba { flex: 1; padding: 12px 4px; text-align: center; font-size: 13px; font-weight: 500; color: var(--cor-texto-secundario); cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; white-space: nowrap; }
.aba:hover { color: var(--cor-primaria); background: var(--fundo); }
.aba.ativa { color: var(--cor-primaria); border-bottom-color: var(--cor-acento); font-weight: 600; }
.aba-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--cor-fila); color: var(--superficie); border-radius: 10px; font-size: 13px; font-weight: 700; padding: 1px 5px; margin-left: 4px; min-width: 16px; }
.busca-wrap { padding: 8px 10px; border-bottom: 1px solid var(--cor-borda); flex-shrink: 0; }
.busca { width: 100%; background: var(--cor-fundo); border: none; border-radius: 8px; padding: 8px 12px; font-size: 14px; outline: none; color: var(--cor-texto-principal); }
.busca::placeholder { color: var(--cor-texto-secundario); }
.ordenar-wrap { display: flex; align-items: center; gap: 6px; padding: 6px 10px 8px; border-bottom: 1px solid var(--cor-borda); flex-shrink: 0; }
.ordenar-rotulo { font-size: 12px; color: var(--cor-texto-secundario); white-space: nowrap; }
.ordenar-select { flex: 1; min-width: 0; background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: 8px; padding: 6px 8px; font-size: 13px; color: var(--cor-texto-principal); font-family: inherit; cursor: pointer; outline: none; }
.banner-conexao { background: var(--erro-suave); color: var(--erro); font-size: 13px; padding: 8px 12px; text-align: center; flex-shrink: 0; }
.lista-contatos { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.contato-card { display: flex; align-items: center; padding: 10px 14px; gap: 12px; cursor: pointer; border-bottom: 1px solid var(--cor-borda); transition: background .1s; position: relative; }
.contato-card:hover { background: var(--fundo); }
.contato-card.ativo { background: var(--acento-suave); }
/* Linha de origem: faixa lateral (5px) + sombreado leve na cor da linha (de qual celular veio). */
.contato-card.linha-card { border-left: 5px solid var(--linha-cor, transparent); padding-left: 10px; }
.contato-card.linha-card::before { content: ''; position: absolute; inset: 0; background: var(--linha-cor); opacity: .06; pointer-events: none; }
.contato-card.ativo.linha-card::before { opacity: .10; }
/* Etiqueta da linha ao lado do nome (fundo na cor da linha, texto branco). */
.linha-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; }
.linha-chip .ic { flex-shrink: 0; }
.linha-chip span { color: #fff; }
/* "Aguardando" (fila) — pontinho âmbar antes da hora, já que a faixa virou cor da linha. */
.aguardando-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cor-fila); vertical-align: middle; }
/* Já respondida, esperando só o Concluir (30/07): ✓ verde no lugar da bolinha, pra dar pra varrer
   a fila com o olho e separar "precisa de resposta" de "precisa só ser fechada". */
.respondida-ok { color: #2F7D32; font-weight: 700; }
.falta-concluir { font-size: 10.5px; color: var(--cor-texto-secundario); white-space: nowrap; margin-top: 3px; }
/* Legenda/filtro de linhas no topo da lista. */
.linha-legenda { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--cor-borda); flex-shrink: 0; }
.linha-legenda:empty { display: none; }
.linha-legenda-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--cor-borda); color: var(--cor-texto-secundario); cursor: pointer; user-select: none; transition: all .12s; }
.linha-legenda-chip:hover { border-color: var(--cor-secundaria); }
.linha-legenda-chip.ativa { border-color: transparent; color: var(--superficie); }
.linha-legenda-chip .ponto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.linha-legenda-chip .n { opacity: .7; font-variant-numeric: tabular-nums; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--acento-suave); display: flex; align-items: center; justify-content: center; color: var(--acento); font-weight: 700; font-size: 15px; flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.contato-info { flex: 1; min-width: 0; }
.nome-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* ⚠️ O NOME NUNCA SOME (31/07/2026). Era `flex: 1` (base 0) ao lado de etiquetas com
   `flex-shrink: 0`: quando a conversa juntava duas ou três ("Principal" + "Pós-procedimento" +
   "Respondida no aparelho · 11:05"), as etiquetas tomavam a linha inteira e o nome encolhia
   até ZERO — no celular o Dr. André via só as iniciais do avatar e não sabia quem era.
   Agora o nome tem largura mínima e são as ETIQUETAS que cedem espaço. */
.nome-row .contato-nome { flex: 1 1 auto; min-width: 7ch; }
/* No desktop as etiquetas seguem soltas na mesma linha (display:contents = a caixa não existe
   pro flex); no celular a mesma caixa vira uma linha só delas — ver mobile.css. */
.nome-chips { display: contents; }
.nome-row .linha-chip { flex-shrink: 1; min-width: 0; }
.nome-row .linha-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contato-nome { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-toggle { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; font-size: 13px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; transition: all .15s; }
.p-toggle.on { background: var(--cor-secundaria); color: var(--superficie); }
.p-toggle.off { background: transparent; color: transparent; border: 1px dashed var(--cor-borda); }
.p-toggle.off:hover { color: var(--cor-secundaria); border-style: solid; border-color: var(--cor-secundaria); }
.contato-preview { font-size: 13px; color: var(--cor-texto-secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.contato-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.contato-time { font-size: 13px; color: var(--cor-texto-secundario); }
.badge-nao-lidas { background: var(--cor-acento); color: var(--superficie); border-radius: 10px; font-size: 13px; font-weight: 700; padding: 1px 6px; min-width: 18px; text-align: center; }
.estado-vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; color: var(--cor-texto-secundario); gap: 8px; font-size: 13px; text-align: center; padding: 20px; }
.estado-vazio-icon { font-size: 32px; opacity: .4; }

/* Skeleton */
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.skel { background: var(--borda); border-radius: 6px; animation: pulse 1.4s infinite; }
.skel-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.skel-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.skel-linhas { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.skel-linha { height: 12px; }

/* ── COLUNA B ─────────────────────────────────────────── */
.col-b { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--cor-fundo); min-height: 0; }
/* min-height:0 na cadeia flex: sem isso a área de mensagens estoura a altura e
   EMPURRA a caixa de digitar pra fora da tela (relato do Dr. André 06/07). */
#conversa-ativa { min-height: 0; }
.mensagens-area { min-height: 0; }
.conversa-vazia { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--cor-texto-secundario); gap: 12px; }
.conversa-vazia-icon { font-size: 56px; opacity: .25; }
.conversa-vazia p { font-size: 14px; }
.conversa-header { background: var(--superficie); border-bottom: 1px solid var(--cor-borda); padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.conversa-header .avatar { width: 40px; height: 40px; font-size: 14px; }
.conversa-header-info { flex: 1; }
.conversa-header-nome { font-size: 16px; font-weight: 500; }
/* nome/foto abrem a ficha do contato */
.conversa-header-info, .conversa-header .avatar { cursor: pointer; }
.conversa-header-info:hover .conversa-header-nome { text-decoration: underline; }
.conversa-header-sub { font-size: 13px; color: var(--cor-texto-secundario); }
.badge-status { font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.badge-fila { background: var(--atencao-suave); color: var(--cor-fila); }
.badge-chat { background: var(--ok-suave); color: var(--ok); }
.mensagens-area { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.separador-data { text-align: center; font-size: 13px; color: var(--cor-texto-secundario); margin: 12px 0; position: relative; }
/* Nota de sistema na conversa (ex.: transferência de chamado): pílula pequena centralizada. */
.msg-sistema { align-self: center; max-width: 92%; margin: 6px 0; padding: 4px 12px; background: rgba(0,0,0,.05); color: var(--cor-texto-secundario); border-radius: 10px; font-size: 13px; text-align: center; }
.separador-data::before, .separador-data::after { content: ''; position: absolute; top: 50%; width: 35%; height: 1px; background: var(--cor-borda); }
.separador-data::before { left: 0; }
.separador-data::after { right: 0; }
.msg { max-width: 65%; display: flex; flex-direction: column; margin-bottom: 2px; }
.msg.recebida { align-self: flex-start; }
.msg.enviada { align-self: flex-end; }
.msg-balao { padding: 7px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4; box-shadow: 0 1px 2px rgba(0,0,0,.08); white-space: pre-wrap; word-wrap: break-word; }
.recebida .msg-balao { background: var(--bolha-paciente); border: 1px solid var(--borda); border-top-left-radius: 4px; }
.enviada .msg-balao { background: var(--bolha-clinica); border: 1px solid var(--acento-borda); border-top-right-radius: 2px; }
.msg-link { color: var(--acento); text-decoration: underline; word-break: break-all; }
.msg-meta { font-size: 13px; color: var(--cor-texto-secundario); margin-top: 2px; }
/* Etiqueta interna "quem enviou" (só o painel vê; nunca vai pro paciente). */
.msg-autor { font-weight: 600; color: var(--acento); }
/* Mensagem apagada: balão apagado, cinza, sem ação (igual WhatsApp). */
.msg-apagada .msg-balao { background: transparent; border: 1px dashed var(--cor-borda); color: var(--cor-texto-secundario); box-shadow: none; display: flex; align-items: center; gap: 6px; }
.msg-apagada .msg-balao .ic { opacity: .7; }
.enviada .msg-meta { text-align: right; }
.check { color: var(--cor-secundaria); }
/* Rodada 6 S1 — tique de verdade: azul = lido pelo paciente; vermelho = NÃO chegou. */
.check-lido { color: var(--info); }
.check-erro { color: var(--erro); font-weight: 600; }
/* Rodada 6 S5 — botão no topo da conversa pra puxar mensagens mais antigas. */
.mais-antigas { text-align: center; padding: 6px 0 10px; }
.btn-mais-antigas { background: var(--superficie); border: 1px solid var(--cor-borda); border-radius: 14px; padding: 6px 14px; font-size: 13px; color: var(--cor-texto-secundario); cursor: pointer; box-shadow: var(--sombra); }
.btn-mais-antigas:hover { color: var(--cor-acento); border-color: var(--cor-acento); }
.msgs-erro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; color: var(--cor-texto-secundario); }
.btn-retry { background: var(--cor-secundaria); color: var(--superficie); border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-retry:hover { background: var(--cor-primaria); }
.campo-resposta { background: var(--superficie); border-top: 1px solid var(--cor-borda); padding: 10px 16px 20px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.campo-resposta-placeholder { flex: 1; background: var(--cor-fundo); border-radius: 24px; padding: 10px 16px; font-size: 14px; color: var(--cor-texto-secundario); cursor: default; }

/* ── COLUNA C ─────────────────────────────────────────── */
.col-c { width: 360px; flex-shrink: 0; background: var(--superficie); border-left: 1px solid var(--cor-borda); display: flex; flex-direction: column; }
.sofia-header { background: var(--info-suave); border-bottom: 1px solid var(--acento-borda); padding: 12px 16px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Ocultar/mostrar o painel da Sofia (COLUNA C) por navegador/usuário — André 13/07. */
.sofia-ocultar { margin-left: auto; background: none; border: none; color: var(--texto-2, #94a3b8); cursor: pointer; font-size: 15px; line-height: 1; padding: 3px 7px; border-radius: 6px; }
.sofia-ocultar:hover { background: var(--cor-borda, rgba(0,0,0,.08)); color: var(--texto, #334155); }
/* Ocultar o painel da Sofia NÃO pode esconder o resizer da lista (ele redimensiona a
   col-a, não tem relação com a col-c). Antes escondia os dois — quebrava o arrastar. */
body.sofia-oculta .col-c { display: none !important; }
/* Botão "✦ Sofia" na barra verde do topo — só aparece quando o painel da Sofia está oculto. */
.mostrar-sofia { display: none; align-items: center; gap: 5px; background: #7c3aed; color: #fff; border: none; border-radius: 20px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mostrar-sofia:hover { filter: brightness(1.08); }
body.sofia-oculta .mostrar-sofia { display: inline-flex; }
.sofia-marca { font-size: 16px; font-weight: 700; color: var(--cor-sofia); flex: 1; }
.sofia-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--borda); }
.sofia-status-dot.ativo { background: var(--cor-acento); }
.sofia-vazia { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--cor-texto-secundario); gap: 8px; font-size: 13px; text-align: center; padding: 20px; }
.sofia-corpo { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.sofia-contato-nome { font-weight: 600; font-size: 14px; }
.sofia-contato-meta { color: var(--cor-texto-secundario); margin-top: 2px; font-size: 13px; }
.sofia-secao-titulo { font-size: 13px; font-weight: 700; color: var(--cor-texto-secundario); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.sofia-sugestao-box { background: var(--cor-fundo); border-radius: 10px; padding: 14px; font-size: 14px; line-height: 1.5; color: var(--cor-texto-principal); border: 1.5px solid var(--cor-borda); }
.sofia-sugestao-box.pendente { border-color: var(--acento-borda); background: var(--info-suave); color: var(--cor-texto-secundario); font-style: italic; text-align: center; }
.sofia-confianca { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cor-texto-secundario); }
.barra-confianca { flex: 1; height: 4px; background: var(--cor-borda); border-radius: 2px; overflow: hidden; }
.barra-confianca-fill { height: 100%; background: var(--cor-acento); border-radius: 2px; transition: width .4s; }
.sofia-botoes { display: flex; flex-direction: column; gap: 8px; }
.btn-sofia { width: 100%; padding: 12px 16px; border-radius: 8px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all .15s; }
.btn-sofia:disabled { opacity: .4; cursor: not-allowed; }
.btn-enviar { background: var(--cor-acento); color: var(--superficie); }
.btn-aprendizado { background: var(--cor-fundo); color: var(--cor-texto-principal); }
.btn-refazer { background: var(--superficie); color: var(--cor-texto-principal); border: 1.5px solid var(--cor-borda) !important; }
.sofia-historico { border-top: 1px solid var(--cor-borda); padding-top: 12px; }
.sofia-historico-titulo { font-size: 13px; font-weight: 700; color: var(--cor-texto-secundario); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.historico-vazio { font-size: 13px; color: var(--cor-texto-secundario); }

/* Marco 2 — painel Sofia ativo */
.badge-auditar { display: inline-block; background: var(--atencao-suave); color: var(--cor-fila); font-size: 13px; font-weight: 700; padding: 1px 6px; border-radius: 8px; vertical-align: middle; }
.sofia-sugestao-box { white-space: pre-wrap; }
.refazer-area { display: none; flex-direction: column; gap: 8px; margin-top: 4px; }
.refazer-area.aberto { display: flex; }
.refazer-area textarea { width: 100%; border: 1.5px solid var(--cor-borda); border-radius: 8px; padding: 10px 12px; font-size: 13px; font-family: inherit; resize: none; outline: none; min-height: 72px; color: var(--cor-texto-principal); }
.refazer-area textarea:focus { border-color: var(--cor-sofia); }
.btn-gerar { background: var(--cor-sofia); color: var(--superficie); border: none; border-radius: 8px; padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-gerar:hover { background: var(--acento); }
.btn-gerar:disabled { opacity: .5; cursor: not-allowed; }

/* Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); align-items: center; justify-content: center; z-index: 100; }
.modal-overlay.aberto { display: flex; }
.modal { background: var(--superficie); border-radius: 12px; padding: 24px; width: 340px; box-shadow: 0 8px 32px rgba(0,0,0,.2); }
.modal h3 { font-size: 16px; margin-bottom: 8px; }
.modal p { font-size: 14px; color: var(--cor-texto-secundario); margin-bottom: 16px; line-height: 1.5; }
.modal-preview { background: var(--cor-mensagem-enviada); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 16px; line-height: 1.4; white-space: pre-wrap; max-height: 200px; overflow-y: auto; }
.modal-botoes { display: flex; gap: 8px; }
.btn-cancelar { flex: 1; padding: 10px; border: 1.5px solid var(--cor-borda); border-radius: 8px; background: var(--superficie); font-size: 14px; cursor: pointer; }
.btn-confirmar { flex: 1; padding: 10px; background: var(--cor-acento); color: var(--superficie); border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }

/* Modal de vínculo de família (10/08/2026) — pergunta ao abrir a conversa (modal-familia.js).
   ⚠️ Sem clique-no-fundo pra fechar (o JS ignora): a pergunta é pra ser respondida, e fechar
   sem querer com "Depois" implícito é como a recepção perde a única chance de corrigir. */
.mfam-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); align-items: center; justify-content: center; z-index: 110; padding: var(--esp-3); }
.mfam-overlay.aberto { display: flex; }
.mfam-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(26,43,59,.2); }
.mfam-topo { padding: 14px 18px 12px; border-bottom: 1px solid var(--borda); }
.mfam-titulo { font-size: var(--tam-titulo-3); font-weight: 600; color: var(--texto); }
.mfam-sub { font-size: var(--tam-secund); color: var(--texto-2); margin-top: 2px; }
.mfam-corpo { padding: 14px 18px; }
.mfam-rotulo { font-size: var(--tam-secund); color: var(--texto-2); margin: 14px 0 6px; }
.mfam-corpo .mfam-rotulo:first-child { margin-top: 0; }
.mfam-achado { background: var(--fundo); border-radius: var(--raio); padding: 10px 12px; font-size: var(--tam-secund); line-height: 1.6; color: var(--texto); }
.mfam-achado p + p { margin-top: 6px; }
.mfam-achado .ic { vertical-align: -2px; margin-right: 6px; color: var(--texto-2); }
.mfam-agenda { color: var(--texto-2); }
.mfam-lista { border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.mfam-linha { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.mfam-linha + .mfam-linha { border-top: 1px solid var(--borda); }
.mfam-nome { flex: 1; min-width: 0; font-size: var(--tam-secund); color: var(--texto); }
.mfam-rel { font-size: var(--tam-secund); padding: 2px 8px; border-radius: var(--raio); background: var(--fundo-2); color: var(--texto-2); white-space: nowrap; }
.mfam-rel-agenda { background: var(--ok-suave); color: var(--ok); }
.mfam-rel-dono { background: var(--acento-suave); color: var(--acento); }
.mfam-rel-edit { flex: 0 1 190px; font-family: inherit; font-size: var(--tam-secund); padding: 4px 8px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--texto); outline: none; }
.mfam-rel-edit:focus { border-color: var(--acento); }
.mfam-promessa { border-left: 3px solid var(--acento-borda); padding: 2px 0 2px 12px; font-size: var(--tam-secund); line-height: 1.75; color: var(--texto); }
.mfam-promessa .ic { vertical-align: -2px; margin-right: 6px; color: var(--texto-2); }
.mfam-promessa p:first-child .ic { color: var(--acento); }
.mfam-botoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px 14px; border-top: 1px solid var(--borda); }
.mfam-botoes button { padding: 8px 14px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--texto); font-family: inherit; font-size: var(--tam-secund); cursor: pointer; }
.mfam-botoes button:disabled { opacity: .5; cursor: not-allowed; }
.mfam-botoes .btn-confirmar { flex: 0 0 auto; background: var(--acento); color: var(--superficie); border: none; font-weight: 600; }
.mfam-botoes .mfam-depois { margin-left: auto; border-color: transparent; color: var(--texto-2); }

/* Ficha do contato: PAINEL NA DIREITA (como no Digisac) — foto grande, nome, dados abaixo */
#info-contato { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); background: var(--superficie); border-left: 1px solid var(--cor-borda); box-shadow: -8px 0 28px rgba(0,0,0,.14); z-index: 150; }
.info-card { position: relative; flex: 1; padding: 24px 24px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.info-fechar { position: absolute; top: 12px; right: 12px; border: none; background: none; color: var(--cor-texto-secundario); cursor: pointer; padding: 6px; border-radius: 8px; }
.info-fechar:hover { background: var(--fundo); }
.info-topo { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 12px 0 14px; }
.info-foto { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cor-borda); }
.info-foto-ini { display: flex; align-items: center; justify-content: center; background: var(--ok-suave); color: var(--ok); font-size: 36px; font-weight: 700; }
/* Só a foto DE VERDADE amplia — a bolinha de iniciais não tem o que mostrar. */
.info-foto-zoom { cursor: zoom-in; }
.info-nome-grande { font-size: 17px; font-weight: 700; color: var(--cor-texto-principal); text-align: center; line-height: 1.3; }
.info-tel { font-size: 14px; color: var(--cor-texto-principal); display: flex; align-items: center; gap: 8px; }
.info-wa { font-size: 13px; color: var(--cor-texto-secundario); }
.info-rotulo { font-size: 13px; font-weight: 600; color: var(--cor-texto-secundario); margin-top: 10px; }
.info-input { width: 100%; border: 1.5px solid var(--cor-borda); border-radius: 8px; padding: 9px 12px; font-size: 14px; font-family: inherit; color: var(--cor-texto-principal); background: var(--superficie); outline: none; resize: vertical; }
.info-input:focus { border-color: var(--cor-acento); }
.info-acoes { display: flex; gap: 8px; margin-top: 16px; }

/* Toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--texto); color: var(--superficie); padding: 10px 20px; border-radius: 8px; font-size: 13px; z-index: 200; opacity: 0; pointer-events: none; transition: opacity .2s; }
.toast.visivel { opacity: 1; }

/* Marco 3 — botão Memória + painéis admin */
.btn-memoria { background: var(--info-suave); color: var(--info); }
.painel-admin { flex: 1; overflow-y: auto; padding: 20px 24px; background: var(--superficie); }
.admin-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.admin-head h2 { font-size: 18px; margin: 0; }
.admin-head span { font-size: 13px; color: var(--texto-2); }
.admin-vazio { color: var(--texto-2); font-size: 14px; padding: 24px 0; }
.admin-cards { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.admin-card { background: var(--fundo); border-radius: 10px; padding: 14px 18px; min-width: 120px; }
.admin-card .n { font-size: 26px; font-weight: 700; color: var(--texto); }
.admin-card .l { font-size: 13px; color: var(--texto-2); margin-top: 2px; }
.admin-tabela-wrap { overflow-x: auto; }
.admin-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-tabela th, .admin-tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.admin-tabela th { font-size: 13px; text-transform: uppercase; color: var(--texto-2); font-weight: 600; }
.admin-tabela tr.inativa { opacity: .5; }
.admin-toggle { border: 1px solid var(--borda); background: var(--superficie); border-radius: 6px; padding: 3px 10px; font-size: 13px; cursor: pointer; }
.admin-toggle.on { background: var(--ok-suave); border-color: var(--ok-borda); color: var(--ok); font-weight: 600; }
.admin-del { border: none; background: none; color: var(--erro); font-size: 13px; cursor: pointer; text-decoration: underline; }

/* --- Confirmações Automáticas --- */
.conf-banner-teste { background: var(--atencao-suave); border: 1px solid var(--atencao-borda); color: var(--atencao); border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.conf-banner-real { background: var(--ok-suave); border: 1px solid var(--ok-borda); color: var(--ok); border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.conf-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; color: var(--cor-texto-secundario); }
.conf-toolbar input { width: 64px; padding: 6px 8px; border: 1px solid var(--cor-borda); border-radius: 6px; font-size: 13px; text-align: center; }
.conf-toolbar input[type="date"] { width: auto; text-align: left; }
.conf-contadores { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 14px; }
.conf-cont { font-size: 13px; background: var(--fundo); color: var(--texto-2); border-radius: 14px; padding: 4px 12px; }
.conf-cont b { color: var(--cor-primaria); }
.conf-resultado { background: var(--ok-suave); border: 1px solid var(--ok-borda); color: var(--ok); border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
.conf-resultado.erro { background: var(--erro-suave); border-color: var(--erro-borda); color: var(--erro); }
/* Âmbar: a rodada rodou, mas deixou coisa para trás (descarte anterior, aviso da clínica). Não é
   falha — é o "por que zero" que faltava na tela até 15/08/2026. */
.conf-resultado.atencao { background: var(--atencao-suave); border-color: var(--atencao-borda); color: var(--atencao); }
/* "NÃO SAIU" (23/07): fica no topo do painel — antes a mensagem que falhava sumia da tela. */
.conf-erro-bloco { background: var(--erro-suave); border: 1px solid var(--erro-borda); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; max-width: 720px; }
.conf-erro-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--erro); font-size: 14px; margin-bottom: 8px; }
.conf-erro-item { border-top: 1px solid var(--erro-borda); padding-top: 10px; margin-top: 10px; }
.conf-erro-nome { font-weight: 600; font-size: 15px; color: var(--cor-texto-principal); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.conf-erro-motivo { font-size: 13px; color: var(--erro); margin: 4px 0 8px; word-break: break-word; }
.conf-reenviar { background: var(--erro); color: var(--superficie); }
/* DISPENSADAS (11/08): resolvido, fora do vermelho — mas visível. Fechado por padrão, porque
   o que importa na tela é o que ainda pede decisão; some da vista, não do sistema. */
.conf-dispensadas { border: 1px solid var(--cor-borda); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; max-width: 720px; background: var(--fundo); }
.conf-dispensadas > summary { font-size: 13px; color: var(--cor-texto-secundario); cursor: pointer; }
.conf-disp-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--cor-borda); padding-top: 8px; margin-top: 8px; }
.conf-disp-nome { font-weight: 600; font-size: 13px; color: var(--cor-texto-principal); }
.conf-disp-item .conf-meta, .conf-disp-item .conf-erro-motivo { margin: 0; }
.conf-toolbar select { padding: 6px 8px; border: 1px solid var(--cor-borda); border-radius: 6px; font-size: 13px; background: var(--superficie); }
.conf-gerar { background: var(--cor-secundaria); color: var(--superficie); }
.conf-lote-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.conf-lote { background: var(--cor-primaria); color: var(--superficie); }
.conf-lote-hint { font-size: 13px; color: var(--cor-texto-secundario); }
.conf-selall { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cor-texto-secundario); cursor: pointer; }
.conf-check { width: 16px; height: 16px; vertical-align: middle; cursor: pointer; }
.conf-card-fila { opacity: .7; border-style: dashed; }
.conf-tag-fila { background: var(--atencao-suave); color: var(--atencao); }
.conf-lista { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.conf-card { border: 1px solid var(--cor-borda); border-radius: 10px; padding: 14px 16px; background: var(--superficie); }
.conf-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.conf-nome { font-weight: 600; font-size: 15px; color: var(--cor-texto-principal); }
.conf-tag { font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--cor-secundaria); background: var(--acento-suave); border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.conf-meta { font-size: 13px; color: var(--cor-texto-secundario); margin: 4px 0 10px; }
.conf-aviso { font-size: 13px; font-weight: 600; color: var(--cor-erro); margin-left: 6px; }
.conf-preview { white-space: pre-wrap; font-size: 14px; line-height: 1.5; color: var(--texto); background: var(--acento-suave); border: 1px solid var(--acento-borda); border-radius: 8px; padding: 12px 14px; }
.conf-botoes { display: flex; gap: 8px; margin-top: 12px; }
.conf-btn { border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.conf-btn:disabled { opacity: .6; cursor: default; }
.conf-enviar { background: var(--cor-acento); color: var(--superficie); }
.conf-descartar { background: var(--fundo); color: var(--texto-2); }

/* COM-004 regra 3: algarismos tabulares em toda hora, valor e medida */
.msg-meta, .contato-time, .admin-card .n, .admin-tabela td, .mkt-tabela td, .conversa-header-sub, .separador-data { font-variant-numeric: tabular-nums; }