/* app/estilo.css */
:root { --tinta: #14213d; --papel: #f4f1ea; --cartao: #ffffff; --borda: #d9d3c7; --alto: #b3261e; --ok: #1d6b3a; --suave: #6b6457; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--papel); color: var(--tinta); }
.topo { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; padding-top: max(.6rem, env(safe-area-inset-top)); background: var(--tinta); color: #fff; }
.topo h1 { flex: 1; margin: 0; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icone { background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; padding: 0 .3rem; }
.gasto { font-size: .8rem; opacity: .85; }
.gasto.alerta { color: #ffb4a9; opacity: 1; font-weight: 600; }
.selo { min-width: 1.4rem; padding: 0 .35rem; border-radius: 1rem; background: var(--alto); color: #fff; font-size: .8rem; text-align: center; }
main { max-width: 46rem; margin: 0 auto; padding: .8rem .8rem 7rem; }
button { font: inherit; border-radius: .55rem; border: 1px solid var(--tinta); background: var(--tinta); color: #fff; padding: .55rem .9rem; }
button:disabled { opacity: .55; }
input, textarea { font: inherit; width: 100%; padding: .55rem .65rem; border: 1px solid var(--borda); border-radius: .55rem; background: #fff; color: var(--tinta); }
label { display: grid; gap: .3rem; }
.bloco { display: grid; gap: .9rem; margin-top: 2rem; }
.erro { color: var(--alto); min-height: 1.2em; margin: 0; }
.linha { display: flex; gap: .5rem; align-items: center; }
.linha input { flex: 1; }
.forte { display: flex; align-items: center; gap: .25rem; font-size: .85rem; white-space: nowrap; }
.forte input { width: auto; }
.lista { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .45rem; }
.item { width: 100%; text-align: left; background: var(--cartao); color: var(--tinta); border-color: var(--borda); display: flex; justify-content: space-between; gap: .5rem; }
.etiqueta { font-size: .72rem; padding: .05rem .4rem; border-radius: .4rem; background: var(--tinta); color: #fff; }
.vazio { color: var(--suave); }
.cartoes { display: grid; gap: .6rem; margin-bottom: .8rem; }
#tela-conversa .cartoes { margin: .8rem 0 0; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-left: 4px solid var(--ok); border-radius: .7rem; padding: .7rem .8rem; }
.cartao.alto { border-left-color: var(--alto); background: #fff6f5; }
.cartao h2 { margin: 0 0 .35rem; font-size: .95rem; }
.risco { margin: 0 0 .4rem; color: var(--alto); font-weight: 600; }
.resumo { margin: 0 0 .6rem; max-height: 14rem; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: .8rem; background: #f7f5f0; padding: .5rem; border-radius: .4rem; }
.botoes { display: flex; gap: .45rem; }
.botoes button { flex: 1; }
.aprovar { background: var(--ok); border-color: var(--ok); }
.recusar { background: #fff; color: var(--alto); border-color: var(--alto); }
.editar { background: #fff; color: var(--tinta); }
.edicao { display: grid; gap: .4rem; margin-top: .5rem; }
.aprovar-todos { background: var(--ok); border-color: var(--ok); }
.mensagens { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.msg { padding: .55rem .75rem; border-radius: .7rem; white-space: pre-wrap; word-break: break-word; max-width: 92%; }
.msg.hugo { justify-self: end; background: var(--tinta); color: #fff; }
.msg.assistente { justify-self: start; background: var(--cartao); border: 1px solid var(--borda); }
.msg.andamento { justify-self: start; color: var(--suave); font-size: .82rem; padding: .1rem .3rem; }
.msg.erro { justify-self: stretch; background: #fff6f5; color: var(--alto); border: 1px solid var(--alto); }
.envio { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: .5rem; padding: .6rem .8rem; padding-bottom: max(.6rem, env(safe-area-inset-bottom)); background: var(--papel); border-top: 1px solid var(--borda); }
.envio textarea { flex: 1; resize: none; }