/**
 * Tokens do DESIGN.md, em um só lugar.
 *
 * O DESIGN.md é a fonte canônica dos valores; isto é a tradução dele para CSS.
 * Vive aqui, e não num módulo, porque o app interno tem várias superfícies e
 * token duplicado por arquivo é a armadilha de folha global com nome repetido:
 * a segunda definição vence em silêncio.
 *
 * ⚠️ A página pública do orçamento (`demo/orcamento/demo.module.css`) tem uma
 * cópia local destes valores, porque foi construída antes destes tokens
 * existirem e já passou por revisão de acabamento. Unificar as duas é tarefa
 * própria, com medição no navegador antes e depois — não um ajuste de
 * passagem, porque mexeria num visual já aprovado pelo Eduardo.
 */
:root {
  /* Cores — ver "The One Action Blue Rule" e "The Green-Means-Done Rule" */
  --cloud-bg: #f8fafc;
  --surface: #ffffff;
  --hairline: #e3e8ee;
  --hairline-strong: #c9d2dc;
  --ink: #101828;
  --muted: #526071;
  --action: #1d4ed8;
  --action-deep: #1a43bf;
  --action-wash: #eef3fe;
  --done: #15803d;
  --done-wash: #ecf8f0;
  --selection: #d7e3fd;

  /* Raios, escalonados por papel */
  --r-focus: 6px;
  --r-control: 8px;
  --r-field: 10px;
  --r-button: 12px;
  --r-card: 14px;
  --r-pill: 999px;
  /* Marcador redondo (estado, selo, chip, rádio, checkbox, avatar): não quadra com o tema */
  --r-marcador: 999px;

  /* Ritmo */
  --s-xs: 6px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 18px;

  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* O DESIGN.md nomeia o `accent-color` como um dos usos do azul de ação.
     Uma linha aqui faz checkbox, radio e barra de progresso nativos
     obedecerem, em vez de virem no azul do sistema operacional. */
  accent-color: var(--action);
}

* {
  box-sizing: border-box;
}

/* 19/10/2026 (iPhone do Eduardo): o Safari do iOS dá aos campos de data e horário uma
   largura intrínseca mínima que ignora width: 100%, e eles passavam da borda do cartão.
   Sem a aparência nativa, sem largura mínima e nunca mais largos que o pai; a altura
   de 44 px fica garantida aqui porque o campo perde a altura nativa. */
input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
  display: block;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
}
input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"])::-webkit-date-and-time-value {
  text-align: left;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--cloud-bg);
  color: var(--ink);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--selection);
}

/* The Tabular Money Rule: todo dinheiro, documento, data e telefone. */
.num {
  font-variant-numeric: tabular-nums;
}

