/* Tema da plataforma (cores vêm de temas.ativo). Layout comum: terminal, cliente (estilo WhatsApp) e app do entregador. */
:root { --fundo:#07090a; --cartao:#0f1512; --borda:#1c2a1f; --texto:#e7ede8; --texto_suave:#8a978d; --destaque:#5CB130; --destaque_claro:#A8E063; --erro:#ff8a80; }
* { box-sizing: border-box } html, body { margin: 0; height: 100% }
body { background: var(--fundo); color: var(--texto); font: 15px/1.45 'Segoe UI', system-ui, sans-serif; }
.oculto { display: none !important }
button, input, select, textarea { font: inherit; color: var(--texto); background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px }
button { background: var(--cartao); cursor: pointer } button:hover { border-color: var(--destaque) } button:disabled { opacity: .5; cursor: default }
button.pri { background: var(--destaque); color: #07090a; border-color: var(--destaque); font-weight: 600 }
.erro { color: var(--erro); font-size: 13px; min-height: 1em; margin: 4px 0 }
.suave { color: var(--texto_suave); font-size: 13px }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 12px }
.centro { min-height: 100%; display: grid; place-items: center; padding: 16px }
.login { width: min(380px, 100%); display: grid; gap: 10px; text-align: center } .login img { max-width: 160px; margin: 0 auto }
header.topo { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--borda); background: var(--cartao) }
header.topo img { height: 28px } header.topo strong { color: var(--destaque_claro) } .espaco { flex: 1 }
table { width: 100%; border-collapse: collapse; font-size: 13.5px } td, th { padding: 5px 6px; border-bottom: 1px solid var(--borda); text-align: left }
.num { text-align: right; font-variant-numeric: tabular-nums } .baixo { color: #ffb74d }
.mapa { height: 260px; border-radius: 10px; border: 1px solid var(--borda) }
/* chat estilo WhatsApp */
.chat { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px;
        background: radial-gradient(circle at 20% 10%, rgba(92,177,48,.06), transparent 40%), var(--fundo) }
.bolha { max-width: 82%; padding: 7px 10px 18px; border-radius: 10px; position: relative; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--cartao); border: 1px solid var(--borda) }
.bolha small { position: absolute; right: 8px; bottom: 3px; font-size: 10.5px; color: var(--texto_suave) }
.bolha.minha { align-self: flex-end; background: #144d2b; border-color: #1d6b3c } .bolha.outra { align-self: flex-start }
.bolha.sistema { align-self: center; background: transparent; border: 1px dashed var(--borda); font-size: 13px; color: var(--texto_suave); padding: 5px 10px }
.qr { background: #fff; padding: 8px; border-radius: 8px; display: inline-block; margin-top: 6px } .qr svg { display: block; width: 200px; height: 200px }
.linha-envio { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--borda); background: var(--cartao) } .linha-envio input { flex: 1 }
button.gravando { background: #7a1f1f; border-color: #e0524f; color: #fff }
button.bloqueado, button:disabled.grande { opacity: .35; filter: grayscale(1); cursor: not-allowed }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: #274d1c; color: var(--destaque_claro) }