/* Visual Up CRM · camada de PAGINA da pele Prumo (v2).

   Estiliza tudo o que os templates de pagina usam dentro de {% block corpo %} e
   {% block acoes %}: metricas, paineis, quadro/kanban, tabelas, selos, avisos,
   barras, graficos, abas, formularios, dialogos e os ecras de /definicoes.
   Nao mexe na casca (vu-app, vu-lado*, vu-cabeca*, vu-corpo, vu-palco, vu-tema,
   .dots) nem no login/erro: isso e casca.css, de outro agente.

   Regra do ficheiro inteiro: só var(--token) do design system Prumo
   (app/static/prumo/tokens.css). Zero hex, zero rgb()/rgba(), zero
   font-family fora de var(--font-core)/var(--font-numeric), zero degrau cru
   da rampa (--slate-*, --bone-*, --stone-*, --act-*) fora da ponte abaixo e
   da excecao documentada da placa do QR. O tema escuro sai de graca: como só
   tokens semanticos sao usados, [data-theme="dark"] em tokens.css já troca
   tudo por baixo sem nenhuma regra aqui precisar de saber que ele existe.

   Mapa de tom, usado em selos, avisos, pontos de estado, celulas de presença
   e a corda dos cartões do quadro. É a mesma tabela em todo o ficheiro:
     quiet/neutro  -> --status-quiet-bg / --status-quiet-fg   (papel, cinza)
     ativo/ação    -> --status-active-bg / --status-active-fg (terracota tenue)
     bom           -> --status-good-bg / --status-good-fg     (branco + anel,
                      porque bg branco sobre um cartão quase branco precisa de
                      contorno para se ler)
     mau/atenção   -> --status-attention-bg / --status-attention-fg (slate sólido)
   Nunca vermelho, âmbar ou verde: a leitura de bom/mau vem do tom, não da cor. */

/* ===================================================== ponte de variaveis */
/* Os templates de pagina (app/templates/*.html) sao partilhados com o v1 e
   trazem var(--vu-*) e var(--p-*) soltas no style="" inline. Esta pagina nao
   carrega tokens.css do v1, por isso a ponte abaixo resolve essas variaveis
   para os tokens Prumo equivalentes. Fica em :root e [data-theme] para seguir
   o tema. Lista feita por grep a app/templates/*.html, nao por adivinhação. */
:root,
[data-theme] {
    /* Texto quieto que passa 4.5:1 também sobre --surface-sunken e no hover
       das linhas: --text-muted sozinho fica em 4.29:1 sobre --bone-200. */
    --pr-quieto: color-mix(in srgb, var(--text-muted) 70%, var(--text-strong));
    --vu-tinta: var(--text-strong);
    --vu-tinta-2: var(--text-body);
    --vu-tinta-3: var(--text-muted);
    --vu-papel: var(--surface-card);
    --vu-linha-forte: var(--line-strong);
    --vu-linha-peso: 2px;                 /* espessura, nao cor: fica literal */
    --vu-foco: var(--action-focus);

    --vu-display: var(--font-core);       /* Satoshi para tudo, sem familia de titulo à parte */
    --vu-corpo: var(--font-core);
    --vu-tecnica: var(--font-numeric);    /* Satoshi tabular no lugar do Fragment Mono */

    /* Escala do v1 (base 1.25) mapeada para o degrau Prumo mais próximo em px. */
    --vu-fs-xs: var(--fs-caption);        /* 12px = 12px */
    --vu-fs-sm: var(--fs-body);           /* 14px = 14px */
    --vu-fs-base: var(--fs-body-lg);      /* 16px = 16px */
    --vu-fs-md: var(--fs-h3);             /* 20px = 20px */
    --vu-fs-lg: var(--fs-h2);             /* 25px ~ 24px */
    --vu-fs-xl: var(--fs-h1);             /* 31.25px ~ 32px */

    --vu-lh-corpo: var(--lh-body);

    --p-anel: var(--line-hairline);       /* o "anel" de 1px vira a linha fina do sistema */
    --p-raio-s: var(--radius-sm);
}

