:root { --fundo: #F3F5F9; --cartao: #fff; --linha: #E3E8F0; --txt: #15203A; --txt2: #56617C; --pri: #0E7CFF; --verde: #128C4B; --verde-claro: #E6F6EC; --laranja: #B45309; --laranja-claro: #FFF4E0; --vermelho: #C0362C; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--txt); font: 14px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
header { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: #0B1D3A; color: #fff; }
header b { font-size: 16px; } header b span { color: #5CB8FF; }
header .fim { margin-left: auto; font-size: 12.5px; opacity: .8; }
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; display: grid; gap: 16px; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.cartao h2 { margin: 0 0 10px; font-size: 15px; }
.muted { color: var(--txt2); }
.selo { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.selo.verde { background: var(--verde-claro); color: var(--verde); } .selo.laranja { background: var(--laranja-claro); color: var(--laranja); } .selo.cinza { background: #EEF1F6; color: var(--txt2); }
button { font: inherit; border: 1px solid var(--linha); background: #fff; border-radius: 8px; padding: 7px 13px; cursor: pointer; }
button.pri { background: var(--pri); border-color: var(--pri); color: #fff; font-weight: 600; }
button.perigo { color: var(--vermelho); }
button:disabled { opacity: .5; cursor: default; }
label { display: block; font-weight: 600; font-size: 12.5px; margin: 10px 0 4px; }
input, select, textarea { width: 100%; font: inherit; border: 1px solid var(--linha); border-radius: 8px; padding: 7px 9px; background: #fff; }
textarea { min-height: 70px; resize: vertical; }
.linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.qr { display: flex; justify-content: center; margin: 10px 0; } .qr img { width: 240px; height: 240px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { font-size: 12px; color: var(--txt2); font-weight: 600; }
.tabela { overflow-x: auto; }
tr.clica { cursor: pointer; } tr.clica:hover td { background: #F7F9FC; }
.conversa { display: grid; gap: 8px; max-height: 60vh; overflow-y: auto; padding: 8px; background: #EFEAE2; border-radius: 10px; }
.bolha { max-width: 80%; padding: 7px 10px; border-radius: 10px; background: #fff; white-space: pre-wrap; word-break: break-word; }
.bolha.assistente { justify-self: end; background: #D9FDD3; } .bolha.atendente { justify-self: end; background: #FFF4C2; }
.bolha small { display: block; color: var(--txt2); font-size: 11px; margin-top: 2px; }
.aviso { padding: 10px 12px; border-radius: 8px; background: var(--laranja-claro); color: var(--laranja); font-size: 13px; }
@media (max-width: 600px) { header { padding: 10px 14px; } main { padding: 14px 12px 40px; } .bolha { max-width: 92%; } }
.cartao h3 { margin: 16px 0 6px; font-size: 13px; color: var(--txt2); font-weight: 600; }
.apr { border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.apr label { margin-top: 8px; }
.apr-topo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.apr-trecho { margin: 8px 0 0; padding: 6px 9px; border-left: 3px solid var(--linha); color: var(--txt2); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; }
.apr.feito { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.apr.feito .linha { margin-top: 0; }
.apr-ver { flex: 1; min-width: 220px; } .apr-ver div { margin: 2px 0; white-space: pre-wrap; } .apr-ver .muted { font-size: 12px; }
.apr-novo { margin-top: 14px; } .apr-novo summary { cursor: pointer; font-weight: 600; color: var(--pri); }