/* ------------------------------------------------------------------ *
 * Wireframe / low-fidelity. Só tons de cinza, caixas e placeholders.  *
 * Sem cores de marca, sem refinamento — é proposital.                 *
 * ------------------------------------------------------------------ */

:root {
    --wf-ink: #333;
    --wf-line: #999;
    --wf-line-soft: #ccc;
    --wf-fill: #f2f2f2;
    --wf-fill-2: #e6e6e6;
    --wf-bg: #fff;
    --wf-radius: 2px;
    --wf-gap: 16px;
}

* {
    box-sizing: border-box;
}

body.wf {
    margin: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: var(--wf-ink);
    background: var(--wf-bg);
    font-size: 14px;
    line-height: 1.4;
}

/* Placeholder de texto (barra cinza) e de imagem (caixa com X) */
.wf-ph {
    display: block;
    height: 10px;
    background: var(--wf-fill-2);
    border-radius: var(--wf-radius);
}
.wf-ph.w-25 { width: 25%; }
.wf-ph.w-40 { width: 40%; }
.wf-ph.w-50 { width: 50%; }
.wf-ph.w-60 { width: 60%; }
.wf-ph.w-75 { width: 75%; }
.wf-ph.w-90 { width: 90%; }
.wf-ph + .wf-ph { margin-top: 6px; }

.wf-img {
    background:
        linear-gradient(to top right,
            transparent calc(50% - 1px), var(--wf-line-soft),
            transparent calc(50% + 1px)),
        linear-gradient(to top left,
            transparent calc(50% - 1px), var(--wf-line-soft),
            transparent calc(50% + 1px)),
        var(--wf-fill);
    border: 1px solid var(--wf-line);
    border-radius: var(--wf-radius);
}
.wf-avatar-box {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    background: var(--wf-fill-2);
    border: 1px solid var(--wf-line);
}

/* ----- Topbar ----- */
.wf-topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 20px;
    height: 56px;
    border-bottom: 2px solid var(--wf-line);
    background: var(--wf-bg);
}
.wf-brand {
    font-weight: 700;
    letter-spacing: 0.5px;
}
.wf-tag {
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px dashed var(--wf-line);
    padding: 1px 6px;
    border-radius: var(--wf-radius);
    color: var(--wf-line);
    vertical-align: middle;
}
.wf-nav {
    display: flex;
    gap: 6px;
    margin-left: 12px;
}
.wf-nav-link {
    text-decoration: none;
    color: var(--wf-ink);
    padding: 6px 14px;
    border: 1px solid var(--wf-line-soft);
    border-radius: var(--wf-radius);
}
.wf-nav-link.is-active {
    background: var(--wf-fill);
    border-color: var(--wf-line);
    font-weight: 700;
}
.wf-avatar {
    margin-left: auto;
    font-size: 12px;
    padding: 8px 12px;
    border: 1px solid var(--wf-line-soft);
    border-radius: var(--wf-radius);
    background: var(--wf-fill);
}

/* ----- Layout principal ----- */
.wf-main {
    padding: var(--wf-gap);
}
.wf-pagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--wf-gap);
}
.wf-pagehead h1 {
    font-size: 18px;
    margin: 0;
}
.wf-subtitle {
    color: var(--wf-line);
    font-size: 12px;
    margin: 2px 0 0;
}

/* Caixas / painéis genéricos */
.wf-box {
    border: 1px solid var(--wf-line);
    border-radius: var(--wf-radius);
    background: var(--wf-bg);
    padding: 12px;
}
.wf-box-head {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--wf-line-soft);
}

/* Controles fake (botões, inputs, selects como caixas) */
.wf-btn {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--wf-line);
    border-radius: var(--wf-radius);
    background: var(--wf-fill);
    font-size: 13px;
    cursor: default;
}
.wf-btn.primary {
    background: var(--wf-fill-2);
    border-width: 2px;
    font-weight: 700;
}
.wf-input,
.wf-select {
    border: 1px solid var(--wf-line);
    border-radius: var(--wf-radius);
    background: var(--wf-bg);
    padding: 7px 10px;
    color: var(--wf-line);
    font-size: 13px;
}
.wf-select::after { content: ' \25BE'; }
.wf-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--wf-gap);
}
.wf-spacer { margin-left: auto; }

/* =================================================================== *
 * ATENDIMENTO — barra do Bot + 3 colunas: conversas | thread | cliente *
 * =================================================================== */

/* Toggle "liga | desliga" (controle segmentado fake) */
.wf-botbox {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.wf-botbox.row { flex-direction: row; align-items: center; gap: 8px; }
.wf-bot-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
}
.wf-toggle {
    display: inline-flex;
    border: 1px solid var(--wf-line);
    border-radius: var(--wf-radius);
    overflow: hidden;
    font-size: 12px;
}
.wf-toggle-opt {
    padding: 5px 14px;
    background: var(--wf-bg);
    color: var(--wf-line);
    cursor: default;
}
.wf-toggle-opt + .wf-toggle-opt { border-left: 1px solid var(--wf-line); }
.wf-toggle-opt.is-on {
    background: var(--wf-fill-2);
    color: var(--wf-ink);
    font-weight: 700;
}
.wf-toggle.sm .wf-toggle-opt { padding: 3px 9px; font-size: 11px; }
/* Toggles que postam usam <button> com a mesma aparência dos spans .wf-toggle-opt. */
button.wf-toggle-opt {
    font: inherit;
    line-height: 1.4;
    border: none;
    border-radius: 0;
    cursor: pointer;
}
button.wf-toggle-opt.is-on { cursor: default; }