/* ============================================================ utilitarios */

.dir { text-align: right; }
.vu-espaco { margin-top: var(--space-4); }
.vu-linha-topo { border-top: 1px solid var(--line-hairline); }
.vu-entre { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.vu-etiqueta-campo {
    display: block;
    font: var(--type-overline);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--space-2);
}
.vu-prosa { max-width: 68ch; text-wrap: pretty; }
.vu-so-leitor {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.vu-vazio {
    padding: var(--space-8) var(--space-5);
    text-align: center;
    color: var(--pr-quieto);
    font: var(--type-body);
}
.vu-legenda { font: var(--type-caption); color: var(--text-muted); margin: var(--space-3) 0 0; }

/* Grelha de layout de pagina (dois paineis lado a lado no dashboard e afins). */
.vu-grid { display: grid; gap: var(--grid-gap); }
.vu-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.vu-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.vu-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

/* Sem isto, uma tabela larga estica o painel e é a página que rola de lado. */
.vu-corpo > *, .vu-grid > * { min-width: 0; }

/* ---------------------------------------------------------------- botões */
/* Button.tsx: pilula, preenchimento terracota so no primario, 44px = md. */

.vu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 20px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font: var(--fw-medium) var(--fs-body)/1 var(--font-core);
    letter-spacing: var(--ls-body);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-hover), transform var(--dur-instant) var(--ease-out);
}

.vu-btn:active { transform: scale(var(--press-scale)); }
.vu-btn[disabled], .vu-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.vu-btn--primario { background: var(--action-fill); color: var(--action-fg); }
.vu-btn--primario:hover { background: var(--action-fill-hover); }

.vu-btn--secundario { background: var(--surface-card-raised); color: var(--text-strong); }
.vu-btn--secundario:hover { background: var(--surface-hover-light); }

/* O anel visivel em repouso diz que aquilo e um alvo, mesmo sem preenchimento. */
.vu-btn--fantasma { background: transparent; color: var(--text-strong); border-color: var(--line-strong); }
.vu-btn--fantasma:hover { background: var(--surface-hover-bare); }

.vu-btn--escuro { background: var(--surface-invert); color: var(--text-on-dark); }
.vu-btn--escuro:hover { background: var(--surface-hover-invert); }

/* O botao a trabalhar: o JS do base.html poe esta classe no segundo envio. */
.vu-btn--ocupado {
    pointer-events: none;
    color: transparent !important;
    position: relative;
}
.vu-btn--ocupado::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: var(--radius-pill);
    border: 2px solid currentColor;
    border-top-color: transparent;
    color: var(--action-fg);
    animation: prumo-spin 700ms linear infinite;
}
.vu-btn--secundario.vu-btn--ocupado::after,
.vu-btn--fantasma.vu-btn--ocupado::after { color: var(--text-strong); }
.vu-btn--escuro.vu-btn--ocupado::after { color: var(--text-on-dark); }
@media (prefers-reduced-motion: reduce) {
    .vu-btn--ocupado::after { animation: none; border-top-color: currentColor; opacity: .5; }
}

/* --------------------------------------------------------------- métricas */
/* Card.tsx tone="default": papel, raio generoso, sem borda, sem sombra. */

/* 230px e nao menos: abaixo disso o numeral em matriz de pontos (.dots) do
   valor em euros nao cabe na largura do cartao. */
.vu-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--grid-gap); }
.vu-metricas--densa { grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: var(--space-4); }
.vu-metricas--densa .vu-metrica { padding: var(--space-4); }
.vu-metricas--densa .vu-metrica__valor { font-size: var(--fs-h3); }

