/* Painel FL Net v2 — fundo branco + azul (padrão). Escuro só pelo botão ◐. */
:root {
  color-scheme: light;
  --marca: #1B2F7A; --marca-2: #1F5FC4; --marca-ceu: #5AAEEA; --marca-verm: #D7262E;
  --fundo: #F3F5FA; --superficie: #FFFFFF; --superficie-2: #F7F8FC; --borda: #E4E8F1; --grade: #EDF0F6;
  --texto: #141A33; --texto-2: #4A5372; --texto-3: #7D86A3;
  --s1: #1F5FC4; --s2: #eb6834; --s3: #1baf7a; --s-cinza: #A3AABD; --area: rgba(31, 95, 196, .10);
  --bom: #1F9D55; --bom-fundo: #E3F5EA; --atencao: #B7791F; --atencao-fundo: #FDF3DC; --critico: #D7262E; --critico-fundo: #FDE6E6;
  --bolha-cliente: #FFFFFF; --bolha-bot: #E3ECFB; --bolha-atendente: #DDF3E5;
  --sombra: 0 1px 2px rgba(20, 26, 51, .05), 0 4px 16px rgba(20, 26, 51, .05);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fundo: #0E1430; --superficie: #161E40; --superficie-2: #1B2449; --borda: #26305A; --grade: #222B52;
  --texto: #EEF1FA; --texto-2: #B7BFDA; --texto-3: #8790B2;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s-cinza: #5F6890; --area: rgba(57, 135, 229, .14);
  --bom: #3DBE78; --bom-fundo: rgba(61, 190, 120, .14); --atencao: #E3A93A; --atencao-fundo: rgba(227, 169, 58, .14); --critico: #F06464; --critico-fundo: rgba(240, 100, 100, .15);
  --bolha-cliente: #1F2A55; --bolha-bot: #22386E; --bolha-atendente: #1D4A3A;
  --sombra: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: Montserrat, Arial, sans-serif; background: var(--fundo); color: var(--texto); font-size: 14px; }
button { font: inherit; cursor: pointer; }
.hidden { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
h2 { font-size: 15px; margin: 0 0 4px; }
h3 { font-size: 14px; margin: 0 0 8px; }
h2 small, h3 small { font-weight: 500; color: var(--texto-3); font-size: 12px; }
.sub { font-size: 12.5px; color: var(--texto-3); margin: 0 0 14px; }
.ajuda { color: var(--texto-3); font-size: 12.5px; margin: 6px 0; }
.vazio { color: var(--texto-3); font-size: 13px; margin: 6px 0; }
.erro { color: var(--critico); margin: 0; min-height: 1.2em; font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--borda); margin: 18px 0; }