/* Foco visível em qualquer controle, conforme o DESIGN.md. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  border-radius: var(--r-focus);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Direção interna aprovada por Eduardo em 07/10/2026. Não alcança rotas públicas. */
@font-face{font-family:ManropeApp;src:url('/fontes/manrope-latin.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:SpaceGroteskApp;src:url('/fontes/space-grotesk-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:SpaceGroteskApp;src:url('/fontes/space-grotesk-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:SpaceGroteskApp;src:url('/fontes/space-grotesk-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:SpaceGroteskApp;src:url('/fontes/space-grotesk-latin-700.woff2') format('woff2');font-weight:700 800;font-style:normal;font-display:swap}
.atmosfera{
  --cloud-bg:#efeff1;--surface:#fbfcfd;--hairline:#d4d7de;--hairline-strong:#9da8b5;
  --ink:#242830;--muted:#5f6470;--action:#343f4c;--action-deep:#24303d;--action-wash:#e2e8ef;
  --done:#315b47;--done-wash:#dfede4;--selection:#c4d3df;--line:#d4d7de;
  --r-card:16px;--r-button:12px;--r-field:10px;--fonte:ManropeApp,system-ui,sans-serif;
  /* PT-57: degradês iguais aos de atmosfera.css do protótipo, com o radial. Valores conferidos por src/lib/tokens-atmosfera.test.ts. */
  --mint:linear-gradient(110deg,#b9d9cd 0%,#deeee4 47%,#a9c9bb 100%);
  --peach:radial-gradient(ellipse at 90% 90%,#d6b5ca 0%,transparent 62%),linear-gradient(105deg,#eed1ba,#e5b8ac);
  --lilac:radial-gradient(ellipse at 85% 72%,#b8aacb 0%,transparent 65%),linear-gradient(105deg,#eadbe6,#cfb9d5);
  --sky:radial-gradient(ellipse at 88% 80%,#afbfd6 0%,transparent 65%),linear-gradient(110deg,#dbe6f0,#c4d0e4);
  --mint-tinta:#263e35;--mint-solido:#cfe5da;--peach-tinta:#4d333c;--peach-solido:#f0d6c6;
  --lilac-tinta:#42344f;--lilac-solido:#e2d6e8;--sky-tinta:#384c65;--sky-solido:#d8e2ee;
  /* Papéis: agenda e visita em menta, orçamento em pêssego, retomada e retorno em lilás, entrada e novo em céu, recebido em menta. */
  --agenda:var(--mint);--agenda-tinta:var(--mint-tinta);--agenda-solido:var(--mint-solido);
  --orcamento:var(--peach);--orcamento-tinta:var(--peach-tinta);--orcamento-solido:var(--peach-solido);
  --retomada:var(--lilac);--retomada-tinta:var(--lilac-tinta);--retomada-solido:var(--lilac-solido);
  --entrada:var(--sky);--entrada-tinta:var(--sky-tinta);--entrada-solido:var(--sky-solido);
  --recebido:var(--mint);--recebido-tinta:var(--mint-tinta);--recebido-solido:var(--mint-solido);
  /* Space Grotesk do protótipo, versionada em public/fontes com a OFL (PT-64). */
  --fonte-display:SpaceGroteskApp,"Space Grotesk",ManropeApp,Manrope,sans-serif;
  /* PT-90: escala de títulos, um tamanho por nível. Título de tela (h1) e subtítulo de seção (h2 de cartão). */
  --titulo-1:clamp(28px,3vw,40px);--titulo-2:21px;
  min-height:100dvh;max-width:none!important;margin:0;padding:0 0 24px;background:var(--cloud-bg);color:var(--ink);font-family:var(--fonte);accent-color:var(--action);
}
.pular{position:fixed;top:10px;left:20px;z-index:300;transform:translateY(-160%);padding:12px 18px;border-radius:10px;background:var(--action);color:white;text-decoration:none}.pular:focus-visible{transform:none}
.barra{position:fixed;top:16px;left:28px;right:28px;z-index:30;min-height:76px;padding:10px 18px;display:flex;align-items:center;gap:24px;border-radius:16px;background:rgba(251,252,253,.91);backdrop-filter:blur(18px);box-shadow:0 10px 28px -18px rgba(32,43,56,.3)}
.marca{display:flex;align-items:center;flex:none;min-height:48px;line-height:0;color:var(--fdm-header-ink,#fff);text-decoration:none}.logo{width:154px;height:auto;max-height:50px;object-fit:contain}.monograma{display:none}.navegacao{display:flex;align-items:center;gap:6px;margin-left:auto}.destino{display:flex;align-items:center;gap:8px;min-height:48px;padding:10px 14px;border-radius:11px;color:var(--muted);font-size:14px;font-weight:650;text-decoration:none;white-space:nowrap;cursor:pointer}.destino svg{flex:none}.destino:hover,.mais[open]>.destino{background:#e9edf1;color:var(--ink)}.destino[aria-current=page]{background:var(--action);color:white}.conta{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:#e3e9e8;color:var(--ink);text-decoration:none;font-size:13px;font-weight:800}.recolher{display:grid;place-items:center;width:44px;height:44px;flex:none;background:transparent;border:0;color:var(--muted);border-radius:10px;cursor:pointer}.recolher:hover{background:#e9edf1}.mais{position:relative}.mais>summary{list-style:none}.mais>summary::-webkit-details-marker{display:none}.menuMais{position:absolute;right:0;top:calc(100% + 16px);width:360px;max-height:min(70vh,660px);overflow:auto;border-radius:16px;background:var(--surface);box-shadow:0 14px 46px -16px rgba(20,30,45,.35);padding:12px;scrollbar-color:#b6c1cd transparent}.menuTitulo{padding:14px 14px 18px;border-bottom:1px solid var(--hairline);margin-bottom:8px}.menuTitulo strong{font-size:17px;letter-spacing:-.02em}.menuTitulo p{font-size:13px;color:var(--muted);margin:5px 0 0}.menuMais nav{display:grid;gap:3px}.menuMais nav a{display:grid;gap:4px;padding:12px 14px;min-height:52px;border-radius:10px;text-decoration:none;color:var(--ink)}.menuMais nav a:hover,.menuMais nav a[aria-current=page]{background:var(--action-wash)}.menuMais nav strong{font-size:14px}.menuMais nav span{font-size:13px;line-height:1.5;color:var(--muted)}
/* PT-137 (B2): o nome do negócio mora na barra; a linha de contexto abaixo dela saiu. */
.nomeNegocio{flex:0 1 auto;min-width:0;display:block;box-sizing:border-box;min-height:44px;padding-block:12px;max-width:240px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink);font-size:14px;line-height:20px;font-weight:500;text-decoration:none;border-radius:8px}a.nomeNegocio:hover{color:var(--action-deep)}
.espaco{padding:112px 40px 28px;max-width:1440px;margin:auto;transition:padding-left 220ms cubic-bezier(.16,1,.3,1)}.contexto{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1280px;margin:0 auto 32px;padding:0 0 22px;border-bottom:1px solid #dcdee4}.contexto>div{display:flex;gap:12px;align-items:baseline;min-width:0;flex-wrap:wrap}.contexto strong{font-size:14px;font-weight:650}.contexto span{font-size:13px;color:var(--muted)}.plano{white-space:nowrap}.conteudo{max-width:960px;margin:0 auto;min-width:0;outline:none;scroll-margin-top:112px}.conteudo:has([data-quadro]),.conteudo:has([class*=gradeSemana]),.conteudo:has([class*=mesAgenda]),.conteudo:has([class*=listasPainel]){max-width:1280px}.conteudo h1{font-family:var(--fonte-display);font-size:var(--titulo-1);line-height:1.2;font-weight:800;letter-spacing:-.035em;margin:8px 0 28px;text-wrap:balance}.conteudo h2{font-family:var(--fonte);letter-spacing:-.025em;text-wrap:balance}.conteudo>p{max-width:75ch}.conteudo a{text-underline-offset:4px}.conteudo a:not([class]){color:var(--ink);font-weight:650;text-decoration:none}.conteudo a:not([class]):hover{color:var(--action-deep)}.conteudo :is(input,textarea){caret-color:var(--action)}.atmosfera ::selection{background:var(--selection);color:var(--ink)}.atmosfera :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #65768d;outline-offset:3px}.atmosfera [id]{scroll-margin-top:112px}
@media(min-width:960px) and (max-width:1180px){.barra{gap:10px;padding-inline:14px;left:18px;right:18px}.logo{width:128px}.destino{padding:10px 11px;font-size:13px}.recolher{width:36px}.conta{width:44px;height:44px}.navegacao{gap:3px}.espaco{padding-inline:28px}}
@media(max-width:959px){.atmosfera{padding-bottom:calc(94px + env(safe-area-inset-bottom));--titulo-1:30px;--titulo-2:19px}.barra{position:static;min-height:56px;padding:8px 16px;border-radius:0;box-shadow:none;backdrop-filter:none;background:transparent;gap:10px}.marca{min-height:44px}.logo{width:92px;height:auto}.nomeNegocio{margin-right:auto;font-size:13px;line-height:18px;padding-block:13px;max-width:none}.conta{width:44px;height:44px}.recolher{display:none}.navegacao{position:fixed;bottom:calc(10px + env(safe-area-inset-bottom));left:8px;right:8px;min-height:68px;z-index:30;display:flex;justify-content:space-between;gap:0;padding:7px 2px;border-radius:16px;background:rgba(251,252,253,.95);backdrop-filter:blur(18px);box-shadow:0 6px 24px -8px rgba(32,43,56,.25)}.destino{flex:1 0 auto;min-width:44px;min-height:52px;flex-direction:column;justify-content:center;gap:4px;font-size:13px;line-height:1.2;padding:7px 4px;border-radius:10px}.destino svg{width:21px;height:21px}.mais{flex:1 0 auto;min-width:44px;display:flex;position:static}.mais>.destino{height:100%;width:100%}.menuMais{position:fixed;left:16px;right:16px;bottom:calc(94px + env(safe-area-inset-bottom));top:auto;width:auto;max-height:calc(100dvh - 180px)}.espaco{padding:8px 20px 16px}.contexto{margin-bottom:24px;padding-bottom:18px;align-items:flex-start}.contexto>div{gap:4px;display:grid}.contexto strong{font-size:13px}.contexto span{font-size:13px}.conteudo{max-width:720px;scroll-margin-top:16px}.conteudo h1{margin:8px 0 24px}.atmosfera [id]{scroll-margin-top:18px}}
@media(max-width:370px){.navegacao{left:0;right:0;bottom:0;padding:7px 0 calc(7px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0}.destino{font-size:13px;padding-inline:3px;letter-spacing:-.02em}.menuMais{bottom:calc(84px + env(safe-area-inset-bottom))}.espaco{padding-inline:16px}.barra{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){.espaco{transition:none}.atmosfera *{scroll-behavior:auto}}
@media(prefers-reduced-transparency:reduce){.barra,.navegacao{background:var(--surface);backdrop-filter:none}}
/* PT-57 E: TemaAtmosfera, a Atmosfera fora do shell (cadastro). */
.tema{padding-top:24px}.tema h1{font-family:var(--fonte-display);letter-spacing:-.035em}.tema a:not([class]){color:var(--ink);font-weight:650;text-decoration:none}.tema a:not([class]):hover{color:var(--action-deep)}.tema :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--fdm-focus, #65768d);outline-offset:3px}
/* PT-64 (UX-04): estado do módulo no Mais, em selo, e o atalho para ligar. */
.estadoModulo{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-style:normal;font-size:13px;font-weight:650;vertical-align:1px;background:var(--done-wash);color:var(--done)}.estadoModulo[data-estado=desligado]{background:#e9edf1;color:var(--muted)}.atalhoModulo{font-weight:700;color:var(--ink)}
/* Temas claro e escuro, PR B (18/10/2026): o shell segue os tokens de temas.module.css. Só com data-aparencia,
   que fica no mesmo elemento de .atmosfera; o TemaAtmosfera do cadastro não tem o atributo e não muda.
   Cabeçalho petróleo no claro e grafite translúcido no escuro, marca branca nos dois; caixas de 2 px; avatar é marcador e continua redondo. */
.atmosfera[data-aparencia] ::selection{background:var(--selection);color:var(--ink)}
.atmosfera[data-aparencia] :is(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--fdm-focus);outline-offset:3px}
.atmosfera[data-aparencia] .pular{border-radius:var(--r-control);background:var(--action);color:var(--on-action)}
.atmosfera[data-aparencia] .barra{border-radius:var(--r-card);background:var(--fdm-header-glass);color:var(--fdm-header-ink);box-shadow:none}
.atmosfera[data-aparencia] .barra :is(a,button,summary):focus-visible{outline-color:var(--fdm-focus-on-header)}
.atmosfera[data-aparencia] .nomeNegocio{color:var(--fdm-header-ink);border-radius:var(--r-control)}
.atmosfera[data-aparencia] a.nomeNegocio:hover{color:var(--fdm-header-ink)}
.atmosfera[data-aparencia] .destino{border-radius:var(--r-control);color:var(--fdm-header-ink)}
.atmosfera[data-aparencia] .destino:hover,.atmosfera[data-aparencia] .mais[open]>.destino{background:transparent;color:var(--fdm-header-ink);box-shadow:inset 0 0 0 1px var(--fdm-line-on-highlight)}
.atmosfera[data-aparencia] .destino[aria-current=page]{background:var(--fdm-action-on-highlight);color:var(--fdm-on-action-on-highlight);box-shadow:none}
.atmosfera[data-aparencia] .conta{border-radius:var(--r-marcador);background:var(--fdm-action-on-highlight);color:var(--fdm-on-action-on-highlight)}
.atmosfera[data-aparencia] .recolher{border-radius:var(--r-control);color:var(--fdm-header-ink)}
.atmosfera[data-aparencia] .recolher:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--fdm-line-on-highlight)}
.atmosfera[data-aparencia] .menuMais{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface);color:var(--ink);scrollbar-color:var(--hairline-strong) transparent}
.atmosfera[data-aparencia] .menuMais :is(a,button,input,summary):focus-visible{outline-color:var(--fdm-focus)}
.atmosfera[data-aparencia] .menuMais nav a{border-radius:var(--r-control)}
.atmosfera[data-aparencia] .estadoModulo{border-radius:var(--r-control);background:var(--done-wash);color:var(--done)}
.atmosfera[data-aparencia] .estadoModulo[data-estado=desligado]{background:var(--surface-2);color:var(--muted)}
.atmosfera[data-aparencia] .contexto{border-bottom-color:var(--hairline)}
@media(max-width:959px){
  .atmosfera[data-aparencia] .barra{border-radius:0}
  .atmosfera[data-aparencia] .navegacao{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface)}
  .atmosfera[data-aparencia] .navegacao .destino{color:var(--muted)}
  .atmosfera[data-aparencia] .navegacao .destino:hover,.atmosfera[data-aparencia] .navegacao .mais[open]>.destino{background:var(--surface-2);color:var(--ink);box-shadow:none}
  .atmosfera[data-aparencia] .navegacao .destino[aria-current=page]{background:var(--action);color:var(--on-action)}
  .atmosfera[data-aparencia] .navegacao :is(a,button,summary):focus-visible{outline-color:var(--fdm-focus)}
}
@media(max-width:370px){.atmosfera[data-aparencia] .navegacao{border-radius:var(--r-card) var(--r-card) 0 0}}
@media(prefers-reduced-transparency:reduce){.atmosfera[data-aparencia] .barra{background:var(--fdm-header-glass);backdrop-filter:none}.atmosfera[data-aparencia] .navegacao{background:var(--surface);backdrop-filter:none}}

/* Temas, PR J (19/10/2026): mesma base de controles de superficie-aparencia.module.css, para o shell. Especificidade zero: só o padrão do navegador perde. */
:where(.atmosfera[data-aparencia]) :where(input:not([type=radio],[type=checkbox],[type=range],[type=color],[type=file],[type=hidden],[type=image],[type=submit],[type=button],[type=reset]),select,textarea){background-color:var(--fdm-surface);color:var(--fdm-ink);border:1px solid var(--fdm-line-strong);border-radius:var(--fdm-radius)}
:where(.atmosfera[data-aparencia]) :where(button,input[type=submit],input[type=button],input[type=reset]){background-color:var(--fdm-surface);color:var(--fdm-ink);border:1px solid var(--fdm-line-strong);border-radius:var(--fdm-radius)}

/* Direção aprovada por Eduardo em 20/10/2026: títulos editoriais nos três temas. */
.atmosfera[data-aparencia]{--fonte-display:Georgia,"Times New Roman",serif;--titulo-1:44px;--titulo-2:21px;font-variant-numeric:tabular-nums}
/* Temas aprovados (20/10/2026): o tamanho do h1 vem do token da escala, ajustado aqui. */
.atmosfera[data-aparencia]{--titulo-1:44px}
.atmosfera[data-aparencia] .conteudo h1{font-family:var(--fonte-display);font-size:var(--titulo-1);font-weight:400;letter-spacing:-.035em;line-height:1.12}
.atmosfera[data-aparencia] .barra{backdrop-filter:none;border:1px solid var(--hairline)}
.atmosfera[data-aparencia] .destino[aria-current=page]{background:var(--fdm-nav-surface);color:var(--fdm-nav-ink)}
.atmosfera[data-aparencia] .conta{background:var(--fdm-nav-surface);color:var(--fdm-nav-ink)}
@media(max-width:959px){.atmosfera[data-aparencia]{--titulo-1:36px}.atmosfera[data-aparencia] .barra{border:0;border-bottom:1px solid var(--hairline)}.atmosfera[data-aparencia] .navegacao{bottom:0;left:0;right:0;border-radius:0;padding-bottom:max(7px,env(safe-area-inset-bottom));box-shadow:none;backdrop-filter:none}.atmosfera[data-aparencia] .navegacao .destino[aria-current=page]{background:var(--fdm-nav-surface);color:var(--fdm-nav-ink)}}
@media(max-width:959px){.atmosfera[data-aparencia]{--titulo-1:36px}}
/* Claro de campo nas seis aparências (paletas da Barbearia, 26/10/2026), refeito pelo estudo aprovado "Três caminhos para o Feito de Mestre App"
   depois da reprovação do Eduardo em 26/10/2026 ("os fundos não são sólidos"; "variações mais claras e escuras que
   se movem conforme o app é rolado"). Cor e degradê vêm de src/lib/temas-visuais.json (--fdm-fundo, --fdm-*-glass). */
.atmosfera[data-aparencia]{background:var(--fdm-bg);isolation:isolate;--fonte-display:var(--fonte);--titulo-1:36px;--titulo-2:19px}
/* O fundo é uma camada fixa só de transform: a rolagem não repinta o degradê. --fdm-rolagem vem de FundoQueRola. */
.atmosfera[data-aparencia]::before{content:"";position:fixed;left:0;right:0;top:-25vh;height:150vh;z-index:-1;pointer-events:none;background:var(--fdm-fundo);transform:translate3d(0,calc(var(--fdm-rolagem,0) * -1px),0);will-change:transform}
@media(prefers-reduced-motion:reduce){.atmosfera[data-aparencia]::before{transform:none;will-change:auto}}
.atmosfera[data-aparencia] .barra{background:var(--fdm-header-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--fdm-card-glass-line)}
.atmosfera[data-aparencia] .conteudo h1{font-weight:700;line-height:1.15;letter-spacing:-.04em;margin:4px 0 16px}
.atmosfera[data-aparencia] .conteudo h2{font-weight:700;letter-spacing:-.02em}
.atmosfera[data-aparencia] .destino[aria-current=page]{font-weight:800}
/* Acabamento igual nas seis aparências, como na Barbearia (Eduardo, 26/10/2026): sem regra por ID de tema. */
@media(max-width:959px){
  .atmosfera[data-aparencia]{--titulo-1:31px}
  /* Cabeçalho integrado ao fundo; a navegação de baixo é vidro. */
  .atmosfera[data-aparencia] .barra{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-bottom:1px solid var(--hairline)}
  .atmosfera[data-aparencia] .navegacao{background:var(--fdm-nav-glass);-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);border:0;border-top:1px solid var(--hairline)}
  .atmosfera[data-aparencia] .navegacao .destino[aria-current=page]{background:var(--fdm-nav-surface);color:var(--fdm-nav-ink);border-radius:12px}
}
@media(prefers-reduced-transparency:reduce){.atmosfera[data-aparencia] :is(.barra,.navegacao){-webkit-backdrop-filter:none;backdrop-filter:none}}
/* Clássico sólido (decisão do Eduardo, 28/10/2026): a única exceção de acabamento por tema, de propósito.
   Só tira desfoque, transparência e o fundo que rola; cor, raio e layout continuam vindo dos tokens.
   As regras por ID permitidas pelo teste são só estas (temas-visuais.test.ts). */
.atmosfera[data-aparencia="classico"]::before{background:var(--fdm-bg);transform:none;will-change:auto}
.atmosfera[data-aparencia="classico"],.atmosfera[data-aparencia="classico"] *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.atmosfera[data-aparencia="classico"] .barra{background:var(--fdm-header)!important}

/**
 * Superfícies internas do profissional (lista de clientes, cliente, onboarding).
 *
 * Tudo aqui sai dos tokens de `globals.css`, que traduzem o DESIGN.md. O que o
 * DESIGN.md NÃO define, porque foi escrito a partir da página pública, é o
 * vocabulário de app interno: campo de formulário, barra de navegação e lista.
 * Esses três foram derivados das regras nomeadas da direção, não inventados:
 * uma só cor de ação, verde só para concluído, plano até ser escolhido, alvo de
 * toque de 44px, tipografia do sistema e nada dependendo de hover.
 * ⚠️ Precisa de parecer do nfl-revisor-de-design antes de virar padrão.
 */

/**
 * Os 120px de respiro inferior do DESIGN.md existem por causa da barra de ação
 * fixa da página pública. As telas internas não têm barra fixa, então herdar o
 * respiro é deixar um vazio que não protege nada. Decisão do Eduardo em
 * 03/10/2026: 20px.
 */
.shell {
  max-width: 480px;
  margin-inline: auto;
  padding: var(--s-lg);
  padding-bottom: 20px;
}

/* ── Cabeçalho: a identidade do profissional, como na página pública ── */
.topo {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  padding-bottom: var(--s-md);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s-lg);
}

/* PT-29: Ajustes no cabeçalho, à direita; alvo de 44 px. */
.linkAjustes {
  margin-left: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-sm);
  color: var(--action);
  font-weight: 600;
  text-decoration: none;
}

/* PT-29: o monograma da marca no cabeçalho, pequeno e sem disputar com o nome do profissional. */
.simboloMarca {
  flex-shrink: 0;
  opacity: 0.9;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--r-marcador, 50%);
  background: var(--ink);
  color: var(--fdm-on-action, #fff);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  flex: none;
}

.negocio {
  min-width: 0;
}

.negocio strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.negocio span {
  color: var(--muted);
  font-size: 13px;
}

.rotulo {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Campo: o vocabulário que o DESIGN.md não tinha ── */
.campo {
  display: block;
  min-width: 0;
  margin-bottom: var(--s-md);
}

/**
 * O rótulo do campo. `:not(.dica)` porque a dica também é um `span` filho
 * direto de `.campo`, e sem a exclusão ela herda a caixa alta daqui.
 *
 * 🪤 Isto foi introduzido pela correção do relato N1 do parecer do W2, que
 * tornou `.dica` uma classe independente (antes era `.campo .dica`, com
 * especificidade 0,2,0, que vencia). Ao perder um nível, ela passou a perder
 * para `.campo > span` (0,1,1), e blocos inteiros de frase viraram caixa
 * alta. Nenhum teste de texto pegaria: o conteúdo estava certo, só a
 * aparência não — e a regra canonizada diz "dica nunca em caixa alta".
 * Descoberto na captura do builder do W4a.
 */
.campo > span:not(.dica) {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-xs);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-field);
  transition: border-color 140ms ease;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  border-color: var(--hairline-strong);
}

/* Classe de apoio independente: não depende de estar dentro de `.campo`.
   Regra do parecer de design: classe de apoio que só funciona aninhada é
   seletor morto nos quatro usos fora do pai. */
.dica {
  display: block;
  margin-top: var(--s-xs);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
  text-transform: none;
  letter-spacing: normal;
}

/* ── Botões: uma só cor de ação ── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  width: 100%;
  min-height: 48px;
  padding: 15px 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fdm-on-action, #fff);
  background: var(--action);
  border: 0;
  border-radius: var(--r-button);
  box-shadow:0 4px 14px -4px rgba(29, 78, 216, 0.5);
  cursor: pointer;
  transition: background-color 140ms ease, transform 140ms ease;
}

.btn:hover:not(:disabled) {
  background: var(--action-deep);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

/**
 * The Disabled-Is-Not-Blue Rule.
 *
 * Azul significa DISPONÍVEL — é o que a One Action Blue Rule diz com todas as
 * letras ("tudo que é tocável e disponível é azul"). Botão desabilitado ou
 * enviando não é nenhum dos dois, então perde o azul e perde a sombra, que
 * pela Flat-Until-Chosen pertence só à ação principal. Descansa plano, em
 * Surface White com hairline, como qualquer superfície que não está
 * convidando. Vale para `:disabled` e para o estado "enviando", que é o mesmo
 * fato: o toque não vai fazer nada agora.
 */
.btn:disabled,
.btnSecundario:disabled,
.busca button:disabled {
  /* Propriedade longa por precisão: o atalho `background` também zeraria
     imagem e posição, que ninguém aqui define. O `.busca button` entra na
     mesma regra porque a Disabled-Is-Not-Blue vale para todo controle, não só
     para os que hoje têm estado de envio. */
  background-color: var(--surface);
  color: var(--muted);
  border: 1px solid var(--hairline);
  box-shadow:none;
  cursor: not-allowed;
  transform: none;
}

/* Especificidade acima do foco global de `globals.css`, que empata em 0,1,0:
   num empate vence a ordem do bundle, que não é promessa nenhuma, e o
   resultado seria o raio do cartão virar 6px só no foco de teclado. */
.btn:focus-visible,
.btnSecundario:focus-visible {
  border-radius: var(--r-button);
}

.btnSecundario {

  color: var(--action);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow:none;
  font-size: 15px;
  min-height: 44px;
  /* Vale também quando o botão é um link: sem isto o `<a>` vem sublinhado do
     navegador e o botão fica com cara de texto clicável dentro de uma caixa. */
  text-decoration: none;
}

/* PT-81: o `.btn:hover:not(:disabled)` herdado pelo `composes` (0,3,0) vencia o
   `.btnSecundario:hover` (0,2,0) e pintava o fundo de `--action-deep` sob o texto
   `--action`: no celular o hover fica preso depois do toque, e o "Já mandei"
   ficava escuro sobre escuro. Mesma especificidade, declarado depois, vence. */
.btnSecundario:hover:not(:disabled),
.btnSecundario:hover {
  background: var(--surface);
  border-color: var(--hairline-strong);
}

/* ── Busca ── */
.busca {
  display: flex;
  gap: var(--s-sm);
  margin-bottom: var(--s-lg);
}

.busca input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 11px 12px;
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-field);
}