.vu-metrica {
    position: relative;
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    padding: var(--card-pad);
    transition: var(--transition-surface);
    /* Sem overflow:hidden aqui: o numeral em matriz de pontos (.dots) tem
       largura fixa por dígito e não encolhe como texto. Cortar o cartão
       cortava o valor em euros, que é pior do que deixar a luz do cartão
       destaque (abaixo) escapar meio pixel. */
}
.vu-metrica:hover { background: var(--surface-card-raised); }

.vu-metrica__rotulo {
    display: flex; align-items: center; gap: var(--space-2);
    font: var(--type-overline);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--space-3);
}
.vu-metrica__rotulo::before {
    content: "";
    flex: none;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--status-quiet-fg);
}
.vu-metrica--acao .vu-metrica__rotulo::before { background: var(--status-active-fg); }
.vu-metrica--bom .vu-metrica__rotulo::before {
    background: var(--status-good-bg);
    box-shadow: inset 0 0 0 1px var(--status-good-fg);
}
.vu-metrica--mau .vu-metrica__rotulo::before { background: var(--status-attention-bg); }

/* O numero e a peca principal: Satoshi 800 nao existe no sistema, fica medium
   grande e tabular. `nowrap` porque dinheiro partido ao meio e pior do que um
   cartao sozinho na fila de baixo (a mesma regra do v1, agora sem o clamp). */
.vu-metrica__valor {
    font: var(--fw-medium) var(--fs-h1)/1.05 var(--font-core);
    letter-spacing: var(--ls-heading);
    color: var(--text-strong);
    margin: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.vu-metrica__nota { margin: var(--space-3) 0 0; font: var(--type-caption); color: var(--text-muted); text-wrap: pretty; }
.vu-metrica__nota a { display: inline-block; padding: var(--space-1) 0; color: color-mix(in srgb, var(--text-link) 80%, var(--text-strong)); }
.vu-metrica__nota a:hover { color: var(--text-link-hover); }

/* O cartao-ancora: um por ecra, Slate solido com o texto invertido. O brilho
   do canto e que precisa de overflow:hidden, nao o cartao inteiro. */
.vu-metrica--destaque { background: var(--surface-invert); overflow: hidden; }
/* Sem brilho: a âncora é a inversão de tom. A Linha não é ornamento. */
.vu-metrica--destaque .vu-metrica__valor,
.vu-metrica--destaque .vu-metrica__rotulo { color: var(--text-on-dark); }
.vu-metrica--destaque .vu-metrica__rotulo::before { background: var(--action-on-dark); }
.vu-metrica--destaque .vu-metrica__nota { color: color-mix(in srgb, var(--text-on-dark) 68%, transparent); }
.vu-metrica--destaque .vu-metrica__nota a { color: var(--text-on-dark); }
.vu-metrica--destaque:hover { background: var(--surface-hover-invert); }

/* Uma caixa de 13px falha no telemóvel: 24px é o alvo do sistema. */
.vu-form input[type="checkbox"] { width: 24px; height: 24px; min-height: 24px; accent-color: var(--action-fill); }

/* ---------------------------------------------------------------- painéis */

.vu-painel { background: var(--surface-card); border-radius: var(--radius-xl); overflow: hidden; }

.vu-painel__topo {
    padding: var(--space-5) var(--card-pad);
    border-bottom: 1px solid var(--line-hairline);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-5); flex-wrap: wrap;
}
.vu-painel__titulo { font: var(--type-h3); letter-spacing: var(--ls-heading); margin: 0; color: var(--text-strong); }
.vu-painel__sub { margin: var(--space-1) 0 0; font: var(--type-caption); color: var(--text-muted); text-wrap: pretty; }
.vu-painel__corpo { padding: var(--card-pad); }
.vu-painel__corpo--liso { padding: 0; }

/* O painel onde se decide (aprovar orçamento): a mesma superfície de "resumo
   gerado" do InsightCard, papel em gradiente em vez de anel âmbar. */
.vu-decisao { background: var(--gradient-accent-soft); }

/* ----------------------------------------------------------------- quadro */