/* Tela de atendimento travada na altura da janela: a página NUNCA cria barra de rolagem
 * e o menu do topo nunca sai de vista. Quem rola é o conteúdo de cada coluna. Antes a
 * altura era uma conta fixa (100vh menos topbar, gaps e cabeçalho) que quebrava assim
 * que aparecia qualquer coisa nova acima do quadro — um aviso, os filtros. */
body.wf-tela-cheia {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body.wf-tela-cheia .wf-topbar { flex: 0 0 auto; }
body.wf-tela-cheia .wf-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* O que vem antes do quadro (cabeçalho, avisos) fica no tamanho natural e não empurra. */
body.wf-tela-cheia .wf-pagehead,
body.wf-tela-cheia .wf-flash-list { flex: 0 0 auto; }
/* Na tela de pedidos, a visão escolhida (Kanban ou Planilha) é que preenche a altura —
   sem barra na página, nem vertical nem horizontal. O que rola é o miolo de cada coluna. */
body.wf-tela-cheia #wf-view-kanban:checked ~ .wf-view--kanban,
body.wf-tela-cheia #wf-view-planilha:checked ~ .wf-view--planilha {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
}
body.wf-tela-cheia .wf-board {
    height: auto;
    flex: 1;
    min-height: 0;
    min-width: 0;
}
body.wf-tela-cheia .wf-view--planilha { overflow: auto; }
.wf-atendimento {
    display: grid;
    grid-template-columns: 280px 1fr 260px;
    gap: var(--wf-gap);
    flex: 1;
    min-height: 0;
}
/* Cada coluna rola por dentro; nenhuma empurra a página. */
.wf-atendimento > .wf-box { min-height: 0; overflow: hidden; }
.wf-atendimento > aside.wf-box { overflow-y: auto; }
.wf-atendimento .wf-thread { min-height: 0; }
.wf-convlist { overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.wf-convlist .wf-box-head { margin: 12px; margin-bottom: 0; }
.wf-conv {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--wf-line-soft);
    align-items: center;
}
.wf-conv.is-active { background: var(--wf-fill); border-left: 3px solid var(--wf-line); }
.wf-conv-body { flex: 1; min-width: 0; }
.wf-conv-name { display: block; font-weight: 700; margin-bottom: 6px; }

.wf-thread { display: flex; flex-direction: column; padding: 0; }
.wf-thread-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px dashed var(--wf-line-soft);
}
.wf-thread-name { font-weight: 700; font-size: 15px; }
.wf-messages {
    flex: 1;
    overflow: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.wf-msg { max-width: 70%; }
.wf-msg .wf-bubble {
    border: 1px solid var(--wf-line);
    border-radius: 8px;
    background: var(--wf-fill);
    padding: 10px 12px;
}
.wf-msg.in { align-self: flex-start; }
.wf-msg.out { align-self: flex-end; }
.wf-msg.out .wf-bubble { background: var(--wf-fill-2); }
.wf-reply {
    border-top: 1px dashed var(--wf-line-soft);
    padding: 12px;
    display: flex;
    gap: 8px;
}
/* Mensagem que não chegou ao cliente: a bolha precisa gritar, senão passa batido. */
.wf-bubble--falhou { border: 1px solid #c0392b; background: #fdecea; }
.wf-msg-falhou {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
    color: #902020;
}
.wf-msg-falhou form { margin: 0; }

/* Conexão do WhatsApp (Configurações → WhatsApp): estado e QR de pareamento. */
.wf-conexao {
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0 0 12px;
}
.wf-conexao--ok { background: #eaf7ec; border: 1px solid #2e7d32; color: #1b5e20; }
.wf-conexao--erro { background: #fdecea; border: 1px solid #c0392b; color: #902020; }
.wf-qr-box { text-align: center; }
.wf-qr {
    width: 260px;
    max-width: 100%;
    image-rendering: pixelated;  /* QR pequeno não pode sair borrado na tela */
    background: #fff;
    padding: 8px;
    border: 1px solid var(--wf-line-soft);
    border-radius: 6px;
}
.wf-qr-codigo { letter-spacing: 2px; font-family: monospace; }

.wf-reply .wf-input { flex: 1; }
/* Resposta do atendente é textarea (a sugestão do bot tem quebras de linha): alinha
   com o botão e cresce com o texto, sem virar uma caixa gigante. */
.wf-reply .wf-reply-text {
    resize: none;
    overflow-y: auto;
    max-height: 180px;
    line-height: 1.35;
    font: inherit;
}
.wf-reply { align-items: flex-end; }

.wf-panel-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

/* =================================================================== *
 * PEDIDOS — duas visões na mesma tela: Kanban e Planilha               *
 * O toggle é só CSS: dois <input radio> escondidos no topo do content  *
 * controlam qual `.wf-view` aparece (via seletor de irmão `~`).        *
 * =================================================================== */

/* --- Toggle de visão (radios escondidos + labels como botões) --- */
.wf-view-radio { display: none; }
.wf-view { display: none; }
#wf-view-kanban:checked ~ .wf-view--kanban { display: block; }
#wf-view-planilha:checked ~ .wf-view--planilha { display: block; }

.wf-viewtoggle {
    display: inline-flex;
    border: 1px solid var(--wf-line);
    border-radius: var(--wf-radius);
    overflow: hidden;
}
.wf-toggle-btn {
    padding: 7px 14px;
    font-size: 13px;
    background: var(--wf-bg);
    border-left: 1px solid var(--wf-line-soft);
    cursor: pointer;
    user-select: none;
}
.wf-toggle-btn:first-of-type { border-left: none; }
/* destaca o botão da visão ativa */
#wf-view-kanban:checked ~ .wf-pagehead label[for="wf-view-kanban"],
#wf-view-planilha:checked ~ .wf-pagehead label[for="wf-view-planilha"] {
    background: var(--wf-fill-2);
    font-weight: 700;
}

/* --- Visão Kanban: colunas "Iniciar"/"Preparando" full-height; as   *
 *     demais (retirada / entrega / finalizado) empilhadas em 2 linhas. */
.wf-board {
    display: grid;
    grid-template-columns: 0.9fr repeat(3, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: var(--wf-gap);
    padding: var(--wf-gap);
    border: 1px solid var(--wf-line);
    border-radius: var(--wf-radius);
    height: calc(100vh - 56px - 2 * var(--wf-gap) - 52px);
    min-height: 480px;
}
.wf-col-tall { grid-row: span 2; }

.wf-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--wf-line);
    border-radius: var(--wf-radius);
    background: var(--wf-bg);
}
.wf-col-head {
    flex: 0 0 auto;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    padding: 12px;
    border-bottom: 1px dashed var(--wf-line-soft);
}
.wf-col-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}

/* Coluna "Iniciar": rodapé fixo com o botão de criar pedido (fora do
 * fluxo dos cards, pra nunca entrar no drag & drop nem sair do rodapé) */
.wf-col-foot {
    flex: 0 0 auto;
    display: flex;
    padding: 12px;
    border-top: 1px dashed var(--wf-line-soft);
}
.wf-create {
    flex: 1;
    text-align: center;
}

/* Cartão de pedido */
.wf-order {
    border: 1px solid var(--wf-line-soft);
    border-radius: 6px;
    background: var(--wf-fill);
    padding: 10px;
    cursor: grab;
}
.wf-order:active { cursor: grabbing; }

/* Estados de arrasto (drag & drop do Kanban) */
.wf-order.wf-dragging {
    opacity: 0.4;
    cursor: grabbing;
}
.wf-col-body.wf-dragover {
    background: var(--wf-fill);
    outline: 2px dashed var(--wf-line);
    outline-offset: -4px;
}
.wf-order-top,
.wf-order-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wf-order-top { margin-bottom: 8px; }
.wf-order-foot { margin-top: 8px; }

/* Badge (origem / status do pedido) */
.wf-badge {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--wf-line);
    border-radius: 12px;
    background: var(--wf-bg);
    font-size: 11px;
    color: #555;
}

