:root {
  --marca: #ff7a1a; --marca-escura: #c4520a;
  --fundo: #0b0b0c; --painel: #141416; --painel-2: #1c1c1f; --borda: #2a2a2e;
  --texto: #f4efe9; --suave: #a29d97;
  --livre: #2fd47a; --ocupado: #ffb020; --pausa: #8b8b93; --perigo: #ff5a5a; --info: #4aa8ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--texto); font: 14px/1.45 Inter, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
a { color: var(--marca); }
h1, h2, h3 { margin: 0; }

.topo { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--borda); background: #000; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.selo { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--marca); display: grid; place-items: center; font-weight: 800; font-size: 11px; color: var(--marca); flex: none; }
.logo b { display: block; font-size: 15px; }
.logo small { color: var(--suave); font-size: 11px; }
.espaco { flex: 1; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--painel-2); border: 1px solid var(--borda); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.segmentos { display: flex; gap: 4px; background: var(--painel); border: 1px solid var(--borda); border-radius: 999px; padding: 3px; overflow-x: auto; max-width: 100%; }
.segmentos button { border: 0; background: none; padding: 5px 12px; border-radius: 999px; white-space: nowrap; color: var(--suave); font-size: 12.5px; }
.segmentos button.on { background: var(--marca); color: #111; font-weight: 700; }

.sec { padding: 16px; border-bottom: 1px solid var(--borda); }
.sec h3, .rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--suave); font-weight: 700; margin: 0 0 10px; }
.card { background: var(--painel-2); border: 1px solid var(--borda); border-radius: 12px; padding: 12px; }
.av { position: relative; overflow: hidden; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: none; background: #000; border: 2px solid var(--marca); color: var(--marca); }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 16px; border-radius: 10px; border: 1px solid var(--borda); background: var(--painel-2); font-weight: 700; }
.btn.prim { background: var(--marca); border-color: var(--marca); color: #111; }
.btn.verde { background: var(--livre); border-color: var(--livre); color: #062; }
.btn.perigo { border-color: var(--perigo); color: var(--perigo); background: transparent; }
.btn.bloco { width: 100%; }
.btn.peq { padding: 5px 10px; font-size: 12px; border-radius: 8px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--borda); background: var(--painel-2); padding: 6px 10px; border-radius: 8px; font-size: 12.5px; }
.chip.on { border-color: var(--marca); background: var(--marca); color: #111; font-weight: 700; }
.chip small { opacity: .7; }

label { display: block; font-size: 12px; color: var(--suave); margin: 10px 0 4px; }
input, select, textarea { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--borda); background: #0e0e10; color: var(--texto); font: inherit; }
input:focus, select:focus { outline: 2px solid var(--marca); outline-offset: -1px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--suave); margin-top: 10px; }
.check input { width: auto; margin-top: 2px; }
.erro { color: var(--perigo); font-size: 12.5px; margin-top: 8px; }
.suave { color: var(--suave); }
.st-livre { color: var(--livre); } .st-cortando { color: var(--ocupado); } .st-chamando { color: var(--info); }
.st-pausa, .st-fechado { color: var(--pausa); }
.tag { display: inline-block; border-radius: 4px; padding: 0 5px; font-size: 10.5px; font-weight: 700; }
.tag.atraso { background: var(--perigo); color: #fff; }
.tag.demo { background: #3a2a10; color: var(--ocupado); border: 1px solid var(--ocupado); }

.timeline { position: relative; height: 30px; border-radius: 6px; background: rgba(47,212,122,.12); border: 1px solid var(--borda); overflow: hidden; }
.timeline i { position: absolute; top: 0; bottom: 0; background: #3a3a40; border-right: 1px solid var(--painel); }
.timeline i.pausa { background: repeating-linear-gradient(45deg, #2a2a2e 0 4px, #3a3a40 4px 8px); }
.timeline i.sel { background: var(--marca); }
.timeline .agora { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--perigo); }
.escala { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--suave); margin-top: 3px; }

.wpp { background: #0b141a; border-radius: 12px; padding: 10px; border: 1px solid #1f2c33; }
.msg { background: #005c4b; color: #e9edef; padding: 8px 10px; border-radius: 8px 8px 8px 2px; margin: 6px 0; font-size: 12.5px; }
.msg.interna { background: #1f2c33; }
.msg .meta { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; opacity: .8; margin-bottom: 3px; }
.msg .botoes { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.msg .botoes span { border: 1px solid rgba(255,255,255,.25); border-radius: 6px; padding: 2px 8px; font-size: 11px; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: #000; border: 1px solid var(--marca); padding: 10px 16px; border-radius: 10px; z-index: 50; max-width: calc(100% - 32px); }
.vazio { color: var(--suave); padding: 20px; text-align: center; }