.vu-quadro {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: var(--space-4);
    overflow-x: auto;
    padding: 2px 2px var(--space-5);
    contain: layout; /* mesma peca do vu-quadro-envolve, ver comentario la */
}

/* A coluna e o degrau mais fundo: sunken, como manda o cartão-ficha. */
.vu-coluna {
    background: var(--surface-sunken);
    border-radius: var(--radius-xl);
    display: flex; flex-direction: column;
    min-height: 200px;
    overflow: hidden;
}
.vu-coluna__topo {
    padding: var(--space-3) var(--space-4);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.vu-coluna__nome { display: flex; align-items: center; gap: var(--space-2); font: var(--fw-medium) var(--fs-body)/1.3 var(--font-core); color: var(--text-strong); }
.vu-coluna__nome::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--status-quiet-fg); }
.vu-coluna--acao .vu-coluna__nome::before { background: var(--status-active-fg); }
.vu-coluna--bom .vu-coluna__nome::before { background: var(--status-good-bg); box-shadow: inset 0 0 0 1px var(--status-good-fg); }
.vu-coluna--mau .vu-coluna__nome::before { background: var(--status-attention-bg); }

.vu-coluna__conta {
    font: var(--fw-medium) var(--fs-caption)/1 var(--font-core);
    color: var(--text-body);
    background: var(--surface-chip);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
}
.vu-coluna__soma {
    font: var(--type-caption); color: var(--text-body);
    padding: var(--space-2) var(--space-4);
    background: var(--surface-chip);
}
.vu-coluna__pilha {
    padding: var(--space-3);
    display: flex; flex-direction: column; gap: var(--space-3);
    overflow-y: auto; overscroll-behavior: contain;
    max-height: 68vh;
}

/* O cartao do lead fica um degrau acima da coluna sunken: card normal. */
.vu-lead {
    position: relative;
    background: var(--surface-card);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-3) var(--space-3) 18px;
    transition: var(--transition-surface);
    /* 267 fichas de uma vez: guarda a altura real para a barra nao saltar. */
    content-visibility: auto;
    contain-intrinsic-size: auto 150px;
}
.vu-lead::before {
    content: "";
    position: absolute;
    left: 8px; top: 13px; bottom: 13px;
    width: 2px;
    border-radius: 2px;
    background: var(--status-quiet-fg);
}
.vu-lead--acao::before { background: var(--status-active-fg); }
.vu-lead--bom::before { background: var(--status-good-bg); box-shadow: inset 0 0 0 1px var(--status-good-fg); }
.vu-lead--mau::before { background: var(--status-attention-bg); }
.vu-lead:hover { background: var(--surface-card-raised); }

.vu-lead__origem {
    display: inline-block;
    font: var(--type-overline); letter-spacing: var(--ls-caps); text-transform: uppercase;
    color: var(--pr-quieto);
    background: var(--surface-chip-quiet);
    border-radius: var(--radius-pill);
    padding: 3px 9px;
    margin-bottom: var(--space-2);
}
.vu-lead__nome { font: var(--fw-medium) var(--fs-body)/1.3 var(--font-core); color: var(--text-strong); margin: 0 0 var(--space-1); }
.vu-lead__servico { font: var(--type-caption); color: var(--text-body); margin: 0 0 var(--space-2); }
.vu-lead__contacto { font: var(--type-caption); color: var(--text-muted); margin: 0; overflow-wrap: anywhere; }
.vu-lead__pe {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    margin-top: var(--space-3); padding-top: var(--space-3);
    border-top: 1px solid var(--line-hairline);
}
.vu-lead__idade { font: var(--type-caption); color: var(--text-muted); }
.vu-lead__idade--parado { color: color-mix(in srgb, var(--status-active-fg) 60%, var(--text-strong)); font-weight: var(--fw-medium); }
.vu-lead__decidir { display: flex; width: 100%; margin-top: var(--space-3); min-height: 38px; font-size: var(--fs-small); }