.busca button {
  flex: none;
  min-height: 44px;
  padding: 0 var(--s-lg);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--fdm-on-action, #fff);
  background: var(--action);
  border: 0;
  /* PT-112: o mesmo raio dos outros botões (guia tipografia-v1: botão 12px). */
  border-radius: var(--r-button);
  cursor: pointer;
}

.busca button:hover {
  background: var(--action-deep);
}

/* ── Lista de clientes ── */
.lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}

.item {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  color: inherit;
  text-decoration: none;
  transition: border-color 140ms ease;
}

.item:hover {
  border-color: var(--hairline-strong);
}

/* Mesmo motivo do botão: o foco global empata e trocaria o raio do cartão. */
.item:focus-visible {
  border-radius: var(--r-card);
}

.itemCorpo {
  flex: 1;
  min-width: 0;
}

.itemCorpo strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.itemCorpo span {
  display: block;
  font-size: 14px;
  color: var(--muted);
}

/**
 * O chevron é o marcador de que a linha é tocável, então ele é informação
 * gráfica e precisa do contraste de informação gráfica. Em Hairline Strong
 * media 1,53:1, abaixo do mínimo de 3:1. Em Slate Muted dá 6,42:1.
 * Decisão do Eduardo em 03/10/2026.
 */
.seta {
  flex: none;
  color: var(--muted);
  font-size: 18px;
}

