/* Atendimento — direção: familiar como o WhatsApp, denso e legível para uso o dia todo.
   Tokens em 2 camadas: primitivos (cores/medidas) e semânticos (o que os componentes usam). */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fontes/plex.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* primitivos */
  --teal-900: #0a4d44;
  --teal-700: #00705c;
  --teal-300: #00a884;
  --cinza-050: #f0f2f5;
  --cinza-900: #111b21;
  --cinza-600: #54656f;
  --cinza-200: #e4e8ea;
  --bege: #efeae2;
  --verde-bolha: #d9fdd3;
  --vermelho-700: #b3261e;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;

  /* semânticos (claro) */
  --fundo-app: var(--cinza-050);
  --fundo-painel: #ffffff;
  --fundo-chat: var(--bege);
  --texto: var(--cinza-900);
  --texto-2: var(--cinza-600);
  --linha: var(--cinza-200);
  --barra-fundo: var(--teal-900);
  --barra-texto: #ffffff;
  --acento: var(--teal-700);
  --sobre-acento: #ffffff;
  --bolha-saida: var(--verde-bolha);
  --bolha-entrada: #ffffff;
  --erro: var(--vermelho-700);
  --foco: #0b57d0;
  --sombra: 0 1px 1px rgba(17, 27, 33, .13);
  --fonte: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --tema-escuro: 1; }
}
:root[data-tema="escuro"],
:root:not([data-tema="claro"]) {
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo-app: #0b141a; --fundo-painel: #111b21; --fundo-chat: #0b141a;
    --texto: #e9edef; --texto-2: #98a8b1; --linha: #222d34;
    --barra-fundo: #1f2c34; --barra-texto: #e9edef;
    --acento: var(--teal-300); --sobre-acento: #04120e;
    --bolha-saida: #005c4b; --bolha-entrada: #202c33;
    --erro: #ff8a80; --foco: #8ab4f8;
    --sombra: none;
  }
}
:root[data-tema="escuro"] {
  --fundo-app: #0b141a; --fundo-painel: #111b21; --fundo-chat: #0b141a;
  --texto: #e9edef; --texto-2: #98a8b1; --linha: #222d34;
  --barra-fundo: #1f2c34; --barra-texto: #e9edef;
  --acento: var(--teal-300); --sobre-acento: #04120e;
  --bolha-saida: #005c4b; --bolha-entrada: #202c33;
  --erro: #ff8a80; --foco: #8ab4f8;
  --sombra: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fundo-app);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
h1 { font-size: 20px; line-height: 1.2; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; }
.suave { color: var(--texto-2); font-size: 14px; }
.erro { color: var(--erro); font-size: 14px; min-height: 20px; margin: 0; }

/* ---------- entrada ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding: var(--e5) var(--e4); }
.cartao-login {
  width: 100%; max-width: 380px; background: var(--fundo-painel);
  padding: var(--e6) var(--e5); border-radius: var(--e3);
  box-shadow: 0 1px 3px rgba(17, 27, 33, .18); display: flex; flex-direction: column; gap: var(--e3);
}
.cartao-login label { font-size: 14px; color: var(--texto-2); }
.cartao-login input {
  padding: var(--e3) var(--e4); min-height: 48px; border-radius: var(--e2);
  border: 1px solid var(--texto-2); background: var(--fundo-painel);
}

/* ---------- botões ---------- */
.botao {
  min-height: 48px; padding: 0 var(--e5); border: 0; border-radius: var(--e2);
  background: var(--acento); color: var(--sobre-acento); font-weight: 600; cursor: pointer;
}
.botao.secundario { background: transparent; color: var(--texto); border: 1px solid var(--texto-2); }
.botao:disabled, .redondo:disabled { opacity: .55; cursor: progress; }
.icone {
  flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent;
  color: inherit; border-radius: 50%; cursor: pointer;
}
.icone:hover { background: rgba(127, 127, 127, .18); }
.redondo {
  width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--acento); color: var(--sobre-acento); cursor: pointer; flex-shrink: 0;
}

/* ---------- estrutura ---------- */
.app { display: flex; height: 100dvh; max-width: 1600px; margin: 0 auto; background: var(--fundo-painel); }
.lateral { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--linha); min-height: 0; }
.barra {
  min-height: 60px; padding: var(--e2) var(--e3) var(--e2) var(--e4); display: flex; align-items: center;
  justify-content: space-between; gap: var(--e2); background: var(--barra-fundo); color: var(--barra-texto);
}
.barra-acoes { display: flex; gap: var(--e1); }
.barra-titulo { display: flex; align-items: center; gap: var(--e1); min-width: 0; }
.barra-titulo h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.botao { display: inline-grid; place-items: center; text-decoration: none; }
.vista { flex: 1; overflow-y: auto; min-height: 0; }