/* ----------------------------------------------------------------- tabela */
/* DataTable: cabecalho overline, separador em fio, sem zebra, tom no hover. */

/* contain:layout e a peca que falta: sem ela, uma tabela larga la dentro
   ainda empurra o document.documentElement.scrollWidth e a pagina inteira
   ganha scroll lateral, mesmo com overflow-x:auto a funcionar (medido ao
   vivo: o wrapper ficava com a largura certa e scrollWidth interno certo,
   mas a pagina rolava 144px na mesma ate esta linha entrar). */
.vu-quadro-envolve { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; contain: layout; }

.vu-lista { width: 100%; border-collapse: collapse; font: var(--type-body); }
.vu-lista th {
    font: var(--type-overline);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}
.vu-lista td {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line-hairline);
    color: var(--text-body);
    vertical-align: top;
}
.vu-lista tr:last-child td { border-bottom: 0; }
.vu-lista tbody tr { transition: var(--transition-hover); }
.vu-lista tbody tr:hover td { background: var(--surface-hover-bare); }

.vu-lista .num { text-align: right; white-space: nowrap; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.vu-lista .cod { font: var(--type-caption); color: var(--pr-quieto); white-space: nowrap; }
.vu-lista .principal { color: var(--text-strong); font-weight: var(--fw-medium); }

/* :not(.vu-btn): o botão PDF da lista de propostas é um <a> e ficava espremido. */
.vu-lista a:not(.vu-btn), .vu-lead__nome a {
    display: inline-block;
    padding: var(--space-1) 0;
    /* DataTable: a célula principal é tinta forte. Terracota em cada nome da
       lista era ornamento; a Linha só acende no hover e no foco. */
    color: var(--text-strong);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.vu-lista a:not(.vu-btn):hover, .vu-lead__nome a:hover { color: var(--text-link-hover); text-decoration-color: currentColor; }

/* --------------------------------------------------------------- selos */
/* Badge.tsx: pilula, tom por estado, nunca cor de semaforo. */

.vu-selo {
    display: inline-flex; align-items: center; gap: 6px;
    font: var(--fw-medium) var(--fs-caption)/1 var(--font-core);
    padding: 0 11px;
    min-height: 26px;
    border-radius: var(--radius-pill);
    color: var(--pr-quieto);
    background: var(--status-quiet-bg);
    white-space: nowrap;
}
.vu-selo--acao { color: color-mix(in srgb, var(--status-active-fg) 60%, var(--text-strong)); background: var(--status-active-bg); }
.vu-selo--bom { color: var(--status-good-fg); background: var(--status-good-bg); box-shadow: inset 0 0 0 1px var(--line-hairline); }
.vu-selo--mau { color: var(--status-attention-fg); background: var(--status-attention-bg); }

/* ---------------------------------------------------------------- barras */

.vu-barra { height: 8px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.vu-barra__cheio { height: 100%; border-radius: var(--radius-pill); background: var(--viz-bar); }
.vu-barra__cheio--bom { background: var(--viz-step-4); }
.vu-barra__cheio--mau { background: var(--viz-step-2); }

.vu-progresso { display: flex; align-items: center; gap: var(--space-3); }
.vu-progresso .vu-barra { flex: 1; }
.vu-progresso__valor {
    font: var(--type-caption);
    color: var(--pr-quieto);
    min-width: 38px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------- gráfico de colunas */
/* Uma série em destaque (lucro, já era o âmbar no v1), as outras em degraus
   de pedra/basalto: é a mesma regra do SegmentedBar (viz-step-*). */

.vu-grafico { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-3); align-items: end; height: 210px; padding-top: var(--space-5); }
.vu-grafico__mes { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); height: 100%; justify-content: flex-end; }
.vu-grafico__pilha { display: flex; align-items: flex-end; gap: 3px; height: 100%; width: 100%; justify-content: center; }
.vu-grafico__col { width: 26%; min-height: 3px; border-radius: 4px 4px 0 0; background: var(--viz-step-3); }
.vu-grafico__col--receita { background: var(--viz-step-4); }
.vu-grafico__col--custo { background: var(--viz-step-2); }
.vu-grafico__col--lucro { background: var(--viz-bar); }
.vu-grafico__rot { font: var(--type-caption); color: var(--text-muted); }

.vu-legenda-cores { display: flex; gap: var(--space-5); flex-wrap: wrap; font: var(--type-caption); color: var(--text-body); }
.vu-legenda-cores span { display: inline-flex; align-items: center; gap: 6px; }
.vu-legenda-cores i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.vu-legenda-cores i.acao { background: var(--status-active-fg); }
.vu-legenda-cores i.bom { background: var(--status-good-bg); box-shadow: inset 0 0 0 1px var(--status-good-fg); }
.vu-legenda-cores i.mau { background: var(--status-attention-bg); }
.vu-legenda-cores i.neutro { background: var(--status-quiet-fg); }

/* -------------------------------------------------------------- presenças */

.vu-presencas { width: 100%; border-collapse: collapse; }
.vu-presencas th, .vu-presencas td { padding: var(--space-2); border-bottom: 1px solid var(--line-hairline); text-align: center; }
.vu-presencas th:first-child, .vu-presencas td:first-child { text-align: left; min-width: 180px; }
.vu-presencas th {
    font: var(--type-overline); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted);
}
/* A coluna de hoje e a "coluna corrente": o traço terracota do sistema. */
.vu-presencas th.hoje { color: var(--text-strong); font-weight: var(--fw-medium); box-shadow: inset 0 -2px 0 var(--action-focus); }

.vu-celula {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    min-width: 46px; min-height: 44px;
    border: 0;   /* é um <button>: sem isto ficava a borda do navegador, grossa e preta */
    border-radius: var(--radius-sm);
    background: var(--surface-chip);
    font: var(--type-caption);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-hover);
}
.vu-celula:hover { background: var(--surface-hover-quiet); }
.vu-celula--bom { background: var(--status-good-bg); color: var(--status-good-fg); box-shadow: inset 0 0 0 1px var(--status-good-fg); }
.vu-celula--acao { background: var(--status-active-bg); color: color-mix(in srgb, var(--status-active-fg) 60%, var(--text-strong)); box-shadow: none; }
.vu-celula--mau { background: var(--status-attention-bg); color: var(--status-attention-fg); box-shadow: none; }
.vu-celula small { font-size: 9px; opacity: .8; }