/* ── Cartão genérico, e o bloco rebaixado do DESIGN.md ── */
.cartao {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 14px 16px 12px;
  margin-bottom: var(--s-md);
}

.cartao h2 {
  margin: 0 0 var(--s-md);
  font-size: var(--titulo-2, 19px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.rebaixado {
  background: var(--cloud-bg);
  border-radius: var(--r-button);
  padding: var(--s-md);
}

.vazio {
  padding: var(--s-xl) var(--s-lg);
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}

.vazio strong {
  display: block;
  color: var(--ink);
  margin-bottom: var(--s-xs);
}

/**
 * Verde só para concluído — Green-Means-Done, estendida a avisos.
 *
 * Banner verde é CONCLUSÃO, não informação: cabe em "cliente criado" e em
 * "cliente restaurado", que são coisas que acabaram de acontecer por uma ação
 * de quem está lendo. Não cabe em "esse cliente já estava aqui", que é um
 * fato sobre o mundo, e não um resultado — esse vai em `.info`.
 */
.aviso {
  display: flex;
  gap: var(--s-sm);
  padding: var(--s-md);
  margin-bottom: var(--s-lg);
  font-size: 14px;
  border-radius: var(--r-button);
  background: var(--done-wash);
  color: var(--done);
}

/* Informação de estado: sem cor semântica nenhuma, porque não é nem conclusão
   nem problema. Também é o lugar do aviso da lixeira, que é estado e não erro. */
.info {
  padding: var(--s-md);
  margin-bottom: var(--s-lg);
  font-size: 14px;
  border-radius: var(--r-button);
  background: var(--cloud-bg);
  color: var(--muted);
}

/* Reservado a problema de verdade: o que impediu uma ação de acontecer. */
.erro {
  padding: var(--s-md);
  margin-bottom: var(--s-lg);
  font-size: 14px;
  border-radius: var(--r-button);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
}

.meta {
  display: flex;
  justify-content: space-between;
  gap: var(--s-md);
  padding: var(--s-sm) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--muted);
}

.meta:last-child {
  border-bottom: 0;
}

/**
 * Link dentro de uma linha de metadados. Existe porque azul tocável entra
 * pelo vocabulário e não por `style` solto, e porque o alvo tem de chegar aos
 * 44px — medido em 19px antes desta regra, dentro de uma linha de 21px.
 * O recuo compensa o padding para o texto seguir alinhado à direita da linha.
 */
.metaLink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -12px;
  padding-inline: var(--s-sm);
  margin-inline-end: calc(var(--s-sm) * -1);
  color: var(--action);
  text-decoration: none;
  font-weight: 700;
}


/**
 * O único caminho de volta da tela mais visitada, então ele obedece ao mínimo
 * de 44px como qualquer outro alvo — por padding, não por altura de fonte.
 * O recuo negativo à esquerda mantém o texto alinhado com o resto da coluna,
 * enquanto a área tocável passa a cobrir a margem.
 */
.voltar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-md);
  margin-left: calc(var(--s-md) * -1);
  margin-bottom: var(--s-xs);
  font-size: 14px;
  color: var(--action);
  text-decoration: none;
}


.assinatura {
  margin-top: var(--s-xl);
  padding-top: var(--s-md);
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--muted);
}

/**
 * Check de concluído na linha da agenda. Verde porque a conclusão aconteceu —
 * Green-Means-Done. É o único verde das telas internas, e ele nunca convida:
 * marca o que já foi feito hoje, para a agenda do dia ser o retrato do dia e
 * não só a lista do que falta.
 */
.check {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-marcador, 50%);
  background: var(--done-wash);
  color: var(--done);
  font-size: 15px;
  font-weight: 700;
}

/**
 * Botão que age como link: revela um refinamento sem sair da página.
 * Azul porque é tocável e disponível (One Action Blue), mas sem peso de
 * botão — o que ele abre é opcional, e oferecer com peso de ação principal
 * sugeriria que é preciso preencher.
 */
.linkBotao {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-sm);
  margin: 0 0 var(--s-sm) calc(var(--s-sm) * -1);
  font: inherit;
  font-size: 14px;
  color: var(--action);
  background: none;
  border: 0;
  cursor: pointer;
}


/** Totais de uma opção: a soma sobre divisor tracejado, como no documento. */
.soma {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-md);
  margin-top: var(--s-sm);
  padding-top: var(--s-sm);
  border-top: 1px dashed var(--hairline-strong);
  font-size: 15px;
  font-weight: 700;
}

.soma strong {
  font-size: 19px;
}

/** Linha de item dentro de uma opção, com o valor à direita. */
.itemLinha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-sm);
  padding: var(--s-xs) 0;
  border-bottom: 1px solid var(--hairline);
}

.itemLinha:last-of-type {
  border-bottom: 0;
}

.itemLinha form {
  display: inline;
}

