/* SAC.BR — tipografia do projeto (fontes OFL locais): Barlow Semi Condensed nos títulos, Atkinson Hyperlegible Next na leitura. */
@font-face { font-family: "Barlow Semi Condensed"; src: url("fontes/BarlowSemiCondensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fontes/AtkinsonHyperlegibleNext.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
:root {
  --fundo: #f6f3ea; --papel: #fffdf7; --tinta: #1d2a22; --suave: #5b6b60; --linha: #d9d3c2; --marca: #1f4d36; --marca2: #2f7350;
  --n5: #dc2626; --n4: #eab308; --n3: #2563eb; --n2: #16a34a; --n1: #9ca3af; --n0: #111827; --foco: #f59e0b;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 16px/1.5 "Atkinson Hyperlegible Next", system-ui, sans-serif; }
h1, h2, h3, .marca, button, nav a { font-family: "Barlow Semi Condensed", "Atkinson Hyperlegible Next", sans-serif; }
h1 { font-size: 1.6rem; margin: .4em 0; } h2 { font-size: 1.2rem; margin: 1.2em 0 .4em; } h3 { font-size: 1rem; margin: 1em 0 .3em; }
a { color: var(--marca2); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
button { background: var(--marca); color: #fff; border: 0; border-radius: 8px; padding: .5em 1em; font-size: 1rem; cursor: pointer; }
button.sec { background: transparent; color: var(--marca); border: 1px solid var(--marca); }
button:disabled { opacity: .5; }
input, select, textarea { font: inherit; padding: .45em .6em; border: 1px solid var(--linha); border-radius: 8px; background: #fff; color: var(--tinta); max-width: 100%; }
textarea { width: 100%; }
label { display: inline-flex; flex-direction: column; gap: .2em; font-size: .9rem; color: var(--suave); }
label.inline { flex-direction: row; align-items: center; gap: .4em; }
kbd { border: 1px solid var(--linha); border-bottom-width: 2px; border-radius: 4px; padding: 0 .3em; background: #fff; font-size: .85em; }
.topo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .6rem 1rem; background: var(--marca); color: #fff; }
.topo .marca { color: #fff; text-decoration: none; font-size: 1.2rem; font-weight: 600; }
.topo nav { display: flex; gap: .8rem; flex-wrap: wrap; flex: 1; }
.topo nav a { color: #e9f1ea; text-decoration: none; padding: .2em .4em; border-radius: 6px; }
.topo nav a.ativa { background: rgba(255,255,255,.18); color: #fff; }
.topo #quem { font-size: .9rem; opacity: .9; }
.topo #sair { background: transparent; border: 1px solid #fff; }
.contadores { display: flex; gap: 1rem; flex-wrap: wrap; padding: .4rem 1rem; background: var(--papel); border-bottom: 1px solid var(--linha); font-size: .92rem; }
.contadores .vencido { color: var(--n5); font-weight: 700; }
.contadores a { text-decoration: none; color: inherit; }
main { padding: 1rem; max-width: 1400px; margin: 0 auto; }
.filtros { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-bottom: .6rem; }
.filtros .busca input { min-width: 16rem; }
.ajuda { background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; padding: .3em .8em; margin: .5em 0; font-size: .93rem; }
.ajuda summary { cursor: pointer; color: var(--marca); font-weight: 600; }
.lista { display: flex; flex-direction: column; gap: 2px; }
.linha { display: grid; grid-template-columns: 4.2rem 11rem 8rem 6rem minmax(10rem, 1fr) 11rem 8rem 6rem 8rem; gap: .5rem; align-items: center;
  padding: .45rem .6rem; background: var(--papel); border-left: 5px solid transparent; text-decoration: none; color: inherit; font-size: .93rem; }
.linha:hover, .linha.sel { background: #fff; border-left-color: var(--foco); }
.linha .assunto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha .assunto small { color: var(--suave); }
.linha .proto { font-family: ui-monospace, monospace; font-size: .85rem; }
.nivel { display: inline-block; padding: 0 .4em; border-radius: 6px; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.nivel.n5 { background: #fde2e2; color: #8f1111; } .nivel.n4 { background: #fdf3c4; color: #6b5200; } .nivel.n3 { background: #dde8fd; color: #173e95; }
.nivel.n2 { background: #dcf3e2; color: #0f5a2a; } .nivel.n1 { background: #eee; color: #444; } .nivel.n0 { background: #222; color: #fff; }
.prazo { font-size: .85rem; } .prazo.vencido { color: var(--n5); font-weight: 700; } .prazo.ok { color: var(--n2); }
.site { font-size: .82rem; padding: 0 .3em; border-radius: 4px; background: #ecebe3; }
.estado { font-size: .85rem; color: var(--suave); }
.vazio, .mudo { color: var(--suave); }
.cab-ticket .meta { color: var(--suave); }
.botoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .4rem 0; }
.grade-ticket { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.2rem; }
.cliente { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: .6rem 1rem; align-self: start; position: sticky; top: .5rem; font-size: .93rem; }
.msg { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; margin: .6rem 0; padding: .5rem .8rem; }
.msg.d-saida { border-left: 5px solid var(--marca2); } .msg.d-nota { background: #fff7d6; border-style: dashed; } .msg.d-entrada { border-left: 5px solid var(--n3); }
.msg header { font-size: .88rem; color: var(--suave); }
.texto { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; margin: .4rem 0; }
.ev-falhou { color: var(--n5); font-weight: 700; }
.html iframe { width: 100%; height: 26rem; border: 1px solid var(--linha); border-radius: 6px; background: #fff; }
.anexos { list-style: none; padding: 0; }
.compositor { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: .6rem 1rem 1rem; margin-top: 1rem; }
.linha-comp { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin: .5rem 0; }
.form-modelo { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.modelo { background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; padding: .3rem .8rem; margin: .3rem 0; }
.tab { border-collapse: collapse; width: 100%; background: var(--papel); font-size: .9rem; }
.tab th, .tab td { border-bottom: 1px solid var(--linha); padding: .35rem .5rem; text-align: left; vertical-align: top; }
.aviso { position: fixed; bottom: 1rem; right: 1rem; max-width: 30rem; padding: .7rem 1rem; border-radius: 10px; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.aviso.ok { background: var(--marca2); } .aviso.erro { background: #9b1c1c; }
.tela-login { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.cartao-login { background: var(--papel); border: 1px solid var(--linha); border-radius: 14px; padding: 1.5rem; width: min(26rem, 100%); }
.cartao-login form { display: flex; flex-direction: column; gap: .8rem; }
.cartao-login label { color: var(--tinta); }
.sub { color: var(--suave); margin-top: 0; } .msg { min-height: 1.2em; color: #9b1c1c; }
@media (max-width: 900px) {
  .grade-ticket { grid-template-columns: 1fr; } .cliente { position: static; }
  .linha { grid-template-columns: 4rem 1fr; } .linha .site, .linha .canal, .linha .cliente, .linha .estado, .linha .resp { display: none; }
  .linha .assunto { grid-column: 1 / -1; white-space: normal; }
}