/* ------------------------------------------------------------------ abas */
/* A aba corrente e "selected tab": um dos poucos lugares onde o terracota
   pode preencher fora do botão primário. */

.vu-abas {
    display: inline-flex; gap: var(--space-1);
    padding: 5px;
    background: var(--surface-chip-quiet);
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-5);
    overflow-x: auto;
    align-self: flex-start;
    max-width: 100%;
    contain: layout;
}
.vu-aba {
    padding: 0 18px;
    min-height: 44px;
    display: inline-flex; align-items: center;
    font: var(--fw-medium) var(--fs-body)/1 var(--font-core);
    color: var(--text-body);
    text-decoration: none;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition: var(--transition-hover);
}
.vu-aba:hover { color: var(--text-strong); background: var(--surface-hover-quiet); }
.vu-aba[aria-current="page"] { color: var(--action-fg); background: var(--action-fill); font-weight: var(--fw-medium); }

/* ---------------------------------------------------------------- filtros */

.vu-filtros { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }
.vu-filtros select, .vu-filtros input {
    min-height: 44px;
    padding: 0 var(--space-4);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-strong);
    font: var(--type-body);
    transition: var(--transition-hover);
}
.vu-filtros select:hover, .vu-filtros input:hover { background: var(--surface-hover-light); }