/** Remover: discreto, nunca azul — não é a ação que a tela quer que aconteça. */
.remover {
  min-height: 44px;
  padding: 0 var(--s-sm);
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.remover:hover {
  color: var(--ink);
}

/**
 * Link cru (o endereço público, para copiar). `anywhere` e não `break-all`:
 * quebra em qualquer ponto quando precisa, mas respeita os limites naturais
 * quando cabe — e `min-width: 0` porque, dentro de um flex ou grid, o padrão
 * `auto` impede o filho de encolher e é ele quem estoura a coluna.
 */
.linkCru {
  display: block;
  min-width: 0;
  font-family: var(--fonte-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ── PT-01b: shell de 1120px (DESIGN.md, contrato de computador) ──
   Só a tela que marca `.largo` alarga; as outras seguem na coluna de 480px. */
.largo { min-width: 0; }
.duasColunas { display: grid; gap: var(--s-md); grid-template-columns: minmax(0, 1fr); }
.listaSimples { list-style: none; margin: var(--s-sm) 0 0; padding: 0; display: grid; gap: var(--s-md); }
.listaSimples > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-sm); min-width: 0; overflow-wrap: anywhere; }
.listaSimples > li > span:first-child { display: grid; gap: 2px; min-width: 0; }
.atribuir { display: flex; align-items: flex-end; gap: var(--s-sm); flex-wrap: wrap; }
.atribuir .campo { margin: 0; min-width: 160px; flex: 1; }
.atribuir select { min-height: 44px; }
.resumoMes { list-style: none; margin: var(--s-sm) 0 0; padding: 0; display: grid; gap: var(--s-sm); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.resumoMes > li { display: grid; gap: 2px; padding: var(--s-md); border: 1px solid var(--hairline); border-radius: var(--r-card); }
@media (min-width: 960px) {
  .shell:has(.largo) { max-width: 1120px; }
  .duasColunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
}
/* ── PT-04c: funil de pedidos. Lista por etapa no celular; quadro de 5 colunas no computador. ── */
.filtroPedidos { display: flex; gap: var(--s-sm); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--s-md); }
.filtroPedidos .campo { margin: 0; flex: 1; min-width: 150px; }
.filtroPedidos select { min-height: 44px; }
.filtroPedidos button { width: auto; padding: 0 var(--s-lg); }
.quadro { display: grid; gap: var(--s-md); grid-template-columns: minmax(0, 1fr); }
.colunaPedidos { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 12px; display: grid; gap: var(--s-sm); align-content: start; min-width: 0; }
.colunaPedidos h2 { font-size: var(--titulo-2, 19px); margin: 0; display: flex; justify-content: space-between; }
.cartaoPedido { display: grid; gap: 2px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--fdm-radius, 10px); color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.cartaoPedido:hover { border-color: var(--hairline-strong); }
.cartaoPedido:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
@media (min-width: 960px) {
  .quadro { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
}

/* ── PT-05a: agenda em dia, semana, mês e lista ── */
.abasAgenda { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--fdm-radius, 12px); margin-bottom: var(--s-md); }
.abaAgenda { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--fdm-radius, 8px); color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; }
.abaAgenda[aria-current="page"] { background: var(--action); color: var(--fdm-on-action, #fff); }
.navAgenda { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: var(--s-sm); align-items: center; margin-bottom: var(--s-sm); }
.navAgenda > a { width: 44px; padding: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.tituloAgenda { margin: 0; text-align: center; font-size: 18px; text-transform: capitalize; }
.gradeDia, .gradeSemana { display: grid; gap: var(--s-md); grid-template-columns: minmax(0, 1fr); }
.diaDaGrade { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; min-width: 0; }
.diaDaGrade[data-hoje] { border-color: var(--action); }
.diaDaGrade h3 { margin: 0; padding: 8px 10px; font-size: 14px; border-bottom: 1px solid var(--hairline); text-transform: capitalize; }
.faixaDaGrade { display: grid; gap: 4px; min-height: 44px; padding: 4px 6px 4px 46px; border-bottom: 1px solid var(--hairline); position: relative; align-content: center; }
.faixaDaGrade:last-child { border-bottom: 0; }
.faixaDaGrade[data-alvo] { background: var(--fdm-surface-2, rgba(29, 78, 216, 0.08)); outline: 2px dashed var(--action); outline-offset: -2px; }
.rotuloFaixa { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--muted); }
.cartaoAgenda { display: grid; gap: 1px; min-height: 40px; padding: 6px 8px; border-radius: var(--fdm-radius, 8px); background: var(--fdm-surface-2, rgba(29, 78, 216, 0.08)); border: 1px solid var(--fdm-line, rgba(29, 78, 216, 0.25)); color: inherit; text-decoration: none; font-size: 13px; overflow-wrap: anywhere; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.cartaoAgenda span { color: var(--muted); font-size: 13px; }
.cartaoAgenda[data-concluido] { background: var(--surface); border-color: var(--hairline); cursor: pointer; opacity: 0.7; }
.fantasmaAgenda { position: fixed; z-index: 50; pointer-events: none; padding: 6px 10px; border-radius: var(--fdm-radius, 8px); background: var(--action); color: var(--fdm-on-action, #fff); font-size: 13px; box-shadow: 0 4px 14px -4px rgba(29, 78, 216, 0.5); max-width: 220px; }
.shell[data-aparencia] .fantasmaAgenda { box-shadow: 0 0 0 1px var(--fdm-line-strong); }
.mesAgenda { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cabecaMes { text-align: center; font-size: 13px; color: var(--muted); padding: 4px 0; }
.diaMes { display: grid; align-content: space-between; min-height: 52px; padding: 6px; border-radius: var(--fdm-radius, 8px); background: var(--surface); border: 1px solid var(--hairline); color: inherit; text-decoration: none; font-size: 13px; }
.diaMes[data-fora] { opacity: 0.45; }
.diaMes[data-hoje] { border-color: var(--action); }
/* PT-28: dia com horário bloqueado, no mesmo hachurado do bloqueio da grade. */
.diaMes[data-bloqueado] { background: repeating-linear-gradient(135deg, var(--surface-2, var(--fdm-surface-2, #f1f3f5)) 0 6px, var(--surface, var(--fdm-surface, #fff)) 6px 12px); }
/* PT-28: o bloqueio na lista canônica, em Slate Muted, com a rubrica "Bloqueado" e sem cliente. */
.linhaBloqueio { display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm); min-height: 44px; padding: 8px 12px; border-bottom: 1px solid var(--hairline); color: var(--muted); font-size: 14px; }
.linhaBloqueio > span { display: grid; gap: 2px; overflow-wrap: anywhere; }
.linhaBloqueio strong { color: var(--muted); font-weight: 600; }
.diaMes strong { justify-self: end; min-width: 22px; padding: 1px 6px; border-radius: var(--fdm-radius, 999px); background: var(--action); color: var(--fdm-on-action, #fff); font-size: 13px; text-align: center; }
@media (min-width: 960px) {
  .gradeSemana { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .gradeSemana .faixaDaGrade { padding-left: 6px; }
  .gradeSemana .rotuloFaixa { position: static; transform: none; }
  .diaMes { min-height: 84px; }
}

/* PT-05b: Como chegar, assinatura de entrega e o mapa na lista. */
.comoChegar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-sm); margin-top: var(--s-md); }
.comoChegar > a { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; }
.assinaturaEntrega { display: block; width: 100%; max-width: 360px; height: auto; background: #fff; border: 1px solid var(--line, #ddd); border-radius: var(--fdm-radius, 8px); }
.mapaNaLista { list-style: none; padding: 0 0 var(--s-sm); }
.mapaNaLista > a { display: inline-flex; align-items: center; min-height: 44px; }

/* PT-06: painel do dinheiro. Números no topo, listas abaixo; no computador, duas colunas. */
.numerosPainel { display: grid; grid-template-columns: 1fr; gap: var(--s-sm); margin: var(--s-md) 0; }
.numeroPainel { display: grid; gap: 2px; padding: var(--s-md); border: 1px solid var(--line, var(--fdm-line, #e3e6ea)); border-radius: var(--fdm-radius, 12px); background: var(--surface, var(--fdm-surface, #fff)); }
.numeroPainel > span { font-size: 14px; color: var(--muted); }
.numeroPainel > strong { font-size: 28px; line-height: 1.15; }
.numeroPainel > small { font-size: 13px; color: var(--muted); }
.listasPainel { display: grid; grid-template-columns: 1fr; gap: var(--s-md); }
.linhaPainel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-xs, 4px) var(--s-sm); align-items: center; min-height: 44px; padding: var(--s-xs, 4px) 0; border-bottom: 1px solid var(--line, var(--fdm-surface-2, #eee)); list-style: none; }
.linhaPainel > a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
@media (min-width: 960px) {
  .numerosPainel { grid-template-columns: repeat(3, 1fr); }
  .listasPainel { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* PT-07 (PR 1): etapas da ordem de serviço. */
.etapaOrdem { display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm); min-height: 44px; border-bottom: 1px solid var(--line, var(--fdm-surface-2, #eee)); list-style: none; }
.etapaOrdem[data-feita] > form > span, .etapaOrdem[data-feita] > span { color: var(--muted); text-decoration: line-through; }
.etapaForm { display: flex; align-items: center; gap: var(--s-sm); flex: 1; min-width: 0; }
.etapaForm > span { overflow-wrap: anywhere; }
.etapaMarca { flex: none; width: 44px; height: 44px; border: 2px solid var(--line, var(--fdm-line, #c9ced6)); border-radius: var(--fdm-radius, 10px); background: var(--surface, var(--fdm-surface, #fff)); font-size: 20px; line-height: 1; cursor: pointer; }
.etapaOrdem[data-feita] .etapaMarca { border-color: var(--ok, var(--fdm-done, #16a34a)); color: var(--ok, var(--fdm-done, #16a34a)); }

/* PT-07 (PR 2): bloqueio na grade da agenda. */
.bloqueioAgenda { display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm); min-height: 44px; margin: 0 0 var(--s-xs, 4px); padding: 0 var(--s-sm); border-radius: var(--fdm-radius, 8px); background: repeating-linear-gradient(135deg, var(--surface-2, var(--fdm-surface-2, #f1f3f5)) 0 8px, var(--surface, var(--fdm-surface, #fff)) 8px 16px); border: 1px dashed var(--line, var(--fdm-line, #c9ced6)); font-size: 14px; color: var(--muted); }
.bloqueioAgenda > span { overflow-wrap: anywhere; }

/* PT-07 (PR 6): etiquetas. Paleta fechada com tokens do DESIGN.md; o verde fica para concluído. */
.etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.etiqueta, .etiquetaBotao { display: inline-flex; align-items: center; border-radius: var(--fdm-radius, 999px); font-size: 13px; line-height: 1; padding: 4px 8px; border: 1px solid transparent; }
.etiqueta[data-cor="neutra"], .etiquetaBotao[data-cor="neutra"] { background: var(--fdm-line, #e3e8ee); color: var(--fdm-ink, #101828); }
.etiqueta[data-cor="azul"], .etiquetaBotao[data-cor="azul"] { background: var(--fdm-surface-2, #eef3fe); color: var(--fdm-action-deep, #1a43bf); }
.etiqueta[data-cor="tinta"], .etiquetaBotao[data-cor="tinta"] { background: var(--fdm-action, #101828); color: var(--fdm-on-action, #ffffff); }
.etiqueta[data-cor="contorno"], .etiquetaBotao[data-cor="contorno"] { background: var(--fdm-surface, #ffffff); color: var(--fdm-muted, #526071); border-color: var(--fdm-line, #c9d2dc); }
.etiquetasEscolha { display: flex; flex-wrap: wrap; gap: var(--s-sm); }
.etiquetaBotao { min-height: 44px; padding: 0 14px; font-size: 14px; cursor: pointer; }
.etiquetaBotao[aria-pressed="false"] { opacity: .75; }
/* Temas, PR F: etiqueta não marcada por contorno e tinta de apoio (o "+" escrito diz o estado), sem opacidade; a marcada mantém a cor escolhida. */
[data-aparencia] .etiquetaBotao[aria-pressed="false"] { opacity: 1; background: var(--fdm-surface); color: var(--fdm-muted); border-color: var(--fdm-line-strong); }
/* Na lista de clientes, `.itemCorpo span` (bloco e cor apagada) não vale para os selos. */
.itemCorpo .etiquetas { display: flex; }
.itemCorpo .etiqueta { display: inline-flex; font-size: 13px; }
.itemCorpo .etiqueta[data-cor="neutra"] { color: var(--fdm-ink, #101828); }
.itemCorpo .etiqueta[data-cor="azul"] { color: var(--fdm-action-deep, #1a43bf); }
.itemCorpo .etiqueta[data-cor="tinta"] { color: var(--fdm-on-action, #ffffff); }
.itemCorpo .etiqueta[data-cor="contorno"] { color: var(--fdm-muted, #526071); }

/* Atmosfera interna, decisão do Eduardo em 07/10/2026.
   Escopo .shell preserva onboarding e documentos que também importam este módulo. */
.shell .campo > span:not(.dica), .shell .rotulo { font-size: 13px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.shell .campo { margin-bottom: 20px; }
.shell .campo :is(input, select, textarea) { min-height: 48px; padding: 12px 14px; }
.shell .campo textarea { line-height: 1.65; }
.shell input::placeholder, .shell textarea::placeholder, .shell .campo input::placeholder, .shell .campo textarea::placeholder, .shell .busca input::placeholder { color: var(--texto-apoio, var(--fdm-muted, #5f6470)); opacity: 1; }
.shell .btn { box-shadow:none; font-size: 15px; font-weight: 750; padding: 13px 18px; text-decoration: none; }
.shell .btnSecundario { font-weight: 650; }
.shell .busca { gap: 12px; margin-bottom: 24px; }
.shell .busca input { min-width: 0; min-height: 48px; padding: 12px 16px; color: var(--ink); }
.shell .cartao { padding: 24px; margin-bottom: 24px; }
.shell .cartao h2 { font-size: var(--titulo-2, 21px); letter-spacing: -.025em; margin-bottom: 18px; }
.shell .cartao .cartao { padding: 18px; margin-bottom: 14px; }
.shell .lista { gap: 0; border: 1px solid var(--hairline); border-radius: var(--fdm-radius, 16px); overflow: hidden; background: var(--surface); }
.shell .lista > li + li { border-top: 1px solid var(--hairline); }
.shell .lista .item { border: 0; border-radius: 0; padding: 18px 22px; min-height: 80px; }
.shell .lista .item:hover { background: var(--fdm-surface-2, #f0f3f5); }
.shell .lista .itemCorpo strong { font-size: 16px; }
.shell .lista .itemCorpo span { font-size: 13px; line-height: 1.55; }
.shell .vazio { padding: 32px 24px; }
.shell .vazio strong { font-size: 20px; letter-spacing: -.02em; }
.shell .voltar { font-weight: 600; text-decoration: none; }
.shell .rebaixado, .shell .info { background: var(--fdm-surface-2, #e8edf1); }
.shell .assinatura { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.shell .duasColunas, .shell .listasPainel { gap: 24px; }
.shell .filtroPedidos { gap: 16px; padding: 20px; background: var(--surface); border-radius: var(--fdm-radius, 16px); margin-bottom: 24px; }
.shell .filtroPedidos .campo { margin-bottom: 0; }
.shell .quadro { grid-template-columns: repeat(5, minmax(220px, 1fr)); overflow-x: auto; align-items: start; padding: 2px 2px 16px; scrollbar-width: thin; scrollbar-color: var(--fdm-line-strong, #aebcc9) transparent; }
.shell .colunaPedidos { border: 0; padding: 18px 14px; gap: 10px; background: var(--sky); }
/* PT-57 C: a cor vem da etapa como dado, não da posição. */
.shell .colunaPedidos[data-etapa="novo"] { background: var(--entrada); color: var(--entrada-tinta); }
.shell .colunaPedidos[data-etapa="orcado"] { background: var(--orcamento); color: var(--orcamento-tinta); }
.shell .colunaPedidos[data-etapa="aceito"] { background: var(--agenda); color: var(--agenda-tinta); }
.shell .colunaPedidos[data-etapa="fechado"] { background: var(--retomada); color: var(--retomada-tinta); }
.shell .colunaPedidos[data-etapa="perdido"] { background: var(--fdm-surface-2, linear-gradient(110deg,#e1e3e7,#d0d4db)); color: var(--fdm-muted, #515765); }
.shell .colunaPedidos h2 { font-size: var(--titulo-2, 19px); letter-spacing: -.02em; margin: 0 0 4px; }
.shell .colunaPedidos > .dica { color: var(--fdm-muted, #424852); }
.shell .cartaoPedido { background: var(--fdm-surface, rgba(255,255,255,.85)); border-color: transparent; padding: 14px; border-radius: var(--fdm-radius, 12px); gap: 5px; }
.shell .cartaoPedido:hover { background: var(--fdm-surface, #fff); border-color: var(--fdm-line-strong, #a4afba); }
.shell .abasAgenda { width: min(100%,520px); margin: 0 auto 24px; background: var(--fdm-surface-2, #e2e7ec); border: 0; padding: 5px; gap: 5px; }
.shell .abaAgenda { min-height: 44px; font-size: 13px; } /* U02 (19/10/2026): alvo de 44 px */
.shell .navAgenda { margin-bottom: 24px; }
.shell .tituloAgenda { font-size: 26px; margin: 0; letter-spacing: -.025em; }
/* PT-90: tituloAgenda usado como h1 (Dinheiro, Estoque) segue o título de tela, igual às outras telas de primeiro nível. */
.shell h1.tituloAgenda { font-size: var(--titulo-1, 30px); }
.shell .diaDaGrade { border-radius: var(--fdm-radius, 14px); }
.shell .diaDaGrade h3 { padding: 14px 10px; font-size: 13px; }
.shell .faixaDaGrade { min-height: 62px; border-color: var(--fdm-line, #e2e5e8); }
.shell .cartaoAgenda { background: var(--mint); border-color: transparent; padding: 9px; color: var(--fdm-ink, #263c32); }
.shell .cartaoAgenda span { color: var(--fdm-muted, #405c4d); }
.shell .cartaoAgenda[data-concluido] { background: var(--fdm-surface-2, #edf1ee); opacity: 1; }
.shell .diaMes { min-height: 68px; padding: 10px; }
.shell .diaMes[data-fora] { opacity: .65; }
/* Temas, PR C: dia fora do mês em tinta de apoio, sem desbotar o conteúdo inteiro. */
.shell[data-aparencia] .diaMes[data-fora] { opacity: 1; color: var(--muted); }
.shell .diaMes[data-hoje] { background: var(--fdm-surface-2, #e1ebe5); border-color: var(--fdm-line-strong, #567461); }
.shell .numerosPainel { gap: 16px; margin: 24px 0; }
.shell .numeroPainel { padding: 24px; border: 0; border-radius: var(--fdm-radius, 16px); background: var(--mint); color: var(--fdm-ink, #2c4336); gap: 10px; }
.shell .numeroPainel:nth-child(2) { background: var(--peach); color: var(--fdm-ink, #52392d); }
.shell .numeroPainel:nth-child(3) { background: var(--lilac); color: var(--fdm-ink, #43354e); }
.shell .numeroPainel :is(span,small) { color: inherit; }
.shell .numeroPainel > strong { font-size: 34px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.shell .resumoMes > li { background: var(--surface); padding: 20px; }
@media (min-width: 960px) {
  .shell .gradeDia { max-width: 960px; margin-inline: auto; }
  .shell .diaMes { min-height: 105px; }
  .shell .duasColunas { grid-template-columns: minmax(280px,1fr) minmax(0,1.5fr); }
}
@media (max-width: 600px) {
  .shell .cartao { padding: 20px 18px; margin-bottom: 20px; }
  .shell .cartao h2 { font-size: var(--titulo-2, 19px); }
  .shell .lista .item { padding: 17px 16px; min-height: 76px; }
  .shell .filtroPedidos { padding: 18px; gap: 14px; }
  .shell .filtroPedidos .campo { min-width: 125px; }
  .shell .filtroPedidos > button { width: 100%; min-height: 44px; }
  .shell .quadro { grid-template-columns: repeat(5, minmax(250px,1fr)); }
  .shell .tituloAgenda { font-size: 22px; }
  .shell .diaMes { min-height: 56px; padding: 6px; }
  .shell .numeroPainel { padding: 24px; }
}

/* ── PT-57 A: a fonte do protótipo em títulos de quadro, horas, valores e totais. ── */
.shell :is(.cartao h2, .colunaPedidos h2, .tituloAgenda, .numeroPainel > strong, .soma, .linhaValor, .valorRegistro, .horaDia, .rotuloHora, .celulaHora) { font-family: var(--fonte-display); }
.shell .cartao h2, .shell .colunaPedidos h2 { font-weight: 600; letter-spacing: -.03em; }
.shell .numeroPainel { color: var(--recebido-tinta); }
.shell .numeroPainel:nth-child(2) { color: var(--orcamento-tinta); }
.shell .numeroPainel:nth-child(3) { color: var(--retomada-tinta); }

/* ── PT-57 B: nenhum link de texto como navegação ou ação. ── */
/* Botão terciário com caixa: fundo de tom, raio, 44px. */
.linkBotao, .shell .linkBotao { gap: 6px; min-height: 44px; margin: 0 0 var(--s-sm); padding: 0 14px; border-radius: var(--r-button, 12px); background: var(--action-wash); color: var(--action-deep); font-weight: 600; text-decoration: none; }
.linkBotao:hover, .shell .linkBotao:hover { background: var(--fdm-surface-2, #d5dde7); }
.linkBotao[aria-current] { background: var(--action); color: var(--fdm-on-action, #fff); }
/* Voltar como pílula com seta. */
.voltar, .shell .voltar { gap: 6px; min-height: 44px; margin: 0 0 var(--s-sm); padding: 0 14px 0 10px; border-radius: var(--fdm-radius, 999px); background: var(--fdm-surface, rgba(255,255,255,.7)); border: 1px solid var(--hairline); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.voltar:hover, .shell .voltar:hover { background: var(--surface); border-color: var(--hairline-strong); }
.voltar svg { flex: none; }
/* PT-114: a referência numa linha de metadados é texto da linha, sem pílula: alinhada e da altura das outras linhas. Selo fica só para estado. */
.metaLink:hover { color: var(--action-deep); }
/* PT-114: o "Como funciona" ao lado do título do cartão, não numa linha própria. */
.tituloComAjuda { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 var(--s-sm); }
.tituloComAjuda > h2 { margin: 0; }
/* PT-182 (P3): o orçamento ganhou h1 para a hierarquia, na escala do --titulo-1 como todo h1 do app (PT-90). */
[data-tela] .tituloComAjuda > h1 { margin: 0; }
.tituloComAjuda > [data-como-funciona] { margin: 0; }
.shell .lista .item[data-inerte]:hover { background: transparent; }

/* ── PT-57 C: selo de estado, colorido pelo dado e sempre com o rótulo escrito. ── */
.selo { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--fdm-radius, 999px); font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--action-wash); color: var(--action-deep); }
.selo[data-estado="montando"], .selo[data-estado="pronto"], .selo[data-estado="novo"] { background: var(--entrada-solido); color: var(--entrada-tinta); }
.selo[data-estado="whatsapp_aberto"], .selo[data-estado="envio_confirmado"], .selo[data-estado="link_acessado"], .selo[data-estado="orcado"] { background: var(--orcamento-solido); color: var(--orcamento-tinta); }
.selo[data-estado="aceito"], .selo[data-estado="feito"] { background: var(--agenda-solido); color: var(--agenda-tinta); }
.selo[data-estado="fechado"] { background: var(--retomada-solido); color: var(--retomada-tinta); }
.selo[data-estado="recusado"], .selo[data-estado="venceu"], .selo[data-estado="perdido"] { background: var(--fdm-surface-2, #e4e6eb); color: var(--fdm-muted, #4a505c); }
.shell .lista .itemCorpo .selo { display: inline-flex; font-size: 13px; justify-self: start; }

/* ── PT-57 D: ícones do protótipo ao lado do texto. ── */
.shell .meta > span > svg[data-icone] { width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; color: var(--muted); }
.shell .cartao > h2:has(> svg[data-icone]) { display: flex; align-items: center; gap: 10px; }
.shell .cartao > h2 > svg[data-icone] { color: var(--muted); }
.shell :is(.btn, .btnSecundario):has(> svg[data-icone]) { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* PT-116: número de identificação (#0007) antes do nome; pequeno e discreto. */
.numeroId {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  margin-inline-end: 6px;
  white-space: nowrap;
}

/* ── PT-119: as superfícies comuns no visual do tutorial e do guia tipografia-v1 ("depois"), só dentro das telas que levam data-tela (telas.module.css). Título em Space 500, cartão branco de 16 px sem borda, botão de 12 px em contorno, selo em pílula, lista branca com linha fina. ── */
[data-tela] .cartao, .shell [data-tela] .cartao { background: var(--surface); border: 0; border-radius: var(--fdm-radius, 16px); padding: 20px; margin-bottom: 20px; box-shadow:none; }
[data-tela] .cartao h2, .shell [data-tela] .cartao h2, .shell [data-tela] .colunaPedidos h2 { font-family: SpaceTutorial, ManropeTutorial, sans-serif; font-weight: 500; font-size: var(--titulo-2); letter-spacing: -.02em; margin-bottom: 16px; }
[data-tela] .cartao .cartao, .shell [data-tela] .cartao .cartao { padding: 16px; border: 1px solid var(--hairline); border-radius: var(--fdm-radius, 12px); }
[data-tela] .btn, .shell [data-tela] .btn { min-height: 44px; border-radius: var(--fdm-radius, 12px); font-weight: 500; background: var(--action); color: var(--fdm-on-action, #fff); border-color: var(--action); }
[data-tela] .btnSecundario, .shell [data-tela] .btnSecundario { min-height: 44px; border-radius: var(--fdm-radius, 12px); font-weight: 500; background: var(--surface); color: var(--action); border: 1px solid var(--hairline-strong); }
[data-tela] .btnSecundario:hover, .shell [data-tela] .btnSecundario:hover { background: var(--fdm-surface, #fff); filter: brightness(.97); }
[data-tela] .linkBotao, .shell [data-tela] .linkBotao { font-weight: 500; border-radius: var(--fdm-radius, 12px); }
[data-tela] .campo > span:not(.dica) { font-weight: 500; font-size: 13px; }
[data-tela] .campo :is(input, select, textarea) { border-radius: var(--fdm-radius, 10px); border-color: var(--hairline-strong); background: var(--fdm-surface, #fff); font-size: 16px; }
[data-tela] .dica { font-size: 13px; color: var(--muted); line-height: 1.55; }
[data-tela] .selo, .shell [data-tela] .selo { border-radius: var(--fdm-radius, 20px); font-weight: 500; padding: 4px 9px; }
[data-tela] .lista, .shell [data-tela] .lista { background: var(--surface); border: 0; border-radius: var(--fdm-radius, 16px); overflow: hidden; }
[data-tela] .vazio { background: var(--surface); border: 1px dashed var(--hairline-strong); border-radius: var(--fdm-radius, 16px); }
[data-tela] .busca input { border-radius: var(--fdm-radius, 10px); border-color: var(--hairline-strong); background: var(--surface); }
[data-tela] .busca button { border-radius: var(--fdm-radius, 12px); font-weight: 500; }
[data-tela] .info { border-radius: var(--fdm-radius, 12px); }
/* Quadro (Serviços e Clientes): o funil em colunas, cada coluna uma superfície, cartões brancos dentro. */
[data-tela] .colunaPedidos { border: 0; border-radius: var(--fdm-radius, 16px); padding: 16px; background: var(--fdm-surface-2, #e6e9ee); gap: 12px; }
[data-tela] .colunaPedidos h2 { font-size: var(--titulo-2); }
[data-tela] .cartaoPedido { border: 0; border-radius: var(--fdm-radius, 12px); background: var(--surface); padding: 12px 14px; box-shadow:0 1px 0 rgba(36, 40, 48, .04); }
[data-tela] .cartaoPedido:hover { box-shadow:0 0 0 1px var(--hairline-strong); }
/* Agenda: seletor e navegação no guia; títulos em Space 500. */
[data-tela] .abasAgenda { border: 0; border-radius: var(--fdm-radius, 12px); background: var(--surface); }
[data-tela] .abaAgenda { font-weight: 500; border-radius: var(--fdm-radius, 10px); }
[data-tela] .tituloAgenda { font-family: SpaceTutorial, ManropeTutorial, sans-serif; font-weight: 500; font-size: var(--titulo-2); letter-spacing: -.02em; }
[data-tela="hoje"] .tituloAgenda { font-size: var(--titulo-1); text-align: start; }
[data-tela] .cartaoAgenda { border-radius: var(--fdm-radius, 8px); }
[data-tela] .diaMes { border: 0; border-radius: var(--fdm-radius, 10px); }
[data-tela] .diaMes[data-hoje] { box-shadow:inset 0 0 0 2px var(--action); }
[data-tela] .diaMes strong { font-weight: 500; }
/* PT-119: as colunas do funil levam as cores do quadro-depois, em ordem (céu, pêssego, menta, lilás), com a tinta do papel; os cartões ficam brancos. */
[data-tela] .colunaPedidos:nth-child(4n+1) { background: var(--sky); color: var(--sky-tinta); }
[data-tela] .colunaPedidos:nth-child(4n+2) { background: var(--peach); color: var(--peach-tinta); }
[data-tela] .colunaPedidos:nth-child(4n+3) { background: var(--mint); color: var(--mint-tinta); }
[data-tela] .colunaPedidos:nth-child(4n+4) { background: var(--lilac); color: var(--lilac-tinta); }
[data-tela] .colunaPedidos > .dica { color: inherit; }
[data-tela] .colunaPedidos .cartaoPedido { color: var(--ink); }

/* PT-122 itens 21 e 22: números do cliente e do orçamento e a última atualização, discretos, na linha do pedido. */
.metaPedido {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* PT-122 item 23: a coluna do quadro (Clientes e Serviços) rola por dentro; a página fica com a altura de uma tela. */
/* Correção de 11/10/2026: em grade com altura máxima os cartões eram achatados até 44 px e se cobriam; em coluna flexível, cada cartão
   guarda a altura natural (flex-shrink: 0). Só a rolagem vertical: nada rola de lado, o texto e os selos quebram. A barra fica escondida,
   e a rolagem segue por toque, roda e teclado (o foco nos links do cartão rola a coluna). */
.rolagemColuna { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; max-height: calc(100dvh - 330px); scrollbar-width: none; }
.rolagemColuna::-webkit-scrollbar { display: none; }
.rolagemColuna > * { flex-shrink: 0; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.rolagemColuna .selo { white-space: normal; max-width: 100%; }
@media (max-width: 959px) { .rolagemColuna { max-height: 60dvh; } }
.verTodosColuna { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--fdm-radius, 12px); background: var(--fdm-surface, rgba(255,255,255,.7)); color: var(--ink); font-size: 14px; font-weight: 650; text-decoration: none; }
.verTodosColuna:hover { background: var(--surface); text-decoration: none; color: var(--ink); }
.verTodosColuna:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
/* PT-122 item 24: uma cor por coluna em Clientes (Retomar e Sem atendimento não repetem). Correção de 11/10/2026: o título inteiro,
   quebrando de linha em vez de cortar com reticências ("Sem atendiment"). */
/* PT-126 item 5: título em uma linha a 1280 px. Espaço interno lateral menor (16 para 12 px) e rótulo curto em Clientes; fonte segue em 16 px. */
[data-tela] .colunaPedidos { padding-left: 12px; padding-right: 12px; }
[data-tela] .colunaPedidos h2 { display: block; white-space: normal; overflow: visible; overflow-wrap: break-word; font-size: min(var(--titulo-2), 16px); line-height: 1.25; }
[data-tela] .colunaPedidos h2 [data-quantidade] { display: inline-block; margin-left: 6px; }
/* PT-153: seis colunas pela história do cliente, uma cor cada; o critério em 13 px logo abaixo do título. */
[data-tela] .colunaPedidos [data-criterio-coluna] { margin: -12px 0 12px; color: inherit; opacity: .78; }
.shell[data-aparencia] [data-tela] .colunaPedidos [data-criterio-coluna] { opacity: 1; color: var(--muted); }
[data-tela] .colunaPedidos[data-coluna-cliente="atendimento"] { background: var(--mint); color: var(--mint-tinta); }
[data-tela] .colunaPedidos[data-coluna-cliente="receber"] { background: var(--peach); color: var(--peach-tinta); }
[data-tela] .colunaPedidos[data-coluna-cliente="nao_fechou"] { background: var(--fdm-surface-2, linear-gradient(105deg,#f4e0e2,#e9c8cd)); color: var(--fdm-ink, #4a2a2f); }
[data-tela] .colunaPedidos[data-coluna-cliente="contato"] { background: var(--fdm-surface-2, linear-gradient(105deg,#f1e8cf,#e3d4ad)); color: var(--fdm-ink, #463a1f); }
[data-tela] .colunaPedidos[data-coluna-cliente="uma_vez"] { background: var(--sky); color: var(--sky-tinta); }
[data-tela] .colunaPedidos[data-coluna-cliente="recorrente"] { background: var(--lilac); color: var(--lilac-tinta); }

/* PT-137 (B6): dentro do app interno os rótulos ficam em caixa normal, 13/18 médio.
 * Escopo pelo atributo da raiz do AppNavigation, porque este módulo também serve
 * documentos públicos e páginas de fora do app, que seguem como estão. */
[data-app-interno] .rotulo,
[data-app-interno] .campo > span:not(.dica) {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  line-height: 18px;
}

/* A11 (19/10/2026): o link para o cadastro que já tem o telefone é caixa, não texto
   azul sublinhado; fica junto do erro do campo e ocupa só a largura do rótulo. */
.cadastroExistente { width: auto; justify-self: start; margin-top: var(--s-sm); padding: 10px 14px; border-radius: var(--r-button); overflow-wrap: anywhere; text-align: left; }

/* Valores e horários permanecem em Manrope na direção editorial aprovada. */
.shell[data-aparencia] :is(.numeroPainel > strong,.soma,.linhaValor,.valorRegistro,.horaDia,.rotuloHora,.celulaHora){font-family:var(--fonte)}

/*
 * PT-88 · Planos, Perfil e Módulos adicionais no padrão do app.
 * Só tokens do PT-57 (atmosfera.module.css e globals.css); nenhuma cor nova.
 * Texto de apoio nunca abaixo de 13 px; toque nunca abaixo de 44 px.
 */

/* ── Botões em forma de link: nunca texto azul sublinhado ── */
.botao, .botaoPrimario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 var(--s-lg);
  border-radius: var(--r-button);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
}
.botao:hover { border-color: var(--ink); }
.botaoPrimario { background: var(--action); color: var(--surface); border-color: var(--action); }
.botaoPrimario:hover { background: var(--action-deep); border-color: var(--action-deep); }
.botao:focus-visible, .botaoPrimario:focus-visible, .acao:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
.blocoBotao { width: 100%; }

/* ── Planos ── */
.planos { color: var(--ink); font-size: 15px; line-height: 1.5; }
.planos > header { margin-bottom: 24px; }
.marcaNome { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.planos h1 { font-family: var(--fonte-display); font-size: var(--titulo-1, clamp(28px, 3vw, 40px)); line-height: 1.2; font-weight: 600; letter-spacing: -0.035em; margin: 8px 0 0; }
.aviso { margin: 0 0 var(--s-lg); padding: 12px 14px; border-radius: var(--r-card); background: var(--action-wash); color: var(--ink); font-size: 14px; }
.grade { display: grid; gap: var(--s-lg); grid-template-columns: 1fr; margin-bottom: var(--s-lg); }
.plano {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  padding: 20px;
  border-radius: var(--r-card);
  border: 1px solid var(--hairline);
}
.plano h2 { margin: 0; font-size: var(--titulo-2, 19px); line-height: 1.3; font-weight: 600; }
.plano p { margin: 0; }
.plano[data-plano="basico"] { background: var(--sky); color: var(--sky-tinta); }
.plano[data-plano="pro"] { background: var(--mint); color: var(--mint-tinta); }
.plano[data-plano="empresa"] { background: var(--lilac); color: var(--lilac-tinta); }
.nota { font-size: 13px; line-height: 1.45; opacity: 0.88; }
.acoes { margin-top: auto; padding-top: var(--s-md); display: flex; flex-direction: column; gap: var(--s-sm); }
.acoes form { display: contents; }
.acoes form button { width: 100%; }
.atual { font-weight: 600; }
/* PT-109: o selo do plano atual (sem botão para escolher o mesmo) e a confirmação de mudar para o Plano Básico. */
.selo { align-self: flex-start; padding: 4px 12px; border-radius: var(--r-button); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; }
.confirmar > summary { list-style: none; width: 100%; }
.confirmar > summary::-webkit-details-marker { display: none; }
.confirmar[open] > summary { border-color: var(--ink); }
.confirmarCorpo { display: flex; flex-direction: column; gap: var(--s-sm); margin-top: var(--s-sm); padding: 14px; border-radius: var(--r-card); background: var(--surface); color: var(--ink); }
.confirmarCorpo ul { margin: 0; padding-left: 20px; }
@media (min-width: 720px) {
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}

/* A rota pública (sem sessão) usa o mesmo palco, sem a barra do app. */
.publico { max-width: 960px; margin: 0 auto; padding: 32px 20px 48px; }

/* ── Perfil ── */
.acessos { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin: 0 0 var(--s-md); padding: 0; list-style: none; }
.acessos li { flex: 1 1 220px; display: flex; }
.acao {
  flex: 1;
  display: grid;
  gap: 2px;
  align-content: center;
  min-height: 56px;
  padding: 10px var(--s-lg);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-button);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.acao:hover { border-color: var(--ink); background: var(--action-wash); }
.acao strong { font-size: 15px; font-weight: 600; }
.acao span { font-size: 13px; color: var(--muted); }

/* ── Módulos adicionais ── */
.selo {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: var(--r-control);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--cloud-bg);
  border: 1px solid var(--hairline-strong);
  color: var(--muted);
}
/* PT-94: estado em caixa e cor, com o texto junto. Ligado na cor de sucesso
   (--done sobre --done-wash, 6,4:1); Desligado neutro (--muted sobre --cloud-bg, 5,2:1). */
.selo[data-estado="ligado"] { background: var(--done-wash); border-color: var(--done); color: var(--done); }
.selo[data-estado="desligado"] { background: var(--cloud-bg); border-color: var(--hairline-strong); color: var(--muted); }
.apoio { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* PT-182 (P2): os limites de cada plano recolhidos em "Ver tudo que está incluído". */
.incluido > summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }
.incluido[open] > summary { margin-bottom: 4px; }
/* 18/10/2026: a tabela única dos planos, a mesma linha em cada cartão. */
.tabelaDoPlano { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 4px; }
.tabelaDoPlano li[data-tem="nao"] { color: var(--muted); }
[data-aparencia] .nota { opacity: 1; color: var(--fdm-muted); }
/* Cobrança robusta B: as últimas faturas em /planos, só leitura. */
.cobrancas { margin: var(--s-lg) 0; }
.cobrancas h2 { margin: 0 0 8px; font-size: var(--titulo-2, 19px); font-weight: 600; }
.cobrancas ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.cobrancas li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 4px 12px; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cobrancas li[data-cobranca="falhou"] [data-situacao] { font-weight: 600; }

/* 2.0: o style={{ whiteSpace: "nowrap" }} da 1.0, fora do atributo por causa da CSP. */
.nowrap { white-space: nowrap; }

/* 04/11/2026: com o Plano Empresa, quatro cartões em 2x2; texto quebra linha (a regra .plano{white-space:nowrap} do shell do app vazava aqui); listas sempre abertas, sem o resumo clicável; destaque no Plano Profissional. */
.planos .plano{white-space:normal;min-width:0}
.planos .incluido>summary{display:none}
.planos .plano[data-plano="pro"]{box-shadow:inset 0 4px currentColor}