/* --- Visão Planilha: indicadores + filtros + tabela + paginação --- */
.wf-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wf-gap);
    margin-bottom: var(--wf-gap);
}
.wf-stat .wf-stat-num {
    height: 22px;
    width: 50%;
    background: var(--wf-fill-2);
    border-radius: var(--wf-radius);
    margin-bottom: 8px;
}
.wf-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--wf-line);
    border-radius: var(--wf-radius);
    overflow: hidden;
}
.wf-table th,
.wf-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--wf-line-soft);
    vertical-align: middle;
}
.wf-table thead th {
    background: var(--wf-fill);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    border-bottom: 2px solid var(--wf-line);
}
.wf-table tbody tr:hover { background: #fafafa; }
.wf-pagination {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: var(--wf-gap);
}
.wf-pagination .wf-btn { min-width: 34px; text-align: center; padding: 6px 10px; }

/* =================================================================== *
 * CATÁLOGO — CRUD de produtos: lista (esquerda) + formulário (direita) *
 * + modal de confirmação de exclusão (toggle só-CSS via checkbox).     *
 * =================================================================== */
.wf-catalogo {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--wf-gap);
    align-items: start;
}
.wf-catalogo-list { padding: 12px 14px; }
.wf-catalogo-list .wf-table { margin-top: 4px; }

/* Miniatura do produto na tabela */
.wf-thumb {
    display: block;
    width: 40px;
    height: 40px;
}
.wf-prod-name { display: block; font-weight: 700; margin-bottom: 6px; }

/* Badge de status: disponível (claro) x indisponível (apagado) */
.wf-badge.is-on { border-color: var(--wf-line); background: var(--wf-fill-2); color: var(--wf-ink); }
.wf-badge.is-off { color: var(--wf-line); border-style: dashed; }

/* Botões pequenos de ação na linha */
.wf-row-actions { display: flex; gap: 6px; }
.wf-btn-sm { padding: 4px 10px; font-size: 12px; cursor: pointer; }

/* ----- Formulário (campos fake, padrão wireframe) ----- */
.wf-form { display: flex; flex-direction: column; gap: 14px; }
.wf-field { display: flex; flex-direction: column; gap: 6px; }
.wf-field-row { display: flex; gap: 12px; }
.wf-field-row .wf-field { flex: 1; }
.wf-field-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
}
/* Os controles ocupam a largura do campo */
.wf-field .wf-input,
.wf-field .wf-select { display: block; }
/* …mas o toggle abraça o próprio conteúdo (não estica) */
.wf-field .wf-toggle { align-self: flex-start; }
.wf-textarea {
    border: 1px solid var(--wf-line);
    border-radius: var(--wf-radius);
    background: var(--wf-bg);
    padding: 7px 10px;
    color: var(--wf-line);
    font-size: 13px;
    min-height: 64px;
}
.wf-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 80px;
    padding: 10px;
    border: 1px dashed var(--wf-line);
    border-radius: var(--wf-radius);
    background: var(--wf-fill);
    color: var(--wf-line);
    font-size: 12px;
}
.wf-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}
.wf-form-actions .wf-btn { cursor: pointer; }