.vu-fatia {
    display: inline-flex;
    align-self: flex-start;
    max-width: 100%;
    padding: 5px;
    gap: var(--space-1);
    background: var(--surface-chip-quiet);
    border-radius: var(--radius-pill);
    overflow-x: auto;
    contain: layout;
}
.vu-fatia a {
    padding: 0 16px;
    min-height: 44px;
    display: inline-flex; align-items: center;
    font: var(--fw-medium) var(--fs-body)/1 var(--font-core);
    color: var(--text-body);
    text-decoration: none;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition: var(--transition-hover);
}
.vu-fatia a:hover { color: var(--text-strong); background: var(--surface-hover-quiet); }
.vu-fatia a[aria-current="page"] { color: var(--action-fg); background: var(--action-fill); }

/* ------------------------------------------------------------- formulário */
/* TextField/Select: pilula sem borda, papel a subir um tom no foco. */

.vu-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.vu-form--largo { grid-template-columns: 1fr; }
.vu-form .todo { grid-column: 1 / -1; }

.vu-form label {
    display: block;
    font: var(--type-label);
    color: var(--text-body);
    margin-bottom: var(--space-2);
}

.vu-form input, .vu-form select, .vu-form textarea {
    width: 100%;
    min-height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-strong);
    font: var(--type-body);
    transition: var(--transition-hover);
}
.vu-form input:hover, .vu-form select:hover, .vu-form textarea:hover { background: var(--surface-hover-light); }
.vu-form input:focus-visible, .vu-form select:focus-visible, .vu-form textarea:focus-visible {
    outline: none;
    background: var(--surface-card-raised);
    box-shadow: var(--focus-ring);
}
.vu-form textarea { min-height: 104px; padding: 14px 18px; border-radius: var(--radius-md); resize: vertical; }

