:root {
  --tinta: #1F2433;
  --fundo: #F3F4F7;
  --superficie: #FFFFFF;
  --linha: #DFE2E8;
  --texto: #2A2F3A;
  --suave: #687082;
  --ouro: #C9A227;
  --ouro-escuro: #A8861A;
  --bs-body-font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-color: var(--texto);
  --bs-body-bg: var(--fundo);
  --bs-border-color: var(--linha);
}
body { font-size: .95rem; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-weight: 700; letter-spacing: -.01em; color: var(--tinta); }

.barra { background: var(--tinta); }
.barra .nav-link { color: rgba(255,255,255,.72); font-weight: 500; }
.barra .nav-link.active, .barra .nav-link:hover { color: #fff; }
.barra .nav-link.active { box-shadow: inset 0 -2px 0 var(--ouro); }
.marca {
  display: inline-block; background: var(--ouro); color: var(--tinta);
  font-weight: 800; font-size: .8rem; padding: .15rem .45rem; border-radius: 4px; margin-right: .25rem; letter-spacing: .04em;
}

.btn-ouro { background: var(--ouro); border-color: var(--ouro); color: var(--tinta); font-weight: 600; }
.btn-ouro:hover, .btn-ouro:focus { background: var(--ouro-escuro); border-color: var(--ouro-escuro); color: #fff; }
.btn-ouro:disabled { background: #5A5F6E; border-color: #5A5F6E; color: #D5D8DF; opacity: 1; }
.btn-tinta { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.btn-tinta:hover { background: #2E3548; color: #fff; }
.girando { display: inline-block; animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation: none; } }

.painel-bloco { background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 1.25rem; }
.painel-bloco h2 { font-size: 1rem; margin-bottom: 1rem; }

.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
.resumo a { background: var(--superficie); padding: 1rem 1.15rem; text-decoration: none; color: inherit; border-top: 3px solid var(--cor, var(--linha)); }
.resumo a:hover { background: #FAFAFC; }
.resumo strong { display: block; font-size: 1.75rem; line-height: 1.1; color: var(--tinta); font-variant-numeric: tabular-nums; }
.resumo span { color: var(--suave); font-size: .85rem; }

.selo { background: color-mix(in srgb, var(--cor) 14%, white); color: color-mix(in srgb, var(--cor) 80%, black); font-weight: 600; border: 1px solid color-mix(in srgb, var(--cor) 30%, white); }
.pin { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 600; color: var(--cor); white-space: nowrap; }
.pin-vazio { color: var(--suave); font-weight: 400; }

.tabela-sac { background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
.tabela-sac table { margin: 0; }
.tabela-sac th { font-size: .8rem; font-weight: 600; color: var(--suave); background: #F8F9FB; white-space: nowrap; }
.tabela-sac td { vertical-align: middle; }
.tabela-sac tr.com-resposta td:first-child { box-shadow: inset 3px 0 0 var(--ouro); }
.linha-link { cursor: pointer; }
.protocolo { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tinta); white-space: nowrap; }

.filtros { background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 1rem; }

/* Ficha */
.ficha-dados dt { font-size: .8rem; color: var(--suave); font-weight: 500; }
.ficha-dados dd { margin-bottom: .75rem; }
.linha-tempo { position: relative; padding-left: 1.5rem; }
.linha-tempo::before { content: ""; position: absolute; left: .45rem; top: .25rem; bottom: .25rem; width: 2px; background: var(--linha); }
.msg { position: relative; background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; margin-bottom: 1rem; }
.msg::before { content: ""; position: absolute; left: -1.38rem; top: 1.1rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--ponto, var(--suave)); border: 2px solid var(--fundo); }
.msg-cliente { --ponto: #2F6FEB; }
.msg-sac { --ponto: var(--ouro); background: #FDFBF4; }
.msg-auto { --ponto: #9AA1AF; background: #FAFAFB; }
.msg-cabecalho { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--linha); font-size: .85rem; }
.msg-corpo { padding: 1rem; white-space: pre-wrap; word-break: break-word; max-width: 80ch; line-height: 1.55; }
.msg-anexos { padding: 0 1rem 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.anexo { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--linha); border-radius: 6px; padding: .3rem .6rem; font-size: .85rem; text-decoration: none; color: var(--texto); background: #fff; }
.anexo:hover { border-color: var(--tinta); }

/* Eventos: pins de tiqueteira */
.grupo-pins .btn { --cor: #6E7781; border-color: var(--linha); color: var(--suave); font-size: .85rem; }
.grupo-pins .btn-check:checked + .btn { background: var(--cor); border-color: var(--cor); color: #fff; }
.grupo-pins .btn-check:focus-visible + .btn { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* Tela de acesso */
.tela-acesso { min-height: 100vh; display: grid; place-items: center; background: var(--tinta); padding: 1rem; }
.cartao-acesso { background: var(--superficie); border-radius: 12px; padding: 2rem; width: 100%; max-width: 400px; }
.marca-acesso { color: var(--suave); font-size: .9rem; margin-bottom: 1.25rem; }

:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }

.zona-exclusao { border-color: #F1C4C7; }
.zona-exclusao h2 { color: #B42318; }

/* Prazos */
.prazo { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prazo-ok { color: #2DA44E; }
.prazo-alerta { color: #B7791F; }
.prazo-vencido { color: #CF222E; }
.prazo-ok-texto { color: #687082; }
.prazo-alerta-texto { color: #B7791F; }
.prazo-vencido-texto { color: #CF222E; }

/* E-mails enviados */
.envio-info { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--suave); }
.previa-email { display: block; width: 100%; height: 640px; margin-top: .5rem; border: 1px solid var(--linha); border-radius: 8px; background: #EEF0F4; }