/* ---------- listas ---------- */
.item {
  display: flex; gap: var(--e3); align-items: center; width: 100%; min-height: 72px; padding: var(--e3) var(--e4);
  border: 0; border-bottom: 1px solid var(--linha); background: transparent; text-align: left; cursor: pointer;
}
.item:hover, .item[aria-current="true"] { background: rgba(0, 168, 132, .12); }
.item-corpo { flex: 1; min-width: 0; }
.item-linha { display: flex; justify-content: space-between; gap: var(--e2); align-items: baseline; }
.item-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub { color: var(--texto-2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-hora { color: var(--texto-2); font-size: 12px; flex-shrink: 0; }
.avatar {
  position: relative; overflow: hidden;
  width: 44px; height: 44px; border-radius: 50%; background: var(--teal-700); color: #fff; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 600; font-size: 16px; text-transform: uppercase;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar svg { width: 26px; height: 26px; }
.chip { font-size: 12px; font-weight: 600; padding: 2px var(--e2); border-radius: 999px; border: 1px solid currentColor; flex-shrink: 0; }
.chip.ok { color: var(--acento); }
.chip.off { color: var(--texto-2); }
.item.nova .item-nome, .item.nova .item-sub { color: var(--texto); font-weight: 600; }
.ponto-novo { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); margin-right: var(--e2); vertical-align: baseline; }
.rodape-lista { padding: var(--e4); display: flex; flex-direction: column; gap: var(--e3); }
.busca { margin: var(--e3) var(--e4); }
.busca input, .nova input {
  width: 100%; min-height: 44px; padding: 0 var(--e4); border-radius: var(--e2); border: 1px solid var(--linha);
  background: var(--fundo-app);
}
.estado { padding: var(--e6) var(--e4); text-align: center; color: var(--texto-2); display: flex; flex-direction: column; gap: var(--e3); align-items: center; }
.esqueleto { height: 72px; margin: 0 var(--e4); border-bottom: 1px solid var(--linha); display: flex; gap: var(--e3); align-items: center; }
.esqueleto i { display: block; width: 44px; height: 44px; border-radius: 50%; background: var(--linha); }
.esqueleto b { display: block; flex: 1; height: 14px; border-radius: 7px; background: var(--linha); }
@media (prefers-reduced-motion: no-preference) {
  .esqueleto i, .esqueleto b { animation: pulso 1.4s ease-in-out infinite; }
  @keyframes pulso { 50% { opacity: .45; } }
}
.qr { padding: var(--e5) var(--e4); display: flex; flex-direction: column; align-items: center; gap: var(--e3); text-align: center; }
.qr img { width: min(280px, 80%); aspect-ratio: 1; background: #fff; padding: var(--e2); border-radius: var(--e2); image-rendering: pixelated; }

/* ---------- conversa ---------- */
.chat { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--fundo-chat); min-height: 0; }
.chat-aberto { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-vazio { flex: 1; display: grid; place-items: center; color: var(--texto-2); padding: var(--e5); text-align: center; }
.barra-chat { justify-content: flex-start; padding-left: var(--e2); }
.chat-titulo { min-width: 0; }
.chat-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-sub { font-size: 12px; opacity: .85; }
.faixa { background: #fff3cd; color: #4d3b00; padding: var(--e2) var(--e4); font-size: 14px; text-align: center; }
.msgs { flex: 1; overflow-y: auto; padding: var(--e3) var(--e4); display: flex; flex-direction: column; gap: var(--e1); min-height: 0; }
.bolha {
  max-width: min(78%, 560px); padding: 6px 10px 4px; border-radius: var(--e2); background: var(--bolha-entrada);
  box-shadow: var(--sombra); overflow-wrap: anywhere; white-space: pre-wrap; align-self: flex-start;
}
.bolha.saida { align-self: flex-end; background: var(--bolha-saida); }
.bolha.falhou { outline: 2px solid var(--erro); cursor: pointer; }
.bolha .meta { display: flex; justify-content: flex-end; align-items: center; gap: var(--e1); font-size: 11px; color: var(--texto-2); margin-top: 2px; }
.bolha .meta svg { width: 14px; height: 14px; }
.bolha img.foto { display: block; max-width: 100%; max-height: 320px; border-radius: 6px; }
.bolha audio { display: block; width: min(260px, 100%); height: 40px; }
.carregar-midia {
  display: flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e3);
  border: 1px solid var(--texto-2); border-radius: var(--e2); background: transparent; cursor: pointer;
}
.carregar-midia svg { width: 20px; height: 20px; }
.so-impressao { display: none; }
.bolha.nova-fala { margin-top: 10px; }
.nota { align-self: center; font-size: 12px; color: var(--texto-2); background: var(--fundo-painel); padding: 2px var(--e3); border-radius: 999px; margin: var(--e1) 0; }
.autor { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
:root[data-tema="escuro"] .autor { filter: brightness(2.4); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .autor { filter: brightness(2.4); } }
.ligar-opcoes { display: flex; flex-direction: column; gap: var(--e2); margin: var(--e3) 0; }
.dialogo h2 { margin: 0 0 var(--e1); font-size: 18px; }
.dia { align-self: center; font-size: 12px; color: var(--texto-2); background: var(--fundo-painel); padding: 2px var(--e3); border-radius: 999px; margin: var(--e2) 0; }

.envio, .gravando {
  display: flex; align-items: flex-end; gap: var(--e2); padding: var(--e2) var(--e3);
  padding-bottom: max(var(--e2), env(safe-area-inset-bottom)); background: var(--fundo-painel); border-top: 1px solid var(--linha);
}
.gravando { align-items: center; }
.envio textarea {
  flex: 1; min-width: 0; resize: none; max-height: 140px; min-height: 48px; padding: 12px var(--e4); border-radius: 24px;
  border: 1px solid var(--linha); background: var(--fundo-app); line-height: 1.35;
}
.ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--erro); }
@media (prefers-reduced-motion: no-preference) { .ponto { animation: pulso 1s ease-in-out infinite; } }
.tempo { font-variant-numeric: tabular-nums; font-weight: 600; }
.gravando .suave { flex: 1; }

/* ---------- contas e diálogos ---------- */
.numero-linha { display: flex; align-items: center; border-bottom: 1px solid var(--linha); }
.numero-linha .item { border-bottom: 0; flex: 1; min-width: 0; }
.baixar-apk { text-align: center; margin: var(--e4); }
.faixa.leitura { background: #e3f2fd; color: #0b3d66; }
.marcar { display: flex; align-items: center; gap: var(--e2); font-size: 14px; }
.marcar input { width: 22px; min-height: 22px; }
.remover-numero { margin-right: var(--e2); color: var(--texto-2); }
.cartao-form { background: var(--fundo-painel); border-radius: var(--e3); padding: var(--e4); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: var(--e2); }
.cartao-form.interno { box-shadow: none; padding: var(--e3) 0 0; background: transparent; }
.cartao-form label { font-size: 14px; color: var(--texto-2); }
.cartao-form h2 { margin: 0; font-size: 18px; }
.cartao-form input, .dialogo input { width: 100%; min-height: 48px; padding: 0 var(--e4); border-radius: var(--e2); border: 1px solid var(--texto-2); background: var(--fundo-painel); }
.conta { background: var(--fundo-painel); border-radius: var(--e3); padding: var(--e4); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e3); }
.conta.inativa { opacity: .7; }
.conta-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); }
.conta-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.conta-acoes .botao { min-height: 44px; padding: 0 var(--e4); }
#contas-lista { display: flex; flex-direction: column; }
#segredo-valor { font-family: ui-monospace, monospace; font-size: 18px; margin-top: var(--e2); }