/* ----- Modal de confirmação (toggle só-CSS) ----- */
.wf-modal-toggle { display: none; }
.wf-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    align-items: center;
    justify-content: center;
    z-index: 50;
}
.wf-modal-toggle:checked ~ .wf-modal-overlay { display: flex; }
.wf-modal {
    width: 360px;
    max-width: 90vw;
    background: var(--wf-bg);
    border: 2px solid var(--wf-line);
    border-radius: var(--wf-radius);
    padding: 18px;
}
.wf-modal-head { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.wf-modal-text { color: #555; font-size: 13px; margin: 0 0 16px; }

/* =================================================================== *
 * SIMULADOR — versão FUNCIONAL do atendimento (só superusuário).       *
 * Reaproveita as caixas do wireframe, mas com controles REAIS          *
 * (input/select/button/textarea) em vez de placeholders.               *
 * =================================================================== */

/* Controles reais (simulador + atendimento + catálogo): texto legível, fonte herdada e cursor. */
.wf-sim input.wf-input,
.wf-sim select.wf-select,
.wf-sim textarea.wf-textarea,
.wf-atendimento input.wf-input,
.wf-atendimento select.wf-select,
.wf-atendimento textarea.wf-textarea,
.wf-catalogo-page input.wf-input,
.wf-catalogo-page select.wf-select,
.wf-catalogo-page textarea.wf-textarea {
    color: var(--wf-ink);
    font-family: inherit;
}
.wf-sim input.wf-input::placeholder,
.wf-atendimento input.wf-input::placeholder,
.wf-catalogo-page input.wf-input::placeholder { color: var(--wf-line); }
.wf-sim button.wf-btn,
.wf-atendimento button.wf-btn,
.wf-catalogo-page button.wf-btn,
.wf-catalogo-page a.wf-btn {
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}
.wf-sim button.wf-btn:hover,
.wf-atendimento button.wf-btn:hover,
.wf-catalogo-page button.wf-btn:hover,
.wf-catalogo-page a.wf-btn:hover { background: var(--wf-fill-2); }

/* Rótulo "como Cliente/Atendente" na barra de envio (deixa o papel explícito). */
.wf-sim-as {
    flex: 0 0 auto;
    align-self: center;
    font-size: 11px;
    color: var(--wf-line);
    white-space: nowrap;
}

/* Mesmo tratamento do atendimento: trava na janela em vez de calcular a altura na mão. */
.wf-sim {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--wf-gap);
    flex: 1;
    min-height: 0;
}
.wf-sim > .wf-box { min-height: 0; overflow: hidden; }

/* Coluna 1: form de nova conversa (topo) + lista rolável (embaixo) */
.wf-sim-list { display: flex; flex-direction: column; overflow: hidden; }
.wf-sim-newconv {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px dashed var(--wf-line-soft);
}
.wf-sim-newconv .wf-input,
.wf-sim-newconv .wf-select,
.wf-sim-newconv .wf-btn { width: 100%; }
.wf-sim-convs { flex: 1; overflow: auto; margin: 4px -12px -12px; }
.wf-sim-convs .wf-conv { text-decoration: none; color: var(--wf-ink); }
.wf-sim-convs .wf-conv:hover { background: #fafafa; }
.wf-sim-meta { font-size: 12px; color: var(--wf-line); }
.wf-sim-empty { color: var(--wf-line); font-size: 13px; padding: 16px; text-align: center; }

/* Faixa "Cancelado": ocupa a largura inteira na última linha do quadro, alinhada com as
   colunas. Fechada, é só a barra de título e as colunas de cima crescem; aberta, os cards
   ficam lado a lado numa faixa baixa. Toggle só-CSS, como o resto da tela. */
.wf-col-toggle { display: none; }
.wf-col-head--toggle { cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.wf-col-caret { transition: transform .15s; }
.wf-col--cancelado {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 0;
}
.wf-col--cancelado .wf-col-body {
    display: none;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 190px;
}
.wf-col--cancelado .wf-order { min-width: 210px; }
.wf-col-toggle:checked ~ .wf-view .wf-col--cancelado .wf-col-body { display: flex; }
.wf-col-toggle:checked ~ .wf-view .wf-col--cancelado .wf-col-caret { transform: rotate(180deg); }
/* Com a faixa presente, a última linha é do tamanho do conteúdo dela (fechada = só o título). */
.wf-board:has(.wf-col--cancelado) { grid-template-rows: 1fr 1fr auto; }

/* Observações no card do Kanban: do item ("sem tomate") e do pedido inteiro. */
.wf-order-obs {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: #7a4a00;
}
.wf-order-obs::before { content: '↳ '; }
.wf-order-obs-pedido {
    margin-top: 6px;
    padding: 4px 6px;
    background: #fdf6e3;
    border-left: 3px solid #b06a00;
    color: #7a4a00;
    font-size: 11px;
}

/* Filtros e selos da lista de conversas: separa o que já virou pedido do que não. */
.wf-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 10px; }
.wf-chip {
    font-size: 11px;
    padding: 3px 9px;
    border: 1px solid var(--wf-line-soft);
    border-radius: 12px;
    text-decoration: none;
    color: var(--wf-line);
}
.wf-chip.is-on { background: var(--wf-fill-2); border-color: var(--wf-line); color: var(--wf-ink); font-weight: 700; }
.wf-conv-selos { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.wf-selo {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 6px;
    border-radius: 10px;
    border: 1px solid var(--wf-line-soft);
    color: var(--wf-line);
}
.wf-selo--pedido { border-color: #1e7a45; color: #1e7a45; background: #eef8f1; font-weight: 700; }
.wf-selo--sem { border-style: dashed; }

/* Navegação por dia no cabeçalho de Pedidos: a lista mostra um dia de cada vez. */
.wf-dia-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.wf-dia-nav--conversas { margin: 0 12px 10px; justify-content: center; }
.wf-dia-nav--conversas .wf-dia-atual { min-width: 78px; }
.wf-dia-atual { display: flex; flex-direction: column; line-height: 1.25; min-width: 132px; text-align: center; }
.wf-btn.is-disabled { opacity: .4; cursor: default; }

/* Cancelar pedido no rodapé do formulário de edição. */
.wf-pedido-cancelar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--wf-line-soft);
}
.wf-btn-danger { border-color: #b3261e; color: #b3261e; }
.wf-btn-danger:hover { background: #fbeceb; }

/* Pedidos no painel do cliente: os desta conversa ficam à vista com itens, total e
   pendências — o aviso de "pedido criado" some na primeira navegação. */
.wf-pedido-card {
    border: 1px solid var(--wf-line-soft);
    border-radius: 3px;
    padding: 8px 10px;
    margin-bottom: 8px;
}
.wf-pedido-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wf-pedido-num { font-weight: 700; color: var(--wf-ink); text-decoration: none; }
.wf-pedido-num:hover { text-decoration: underline; }
.wf-pedido-itens { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; }
.wf-pedido-itens em { color: var(--wf-line); font-style: normal; }
.wf-pedido-rodape {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--wf-line-soft);
    font-size: 12px;
}
.wf-pedido-pendencia {
    margin-top: 6px;
    padding: 5px 7px;
    background: #fdf6e3;
    border-left: 3px solid #b06a00;
    color: #7a4a00;
    font-size: 11.5px;
}

/* Linha simples de pedido (outros pedidos do cliente e ações do card). */
.wf-pedido-link {
    display: block;
    font-size: 12px;
    color: var(--wf-ink);
    text-decoration: none;
    padding: 3px 6px;
    margin: 0 -6px;
}
.wf-pedido-link:hover { background: #fafafa; text-decoration: underline; }

/* Coluna 2: ações (limpar/excluir) no cabeçalho da thread */
.wf-sim-actions { display: flex; gap: 6px; }
.wf-sim-actions form { margin: 0; }

/* Bolhas: identificam remetente e horário */
.wf-msg-who {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #777;
    margin-bottom: 4px;
}
.wf-msg-time {
    display: block;
    font-size: 10px;
    color: var(--wf-line);
    margin-top: 4px;
    text-align: right;
}

/* Barra de envio: seletor de remetente + campo + botão */
.wf-sim .wf-reply select.wf-select { flex: 0 0 auto; }
.wf-sim .wf-reply input.wf-input { flex: 1; }

.wf-sim-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--wf-line);
    padding: 24px;
    text-align: center;
}

/* =================================================================== *
 * CATÁLOGO — versão FUNCIONAL (CRUD real de produtos).                 *
 * Reaproveita as caixas do wireframe com controles reais.             *
 * =================================================================== */

/* Botão "Filtrar" e o select de disponibilidade na barra de filtros. */
.wf-catalogo-page .wf-toolbar select.wf-select { cursor: pointer; }

/* Miniatura real da foto do produto (substitui o quadrado fake). */
img.wf-thumb {
    width: 36px;
    height: 36px;
    border-radius: var(--wf-radius);
    object-fit: cover;
    border: 1px solid var(--wf-line);
    display: block;
}

/* Descrição curta abaixo do nome, na lista. */
.wf-prod-desc { display: block; font-size: 12px; color: var(--wf-line); }

/* Linha destacada quando o produto está sendo editado no painel ao lado. */
.wf-catalogo-list tr.is-editing { background: var(--wf-fill); }

/* Estado vazio da tabela. */
.wf-catalogo-empty { text-align: center; color: var(--wf-line); padding: 28px 12px; }

/* Campo de upload real e checkbox "disponível". */
.wf-catalogo-page input.wf-file { font-size: 12px; color: var(--wf-ink); }
.wf-field-inline { flex-direction: row; align-items: center; gap: 8px; }
.wf-field-inline .wf-field-label { margin: 0; }
.wf-catalogo-page input.wf-check { width: 16px; height: 16px; cursor: pointer; }

/* Mensagens de erro de validação do form. */
.wf-form-errors {
    border: 1px solid #c0392b;
    background: #fdeceb;
    color: #c0392b;
    border-radius: var(--wf-radius);
    padding: 8px 10px;
    font-size: 12px;
}
.wf-field-error { color: #c0392b; font-size: 12px; }
.wf-field input.wf-input:user-invalid { border-color: #c0392b; }

/* Botão de paginação desabilitado (sem página anterior/seguinte). */
.wf-pagination .wf-btn.is-disabled { color: var(--wf-line); cursor: default; opacity: 0.5; }

/* Sub-navegação Produtos | Categorias dentro do Catálogo. */
.wf-subnav {
    display: flex;
    gap: 4px;
    margin-bottom: var(--wf-gap);
    border-bottom: 1px solid var(--wf-line-soft);
}
.wf-subnav-link {
    padding: 8px 14px;
    margin-bottom: -1px;
    text-decoration: none;
    color: var(--wf-line);
    font-size: 14px;
    border-bottom: 2px solid transparent;
}
.wf-subnav-link:hover { color: var(--wf-ink); }
.wf-subnav-link.is-active { color: var(--wf-ink); font-weight: 700; border-bottom-color: var(--wf-ink); }

/* =================================================================== *
 * PEDIDOS — modal "Criar pedido" (form real) + cards com dados reais.  *
 * =================================================================== */

/* Mensagens flash (sucesso/erro/aviso após criar pedido). */
.wf-flash-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--wf-gap); }
.wf-flash {
    padding: 8px 12px;
    border: 1px solid var(--wf-line);
    border-left-width: 4px;
    border-radius: var(--wf-radius);
    background: var(--wf-fill);
    font-size: 13px;
}
.wf-flash--success { border-left-color: #2e7d32; }
.wf-flash--error { border-left-color: #c62828; }
.wf-flash--warning { border-left-color: #ef6c00; }

/* Coluna/tabela vazia. */
.wf-col-empty { color: var(--wf-line); font-size: 12px; text-align: center; padding: 8px 0; margin: 0; }

/* Card real: id + cliente, lista de itens, rodapé com tipo e total. */
.wf-order-id { font-size: 12px; }
.wf-order-itens {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    font-size: 12px;
    color: #555;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wf-order-vazio { color: var(--wf-line); font-style: italic; }

/* Modal grande (form). Reaproveita .wf-modal mas mais largo e rolável. */
.wf-modal--lg {
    width: 640px;
    max-height: 90vh;
    overflow: auto;
    text-align: left;
}
.wf-modal-head { display: flex; align-items: center; justify-content: space-between; }
.wf-modal-close { cursor: pointer; font-size: 22px; line-height: 1; color: var(--wf-line); padding: 0 4px; }
.wf-modal-close:hover { color: var(--wf-ink); }

/* Espaçamento do formulário dentro do modal. */
.wf-pedido-form form { display: flex; flex-direction: column; gap: 14px; }
/* `hidden` precisa vencer os display:flex abaixo (cliente novo / endereço escondidos via JS). */
.wf-pedido-form [hidden] { display: none !important; }
.wf-pedido-form .wf-field { display: flex; flex-direction: column; gap: 6px; }
.wf-pedido-form .wf-field-row { display: flex; gap: 12px; }
.wf-pedido-form .wf-field-row .wf-field { flex: 1; }

/* Controles REAIS (texto legível, fonte herdada, cursor) — como no simulador. */
.wf-pedido-form input.wf-input,
.wf-pedido-form select.wf-select,
.wf-pedido-form textarea.wf-textarea {
    color: var(--wf-ink);
    font-family: inherit;
    width: 100%;
}
.wf-pedido-form input.wf-input::placeholder { color: var(--wf-line); }
.wf-pedido-form select.wf-select::after { content: none; }
.wf-pedido-form button.wf-btn,
.wf-pedido-form label.wf-btn { font-family: inherit; font-size: 13px; cursor: pointer; }
.wf-pedido-form button.wf-btn:hover,
.wf-pedido-form label.wf-btn:hover { background: var(--wf-fill-2); }

/* Busca de endereço já cadastrado (autocomplete com dropdown). */
.wf-endereco-busca { position: relative; }
.wf-autocomplete {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    background: var(--wf-bg);
    border: 1px solid var(--wf-line);
    border-radius: var(--wf-radius);
    max-height: 220px;
    overflow: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.wf-autocomplete-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid var(--wf-line-soft);
    background: var(--wf-bg);
    font: inherit;
    font-size: 13px;
    color: var(--wf-ink);
    cursor: pointer;
}
.wf-autocomplete-item:last-child { border-bottom: none; }
.wf-autocomplete-item:hover { background: var(--wf-fill); }

/* Bloco de endereço (entrega). */
.wf-endereco {
    border: 1px solid var(--wf-line-soft);
    border-radius: var(--wf-radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wf-endereco legend { padding: 0 6px; }

/* Linhas de item: produto | nome | qtd | preço | obs | remover. */
.wf-itens { display: flex; flex-direction: column; gap: 8px; }
.wf-item-row {
    display: grid;
    grid-template-columns: 1.3fr 1.5fr 54px 92px 1fr 30px;
    gap: 6px;
    align-items: center;
}
.wf-item-row .wf-input,
.wf-item-row .wf-select { padding: 6px 8px; font-size: 12px; }
/* Item do catálogo: nome e preço não são editáveis (puxam do catálogo). */
.wf-pedido-form input.wf-input[readonly] {
    background: var(--wf-fill);
    color: #777;
    cursor: not-allowed;
}
.wf-item-qtd, .wf-item-preco { text-align: right; }
.wf-item-del {
    padding: 4px 0;
    text-align: center;
    font-size: 16px;
    line-height: 1;
}

/* Rodapé do modal com o total ao vivo. */
.wf-pedido-foot { align-items: center; }
.wf-pedido-total { font-size: 14px; }

/* =================================================================== *
 * CONFIGURAÇÕES — tela geral por abas (Bot/IA, horários, mensagens).   *
 * Controles reais (texto legível, largura cheia) escopados na página.  *
 * =================================================================== */
.wf-config-page { max-width: 760px; }
.wf-config-page input.wf-input,
.wf-config-page select.wf-select,
.wf-config-page textarea.wf-textarea { color: var(--wf-ink); font-family: inherit; }
.wf-config-page input.wf-input::placeholder { color: var(--wf-line); }
.wf-config-page button.wf-btn { font-family: inherit; font-size: 13px; cursor: pointer; }
.wf-config-page button.wf-btn:hover { background: var(--wf-fill-2); }
.wf-config-page input.wf-check { width: 16px; height: 16px; cursor: pointer; }
.wf-config-page .wf-field input.wf-input,
.wf-config-page .wf-field select.wf-select,
.wf-config-page .wf-textarea { width: 100%; box-sizing: border-box; }

/* Pilha de caixas (um grupo de campos por caixa). */
.wf-config-stack { display: flex; flex-direction: column; gap: var(--wf-gap); }
.wf-config-stack .wf-box-body { display: flex; flex-direction: column; gap: 14px; }

/* Texto de ajuda abaixo de um campo. */
.wf-help { font-size: 12px; color: var(--wf-line); margin: 0; }

/* Horário de funcionamento: um dia por linha (dia | aberto | abertura | fechamento). */
.wf-hours { display: flex; flex-direction: column; gap: 10px; }
.wf-hours-row {
    display: grid;
    grid-template-columns: 1.4fr 70px 1fr 1fr;
    gap: 12px;
    align-items: center;
}
.wf-hours-row .wf-day { font-size: 13px; font-weight: 700; }
.wf-hours-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--wf-line-soft);
}
.wf-config-page .wf-hours-row input.wf-input[type="time"] { width: 100%; box-sizing: border-box; }

/* =================================================================== *
 * NOVO PEDIDO POR IA — campo em linguagem natural + conversa (esquerda) *
 * e o formulário editável do pedido (direita, reaproveita .wf-pedido-form).
 * =================================================================== */
.wf-pedidoia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wf-gap);
    align-items: stretch;
    height: calc(100vh - 56px - 2 * var(--wf-gap) - 64px);
    min-height: 480px;
}
.wf-pedidoia .wf-thread { overflow: hidden; }
.wf-pedidoia .wf-rascunho { overflow: auto; }

/* Controles reais na coluna da conversa (input + botões). */
.wf-pedidoia input.wf-input {
    color: var(--wf-ink);
    font-family: inherit;
}
.wf-pedidoia input.wf-input::placeholder { color: var(--wf-line); }
.wf-pedidoia button.wf-btn {
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}
.wf-pedidoia button.wf-btn:hover { background: var(--wf-fill-2); }
.wf-pedidoia button.wf-btn[disabled] { opacity: 0.6; cursor: default; }
.wf-pedidoia .wf-msg-who { color: #777; }

/* =================================================================== *
 * CAIXA — painel de acompanhamento e fechamento.                       *
 * Os mesmos números durante a operação e na conferência: o que se olha  *
 * o dia todo é o que fecha.                                            *
 * =================================================================== */
.wf-caixa-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--wf-gap);
    margin-bottom: var(--wf-gap);
}
.wf-num {
    border: 1px solid var(--wf-line);
    border-radius: var(--wf-radius);
    padding: 12px 14px;
    background: var(--wf-bg);
}
.wf-num--alerta { border-color: #b06a00; background: #fdf6e3; }
.wf-num-rotulo {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
}
.wf-num-valor { display: block; font-size: 24px; margin-top: 4px; }
.wf-num-nota { font-size: 12px; color: var(--wf-line); }

.wf-caixa-colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wf-gap);
}
.wf-caixa-colunas > section {
    border: 1px solid var(--wf-line);
    border-radius: var(--wf-radius);
    padding: 12px;
    min-width: 0;
}
.wf-kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px dashed var(--wf-line-soft);
    font-size: 13px;
}
.wf-kv:last-child { border-bottom: 0; }
.wf-kv--destaque { border-top: 2px solid var(--wf-ink); border-bottom: 0; margin-top: 4px; padding-top: 8px; }
.wf-kv--alerta { color: #8c2a1e; }

.wf-caixa-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.wf-caixa-form .wf-field { margin: 0; }

/* Receber um fiado direto da ficha do cliente: select + botão na mesma linha. */
.wf-receber { display: flex; gap: 6px; align-items: center; }
.wf-receber .wf-select { padding: 3px 6px; font-size: 12px; }

/* Ficha do cliente: linhas editáveis de telefone e endereço. */
.wf-form-cliente .wf-field { margin-bottom: 8px; }
.wf-linha-editavel { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.wf-linha-editavel .wf-input { flex: 1; min-width: 90px; }
.wf-endereco-editavel {
    border: 1px dashed var(--wf-line-soft);
    border-radius: var(--wf-radius);
    padding: 8px;
    margin-bottom: 10px;
}
.wf-grid-endereco { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px; }
.wf-grid-endereco .wf-input { width: 100%; }
.wf-linha-editavel .wf-btn { flex: 0 0 auto; }

/* Pagamento no card do Kanban: linha própria, controles compactos. */
.wf-order-pgto {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--wf-line-soft);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.wf-pgto-form { display: flex; gap: 4px; align-items: center; flex: 1; }
.wf-pgto-form .wf-select { padding: 2px 4px; font-size: 11px; flex: 1; min-width: 0; }
.wf-pgto-form .wf-btn { padding: 3px 8px; font-size: 11px; }
.wf-order-taxa { font-size: 11px; color: var(--wf-line); margin-top: 4px; text-align: right; }

/* Copiar campo por campo ao chamar a moto. Botões minúsculos de propósito: são cinco por
   card e não podem competir com o pedido em si. */
.wf-copiar-linha {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--wf-line-soft);
}
.wf-copiar-rotulo { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--wf-line-soft); }
.wf-copiar {
    padding: 1px 5px;
    font: inherit;
    font-size: 10px;
    line-height: 1.5;
    color: var(--wf-line);
    background: transparent;
    border: 1px solid var(--wf-line-soft);
    border-radius: var(--wf-radius);
    cursor: pointer;
}
.wf-copiar:hover { background: var(--wf-fill); color: var(--wf-ink); }
.wf-copiar.is-copiado {
    background: #eef8f1;
    border-color: #1e7a45;
    color: #1e7a45;
    font-weight: 700;
}
.wf-copiar-pago { font-size: 10px; color: #1e7a45; }

/* Observação do pedido recolhida: o marcador avisa que existe, o clique mostra. */
.wf-obs-toggle { display: none; }
.wf-obs-marca {
    display: inline-block;
    margin-top: 6px;
    font-size: 10px;
    padding: 1px 6px;
    border: 1px solid #b06a00;
    border-radius: 10px;
    color: #7a4a00;
    background: #fdf6e3;
    cursor: pointer;
}
.wf-order-obs-pedido { display: none; }
.wf-obs-toggle:checked ~ .wf-order-obs-pedido { display: block; }
.wf-imprimir { text-decoration: none; color: var(--wf-ink); border-color: var(--wf-line); font-weight: 700; }

/* ------------------------------------------------------------------ *
 * Calibragem — placar de baterias, roteiros e comparação.             *
 * Sem cor de marca: passou/falhou se distinguem por peso e traço.     *
 * ------------------------------------------------------------------ */
.wf-calib-cols {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) 2fr;
    gap: var(--wf-gap);
    align-items: start;
}
.wf-calib-checks {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--wf-line-soft);
    border-radius: var(--wf-radius);
    padding: 8px 10px;
}
.wf-calib-checks ul { list-style: none; margin: 0; padding: 0; }
.wf-calib-checks li { padding: 2px 0; }
.wf-calib-placar .wf-stats { grid-template-columns: repeat(4, 1fr); }
.wf-calib-placar .wf-stat {
    border: 1px solid var(--wf-line-soft);
    border-radius: var(--wf-radius);
    padding: 10px 12px;
}
.wf-calib-placar .wf-stat strong { display: block; font-size: 20px; line-height: 1.2; }
.wf-calib-placar .wf-stat span { font-size: 11px; text-transform: uppercase; color: var(--wf-line); }
/* Cabeçalho de caixa com botão à direita (o .wf-spacer só empurra dentro de um flex). */
.wf-box-head--acoes { display: flex; align-items: center; gap: 8px; }
/* Numa <td>, `display:flex` quebra a célula: os chips ficam num div dentro dela. */
.wf-calib-rodadas { display: flex; flex-wrap: wrap; gap: 4px; }
/* Passou = traço firme; falhou = fundo cheio. Sem depender de cor. */
.wf-chip.is-ok { border-color: var(--wf-line); color: var(--wf-ink); }
.wf-chip.is-falhou { background: var(--wf-fill-2); border-color: var(--wf-ink); color: var(--wf-ink); font-weight: 700; }
.wf-calib-falha { font-size: 12px; padding: 2px 0; }
.wf-calib-tool {
    border: 1px solid var(--wf-line-soft);
    border-radius: var(--wf-radius);
    padding: 8px 10px;
    margin-bottom: 8px;
}
.wf-calib-tool pre,
pre.wf-calib-tool {
    margin: 4px 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 11px;
}
.wf-calib-conversa { max-height: 70vh; overflow-y: auto; }
.wf-calib-comparar { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--wf-gap); align-items: end; }
@media (max-width: 1100px) {
    .wf-calib-cols { grid-template-columns: 1fr; }
    .wf-calib-comparar { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ *
 * Login e conta do usuário no topo.                                    *
 * ------------------------------------------------------------------ */
.wf-login { max-width: 360px; margin: 12vh auto 0; padding: 0 16px; }
.wf-login .wf-input { color: var(--wf-ink); }
.wf-login .wf-btn { cursor: pointer; align-self: flex-start; }
.wf-conta { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; }
.wf-conta form { margin: 0; }

/* =================================================================== *
 * Ganchos para os temas (css/temas/*.css). Antes eram estilos embutidos *
 * no template, que nenhum tema conseguia sobrescrever.                  *
 * =================================================================== */

/* Conversa que precisa de humano: a faixa vermelha ganha da faixa da conversa aberta. */
.wf-conv.wf-conv--humano { border-left: 3px solid #c0392b; }
.wf-badge.wf-badge--alerta { background: #c0392b; border-color: #c0392b; color: #fff; margin-top: 4px; }
.wf-flash.wf-flash--humano { margin: 0 0 10px; background: #fdecea; border: 1px solid #c0392b; color: #902020; }
/* Inicial do cliente no avatar: o wireframe mostra só o círculo, o tema decide se mostra a letra. */
.wf-avatar-box::after { content: none; }

/* Há quanto tempo o pedido está no quadro; atrasado = cozinha passou do tempo de preparo. */
.wf-order-tempo { font-size: 11px; color: var(--wf-line); margin-left: auto; margin-right: 8px; }
.wf-order-tempo.is-atrasado { color: #c0392b; font-weight: 700; }

/* ----- Configurações → Aparência ----- */
.wf-tema-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.wf-tema-opt {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--wf-line-soft);
    border-radius: var(--wf-radius);
    cursor: pointer;
}
.wf-tema-opt:has(.wf-tema-radio:checked) { border: 2px solid var(--wf-ink); padding: 9px; }
.wf-tema-opt:has(.wf-tema-radio:focus-visible) { outline: 2px solid var(--wf-ink); outline-offset: 2px; }
.wf-tema-amostra {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    height: 36px;
    border: 1px solid var(--wf-line-soft);
    border-radius: var(--wf-radius);
    overflow: hidden;
}
.wf-tema-amostra i { display: block; }
.wf-tema-nome { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.wf-tema-opt .wf-help { margin: 0; }