.vu-acoes { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.vu-acoes--fim { justify-content: flex-end; }

/* --------------------------------------------------------------- diálogo */

dialog.vu-modal {
    border: none;
    border-radius: var(--radius-xl);
    padding: 0;
    width: min(680px, calc(100vw - 32px));
    background: var(--surface-card-raised);
    color: var(--text-strong);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
}
/* color-mix sobre o token de superficie invertida: nunca rgba solto. */
dialog.vu-modal::backdrop { background: color-mix(in srgb, var(--surface-invert) 45%, transparent); }

.vu-modal__topo {
    padding: var(--space-5);
    border-bottom: 1px solid var(--line-hairline);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.vu-modal__titulo { font: var(--type-h3); letter-spacing: var(--ls-heading); margin: 0; }
.vu-modal__corpo { padding: var(--space-5); max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; }
.vu-modal__pe {
    padding: var(--space-5);
    border-top: 1px solid var(--line-hairline);
    background: var(--surface-sunken);
    display: flex; justify-content: flex-end; gap: var(--space-3);
}

.vu-fechar {
    background: none;
    border: none;
    border-radius: var(--radius-pill);
    font-size: var(--fs-h4);
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    min-width: 44px; min-height: 44px;
    transition: var(--transition-hover);
}
.vu-fechar:hover { background: var(--surface-hover-bare); color: var(--text-strong); }

/* ----------------------------------------------------------------- aviso */

.vu-aviso {
    position: relative;
    padding: var(--space-3) var(--space-5) var(--space-3) 24px;
    border-radius: var(--radius-sm);
    background: var(--status-active-bg);
    color: var(--text-strong);
    font: var(--type-body);
}
.vu-aviso::before {
    content: "";
    position: absolute;
    left: 9px; top: 12px; bottom: 12px;
    width: 2px;
    border-radius: 2px;
    background: var(--status-active-fg);
}
.vu-aviso--bom { background: var(--status-good-bg); box-shadow: inset 0 0 0 1px var(--line-hairline); }
.vu-aviso--bom::before { background: var(--status-good-fg); }
.vu-aviso--mau { background: var(--status-attention-bg); color: var(--status-attention-fg); }
.vu-aviso--mau::before { background: var(--text-on-dark); }

/* -------------------------------------------------------------- definições */

/* O comando que se cola no terminal: rola de lado, nunca parte a linha. */
.vu-comando {
    margin: var(--space-4) 0 0;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    font: var(--type-caption);
    font-family: var(--font-numeric);
    line-height: 1.7;
    color: var(--text-body);
    overflow-x: auto;
    white-space: pre;
    contain: layout;
}

.vu-ligacao { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
@media (max-width: 720px) { .vu-ligacao { grid-template-columns: 1fr; } }

/* A placa do QR: única superficie da aplicacao que fica sempre clara, nos
   dois temas, porque metade dos telemoveis nao le um QR invertido. Excecao
   documentada: usa o degrau cru --white (nao existe --surface-fixed-light no
   sistema) e, so aqui dentro, --slate-800/--slate-600 crus para o texto e o
   icone continuarem legiveis sobre essa placa sempre branca mesmo no escuro. */
.vu-qr {
    display: grid; place-items: center;
    aspect-ratio: 1;
    padding: 14px;
    border-radius: var(--radius-xl);
    background: var(--white);
    box-shadow: var(--shadow-raised);
    color: var(--slate-800);
}
.vu-qr svg { width: 100%; height: auto; display: block; }
.vu-qr__espera { margin: 0; font: var(--type-caption); color: var(--slate-600); text-align: center; }

.vu-passos { margin: var(--space-3) 0 0; padding-left: 20px; color: var(--text-body); font: var(--type-body); }
.vu-passos li { margin-bottom: var(--space-2); }
.vu-passos strong { color: var(--text-strong); }

.vu-ligado { display: flex; align-items: center; gap: var(--space-5); }
.vu-ligado__marca {
    flex: none;
    display: grid; place-items: center;
    width: 56px; height: 56px;
    border-radius: var(--radius-pill);
    background: var(--status-good-bg);
    color: var(--status-good-fg);
    box-shadow: inset 0 0 0 1px var(--status-good-fg);
}
.vu-ligado__marca svg { width: 28px; height: 28px; }
.vu-ligado__numero { margin: 0; font: var(--type-h3); letter-spacing: var(--ls-heading); color: var(--text-strong); }

/* Lista e nao tabela de proposito (ver CLAUDE.md): a 390px a coluna de
   "Tirar" numa tabela ficava fora do scroll do vu-quadro-envolve. */
.vu-papeis { list-style: none; margin: 0; padding: 0; }
.vu-papeis li { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line-hairline); }
.vu-papeis li:first-child { padding-top: 0; }
.vu-papeis li:last-child { border-bottom: 0; }
.vu-papeis li > .vu-selo { flex: none; min-width: 88px; justify-content: center; text-align: center; }
.vu-papeis__quem { flex: 1; min-width: 0; }
.vu-papeis__numero { margin: 0; font: var(--fw-medium) var(--fs-body)/1.3 var(--font-numeric); color: var(--text-strong); }
.vu-papeis__nome { margin: 2px 0 0; font: var(--type-caption); color: var(--text-muted); }
.vu-papeis form { flex: none; }
.vu-papeis-somar { border-top: 1px solid var(--line-hairline); padding-top: var(--space-4); }

/* Grelha e nao flex-wrap a 480px: uma pilula com flex-basis:100% deixa de se
   ler como pilula. */
@media (max-width: 480px) {
    .vu-papeis li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); }
    .vu-papeis li > .vu-selo { grid-column: 1 / -1; justify-self: start; }
}

/* --------------------------------------------------------------- misc */

/* O numero da fase do roteiro (Fase 1, Fase 2...). */
.vu-cartao__num { font: var(--fw-medium) var(--fs-h2)/1 var(--font-numeric); color: var(--text-muted); }

@media (max-width: 900px) {
    .vu-quadro { grid-auto-columns: minmax(252px, 86vw); }
    .vu-form { grid-template-columns: 1fr; }
    .vu-abas, .vu-fatia { align-self: stretch; }
}