/* ---------- relatório ---------- */
.relatorio { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; background: var(--fundo-app); }
.rel-corpo { flex: 1; overflow-y: auto; padding: var(--e4); max-width: 960px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: var(--e4); }
.rel-corpo h2 { font-size: 16px; margin: var(--e2) 0 0; }
.rel-filtros { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.rel-filtros input { min-height: 44px; padding: 0 var(--e3); border-radius: var(--e2); border: 1px solid var(--texto-2); background: var(--fundo-painel); }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e3); }
.cartao-num { background: var(--fundo-painel); border-radius: var(--e3); padding: var(--e4); box-shadow: var(--sombra); }
.cartao-num .num { font-size: 28px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rolagem-x { overflow-x: auto; background: var(--fundo-painel); border-radius: var(--e3); }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { padding: var(--e3); text-align: right; border-bottom: 1px solid var(--linha); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela th:first-child, .tabela td:first-child { text-align: left; }
.tabela thead th { color: var(--texto-2); font-weight: 600; }
.horas { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 120px; background: var(--fundo-painel); border-radius: var(--e3); padding: var(--e3) var(--e3) 0; }
.hora { position: relative; height: 100%; display: flex; align-items: flex-end; }
.hora i { display: block; width: 100%; min-height: 2px; background: var(--acento); border-radius: 3px 3px 0 0; }
.hora span { position: absolute; top: 100%; left: 0; font-size: 11px; color: var(--texto-2); }

/* ---------- avisos e diálogo ---------- */
.aviso {
  position: fixed; left: 50%; bottom: max(var(--e5), env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 10; max-width: min(92vw, 520px); background: var(--cinza-900); color: #fff;
  padding: var(--e3) var(--e4); border-radius: var(--e2); font-size: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
.aviso.erro-aviso { background: var(--vermelho-700); }
.dialogo { border: 0; border-radius: var(--e3); padding: var(--e4); width: min(92vw, 420px); background: var(--fundo-painel); color: var(--texto); }
.dialogo::backdrop { background: rgba(0, 0, 0, .55); }
.dialogo img { width: 100%; max-height: 50dvh; object-fit: contain; border-radius: var(--e2); background: #000; }
.dialogo input { width: 100%; min-height: 48px; margin-top: var(--e3); padding: 0 var(--e4); border-radius: var(--e2); border: 1px solid var(--linha); background: var(--fundo-app); }
.dialogo-acoes { display: flex; gap: var(--e3); justify-content: flex-end; margin-top: var(--e4); }

/* ---------- celular: uma tela por vez ---------- */
.so-celular { display: none; }
@media (max-width: 800px) {
  .lateral { width: 100%; border-right: 0; }
  .chat { position: fixed; inset: 0; z-index: 5; transform: translateX(100%); visibility: hidden; }
  .app.com-chat .chat { transform: none; visibility: visible; }
  @media (prefers-reduced-motion: no-preference) { .chat { transition: transform .18s ease-out, visibility .18s; } }
  .so-celular { display: grid; }
  .bolha { max-width: 86%; }
}

/* ---------- impressão: só a conversa ou só o relatório, em preto sobre branco ---------- */
@media print {
  html, body, .app { height: auto !important; background: #fff !important; color: #000 !important; }
  .aviso, .envio, .gravando, .faixa, .icone, .botao, dialog, .rel-filtros a, .rel-filtros label { display: none !important; }
  .barra { background: #fff !important; color: #000 !important; border-bottom: 2px solid #000; }
  html[data-imprimir="conversa"] .lateral, html[data-imprimir="conversa"] #tela-relatorio { display: none !important; }
  html[data-imprimir="conversa"] .chat { position: static !important; transform: none !important; visibility: visible !important; display: block !important; background: #fff !important; }
  html[data-imprimir="conversa"] .msgs { overflow: visible !important; display: block !important; }
  html[data-imprimir="conversa"] .bolha { display: block; width: fit-content; min-width: 90px; max-width: 85%; margin: 4px 0; background: #fff !important; border: 1px solid #000; box-shadow: none; break-inside: avoid; color: #000 !important; }
  html[data-imprimir="conversa"] .bolha.saida { margin-left: auto; border-style: dashed; }
  html[data-imprimir="conversa"] .bolha .meta, html[data-imprimir="conversa"] .dia { color: #000 !important; background: #fff !important; }
  .bolha audio, .bolha video, .carregar-midia { display: none !important; }
  .autor { color: #000 !important; filter: none !important; }
  .nota { color: #000 !important; background: #fff !important; }
  .so-impressao { display: block !important; font-weight: 600; }
  html[data-imprimir="relatorio"] .app, html[data-imprimir="relatorio"] #tela-login { display: none !important; }
  html[data-imprimir="relatorio"] .relatorio { position: static !important; background: #fff !important; }
  html[data-imprimir="relatorio"] .rel-corpo { overflow: visible !important; max-width: none; }
  .cartao-num, .rolagem-x, .horas { box-shadow: none !important; border: 1px solid #000; background: #fff !important; }
  .hora i { background: #000 !important; }
}

/* equipe do número */
.equipe-lista { display: flex; flex-direction: column; gap: var(--e1, 4px); margin: var(--e2, 8px) 0; max-height: 40vh; overflow: auto; }
.equipe-item { display: flex; align-items: center; justify-content: space-between; gap: var(--e2, 8px); padding: 6px 0; border-bottom: 1px solid var(--linha); }
.equipe-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.equipe { background: var(--fundo-2, #eef2f1); color: var(--texto-2); }