/* BTS — app de atendimento. Celular primeiro. Preto e branco. */
:root {
  --fundo: #eef0f3;
  --cartao: #ffffff;
  --texto: #111111;
  --suave: #5f6670;
  --linha: #dfe2e7;
  --tinta: #111111;        /* botão principal, friso, número dos cartões */
  --tinta-txt: #ffffff;
  --botao2: #ffffff;
  --bolha-cli: #f1f2f4;
  --bolha-ia: #e9eef6;
  --bolha-voce: #111111;
  --bolha-voce-txt: #ffffff;
  --verde: #1f8a4c;
  --amarelo: #b7791f;
  --vermelho: #c53030;
  --vermelho-fundo: #fdecec;
  --sombra: 0 1px 2px rgba(0,0,0,.04);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --fundo: #0e0f11;
  --cartao: #1a1c1f;
  --texto: #f2f3f5;
  --suave: #a0a6ae;
  --linha: #2c2f34;
  --tinta: #f2f3f5;
  --tinta-txt: #111111;
  --botao2: #1a1c1f;
  --bolha-cli: #25282c;
  --bolha-ia: #1f2a38;
  --bolha-voce: #f2f3f5;
  --bolha-voce-txt: #111111;
  --verde: #48bb78;
  --amarelo: #ecc94b;
  --vermelho: #fc8181;
  --vermelho-fundo: #3a1f1f;
  --sombra: none;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  min-height: 100vh;
}
a { color: inherit; }
button { font: inherit; }

/* cabeçalho branco + friso preto 3px */
.topo {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  background: var(--cartao); border-bottom: 3px solid var(--tinta);
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
}
.marca { display: flex; align-items: center; }
.logo { height: 30px; width: auto; display: block; }
.logo-escuro { display: none; }
:root[data-theme="dark"] .logo-claro { display: none; }
:root[data-theme="dark"] .logo-escuro { display: block; }
.divisor { width: 1px; height: 30px; background: var(--linha); }
.tela { font-weight: 600; font-size: 15px; color: var(--suave); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tema { border: 1px solid var(--linha); background: var(--cartao); color: var(--texto);
  width: 40px; height: 40px; border-radius: 12px; font-size: 18px; cursor: pointer; }

main { max-width: 640px; margin: 0 auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }

/* cartões numerados */
.cartao { background: var(--cartao); border-radius: 18px; padding: 16px; box-shadow: var(--sombra); }
.secao { display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.num { width: 24px; height: 24px; border-radius: 50%; background: var(--tinta); color: var(--tinta-txt);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; letter-spacing: 0; flex: none; }
.secao .cont { margin-left: auto; font-size: 13px; letter-spacing: 0; color: var(--suave); font-weight: 600; text-transform: none; }
.vazio { color: var(--suave); font-style: italic; margin: 4px 0; }
.nota { color: var(--suave); font-size: 13px; }

/* fila: precisa de você */
.pessoa { display: block; text-decoration: none; border-top: 1px solid var(--linha); padding: 14px 0; }
.pessoa:first-of-type { border-top: 0; padding-top: 2px; }
.pessoa-topo { display: flex; align-items: flex-start; gap: 10px; }
.pessoa-nome { font-weight: 700; font-size: 17px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.espera { flex: none; text-align: right; font-weight: 800; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.espera small { display: block; font-size: 11px; font-weight: 600; color: var(--suave); letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; }
.espera.urgente { color: var(--vermelho); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.tag { font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--linha); color: var(--texto); }
.tag.forte { background: var(--tinta); color: var(--tinta-txt); border-color: var(--tinta); }
.tag.alerta { background: var(--vermelho-fundo); color: var(--vermelho); border-color: transparent; }
.fala { color: var(--suave); font-size: 14px; margin: 2px 0 10px; overflow-wrap: anywhere; }
.acoes { display: flex; gap: 8px; }

/* botões grandes */
.btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--tinta);
  background: var(--botao2); color: var(--texto); font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; }
.btn.prim { background: var(--tinta); color: var(--tinta-txt); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.grande { min-height: 56px; font-size: 17px; }

details.esfriando { margin-top: 6px; border-top: 1px solid var(--linha); padding-top: 10px; }
details.esfriando summary { cursor: pointer; font-weight: 700; color: var(--suave); padding: 6px 0; }

.cuidando { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.cuidando b { font-size: 20px; }

/* números do dia */
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.numero { border: 1px solid var(--linha); border-radius: 14px; padding: 12px 8px; text-align: center; }
.numero b { display: block; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.numero span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }

/* saúde numa linha */
.saude { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; }
.ponto { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.ponto.verde { background: var(--verde); }
.ponto.amarelo { background: var(--amarelo); }
.ponto.vermelho { background: var(--vermelho); }
.saude .seta { margin-left: auto; color: var(--suave); }

/* conversa */
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.campo { border: 1px solid var(--linha); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.campo span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.campo b { display: block; font-size: 15px; overflow-wrap: anywhere; }
.campo.largo { grid-column: 1 / -1; }
.resumo { white-space: pre-line; font-size: 15px; margin: 0; }
.resumo-meta { margin-top: 6px; }
.historico { display: flex; flex-direction: column; gap: 6px; }
.dia { text-align: center; font-size: 12px; font-weight: 700; color: var(--suave); letter-spacing: .08em; text-transform: uppercase; margin: 10px 0 4px; }
.msg { max-width: 86%; padding: 8px 12px; border-radius: 16px; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .quem { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: 2px; }
.msg .hora { display: block; font-size: 11px; opacity: .6; text-align: right; margin-top: 2px; }
.msg.cliente { align-self: flex-start; background: var(--bolha-cli); border-bottom-left-radius: 6px; }
.msg.marina { align-self: flex-end; background: var(--bolha-ia); border-bottom-right-radius: 6px; }
.msg.auto { align-self: flex-end; background: var(--bolha-ia); border-bottom-right-radius: 6px; opacity: .8; }
.msg.voce { align-self: flex-end; background: var(--bolha-voce); color: var(--bolha-voce-txt); border-bottom-right-radius: 6px; }

/* barra fixa no rodapé */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--cartao);
  border-top: 1px solid var(--linha); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.barra-in { max-width: 640px; margin: 0 auto; display: flex; gap: 10px; align-items: center; }
.barra .info { font-size: 12px; color: var(--suave); line-height: 1.2; }
.barra .info b { display: block; font-size: 14px; color: var(--texto); }
.aba { flex: 1; text-align: center; text-decoration: none; font-weight: 700; padding: 10px 0; border-radius: 12px; color: var(--suave); }
.aba.ativa { background: var(--tinta); color: var(--tinta-txt); }

/* login */
.login { max-width: 380px; margin: 40px auto; }
.login input { width: 100%; min-height: 54px; border-radius: 14px; border: 1.5px solid var(--linha);
  background: var(--cartao); color: var(--texto); font-size: 18px; padding: 0 14px; margin: 6px 0 12px; }
.login input:focus { outline: 2px solid var(--tinta); outline-offset: 1px; }
.erro { color: var(--vermelho); font-weight: 600; margin: 8px 0 0; }
.carregando { color: var(--suave); text-align: center; padding: 40px 0; }
.voltar { text-decoration: none; font-weight: 700; }
.lista-alertas { margin: 0; padding: 0; list-style: none; }
.lista-alertas li { border-top: 1px solid var(--linha); padding: 10px 0; font-size: 14px; white-space: pre-line; }
.lista-alertas li:first-child { border-top: 0; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.aviso { color: var(--amarelo); font-weight: 600; }
.cartao.aviso { border: 1.5px solid var(--amarelo); }