/* Formulários */
label { display: grid; gap: 6px; font-weight: 600; font-size: 13px; }
input, textarea, select { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--marca-ceu); outline-offset: 0; border-color: var(--marca-2); }
.check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.check input { width: 18px; height: 18px; }
.form-grade { display: grid; gap: 12px; align-content: start; }
.linha-form { display: flex; gap: 8px; flex-wrap: wrap; }
.linha-form input { flex: 1; min-width: 160px; }
.dia { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.dia .check { width: 110px; }
.dia input[type=number] { width: 70px; padding: 8px; }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px; padding: 9px 14px; font-weight: 700; background: var(--marca-2); color: #fff; font-size: 13px; text-decoration: none; }
.btn:hover { filter: brightness(1.07); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn.sec { background: transparent; color: var(--texto); border: 1px solid var(--borda); }
.btn.sec:hover { background: var(--superficie-2); }
.btn.perigo { background: var(--critico); }
.btn.perigo-borda { color: var(--critico); border-color: var(--critico); }
.btn.mini { padding: 6px 12px; font-size: 12px; }
.btn-grande { width: 100%; padding: 14px; font-size: 15px; }
.btn-link { background: none; border: 0; color: inherit; text-decoration: underline; padding: 0; opacity: .85; text-align: left; }
.btn-link:hover { opacity: 1; }

/* Login */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(135deg, var(--marca), var(--marca-2)); }
.login-caixa { background: var(--superficie); border-radius: 18px; padding: 28px; width: 100%; max-width: 380px; display: grid; gap: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.login-logo { width: 150px; margin: 0 auto; border-radius: 14px; }
.login h1 { text-align: center; font-size: 19px; margin: 0 0 6px; color: var(--marca); }
:root[data-theme="dark"] .login h1 { color: var(--texto); }
.login input { padding: 12px; }

/* Estrutura */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
/* Lateral (10/11, refinada): mesmo azul da marca; o vermelho só marca o item aberto e os avisos. */
.lateral { background: var(--marca); color: #fff; padding: 18px 12px 14px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; }
.lateral-marca { display: flex; align-items: center; gap: 10px; padding: 2px 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.lateral-marca img { width: 36px; height: 36px; border-radius: 9px; background: #fff; object-fit: contain; }
.lateral-marca span { display: grid; line-height: 1.15; }
.lateral-marca b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.lateral-marca small { font-size: 12px; color: rgba(255, 255, 255, .62); }
.nav { display: grid; gap: 2px; align-content: start; }
.nav button { position: relative; background: none; border: 0; color: rgba(255, 255, 255, .74); text-align: left; padding: 10px 12px; border-radius: 9px; font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 11px; transition: background-color .15s, color .15s; }
.nav button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav button.ativo { background: rgba(255, 255, 255, .13); color: #fff; }
.nav button.ativo::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--marca-verm); }
.nav button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.ni { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.nav button.ativo .ni { opacity: 1; }
.nav-grupo { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .5); padding: 16px 12px 6px; margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, .12); }
.badge { margin-left: auto; min-width: 22px; text-align: center; background: var(--marca-verm); color: #fff; border-radius: 11px; padding: 1px 7px; font-size: 12px; font-weight: 700; }
/* Rodapé: quem está logado, com as iniciais, e o botão de sair ao lado. */
.lateral-rodape { margin-top: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; padding: 12px 6px 2px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--marca-2); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.quem { display: grid; line-height: 1.2; min-width: 0; }
.quem b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quem span { color: rgba(255, 255, 255, .62); font-size: 12px; }
.btn-sair { background: none; border: 0; color: rgba(255, 255, 255, .7); padding: 7px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.btn-sair:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.lateral-rodape .modo { grid-column: 1 / -1; justify-self: start; font-size: 11.5px; color: #FFE08A; }
.lateral-rodape .modo:empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Cada ícone reage do seu jeito ao passar o mouse, como no site. */
  .nav button:hover .ni { transform: translateY(-1px); transition: transform .15s; }
  .nav button:hover .ni:has(use[href="#n-agora"]) { animation: n-pulso .7s ease-out; }
  .nav button:hover .ni:has(use[href="#n-chat"]) { animation: n-balanca .5s ease-in-out; }
  /* Fila com gente esperando: o número pulsa devagar até alguém abrir. */
  #contFila:not(.hidden) { animation: n-chama 2s ease-in-out infinite; }
}
@keyframes n-pulso { 0% { transform: scaleX(1); } 40% { transform: scaleX(1.18); } 100% { transform: scaleX(1); } }
@keyframes n-balanca { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-10deg); } 65% { transform: rotate(8deg); } }
@keyframes n-chama { 0%, 100% { box-shadow: 0 0 0 0 rgba(215, 38, 46, .6); } 50% { box-shadow: 0 0 0 5px rgba(215, 38, 46, 0); } }
.modo { font-size: 11.5px; }
.principal { min-width: 0; display: flex; flex-direction: column; }
.topo { display: flex; align-items: center; gap: 14px; padding: 16px 28px; border-bottom: 1px solid var(--borda); background: var(--superficie); position: sticky; top: 0; z-index: 500; flex-wrap: wrap; }
.topo h1 { font-size: 20px; margin: 0; margin-right: auto; }
.pilulas { display: flex; gap: 8px; flex-wrap: wrap; }
.pilula { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto-2); }
.pilula i { width: 8px; height: 8px; border-radius: 50%; background: var(--bom); display: inline-block; }
.pilula.falha { background: var(--critico-fundo); border-color: var(--critico); color: var(--critico); }
.pilula.falha i { background: var(--critico); }
.tema { background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto); border-radius: 10px; padding: 6px 10px; }
.conteudo { padding: 24px 28px 40px; }
.tela { display: none; }
.tela.ativa { display: grid; gap: 20px; }

/* Cartões e grades */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 20px; box-shadow: var(--sombra); min-width: 0; }
.cartao.plano { background: var(--superficie-2); box-shadow: none; }
.linha { display: grid; gap: 20px; }
.l-2-1 { grid-template-columns: 2fr 1fr; }
.l-1-1 { grid-template-columns: 1fr 1fr; }
.titulo-cartao { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.titulo-cartao > div:first-child { margin-right: auto; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--texto-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda b { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.legenda b.q { width: 10px; height: 10px; border-radius: 3px; }

/* Alerta de queda em massa */
.alertas { display: grid; gap: 12px; }
.alertas:empty { display: none; }
.alerta { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: var(--critico-fundo); border: 1px solid var(--critico); border-radius: 16px; padding: 16px 20px; }
.alerta .icone { width: 40px; height: 40px; border-radius: 12px; background: var(--critico); color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 800; }
.alerta.info { background: var(--superficie); border-color: var(--marca-2); }
.alerta.info .icone { background: var(--marca-2); }
.rolagem-x { overflow-x: auto; }
.alerta strong { display: block; font-size: 15px; }
.alerta p { margin: 2px 0 0; color: var(--texto-2); font-size: 13px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { display: grid; gap: 4px; align-content: start; }
.kpi .rotulo { font-size: 12.5px; color: var(--texto-2); font-weight: 600; }
.kpi .valor { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.kpi .rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.delta { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; color: var(--texto-2); background: var(--superficie-2); }
.delta.bom { color: var(--bom); background: var(--bom-fundo); }
.delta.ruim { color: var(--critico); background: var(--critico-fundo); }
.delta small { font-weight: 600; color: var(--texto-3); }

/* Fila */
.fila { display: grid; gap: 10px; }
.pessoa { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borda); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--marca-2); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.avatar.anonimo { background: var(--s-cinza); }
.pessoa .nome { font-weight: 700; }
.pessoa .info { font-size: 12.5px; color: var(--texto-2); }
.espera { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 10px; white-space: nowrap; }
.espera.bom { color: var(--bom); background: var(--bom-fundo); }
.espera.atencao { color: var(--atencao); background: var(--atencao-fundo); }
.espera.critico { color: var(--critico); background: var(--critico-fundo); }
.tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: var(--superficie); border: 1px solid var(--borda); color: var(--texto-2); white-space: nowrap; }

/* Gráficos */
svg.grafico { width: 100%; height: auto; display: block; overflow: visible; }
svg.grafico text { font-family: inherit; fill: var(--texto-3); font-size: 11px; }
svg.grafico .grade { stroke: var(--grade); stroke-width: 1; }
svg.grafico .rotulo-valor { fill: var(--texto-2); font-weight: 700; font-size: 11.5px; }
.dica { position: fixed; pointer-events: none; background: var(--texto); color: var(--superficie); padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.45; opacity: 0; transition: opacity .1s; z-index: 1000; max-width: 240px; }
.barras-h { display: grid; gap: 10px; }
.barra-h { display: grid; grid-template-columns: 140px 1fr 48px; gap: 10px; align-items: center; font-size: 13px; }
.barra-h .trilho { height: 12px; border-radius: 0 6px 6px 0; background: var(--superficie-2); display: flex; gap: 2px; }
.barra-h .valor { height: 100%; border-radius: 0 4px 4px 0; background: var(--s1); max-width: 100%; }
.barra-h .valor.meio { border-radius: 0; }
.barra-h .valor.s2 { background: var(--s2); }
.barra-h .valor.s3 { background: var(--s3); }
.tag.urgente { background: var(--critico-fundo); color: var(--critico); }
.tag.retorno { background: var(--atencao-fundo); color: var(--atencao); }
.barra-h .valor.cinza { background: var(--s-cinza); }
.desempenho-graficos { margin: 16px 0 8px; }
.pizza { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pizza svg { flex: none; }
.pizza .legenda { flex-direction: column; gap: 8px; font-size: 13px; }
.pizza .legenda strong { color: var(--texto); }
.barra-h .valor.critico { background: var(--critico); }
.barra-h .valor.atencao { background: var(--atencao); }
.barra-h b { text-align: right; }
.funil { display: grid; gap: 8px; }
.degrau { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: center; }
.degrau .nome { font-size: 13px; font-weight: 600; }
.degrau .nome small { display: block; color: var(--texto-3); font-weight: 600; }
.degrau .faixa { height: 34px; border-radius: 0 6px 6px 0; background: var(--s1); display: flex; align-items: center; padding: 0 10px; color: #fff; font-weight: 800; font-size: 13px; min-width: 64px; white-space: nowrap; }
.degrau .faixa.perda { background: var(--s2); }
.tabela-ver { font-size: 12px; color: var(--marca-2); background: none; border: 0; padding: 0; font-weight: 700; margin-top: 8px; }
table.dados { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
table.dados th, table.dados td { text-align: left; padding: 8px; border-bottom: 1px solid var(--borda); }
table.dados th { color: var(--texto-3); font-weight: 700; font-size: 12px; }
table.dados tr.atencao td { background: var(--atencao-fundo); }
table.dados tr.critico td { background: var(--critico-fundo); }

/* Atendimento: lista + conversa + ficha */
.atendimento { display: grid; grid-template-columns: 270px 1fr 310px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; overflow: hidden; height: calc(100vh - 128px); min-height: 520px; box-shadow: var(--sombra); }
.coluna { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.coluna + .coluna { border-left: 1px solid var(--borda); }
.busca { padding: 14px; border-bottom: 1px solid var(--borda); display: grid; gap: 10px; }
.busca input { width: 100%; }
.chat-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-titulo h2 { margin: 0; font-size: 17px; }
.resumo-chat { font-size: 12px; font-weight: 700; color: var(--critico); }
.tag.sit-atendente { color: var(--s1); background: var(--area); border-color: transparent; }
.tag.sit-agente { color: var(--texto-2); }
.alerta-abertas { border: 1px solid var(--critico); background: var(--critico-fundo); color: var(--critico); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-align: left; }
.alerta-abertas.ativo { background: var(--critico); color: #fff; }
.tag.sit-encerrado { color: var(--texto-2); background: transparent; border-style: dashed; }
.lista-conv { overflow-y: auto; flex: 1; }
.lista-conv .vazio { padding: 14px; }
.conv { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--borda); background: none; color: inherit; width: 100%; text-align: left; align-items: center; }
.conv:hover, .conv.sel { background: var(--superficie-2); }
.conv.sel { box-shadow: inset 3px 0 0 var(--marca-2); }
.conv .avatar { width: 38px; height: 38px; font-size: 13px; }
.conv .nome { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 05/11: etiquetas numa linha própria (na linha do nome eram cortadas pelo "…") */
.conv .tags-conv { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 2px; }
.conv .tags-conv:empty { display: none; }
.conv .tags-conv .tag { font-size: 10.5px; padding: 1px 6px; }
#ordemChat { width: 100%; font-size: 12px; padding: 5px 8px; }
.conv .ult { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .quando { font-size: 11px; color: var(--texto-3); }
.vazio-centro { flex: 1; display: grid; place-items: center; background: var(--fundo); }
.cab-conv { padding: 14px 18px; border-bottom: 1px solid var(--borda); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cab-conv .quem { margin-right: auto; min-width: 0; }
.cab-conv .nome { font-weight: 800; }
.cab-conv .info { font-size: 12px; color: var(--texto-3); }
.mensagens { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 8px; background: var(--fundo); overflow-y: auto; }
.marco { align-self: center; font-size: 11.5px; color: var(--texto-3); background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 3px 10px; }
.bolha { max-width: 74%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; box-shadow: var(--sombra); }
.bolha small { display: block; margin-top: 4px; font-size: 11px; color: var(--texto-3); }
.bolha.cliente { background: var(--bolha-cliente); align-self: flex-start; border-top-left-radius: 4px; }
.bolha.bot { background: var(--bolha-bot); align-self: flex-end; border-top-right-radius: 4px; }
.bolha.atendente { background: var(--bolha-atendente); align-self: flex-end; border-top-right-radius: 4px; }
.bolha.sombra { background: transparent; border: 1.5px dashed var(--marca-2); align-self: flex-end; border-top-right-radius: 4px; opacity: .9; box-shadow: none; } /* agente em teste: não enviado (03/11) */
.rapidas { display: flex; gap: 6px; padding: 10px 14px 0; flex-wrap: wrap; border-top: 1px solid var(--borda); }
.rapidas button { border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto-2); border-radius: 16px; padding: 5px 10px; font-size: 12px; font-weight: 600; }
.rapidas button:hover { border-color: var(--marca-2); color: var(--marca-2); }
/* Resposta sugerida (03/11): ajustes acima da caixa de texto. */
.barra-sugestao { padding: 8px 14px 0; display: grid; gap: 6px; }
.barra-sugestao .ajuda { margin: 0; }
.sug-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sug-acoes button { border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto-2); border-radius: 16px; padding: 5px 10px; font-size: 12px; font-weight: 600; }
.sug-acoes button:hover { border-color: var(--marca-2); color: var(--marca-2); }
.sug-acoes button:disabled { opacity: .5; }
.sug-acoes input { flex: 1; min-width: 180px; font-size: 12px; padding: 5px 10px; }
.compor { display: flex; gap: 8px; padding: 10px 14px 14px; }
.compor textarea { flex: 1; resize: none; height: 46px; }
.aviso-bot { padding: 10px 14px; font-size: 12.5px; color: var(--texto-2); background: var(--atencao-fundo); border-top: 1px solid var(--borda); }
.ficha { padding: 18px; display: grid; gap: 18px; align-content: start; overflow-y: auto; flex: 1; }
.ficha h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bloco { display: grid; gap: 6px; font-size: 13px; }
.par { display: flex; justify-content: space-between; gap: 8px; }
.par span { color: var(--texto-3); }
.par b { text-align: right; }
.st-ok { color: var(--bom); }
.st-ruim { color: var(--critico); }
.st-ok::before, .st-ruim::before { content: '● '; }
.linha-tempo { display: grid; gap: 8px; border-left: 2px solid var(--borda); padding-left: 12px; font-size: 12.5px; color: var(--texto-2); }
.linha-tempo div { position: relative; }
.linha-tempo div::before { content: ''; position: absolute; left: -17px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--marca-2); }
.fatura { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borda); font-size: 13px; }
.fatura .venc { font-size: 11.5px; color: var(--texto-3); font-weight: 700; }
.fatura .venc.vencida { color: var(--critico); }
.grade-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grade-acoes .btn { padding: 10px 8px; font-size: 12.5px; }
.grade-acoes .cheio { grid-column: 1 / -1; }
.ficha select { width: 100%; }

/* Análises */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filtros .btn { margin-left: auto; }
.segmento { display: inline-flex; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.segmento button { border: 0; background: transparent; color: var(--texto-2); padding: 8px 14px; font-weight: 700; font-size: 12.5px; }
.segmento button.ativo { background: var(--marca-2); color: #fff; }
.mapa { height: 340px; border-radius: 12px; overflow: hidden; border: 1px solid var(--borda); background: var(--superficie-2); z-index: 0; }
.mapa .vazio { padding: 16px; }
.escala { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11.5px; color: var(--texto-3); }
.escala i { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #DCE8FA, #1F5FC4, #0E2F6E); display: inline-block; }
.leaflet-tooltip { font-family: Montserrat, Arial, sans-serif; }

/* WhatsApp, Equipe */
.wa-status { margin: 10px 0; }
.wa-pilula { display: inline-block; padding: 10px 16px; border-radius: 12px; font-weight: 700; }
.wa-pilula.ok { background: var(--bom-fundo); color: var(--bom); }
.wa-pilula.falha { background: var(--critico-fundo); color: var(--critico); }
.wa-qr img { width: 100%; max-width: 280px; background: #fff; padding: 10px; border-radius: 12px; margin-top: 12px; }
.wa-codigo { font-size: 30px; font-weight: 800; letter-spacing: .25em; text-align: center; padding: 14px; margin: 12px 0; background: var(--superficie-2); border-radius: 12px; color: var(--marca-2); }
.quedas { margin: -4px 0 6px 150px; padding: 0; list-style: none; font-size: 12px; color: var(--texto-3); display: grid; gap: 3px; }
.lista-equipe { display: grid; gap: 10px; }
.membro { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borda); }
.membro .nome { font-weight: 700; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.membro small { color: var(--texto-3); }
.acoes-equipe { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; margin-top: 4px; }

/* Aviso rápido (resultado de ações) */
.aviso-flutuante { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--texto); color: var(--superficie); padding: 12px 18px; border-radius: 12px; font-weight: 600; font-size: 13px; z-index: 1000; box-shadow: 0 8px 30px rgba(0, 0, 0, .2); max-width: calc(100% - 32px); }
.aviso-flutuante.erro { background: var(--critico); color: #fff; }

.so-estreito { display: none; }
@media (max-width: 1300px) {
  .so-estreito { display: inline-flex; }
  .atendimento { grid-template-columns: 260px 1fr; }
  .ficha-col { display: none; }
  .atendimento.com-ficha .ficha-col { display: flex; }
  .atendimento.com-ficha { grid-template-columns: 260px 1fr 300px; }
}
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; gap: 12px; }
  .lateral-marca { border-bottom: 0; padding: 0; }
  .lateral-marca small { display: none; }
  .nav button.ativo::before { display: none; }
  .nav { display: flex; flex-wrap: wrap; }
  .nav-grupo { display: none; }
  .lateral-rodape { margin: 0 0 0 auto; border-top: 0; padding: 0; grid-template-columns: auto auto; }
  .lateral-rodape .quem, .lateral-rodape .modo { display: none; }
  .topo, .conteudo { padding-left: 16px; padding-right: 16px; }
  .topo { position: static; }
  .l-2-1, .l-1-1 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .atendimento, .atendimento.com-ficha { grid-template-columns: 1fr; height: auto; }
  .lista-col { max-height: 300px; }
  .chat-col { height: 70vh; }
  .ficha-col, .atendimento.com-ficha .ficha-col { display: flex; border-left: 0 !important; border-top: 1px solid var(--borda); }
  .coluna + .coluna { border-left: 0; border-top: 1px solid var(--borda); }
  .alerta { grid-template-columns: 1fr; }
  .barra-h { grid-template-columns: 100px 1fr 40px; }
  .degrau { grid-template-columns: 120px 1fr; }
  .quedas { margin-left: 0; }
  .filtros .btn { margin-left: 0; }
}

/* Autoteste do SGP (Configurações) */
.autoteste-total { font-weight: 700; padding: 8px 12px; border-radius: 10px; margin: 6px 0; }
.autoteste-total.bom { color: var(--bom); background: var(--bom-fundo); }
.autoteste-total.atencao { color: var(--atencao); background: var(--atencao-fundo); }
.autoteste-total.ruim { color: var(--critico); background: var(--critico-fundo); }
.autoteste-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.autoteste-lista li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie-2); font-size: 13px; overflow-wrap: anywhere; }
.autoteste-lista li.t-erro { border-color: var(--critico); }
.autoteste-lista li.t-aviso { border-color: var(--atencao); }
.autoteste-lista small { color: var(--texto-3); font-weight: 500; }

/* Central de Treinamento: sugestões do bot */
.sugestao-treino { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.sugestao-treino .btn { padding: 6px 12px; font-size: .85rem; }

/* Atendimento virtual em destaque na tela Agora (03/11) */
.filtros-comprovantes { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 6px 0 4px; }
.filtros-comprovantes label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--texto-3); }
.virtual-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 8px; }
.vn { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie-2); }
.vn-rotulo { font-size: 12px; color: var(--texto-3); font-weight: 700; }
.vn-valor { font-size: 26px; line-height: 1.1; }
.vn-valor.st-ok::before, .vn-valor.st-ruim::before { content: ''; }
.vn small { color: var(--texto-3); font-size: 12px; }

/* Respostas rápidas da equipe criadas no chat (03/11) */
.rapidas .rap-x { margin-left: 6px; opacity: .55; font-weight: 700; }
.rapidas .rap-x:hover { opacity: 1; color: var(--critico); }
.rapidas .rap-nova { border-style: dashed !important; color: var(--marca-2) !important; }

/* Aviso no celular ligado neste aparelho (03/11) */
.tema.ligado { border-color: var(--bom); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bom) 35%, transparent); }

/* Faixa "Precisa de você" (03/11): o que precisa de alguém agora, no topo da tela Agora. */
.precisa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 18px; border-radius: 16px; background: var(--superficie, #fff); border: 1px solid var(--critico); border-left-width: 6px; }
.precisa > strong { font-size: 15px; }
.precisa .itens { display: flex; flex-wrap: wrap; gap: 8px; }
.precisa .item { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 999px; padding: 6px 14px; border: 1px solid transparent; }
.precisa .item.critico { color: var(--critico); background: var(--critico-fundo); border-color: var(--critico); }
.precisa .item.atencao { color: var(--atencao); background: var(--atencao-fundo); border-color: var(--atencao); }
.precisa .item:hover, .precisa .item:focus-visible { filter: brightness(.95); outline: 2px solid currentColor; outline-offset: 1px; }
.pediu { font-size: 12px; color: var(--texto-2, #666); white-space: nowrap; }
@media (max-width: 700px) { .precisa { flex-direction: column; align-items: stretch; } .precisa .item { text-align: left; border-radius: 12px; } }
.pediu { margin-top: 4px; }
.tag.equipe { color: var(--s1); background: var(--area); border-color: transparent; }
.tag.vendo { color: var(--atencao); background: var(--atencao-fundo); border-color: transparent; }
.vendo-tambem { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--atencao); }

/* Gráficos do dia recolhíveis (03/11). */
.graficos > summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; cursor: pointer; list-style: none; padding: 12px 18px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--borda); font-weight: 700; }
.graficos > summary::-webkit-details-marker { display: none; }
.graficos > summary::before { content: '▸'; color: var(--texto-3); transition: transform .15s; }
.graficos[open] > summary::before { transform: rotate(90deg); }
.graficos > summary small { font-weight: 400; color: var(--texto-3); }
.graficos > summary:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }
.graficos-corpo { display: grid; gap: 20px; margin-top: 20px; }

