e a PÁGINA INTEIRA passa a rolar na
horizontal — 3693px num viewport de 375. O overflow-x do só age depois disto. */
min-width: 0;
}
.erro-grupo p { margin: 0; }
/* Sem space-between: com ele o selo espremia o nome do tipo contra a margem e
"System.Text.Json.JsonException" quebrava em "JsonExcepti / on" num celular de 390px. O nome é
identificador e precisa da linha inteira; o selo desce sozinho quando não couber. */
.erro-titulo {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .35rem .5rem;
font-size: .85rem;
overflow-wrap: anywhere;
}
/* A mensagem é o que identifica o bug — fonte de código porque muitas trazem nome de tipo, caminho e
aspas, e proporcional embaralha os três. */
.erro-mensagem {
margin-top: .25rem !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .8rem;
color: var(--ink);
word-break: break-word;
}
/* Pilha: fechada por padrão (são ~4 KB e o painel se lê no celular). Rola na horizontal dentro do
próprio bloco — quadro de pilha não se quebra em linhas sem virar sopa. */
.erro-pilha { margin-top: .35rem; font-size: .75rem; }
.erro-pilha summary { cursor: pointer; color: var(--ink-soft); }
.erro-pilha pre {
margin: .35rem 0 0;
padding: .4rem;
overflow-x: auto;
background: var(--line);
border-radius: .4rem;
font-size: .7rem;
line-height: 1.35;
}
/* Botão só-ícone das ações de card (Editar/Endereços/Equipamentos) */
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
color: var(--brand);
background: transparent;
border: none;
border-radius: .5rem;
text-decoration: none;
cursor: pointer;
}
.icon-btn .icon { width: 1.25rem; height: 1.25rem; }
.icon-btn:active { background: var(--brand-tint); }
/* Ação destrutiva de card (Descartar, na bandeja de erros de sincronização). Cor de perigo no lugar
da marca — o peso de "não dá pra desfazer" quem carrega é a confirmação, mas o botão não pode se
parecer com o "Editar" do card ao lado. */
.icon-btn.is-danger { color: var(--danger); }
.icon-btn.is-danger:active { background: var(--danger-tint); }
/* Botão de busca por voz (protótipo) — pulsa em vermelho enquanto está ouvindo */
.icon-btn.is-listening { color: var(--danger); animation: pulse-listening 1.2s ease-in-out infinite; }
@keyframes pulse-listening {
0%, 100% { opacity: 1; }
50% { opacity: .45; }
}
/* Botão de atualizar lista (Orçamentos) — ícone gira enquanto a revalidação está em andamento */
.icon-btn.is-spinning .icon { animation: spin 0.9s linear infinite; }
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Campo de busca da lista */
.search-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.search-row .input { flex: 1; }