:root {
  --marinho: #02082F;
  --marinho-2: #0B1550;
  --azul: #1526FF;
  --azul-escuro: #0E1BC4;
  --azul-claro: #ECEEFF;
  --amarelo: #FFC017;
  --amarelo-claro: #FFF5D6;
  --tinta: #14162B;
  --texto-2: #5D5E69;
  --texto-3: #8A8C99;
  --fundo: #F3F4F9;
  --cartao: #FFFFFF;
  --fio: #E2E4EE;
  --fio-forte: #CBCEDD;
  --cliente: #9AA0C0;
  --verde: #0B8457;
  --verde-claro: #E3F4EC;
  --vermelho: #C42B37;
  --vermelho-claro: #FBE7E9;
  --laranja: #B86A00;
  --laranja-claro: #FDF0DD;
  --raio: 10px;
  --raio-p: 6px;
  --sombra: 0 1px 2px rgba(2, 8, 47, .06), 0 4px 16px rgba(2, 8, 47, .05);
  --fonte: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font: 400 15px/1.5 var(--fonte); font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.25; color: var(--marinho); }
h1 { font-size: 26px; letter-spacing: -.01em; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p { margin: 0; }
a { color: var(--azul); }
button, input, select, textarea { font: inherit; color: inherit; }

/* Clicável sempre com cursor de mão; desabilitado com not-allowed. */
button, select, summary, label[for], [role=button], [data-acao], th.ordenavel, tr.clicavel,
input[type=checkbox], input[type=radio], input[type=file], input[type=date], input[type=datetime-local], input[type=range] { cursor: pointer; }
button:disabled, select:disabled, input:disabled, textarea:disabled { cursor: not-allowed; opacity: .55; }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Faixa e topo ---------- */
.faixa-demo {
  background: var(--amarelo); color: var(--marinho); text-align: center;
  font-size: 13px; font-weight: 500; padding: 5px 16px;
}
.topo { background: var(--marinho); color: #fff; position: sticky; top: 0; z-index: 30; }
.topo-in { max-width: 1440px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 32px; height: 60px; }
.topo .logo { color: #FAFAFA; display: flex; align-items: center; }
.topo .logo svg { height: 22px; width: auto; }
.menu { display: flex; gap: 4px; height: 100%; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a {
  display: flex; align-items: center; padding: 0 14px; color: #C9CCE6; text-decoration: none;
  font-size: 14.5px; white-space: nowrap; border-bottom: 3px solid transparent; margin-top: 3px;
}
.menu a:hover { color: #fff; }
.menu a[aria-current=page] { color: #fff; border-bottom-color: var(--amarelo); }
.topo .sair { margin-left: auto; background: none; border: 1px solid #2A3370; color: #C9CCE6; border-radius: var(--raio-p); padding: 6px 12px; font-size: 13px; }
.topo .sair:hover { color: #fff; border-color: #4A55A0; }

main { max-width: 1440px; margin: 0 auto; padding: 28px 24px 56px; }
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cabecalho .sub { color: var(--texto-2); margin-top: 4px; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; }

.rodape { max-width: 1440px; margin: 0 auto; padding: 18px 24px 32px; color: var(--texto-3); font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; }

/* ---------- Botões e campos ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; border-radius: var(--raio-p); border: 1px solid var(--fio-forte);
  background: var(--cartao); padding: 9px 16px; font-weight: 500; font-size: 14.5px; color: var(--marinho); white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--azul); color: var(--azul); }
.btn.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn.primario:hover:not(:disabled) { background: var(--azul-escuro); color: #fff; }
.btn.perigo:hover:not(:disabled) { border-color: var(--vermelho); color: var(--vermelho); }
.btn.pequeno { padding: 5px 10px; font-size: 13px; }
.btn svg { width: 16px; height: 16px; }
.icone-btn { background: none; border: 0; padding: 6px; border-radius: var(--raio-p); color: var(--texto-2); display: inline-flex; }
.icone-btn:hover { background: var(--azul-claro); color: var(--azul); }
.icone-btn svg { width: 18px; height: 18px; }

.campo { display: flex; flex-direction: column; gap: 5px; }
.campo > span { font-size: 13px; color: var(--texto-2); }
.entrada, select.entrada, textarea.entrada {
  border: 1px solid var(--fio-forte); border-radius: var(--raio-p); background: #fff; padding: 8px 11px; font-size: 14.5px; min-width: 0;
}
textarea.entrada { resize: vertical; min-height: 80px; line-height: 1.5; }
.entrada:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro); }
select.entrada { padding-right: 30px; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235D5E69' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center; }

/* ---------- Cartões e indicadores ---------- */
.cartao { background: var(--cartao); border: 1px solid var(--fio); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--fio); flex-wrap: wrap; }
.cartao-corpo { padding: 18px 20px; }

.indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.indicador { padding: 16px 18px; }
.indicador .rot { font-size: 13.5px; color: var(--texto-2); }
.indicador .val { font-size: 30px; font-weight: 500; color: var(--marinho); margin-top: 2px; letter-spacing: -.02em; }
.indicador .val small { font-size: 15px; color: var(--texto-3); font-weight: 400; margin-left: 2px; }

/* ---------- Selos ---------- */
.selo { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; padding: 2px 9px; border-radius: 999px; background: #EEF0F6; color: var(--texto-2); white-space: nowrap; }
.selo.azul { background: var(--azul-claro); color: var(--azul-escuro); }
.selo.verde { background: var(--verde-claro); color: var(--verde); }
.selo.vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
.selo.laranja { background: var(--laranja-claro); color: var(--laranja); }
.selo.amarelo { background: var(--amarelo-claro); color: #7A5A00; }

.nota { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; font-weight: 500; }
.nota::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cor, var(--texto-3)); }
.nota.alta { --cor: var(--verde); }
.nota.media { --cor: var(--amarelo); }
.nota.baixa { --cor: var(--vermelho); }

/* ---------- Tabela ---------- */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--fio); }
.filtros .busca { flex: 1 1 260px; max-width: 360px; }
.filtros .contagem { margin-left: auto; color: var(--texto-3); font-size: 13.5px; }
.tabela-rolagem { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabela th, .tabela td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--fio); white-space: nowrap; }
.tabela th + th, .tabela td + td { border-left: 1px solid var(--fio); }
.tabela th { font-weight: 500; font-size: 13px; color: var(--texto-2); background: #FAFBFD; position: sticky; top: 0; user-select: none; }
.tabela th.ordenavel:hover { color: var(--azul); }
.tabela th .seta { display: inline-block; width: 12px; margin-left: 4px; color: var(--azul); }
.tabela .dir { text-align: right; }
.tabela .centro { text-align: center; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tr.clicavel:hover td { background: #F7F8FE; }
.tabela tr.ativa td { background: var(--azul-claro); }
.tabela .fraco { color: var(--texto-3); }
.tabela .forte { font-weight: 500; color: var(--marinho); }
.cel-texto { white-space: normal; display: block; }
.cel-texto.fraco { color: var(--texto-2); }
.secao-h2 { margin: 32px 0 12px; }
.vazio { padding: 40px 20px; text-align: center; color: var(--texto-2); }

/* Rolagem horizontal presa no pé da tela para tabelas largas. */
.rolagem-pe { position: sticky; bottom: 0; overflow-x: auto; overflow-y: hidden; height: 14px; background: rgba(243, 244, 249, .9); z-index: 5; }
.rolagem-pe > div { height: 1px; }
.tabela-rolagem.com-pe { scrollbar-width: none; }
.tabela-rolagem.com-pe::-webkit-scrollbar { display: none; }

/* ---------- Painel lateral (detalhe) ---------- */
.veu { position: fixed; inset: 0; background: rgba(2, 8, 47, .35); z-index: 40; opacity: 0; transition: opacity .2s; }
.veu.aberto { opacity: 1; }
.painel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(880px, 100vw); background: var(--fundo); z-index: 41;
  box-shadow: -8px 0 32px rgba(2, 8, 47, .18); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease;
}
.painel.aberto { transform: none; }
.painel.estreito { width: min(520px, 100vw); }
.painel-cab { background: var(--cartao); border-bottom: 1px solid var(--fio); padding: 18px 24px; display: flex; gap: 16px; align-items: flex-start; }
.painel-cab .titulo { flex: 1; min-width: 0; }
.painel-cab .meta { color: var(--texto-2); font-size: 14px; margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.painel-corpo { flex: 1; overflow-y: auto; padding: 20px 24px 40px; }
.nota-grande { text-align: right; }
.nota-grande .n { font-size: 38px; font-weight: 500; line-height: 1; color: var(--marinho); letter-spacing: -.02em; }
.nota-grande .de { color: var(--texto-3); font-size: 14px; }

/* Linha da conversa: a peça central do detalhe. */
.linha-conversa { padding: 18px 20px 14px; }
.lc-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.play {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--azul); color: #fff; display: grid; place-items: center; flex: none;
}
.play:hover { background: var(--azul-escuro); }
.play svg { width: 18px; height: 18px; }
.lc-tempo { font-size: 14px; color: var(--texto-2); min-width: 92px; }
.lc-legenda { margin-left: auto; display: flex; gap: 14px; font-size: 12.5px; color: var(--texto-2); flex-wrap: wrap; justify-content: flex-end; }
.lc-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.lc-pista { position: relative; height: 92px; cursor: pointer; }
.lc-faixa { position: absolute; left: 0; right: 0; height: 22px; background: #F1F2F8; border-radius: 4px; }
.lc-faixa.g { top: 20px; }
.lc-faixa.c { top: 50px; }
.lc-bloco { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.lc-faixa.g .lc-bloco { background: var(--azul); }
.lc-faixa.c .lc-bloco { background: var(--cliente); }
.lc-rot { position: absolute; left: 6px; font-size: 11px; color: var(--texto-3); z-index: 1; pointer-events: none; }
.lc-marco { position: absolute; top: 0; width: 0; height: 100%; }
.lc-marco::before { content: ''; position: absolute; left: -6px; top: 2px; width: 12px; height: 12px; transform: rotate(45deg); border-radius: 2px; background: var(--cor); box-shadow: 0 0 0 2px #fff; }
.lc-marco.ksp { --cor: var(--amarelo); }
.lc-marco.obj { --cor: var(--laranja); }
.lc-marco.alerta { --cor: var(--vermelho); }
.lc-marco.oferta::after { content: ''; position: absolute; left: -1px; top: 14px; bottom: 6px; border-left: 2px dashed var(--marinho); opacity: .5; }
.lc-marco.oferta::before { display: none; }
.lc-cursor { position: absolute; top: 14px; bottom: 4px; width: 2px; background: var(--marinho); pointer-events: none; }
.lc-eixo { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--texto-3); margin-top: 2px; }

.metricas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--fio); }
.metrica { padding: 12px 16px; }
.metrica + .metrica { border-left: 1px solid var(--fio); }
.metrica .rot { font-size: 12.5px; color: var(--texto-2); }
.metrica .val { font-size: 19px; font-weight: 500; color: var(--marinho); margin-top: 2px; }
.divisao { display: flex; height: 18px; border-radius: 4px; overflow: hidden; margin-top: 6px; font-size: 11px; font-weight: 600; }
.divisao span { display: flex; align-items: center; padding: 0 6px; color: #fff; }
.divisao .g { background: var(--azul); }
.divisao .c { background: var(--cliente); justify-content: flex-end; }

.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--fio); margin: 22px 0 16px; overflow-x: auto; }
.abas button { background: none; border: 0; padding: 10px 14px; color: var(--texto-2); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; white-space: nowrap; }
.abas button[aria-selected=true] { color: var(--azul); border-bottom-color: var(--azul); }

.criterio { padding: 14px 0; border-bottom: 1px solid var(--fio); }
.criterio:last-child { border-bottom: 0; }
.criterio-cab { display: flex; align-items: baseline; gap: 12px; }
.criterio-cab h4 { font-size: 15px; flex: 1; }
.criterio-cab .pts { font-weight: 500; white-space: nowrap; }
.barra { height: 6px; background: #ECEEF5; border-radius: 3px; margin: 8px 0 8px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--azul); border-radius: 3px; }
.criterio p { color: var(--texto-2); font-size: 14px; }
.trecho {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 8px 12px; background: var(--cartao); border: 1px solid var(--fio);
  border-left: 3px solid var(--azul); border-radius: var(--raio-p); font-size: 14px; color: var(--tinta); text-align: left; width: 100%;
}
.trecho:hover { border-color: var(--azul); }
.trecho .t { color: var(--azul); font-weight: 500; flex: none; font-size: 13px; padding-top: 1px; }
.bloco-texto { padding: 14px 16px; }
.bloco-texto h4 { font-size: 13.5px; color: var(--texto-2); font-weight: 500; margin-bottom: 4px; }
.lista-sug { margin: 6px 0 0; padding-left: 18px; }
.lista-sug li + li { margin-top: 4px; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.transcricao { display: flex; flex-direction: column; gap: 4px; }
.fala { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 8px 10px; border-radius: var(--raio-p); text-align: left; background: none; border: 0; width: 100%; }
.fala:hover { background: #fff; }
.fala .t { color: var(--texto-3); font-size: 13px; padding-top: 1px; }
.fala .quem { font-size: 12.5px; font-weight: 500; margin-bottom: 1px; }
.fala.g .quem { color: var(--azul); }
.fala.c .quem { color: #6B708F; }
.fala.atual { background: var(--azul-claro); }

.checklist { display: flex; flex-direction: column; }
.check { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--fio); }
.check:last-child { border-bottom: 0; }
.check .i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.check .i.sim { background: var(--amarelo); color: var(--marinho); }
.check .i.nao { background: #ECEEF5; color: var(--texto-3); }
.check .i svg { width: 13px; height: 13px; }
.alerta-caixa { border: 1px solid #F1C1C6; background: var(--vermelho-claro); border-radius: var(--raio); padding: 12px 16px; margin-bottom: 16px; }
.alerta-caixa h4 { color: var(--vermelho); font-size: 14.5px; }

/* ---------- Chat (ligações e simulador) ---------- */
.chat { display: flex; flex-direction: column; height: 100%; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.chat-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--fio); background: var(--cartao); }
.chat-form .entrada { flex: 1; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; white-space: pre-wrap; word-wrap: break-word; }
.msg.eu { align-self: flex-end; background: var(--azul); color: #fff; border-bottom-right-radius: 4px; }
.msg.ia { align-self: flex-start; background: var(--cartao); border: 1px solid var(--fio); border-bottom-left-radius: 4px; }
.msg .ref { display: inline-block; background: var(--azul-claro); color: var(--azul-escuro); border: 0; border-radius: 4px; padding: 0 6px; font-weight: 500; font-size: 13px; }
.msg .ref:hover { background: var(--azul); color: #fff; }
.sugestoes { display: flex; flex-wrap: wrap; gap: 8px; }
.sugestoes button { border: 1px solid var(--fio-forte); background: var(--cartao); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; color: var(--marinho); text-align: left; }
.sugestoes button:hover { border-color: var(--azul); color: var(--azul); }
.digitando { display: inline-flex; gap: 4px; }
.digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-3); animation: pulsa 1s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; } .digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pulsa { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* Atendimento: três colunas */
.atendimento { display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; gap: 16px; height: calc(100vh - 210px); min-height: 560px; }
.atendimento > .cartao { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.lista-conv { flex: 1; overflow-y: auto; overflow-x: hidden; }
.conv .u { display: block; }
.conv { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 12px 16px; border-bottom: 1px solid var(--fio); }
.conv:hover { background: #F7F8FE; }
.conv.ativa { background: var(--azul-claro); }
.conv .n { font-weight: 500; color: var(--marinho); display: flex; justify-content: space-between; gap: 8px; }
.conv .u { color: var(--texto-2); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conv .n small { color: var(--texto-3); font-weight: 400; font-size: 12px; }
.fone { background: #E9EBF3; }
.fone .chat-msgs { background: #E9EBF3; }
.bolha { max-width: 78%; padding: 8px 12px 6px; border-radius: 10px; font-size: 14.5px; white-space: pre-wrap; word-wrap: break-word; box-shadow: 0 1px 1px rgba(2,8,47,.06); }
.bolha.banco { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.bolha.cliente { align-self: flex-end; background: #DCE0FF; border-top-right-radius: 3px; }
.bolha .h { display: block; text-align: right; font-size: 11px; color: var(--texto-3); margin-top: 2px; }
.bolha .tpl { white-space: normal; display: block; font-size: 11.5px; color: var(--azul-escuro); font-weight: 500; margin-bottom: 3px; }
.botoes-tpl { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.botoes-tpl button { border: 0; border-top: 1px solid var(--fio); background: none; color: var(--azul); padding: 6px 0 2px; font-weight: 500; }
.ficha dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 14px; }
.ficha dt { color: var(--texto-2); }
.ficha dd { margin: 0; color: var(--tinta); }
.aplic { border: 1px solid var(--fio); border-radius: var(--raio-p); padding: 10px 12px; font-size: 13.5px; }
.aplic + .aplic { margin-top: 8px; }
.aplic .p { font-weight: 500; color: var(--marinho); display: flex; justify-content: space-between; gap: 8px; }
.fonte { font-size: 13px; color: var(--texto-2); border-left: 3px solid var(--amarelo); padding: 6px 10px; background: #FFFCF2; border-radius: 0 var(--raio-p) var(--raio-p) 0; }
.fonte + .fonte { margin-top: 8px; }
.fonte b { color: var(--marinho); font-weight: 500; display: block; }
.secao-lat { padding: 16px; border-bottom: 1px solid var(--fio); }
.secao-lat h3 { font-size: 14px; margin-bottom: 10px; }
.coluna-rolagem { overflow-y: auto; flex: 1; }

/* ---------- Envio de arquivo ---------- */
.solta {
  border: 2px dashed var(--fio-forte); border-radius: var(--raio); padding: 28px; text-align: center; background: #FAFBFE; color: var(--texto-2);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.solta.sobre { border-color: var(--azul); background: var(--azul-claro); }
.solta svg { width: 30px; height: 30px; color: var(--azul); }
.solta strong { color: var(--marinho); font-weight: 500; }
.etapas { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.etapa { display: flex; gap: 10px; align-items: center; color: var(--texto-3); }
.etapa .b { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--fio-forte); flex: none; }
.etapa.feita { color: var(--tinta); }
.etapa.feita .b { background: var(--verde); border-color: var(--verde); }
.etapa.atual { color: var(--marinho); font-weight: 500; }
.etapa.atual .b { border-color: var(--azul); border-top-color: transparent; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Disparos ---------- */
.regua { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.regra { padding: 18px 20px; }
.regra-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.chave { position: relative; width: 40px; height: 22px; flex: none; }
.chave input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; z-index: 1; }
.chave span { position: absolute; inset: 0; background: var(--fio-forte); border-radius: 999px; transition: background .15s; }
.chave span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.chave input:checked + span { background: var(--azul); }
.chave input:checked + span::after { transform: translateX(18px); }
.previa-msg { background: #E9EBF3; border-radius: var(--raio-p); padding: 12px; margin-top: 12px; }
.previa-msg .bolha { max-width: 100%; }
.dados-regra { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--texto-2); }
.dados-regra b { color: var(--tinta); font-weight: 500; }
.grade-manual { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 0; }
.grade-manual > div:first-child { border-right: 1px solid var(--fio); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- Agentes ---------- */
.subabas { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.subabas button { border: 1px solid var(--fio-forte); background: var(--cartao); padding: 8px 16px; border-radius: 999px; font-weight: 500; color: var(--texto-2); }
.subabas button[aria-selected=true] { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grade .largo { grid-column: 1 / -1; }
.lista-edit { display: flex; flex-direction: column; gap: 8px; }
.lista-edit .item { display: flex; gap: 8px; align-items: flex-start; }
.lista-edit .item .entrada { flex: 1; }
.rodape-form { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--fio); }
.rodape-form .ok { color: var(--verde); font-size: 14px; }
.soma-pesos { font-size: 14px; color: var(--texto-2); }
.soma-pesos b { color: var(--marinho); }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--marinho); padding: 24px; }
.login form { width: min(380px, 100%); display: flex; flex-direction: column; gap: 22px; }
.login .logo { color: #FAFAFA; }
.login .logo svg { height: 30px; width: auto; }
.login h1 { color: #fff; font-size: 22px; }
.login p { color: #AEB3D8; margin-top: 6px; }
.login .entrada { background: #0B1550; border-color: #2A3370; color: #fff; padding: 12px 14px; font-size: 16px; }
.login .entrada:focus { border-color: var(--amarelo); box-shadow: 0 0 0 3px rgba(255, 192, 23, .2); }
.login .btn.primario { justify-content: center; padding: 12px; font-size: 16px; }
.login .erro { color: #FF9AA2; font-size: 14px; min-height: 20px; }
.login .marcas { color: #7D84B5; font-size: 13px; }

/* ---------- Avisos ---------- */
.aviso { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--marinho); color: #fff; padding: 11px 18px; border-radius: var(--raio-p); z-index: 60; box-shadow: var(--sombra); font-size: 14.5px; max-width: calc(100vw - 32px); }
.aviso.erro { background: var(--vermelho); }

@media (max-width: 1100px) {
  .atendimento { grid-template-columns: 260px minmax(0, 1fr); height: auto; }
  .atendimento > .lado { grid-column: 1 / -1; }
  .atendimento > .cartao { min-height: 520px; }
  .metricas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metrica:nth-child(4) { border-left: 0; }
  .metrica:nth-child(n+4) { border-top: 1px solid var(--fio); }
}
@media (max-width: 760px) {
  main { padding: 20px 16px 48px; }
  .topo-in { padding: 0 16px; gap: 16px; }
  .topo .logo svg { height: 18px; }
  .topo .sair { display: none; }
  .indicadores { grid-template-columns: 1fr 1fr; }
  .indicador .val { font-size: 24px; }
  .atendimento { grid-template-columns: 1fr; }
  .regua, .grade-2, .form-grade, .grade-manual { grid-template-columns: 1fr; }
  .grade-manual > div:first-child { border-right: 0; border-bottom: 1px solid var(--fio); }
  .painel-cab, .painel-corpo { padding-left: 16px; padding-right: 16px; }
  .metricas { grid-template-columns: 1fr 1fr; }
  .metrica { border-left: 0 !important; border-top: 1px solid var(--fio); }
  .lc-legenda { display: none; }
  .rolagem-pe { display: none; }
  .tabela-rolagem.com-pe { scrollbar-width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}