/* Análises em abas (03/11). */
.topo-analises { position: sticky; top: 0; z-index: 5; display: grid; gap: 12px; padding: 8px 0 4px; background: var(--fundo); }
.abas-analise { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--borda); }
.abas-analise button { border: 0; background: transparent; color: var(--texto-2); font: inherit; font-weight: 700; font-size: 14px; padding: 10px 14px; border-bottom: 3px solid transparent; cursor: pointer; }
.abas-analise button.ativo { color: var(--s1); border-bottom-color: var(--s1); }
.abas-analise button:focus-visible { outline: 2px solid var(--s1); outline-offset: -2px; }
.grupo-analise { display: grid; gap: 20px; }
.kpi .valor.abaixo-meta { color: var(--critico); }
button.info { border: 0; background: transparent; color: var(--texto-3); font-size: 14px; cursor: pointer; padding: 0 4px; vertical-align: middle; }
button.info:hover, button.info[aria-expanded="true"] { color: var(--s1); }
.definicao { margin: 4px 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); color: var(--texto-2); font-size: 13px; line-height: 1.45; }
@media (max-width: 700px) { .abas-analise { flex-wrap: nowrap; overflow-x: auto; } .abas-analise button { white-space: nowrap; } }

/* Relatório para imprimir ou salvar em PDF: na tela fica escondido; na impressão é a única coisa que aparece. */
.relatorio { display: none; }
@media print {
  body > *:not(#relatorio) { display: none !important; }
  body { background: #fff; }
  .relatorio { display: block; color: #111; font: 12px/1.45 Montserrat, Arial, sans-serif; }
  .relatorio header { border-bottom: 2px solid #1F5FC4; margin-bottom: 12px; padding-bottom: 8px; }
  .relatorio h1 { font-size: 20px; margin: 0; color: #1F5FC4; }
  .relatorio h2 { font-size: 14px; margin: 16px 0 6px; break-after: avoid; }
  .relatorio table { width: 100%; border-collapse: collapse; break-inside: avoid; }
  .relatorio th, .relatorio td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #ddd; }
  .relatorio td:last-child { text-align: right; }
  .relatorio footer { margin-top: 18px; color: #666; font-size: 10px; }
  @page { margin: 16mm; }
}
.afetados { margin-top: 8px; }
.afetados > summary { cursor: pointer; font-weight: 700; color: var(--critico); }
.afetados .fila { margin-top: 8px; }

/* Nomes dos bairros no mapa (04/11): os com reclamação sempre; os demais só com zoom de bairro. */
.nome-bairro { background: none; border: 0; }
.nome-bairro span { display: inline-block; transform: translate(-50%, -50%); white-space: nowrap; font: 700 10.5px/1.2 Montserrat, Arial, sans-serif; color: #1d2433; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; pointer-events: none; }
.nome-bairro.com-queixa span { font-size: 12px; color: #7a1f1f; }
.mapa:not(.nomes-todos) .nome-bairro:not(.com-queixa) { display: none; }
/* Mapa dos bairros (04/11): largura toda da aba e mais alto, para ler os nomes. */
#cartaoMapa { grid-column: 1 / -1; }
#cartaoMapa .mapa { height: 520px; }
@media (max-width: 700px) { #cartaoMapa .mapa { height: 420px; } }
/* Abrir no WhatsApp Business (04/11). */
a.whats { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
a.btn.mini.whats { background: #1f9d55; color: #fff; }

/* Configurações simples (09/11): listas editáveis e Opções avançadas. */
.lista-editavel { display: grid; gap: 10px; margin: 4px 0 14px; }
.item-editavel { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr auto; gap: 8px; align-items: start; }
.item-editavel textarea { resize: vertical; }
.pergunta { display: grid; gap: 6px; font-weight: 600; color: var(--texto-2); }
.pergunta input, .pergunta textarea { font-weight: 400; }
.acoes-form { display: flex; gap: 10px; flex-wrap: wrap; }
.avancadas { margin-top: 18px; }
.avancadas[open] > summary { margin-bottom: 16px; }
@media (max-width: 720px) { .item-editavel { grid-template-columns: 1fr auto; } .item-editavel textarea { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Lateral, 2ª rodada (10/11): expediente, grupo Atendimento, recolher ---------- */
.lateral-marca { position: relative; }
.btn-recolher { margin-left: auto; background: none; border: 0; color: rgba(255, 255, 255, .6); padding: 6px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.btn-recolher:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.btn-recolher:focus-visible, .btn-sair:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
/* Expediente: verde quando a equipe está atendendo, âmbar quando só a Rafaela responde. */
.expediente { margin: -8px 0 0; padding: 8px 12px; border-radius: 9px; background: rgba(255, 255, 255, .07); font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .88); display: flex; align-items: center; gap: 8px; line-height: 1.3; }
.expediente .ponto { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: #3DD68C; box-shadow: 0 0 0 3px rgba(61, 214, 140, .2); }
.expediente.fechado .ponto { background: #FFC24A; box-shadow: 0 0 0 3px rgba(255, 194, 74, .2); }
.nav-grupo-1 { border-top: 0; margin-top: 0; padding-top: 2px; }
.nav button .rotulo { white-space: nowrap; }

/* Menu recolhido: só os ícones; o nome aparece ao parar o mouse (title). Fica lembrado neste navegador. */
@media (min-width: 981px) {
  .app.lateral-recolhida { grid-template-columns: 68px 1fr; }
  .lateral-recolhida .lateral { padding-inline: 10px; align-items: center; }
  .lateral-recolhida .lateral-marca { flex-direction: column; padding: 2px 0 12px; gap: 10px; }
  .lateral-recolhida .lateral-marca span, .lateral-recolhida .rotulo, .lateral-recolhida .quem, .lateral-recolhida .modo,
  .lateral-recolhida #expedienteTexto { display: none; }
  .lateral-recolhida .btn-recolher { margin: 0; transform: scaleX(-1); }
  .lateral-recolhida .expediente { margin: -6px 0 0; padding: 8px; justify-content: center; }
  .lateral-recolhida .nav { width: 100%; }
  .lateral-recolhida .nav button { justify-content: center; padding: 11px 0; }
  .lateral-recolhida .nav button.ativo::before { left: -10px; }
  .lateral-recolhida .nav-grupo { font-size: 0; padding: 0; margin: 8px 6px; height: 1px; }
  .lateral-recolhida .nav-grupo-1 { display: none; }
  .lateral-recolhida .badge { position: absolute; top: 3px; right: 6px; min-width: 18px; padding: 0 5px; font-size: 11px; }
  .lateral-recolhida .lateral-rodape { grid-template-columns: 1fr; justify-items: center; gap: 8px; padding-inline: 0; }
}

@media (max-width: 980px) {
  .btn-recolher, .nav-grupo-1 { display: none; }
  .expediente { margin: 0; order: 3; }
}