/* GERADO por tools/build_css.py — não edite aqui.
   Edite as camadas em app/assets/css/ e rode o script. */

/* ═══ 00-tokens.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — direção "Visor" (GestorGrafias, 21/10/2026)

   O mundo do fotógrafo, e não o do salão:
     - papel fotográfico FRIO no fundo (não creme), grafite no texto;
     - a dupla petróleo + âmbar da gradação "teal & orange", a correção de cor
       que todo fotógrafo reconhece. Petróleo é a marca (botão, link, ativo);
       âmbar é SÓ a marca de foco do visor — traço, nunca campo, nunca texto
       (3,9:1 no claro: passa para gráfico, não para letra);
     - a barra de navegação é o CORPO da câmera: escura nos dois temas.

   ⚠️ OS NOMES ficaram os do Beleza (`--vinho`, `--vinho-lav`, `--sv-*`...) de
   propósito: são 76 usos nas camadas e no rasterizador do ícone, e trocar o
   nome faria cada `git merge upstream` brigar com o CSS. Aqui, `--vinho` É o
   petróleo. Leia como "a cor da marca".

   Tema: o claro é a base do :root. O escuro (a câmara escura) redefine SÓ
   tokens, em dois lugares — na preferência do aparelho e no data-theme.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Archivo';
  src:url('/static/fontes/archivo-latin.woff2') format('woff2');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ── superfícies ─────────────────────────────────────────────────────── */
  --fundo:#F3F5F4;      /* papel fotográfico, puxado para o frio */
  --cartao:#FFFFFF;
  --cartao-2:#E9EEED;

  /* ── texto ───────────────────────────────────────────────────────────── */
  --tinta:#1B2226;      /* grafite: 14,7:1 */
  --tinta-2:#4E5B60;
  --tinta-3:#5F6C71;    /* 4,96:1 — carrega o horário da agenda, então se calcula */

  /* ── traço ───────────────────────────────────────────────────────────── */
  --linha:#DCE3E2;
  --linha-2:#C3CDCC;

  /* ── marca (petróleo) ────────────────────────────────────────────────── */
  --vinho:#0E5A60;      /* 7,2:1 sobre o papel */
  --vinho-lav:#E6F0EF;  /* campo grande usa ESTE */
  --vinho-med:#C9DEDC;
  --sobre-vinho:#FFFFFF;

  /* ── visor: a marca de foco (âmbar), o corpo da câmera ───────────────── */
  --visor:#B8641A;
  --visor-l:16px; --visor-t:2px;   /* tamanho e espessura da marca de foco */
  --corpo:#1B2226;
  --sobre-corpo:#E6ECEC;
  --sobre-corpo-2:#8C9A9D;
  --corpo-ativo:#5FC4BF;

  /* ── sinal (nunca decoração) ─────────────────────────────────────────── */
  --verde:#2C6E4F;  --verde-lav:#E7F2EC;
  --ambar:#8A5A14;  --ambar-lav:#F8EEDF;
  --vermelho:#A32A22; --vermelho-lav:#FAECEA;
  --perigo-fundo:#A32A22; --sobre-perigo:#FFFFFF;

  /* ── cor do PACOTE ───────────────────────────────────────────────────── */
  /* sempre token: cravada no HTML não vira com o tema, e no escuro sumia.
     Escala que vai da sombra (petróleo) à pele (âmbar), como a gradação. */
  --sv-1:#0E5A60; --sv-2:#2F7F86; --sv-3:#5E8F7E; --sv-4:#9A6A3A; --sv-5:#B8641A;

  /* ── tipografia ──────────────────────────────────────────────────────── */
  /* Uma família só, com eixo de largura: o título vai semiexpandido, como a
     gravação no corpo da câmera; o texto corrido fica na largura normal. */
  --f:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-t:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-t-largura:112%;
  --f-t-peso:620;

  /* Escala FLUIDA: interpola entre 360px e 1280px, sem degrau.
     Texto de leitura pode descer de 16px; CAMPO DE FORMULÁRIO não pode —
     abaixo disso o Safari do iPhone dá zoom ao focar e desalinha a tela.
     Isso está travado em 01-base.css. */
  --t-xs:  clamp(10.5px, 0.163vw +  9.91px, 12px);
  --t-sm:  clamp(12px,   0.217vw + 11.22px, 14px);
  --t-base:clamp(14.5px, 0.272vw + 13.52px, 17px);
  --t-md:  clamp(15.5px, 0.380vw + 14.13px, 19px);
  --t-lg:  clamp(18px,   0.652vw + 15.65px, 24px);
  --t-xl:  clamp(21px,   1.196vw + 16.70px, 32px);
  --t-2xl: clamp(27px,   1.848vw + 20.35px, 44px);

  --e-1: clamp(4px,  0.109vw +  3.61px,  6px);
  --e-2: clamp(8px,  0.435vw +  6.44px, 12px);
  --e-3: clamp(12px, 0.652vw +  9.65px, 18px);
  --e-4: clamp(16px, 0.870vw + 12.87px, 24px);
  --e-5: clamp(20px, 1.304vw + 15.30px, 32px);

  /* canto de foto impressa, não de bala: 4px no que é papel, 6px no que é botão */
  --r-1:6px; --r-2:4px; --r-3:8px;
  --toque:44px;                                /* alvo mínimo de dedo */
  --col-hora:clamp(60px, 4vw + 45.6px, 76px);
  --barra:62px;                                /* altura da barra de baixo */
  --sombra:none;

  /* definido por elemento (style="--pct:64%"); o padrão aqui existe para o
     medidor nunca renderizar sem valor, e para o lint enxergar a definição */
  --pct:0%;
}

/* ── tema escuro: a câmara escura ────────────────────────────────────────── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fundo:#0F1315;
    --cartao:#171D20;
    --cartao-2:#1F272A;
    --tinta:#E6ECEC; --tinta-2:#A9B6B8; --tinta-3:#8C9A9D;
    --linha:#263034; --linha-2:#344145;
    --vinho:#5FC4BF;
    --vinho-lav:#16292B; --vinho-med:#1F3B3D;
    --sobre-vinho:#0F1315;        /* branco sobre petróleo claro dá 2:1 */
    --visor:#F0A85A;
    --corpo:#161C1F; --sobre-corpo:#E6ECEC; --sobre-corpo-2:#8C9A9D; --corpo-ativo:#5FC4BF;
    --verde:#7CC3A0;  --verde-lav:#16261F;
    --ambar:#DCA96A;  --ambar-lav:#2A2116;
    --vermelho:#E58A7E; --vermelho-lav:#2C1A18;
    --perigo-fundo:#A8443B; --sobre-perigo:#FFFFFF;
    --sv-1:#5FC4BF; --sv-2:#4FA8AE; --sv-3:#8FB5A5; --sv-4:#D2A06A; --sv-5:#F0A85A;
  }
}
:root[data-theme="dark"]{
  --fundo:#0F1315;
  --cartao:#171D20;
  --cartao-2:#1F272A;
  --tinta:#E6ECEC; --tinta-2:#A9B6B8; --tinta-3:#8C9A9D;
  --linha:#263034; --linha-2:#344145;
  --vinho:#5FC4BF;
  --vinho-lav:#16292B; --vinho-med:#1F3B3D;
  --sobre-vinho:#0F1315;
  --visor:#F0A85A;
  --corpo:#161C1F; --sobre-corpo:#E6ECEC; --sobre-corpo-2:#8C9A9D; --corpo-ativo:#5FC4BF;
  --verde:#7CC3A0;  --verde-lav:#16261F;
  --ambar:#DCA96A;  --ambar-lav:#2A2116;
  --vermelho:#E58A7E; --vermelho-lav:#2C1A18;
  --perigo-fundo:#A8443B; --sobre-perigo:#FFFFFF;
  --sv-1:#5FC4BF; --sv-2:#4FA8AE; --sv-3:#8FB5A5; --sv-4:#D2A06A; --sv-5:#F0A85A;
}

/* ═══ 01-base.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   BASE — reset curto e regras que valem em toda a aplicação
   ═══════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-optical-sizing:auto;
  background:var(--fundo);
  color:var(--tinta);
  font-family:var(--f);
  font-size:var(--t-md);
  line-height:1.5;
  overflow-wrap:break-word;   /* nome comprido não empurra a linha pra fora */
}
h1,h2,h3,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--vinho);text-decoration:none}
img,svg{max-width:100%}

/* Campo de formulário nunca abaixo de 16px: é o que impede o iPhone de dar
   zoom sozinho ao focar, desalinhando a tela toda. */
input,select,textarea,button{font-family:inherit}
input,select,textarea{font-size:max(16px,var(--t-base))}

/* Ícone acompanha o texto. Exceção da barra de navegação em 02-layout.css. */
.ic{
  width:1.25em;height:1.25em;display:inline-block;vertical-align:-.2em;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;
}

/* Rótulo — o menorzinho da tela, por isso o token de contraste dele é
   calculado, não estimado. Sem caixa alta (GestorGrafias): rótulo em
   maiúscula espaçada é o enfeite que toda tela gerada repete. */
.rot{
  font-size:var(--t-sm);font-weight:600;letter-spacing:0;
  color:var(--tinta-3);
}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.serif{font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso)}

:focus-visible{outline:2px solid var(--visor);outline-offset:3px}
button:active,a:active{filter:brightness(.94)}   /* único retorno que existe no toque */

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

/* ═══ 02-layout.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT — a casca do aplicativo
   Celular: uma coluna, barra de abas embaixo, botão de nova marcação flutuando.
   1000px: resumo e agenda lado a lado.
   1100px: a barra vira coluna à esquerda e o botão entra nela.
   ═══════════════════════════════════════════════════════════════════════════ */
.app{display:grid;grid-template-columns:1fr;min-height:100vh;min-height:100dvh}
.conteudo{
  width:100%;margin-inline:auto;max-width:1600px;
  /* barra + botão + respiro + a faixa do indicador do iPhone */
  padding-bottom:calc(var(--barra) + 54px + 16px + env(safe-area-inset-bottom,0px));
}
@media(min-width:700px) and (max-width:999px){
  /* tablet em retrato: sem isto vira uma coluna esticada de borda a borda,
     com o nome da cliente de um lado e o preço a 600px de distância */
  .conteudo{max-width:720px}
}
@media(min-width:1000px){
  .duas{display:grid;grid-template-columns:1fr 1.1fr;align-items:start}
  .duas > *{min-width:0}
}
@media(min-width:1100px){
  .app{grid-template-columns:226px 1fr}
  .conteudo{padding-bottom:var(--e-5)}
}

/* ── cabeçalho ───────────────────────────────────────────────────────────── */
.topo{
  background:var(--fundo);border-bottom:1px solid var(--linha);
  padding:var(--e-4) var(--e-4) var(--e-3);position:relative;
}
/* O traço da marca virou a MARCA DE FOCO do visor: um L âmbar no canto de
   baixo do cabeçalho, onde a câmera mostra o ponto que está em foco. */
.topo::after{
  content:'';position:absolute;left:var(--e-4);bottom:-1px;
  width:22px;height:9px;border-left:2px solid var(--visor);border-bottom:2px solid var(--visor);
}
.topo-linha{display:flex;align-items:flex-start;gap:var(--e-2)}
/* o diafragma do app ao lado da data: a marca presente em toda tela, pequena */
.topo-data{display:flex;align-items:center;gap:8px}
.marca-ic{border-radius:22%;flex:0 0 auto}
.marca-entrar{display:flex;align-items:center;justify-content:center;gap:12px}
.topo h1{font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso);font-size:var(--t-xl);
  line-height:1.1;letter-spacing:-.01em;margin-top:4px}

/* ── barra de navegação ──────────────────────────────────────────────────── */
.nav{
  /* o CORPO da câmera: escuro nos dois temas, para a tela parecer o visor */
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--corpo);border-top:1px solid var(--corpo);display:flex;
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
}
.nav a{
  flex:1;min-width:0;min-height:var(--barra);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--sobre-corpo-2);font-size:var(--t-sm);font-weight:500;
}
/* âncora do tracinho da aba ativa. NÃO vale para o obturador: ele também é um
   <a> dentro da .nav, e `position:relative` aqui vencia o `fixed` dele — o
   botão caía em cima do Caixa (21/10, achado pelo dono). */
.nav a:not(.fab){position:relative}
.nav a.on{color:var(--corpo-ativo)}
/* aba ativa = ponto em foco: um tracinho âmbar em cima, como o indicador do visor */
.nav a.on::before{content:'';position:absolute;top:0;left:50%;width:22px;height:3px;
  margin-left:-11px;background:var(--visor)}
/* Ícone de barra é ALVO, não texto: px fixo. Medido em `em` dava 13px, e a
   navegação principal ficava com o menor glifo da tela. */
.nav .ic{width:24px;height:24px}
.nav a:focus-visible{outline-offset:-2px}

.fab{
  position:fixed;z-index:21;
  right:calc(var(--e-4) + env(safe-area-inset-right,0px));
  bottom:calc(var(--barra) + 16px + env(safe-area-inset-bottom,0px));
  width:60px;height:60px;border-radius:50%;cursor:pointer;
  /* O botão mais importante da tela estava apagado: a sombra era da própria
     cor da marca (some no fundo) e o traço do "+" era fino demais para um
     alvo de 58px. Agora: anel do fundo separando do conteúdo, sombra neutra
     que dá relevo de verdade, e traço grosso. */
  /* GestorGrafias: o botão de marcar é o OBTURADOR — disco petróleo, anel do
     papel e um segundo anel fino da marca, como o botão de disparo. */
  background:var(--vinho);color:var(--sobre-vinho);
  border:0;
  display:grid;place-items:center;
  box-shadow:0 0 0 4px var(--fundo), 0 0 0 6px var(--vinho), 0 8px 20px rgba(0,0,0,.30);
}
/* o obturador mora DENTRO da .nav: sem o .nav na frente, `.nav a` (cor apagada
   dos itens) vencia e o "+" saía cinza */
.nav .fab{color:var(--sobre-vinho)}
.fab .ic{width:28px;height:28px;stroke-width:3}
.fab:active{transform:scale(.94)}
.nav-marca{display:none}
.fab-rotulo{display:none}

@media(min-width:1100px){
  .nav{
    position:sticky;top:0;bottom:auto;height:100vh;height:100dvh;
    flex-direction:column;gap:3px;padding:var(--e-5) 12px 0;
    border-top:0;border-right:1px solid var(--corpo);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .nav a{flex:0;min-height:44px;flex-direction:row;justify-content:flex-start;
    gap:12px;padding:0 13px;font-size:var(--t-base);border-radius:var(--r-1)}
  .nav a.on{background:rgba(255,255,255,.06)}
  .nav a.on::before{top:50%;left:0;width:3px;height:22px;margin:-11px 0 0}
  .nav .ic{width:1.25em;height:1.25em}
  .nav-marca{display:block;font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso);font-size:var(--t-lg);
    padding:0 13px var(--e-4);color:var(--sobre-corpo);
    display:flex;align-items:center;gap:10px}
  .fab{position:static;width:auto;height:auto;margin:var(--e-3) 12px 0;border-radius:var(--r-1);
    padding:12px 14px;display:flex;gap:9px;box-shadow:none;
    font-size:var(--t-base);font-weight:600}
  .fab .ic{width:1.3em;height:1.3em}
  .fab-rotulo{display:inline}
}

/* ═══ 03-componentes.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── botões ──────────────────────────────────────────────────────────────── */
/* O "+" da barra e o botão principal usam --sobre-vinho, que vira escuro no
   tema escuro — branco sobre o rosa claro daria 2:1 e o traço sumiria. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--toque);padding:10px var(--e-3);border-radius:var(--r-1);
  font-size:var(--t-base);font-weight:600;font-stretch:104%;letter-spacing:.005em;
  cursor:pointer;border:1px solid transparent;
  background:var(--vinho);color:var(--sobre-vinho);white-space:nowrap;
}
.btn.fantasma{background:transparent;color:var(--vinho);border-color:var(--vinho)}
.btn.discreto{background:var(--cartao);color:var(--tinta);border-color:var(--linha-2)}
.btn.perigo{background:var(--perigo-fundo);color:var(--sobre-perigo);
  border-color:var(--perigo-fundo);box-shadow:0 2px 8px color-mix(in srgb,var(--perigo-fundo) 24%,transparent)}
.btn.bloco{width:100%}
.btn:disabled{opacity:.5;cursor:default}

/* botão de tema: mostra só o ícone do estado atual */
.tema{
  width:var(--toque);height:var(--toque);flex:0 0 var(--toque);margin-left:auto;
  border-radius:50%;border:1px solid var(--linha-2);background:transparent;
  color:var(--tinta-2);display:grid;place-items:center;cursor:pointer;padding:0;
}
.tema .ic{width:20px;height:20px;grid-area:1/1}
.tema [data-quando]{display:none}
.tema [data-quando="auto"]{display:block}
:root[data-theme="light"] .tema [data-quando="auto"],
:root[data-theme="dark"]  .tema [data-quando="auto"]{display:none}
:root[data-theme="light"] .tema [data-quando="claro"]{display:block}
:root[data-theme="dark"]  .tema [data-quando="escuro"]{display:block}

.avatar{
  width:var(--toque);height:var(--toque);flex:0 0 var(--toque);border-radius:50%;
  background:var(--vinho-lav);color:var(--vinho);border:1px solid var(--vinho-med);
  display:grid;place-items:center;font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso);font-size:var(--t-md);
}

/* ── faixa de aviso ──────────────────────────────────────────────────────── */
.faixa{
  margin:var(--e-3) var(--e-4) 0;padding:var(--e-3);border-radius:var(--r-2);
  background:var(--vinho-lav);border:1px solid var(--vinho-med);
  display:flex;align-items:center;gap:var(--e-2);
}
.faixa p{flex:1;min-width:0;overflow-wrap:anywhere;font-size:var(--t-base)}
.faixa /* O "+" da barra e o botão principal usam --sobre-vinho, que vira escuro no
   tema escuro — branco sobre o rosa claro daria 2:1 e o traço sumiria. */
.btn{flex:0 0 auto}

/* ── cartão ──────────────────────────────────────────────────────────────── */
.cartao{
  background:var(--cartao);border:1px solid var(--linha);border-radius:var(--r-2);
  padding:var(--e-3);min-width:0;
}
.grade{
  display:grid;gap:var(--e-2);padding:var(--e-2) var(--e-4) 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  grid-auto-columns:minmax(0,1fr);
}
.grade .largo{grid-column:1/-1}
.cartao .v{font-size:var(--t-xl);font-weight:600;letter-spacing:-.025em;
  margin-top:6px;line-height:1.15}
.cartao .v.pos{color:var(--verde)} .cartao .v.ate{color:var(--ambar)}
.cartao .v.neg{color:var(--vermelho)} .cartao .v.mar{color:var(--vinho)}
.cartao .v.nome{font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso);font-size:var(--t-lg)}
.cartao .obs{font-size:var(--t-sm);color:var(--tinta-2);margin-top:4px;line-height:1.35}

/* ── medidor ─────────────────────────────────────────────────────────────── */
.trilho{
  height:8px;border-radius:99px;overflow:hidden;margin-top:var(--e-2);
  background:var(--vinho-med);box-shadow:inset 0 0 0 1px var(--linha-2);
}
.trilho i{display:block;height:100%;background:var(--vinho);border-radius:99px;opacity:.9}
.medidor{
  width:54px;height:54px;flex:0 0 54px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--vinho) 0 var(--pct,0%), var(--vinho-med) var(--pct,0%) 100%);
}
.medidor span{width:42px;height:42px;border-radius:50%;background:var(--cartao);
  display:grid;place-items:center;font-size:var(--t-base);font-weight:600}

/* ── lista da agenda ─────────────────────────────────────────────────────── */
.lista{
  margin:0 var(--e-4);background:var(--cartao);border:1px solid var(--linha);
  border-radius:var(--r-2);overflow:hidden;
}
.item{
  display:grid;align-items:center;gap:var(--e-2);
  grid-template-columns:var(--col-hora) 4px minmax(0,1fr) fit-content(38%);
  padding:var(--e-3) var(--e-3) var(--e-3) 0;
  border-bottom:1px solid var(--linha);color:inherit;
}
.item:last-child{border-bottom:0}
.item .h{padding-left:var(--e-3);font-size:var(--t-sm);font-weight:600;
  color:var(--tinta-2);font-variant-numeric:tabular-nums}
.item .cor{align-self:stretch;min-height:36px;border-radius:1px;background:var(--vinho)}
.item .txt{min-width:0}
.item .nm{font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso);font-size:var(--t-md);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .sv{font-size:var(--t-sm);color:var(--tinta-2);margin-top:1px}
.item .dir{min-width:0;text-align:right;white-space:normal}
.item .vl{font-size:var(--t-base);font-weight:600;font-variant-numeric:tabular-nums}
.item .st{display:block;font-size:var(--t-xs);font-weight:600;letter-spacing:0;
  margin-top:2px}
.st.ok{color:var(--verde)} .st.esp{color:var(--ambar)} .st.falta{color:var(--vermelho)}

.item.livre .cor{background:transparent;border-left:2px dotted var(--linha-2);border-radius:0}
.item.livre .txt{padding:6px 0}
.item.livre .abrir{display:block;width:100%;min-height:var(--toque);
  font-size:var(--t-base);font-weight:600;color:var(--vinho);text-align:left;
  background:none;border:0;cursor:pointer;padding:0}
.item.pausa .cor{background:var(--linha-2)}
.item.pausa .txt{font-size:var(--t-sm);color:var(--tinta-2)}

/* cor do serviço — sempre token, nunca cravada no HTML */
.cor.sv1{background:var(--sv-1)} .cor.sv2{background:var(--sv-2)}
.cor.sv3{background:var(--sv-3)} .cor.sv4{background:var(--sv-4)}
.cor.sv5{background:var(--sv-5)}

/* ── título de seção ─────────────────────────────────────────────────────── */
.tit{display:flex;align-items:baseline;gap:var(--e-2);padding:var(--e-5) var(--e-4) var(--e-2)}
.tit h2{font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso);font-size:var(--t-lg);letter-spacing:-.01em}
.tit .rot{margin-left:auto}

/* ── vazio ───────────────────────────────────────────────────────────────── */
.vazio{padding:var(--e-5) var(--e-4);text-align:center;color:var(--tinta-2)}
.vazio .ic{width:34px;height:34px;color:var(--linha-2);stroke-width:1.4}
.vazio p{margin-top:var(--e-2);font-size:var(--t-base)}

/* ── recado ──────────────────────────────────────────────────────────────── */
.recado{margin:var(--e-3) var(--e-4) 0;padding:var(--e-3);border-radius:var(--r-1);
  font-size:var(--t-base);border:1px solid}
.recado.ok{background:var(--verde-lav);border-color:var(--verde);color:var(--verde)}
.recado.erro{background:var(--vermelho-lav);border-color:var(--vermelho);color:var(--vermelho)}
.recado.aviso{background:var(--ambar-lav);border-color:var(--ambar);color:var(--ambar)}

/* ── formulário ──────────────────────────────────────────────────────────── */
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--e-3)}
.campo label{font-size:var(--t-sm);font-weight:600;color:var(--tinta-2)}
.campo input,.campo select,.campo textarea{
  min-height:var(--toque);padding:10px 12px;border-radius:var(--r-1);
  border:1px solid var(--linha-2);background:var(--cartao);color:var(--tinta);
}
.campo input:focus{border-color:var(--vinho);outline:none;
  box-shadow:0 0 0 3px var(--vinho-lav)}

/* ── visor: as marcas de foco ────────────────────────────────────────────── */
/* O elemento memorável do GestorGrafias, e por isso usado em POUCOS lugares:
   o cartão principal da tela, o topo da página de venda. Quatro cantos em L,
   âmbar, como os pontos de foco no visor da câmera. Feito com fundo (8
   gradientes) e não com pseudo-elemento, para não brigar com ::before/::after
   que os cartões já usam. Fica no FIM do arquivo: o `background:` do .cartao
   apagaria a imagem se viesse depois. */
.visor{
  background-image:
    linear-gradient(var(--visor),var(--visor)),linear-gradient(var(--visor),var(--visor)),
    linear-gradient(var(--visor),var(--visor)),linear-gradient(var(--visor),var(--visor)),
    linear-gradient(var(--visor),var(--visor)),linear-gradient(var(--visor),var(--visor)),
    linear-gradient(var(--visor),var(--visor)),linear-gradient(var(--visor),var(--visor));
  background-repeat:no-repeat;
  background-size:
    var(--visor-l) var(--visor-t),var(--visor-t) var(--visor-l),var(--visor-l) var(--visor-t),var(--visor-t) var(--visor-l),
    var(--visor-l) var(--visor-t),var(--visor-t) var(--visor-l),var(--visor-l) var(--visor-t),var(--visor-t) var(--visor-l);
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
}

/* ═══ 04-telas.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   TELAS — o que é específico de uma tela só
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hoje: os três números do cabeçalho ──────────────────────────────────── */
.hoje-nums{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-4);margin-top:var(--e-3)}
.hoje-nums div{display:flex;flex-direction:column;min-width:0}
.hoje-nums b{font-size:var(--t-xl);font-weight:600;line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hoje-nums .rot{margin-top:1px}

.meta-cartao{margin:var(--e-3) var(--e-4) 0}
.meta-cima{display:flex;justify-content:space-between;align-items:flex-end;margin-top:var(--e-2)}
.meta-cima b{font-size:var(--t-xl);font-weight:600;letter-spacing:-.03em}
.cartao.mei{display:flex;align-items:center;gap:var(--e-3)}
.cartao.mei .txt{flex:1;min-width:0}

/* ── Agenda: troca de dia ────────────────────────────────────────────────── */
.dias{display:flex;align-items:center;gap:var(--e-2);margin-top:var(--e-3)}
.dias .btn{padding:0;width:var(--toque);flex:0 0 var(--toque)}
.dias-hoje{flex:1;min-width:0;text-align:center}
.dias-hoje b{display:block;font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso);font-size:var(--t-md)}
.voltar-hoje{margin-top:var(--e-2);width:100%}
.so-agenda{padding-top:var(--e-3)}

/* ── listas simples (clientes) ───────────────────────────────────────────── */
.lista-simples{margin-top:var(--e-2)}
.item-cliente{grid-template-columns:minmax(0,1fr) auto;padding:var(--e-3)}
.item-cliente .btn{padding:0;width:var(--toque)}

/* ── entrar ──────────────────────────────────────────────────────────────── */
.entrar-pagina{display:grid;place-items:center;min-height:100vh;min-height:100dvh;
  padding:var(--e-4)}
.entrar{width:100%;max-width:380px;text-align:center}
.entrar h1{font-size:var(--t-2xl);color:var(--vinho);line-height:1}
.entrar .rot{margin-top:var(--e-1)}
.entrar .cartao{margin-top:var(--e-4);text-align:left}
.entrar .recado{margin:var(--e-3) 0 0}
/* Link de texto puro tem uns 20px de altura, e o alvo mínimo do projeto é o
   dedo dela: --toque. Sem isso, "Esqueci minha senha" existe e ninguém acerta. */
.entrar .elo{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--toque);padding:0 var(--e-3);margin-top:var(--e-2);
  font-size:var(--t-sm);font-weight:600;color:var(--vinho)}
/* Frase inteira em maiúscula com espaçamento de rótulo não se lê. A dica volta
   a ser texto normal, como já acontece dentro de .campo. */
.entrar .dica{text-transform:none;letter-spacing:0;margin-top:var(--e-2)}
.entrar .cartao + .btn{margin-top:var(--e-3)}
.voltar-doc{margin-bottom:var(--e-3)}

.btn.largo{grid-column:1/-1;justify-content:flex-start}

/* ── nova marcação: o fluxo mais usado do sistema ────────────────────────── */
.marcar{padding:0 0 var(--e-5)}
.passo{padding:var(--e-4) var(--e-4) 0}
.passo + .passo{border-top:1px solid var(--linha);margin-top:var(--e-4);
  padding-top:var(--e-4)}
.passo-tit{display:flex;align-items:center;gap:var(--e-2);margin-bottom:var(--e-3)}
.passo-tit h2{font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso);font-size:var(--t-lg)}
.passo-n{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;
  place-items:center;background:var(--vinho-lav);color:var(--vinho);
  border:1px solid var(--vinho-med);font-size:var(--t-sm);font-weight:600}

/* chip: alvo generoso, porque é tudo que ela toca nesta tela */
.chips{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.chip{position:relative;display:inline-flex;align-items:center;gap:7px;
  min-height:var(--toque);padding:8px var(--e-3);border-radius:99px;
  border:1px solid var(--linha-2);background:var(--cartao);cursor:pointer;
  font-size:var(--t-base);color:var(--tinta);line-height:1.25}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip:has(input:checked){border-color:var(--vinho);background:var(--vinho-lav);
  color:var(--vinho);font-weight:600}
.chip:has(input:focus-visible){outline:2px solid var(--vinho);outline-offset:2px}
.chip.nova{border-style:dashed}
.chip .ic{width:1.1em;height:1.1em}

/* serviço: nome e o "quanto/quanto tempo" na mesma pastilha, porque é o que
   decide a escolha dela */
.servicos .chip{flex-direction:column;align-items:flex-start;gap:2px;
  border-radius:var(--r-2);padding:var(--e-2) var(--e-3);min-width:148px}
.chip-txt{font-size:var(--t-base)}
.chip-sub{font-size:var(--t-xs);color:var(--tinta-3);font-variant-numeric:tabular-nums}
.chip:has(input:checked) .chip-sub{color:var(--vinho)}
.ponto{position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%}
.ponto.sv1{background:var(--sv-1)} .ponto.sv2{background:var(--sv-2)}
.ponto.sv3{background:var(--sv-3)} .ponto.sv4{background:var(--sv-4)}
.ponto.sv5{background:var(--sv-5)}

.horas .chip{min-width:74px;justify-content:center;font-variant-numeric:tabular-nums}

.modo-cliente{margin-bottom:var(--e-3)}
.cliente-cadastrada[hidden]{display:none}
.cliente-cadastrada .campo{margin-bottom:0}
.campo-ajuda{font-size:var(--t-xs);color:var(--tinta-3)}
.nova-cliente{margin-top:var(--e-3)}
.nova-cliente[hidden]{display:none}
.buscar{margin-top:var(--e-3)}
.buscar summary{font-size:var(--t-base);color:var(--vinho);cursor:pointer;
  min-height:var(--toque);display:flex;align-items:center}
.buscar select{width:100%;margin-top:var(--e-2);border-radius:var(--r-1);
  border:1px solid var(--linha-2);background:var(--cartao);color:var(--tinta);
  padding:var(--e-2)}

.dia-troca{display:flex;align-items:center;gap:var(--e-2);margin-bottom:var(--e-3)}
.dia-troca input[type=date]{flex:1;min-width:0;min-height:var(--toque);
  border:1px solid var(--linha-2);border-radius:var(--r-1);padding:0 var(--e-2);
  background:var(--cartao);color:var(--tinta)}
.marcar .obs{padding:var(--e-2) 0 0;font-size:var(--t-sm);color:var(--tinta-2)}
.marcar .resumo-servicos{padding-bottom:var(--e-2)}
.combo-tempo{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-2);
  margin-bottom:var(--e-2)}
.combo-tempo[hidden]{display:none}
.combo-tempo .btn{width:100%}
.combo-tempo .sugestao-combo{background:var(--vinho-lav);color:var(--vinho);
  border:1px solid var(--vinho-med)}
.painel-combo{width:100%;padding:var(--e-3);border:1px solid var(--linha);
  border-radius:var(--r-2);background:var(--cartao)}
.painel-combo[hidden]{display:none}
.painel-combo .obs{padding-top:0;margin-bottom:var(--e-3)}
.combo-campo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px var(--e-2);
  align-items:end}
.combo-campo label{grid-column:1/-1;font-size:var(--t-sm);font-weight:600;
  color:var(--tinta-2)}
.combo-campo > div{display:flex;align-items:center;gap:var(--e-2)}
.combo-campo input{width:100%;min-height:var(--toque);padding:10px 12px;
  border-radius:var(--r-1);border:1px solid var(--linha-2);
  background:var(--fundo);color:var(--tinta)}
.combo-campo .btn{width:auto;white-space:nowrap}
.marcar-fim{padding:var(--e-4) var(--e-4) 0;display:flex;flex-direction:column;
  gap:var(--e-2)}
.btn.bloco{width:100%}
.dia-rot{font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso);font-size:var(--t-md);white-space:nowrap}

/* ── ficha de um horário ─────────────────────────────────────────────────── */
.ficha{padding:var(--e-3) var(--e-4) var(--e-5);display:flex;flex-direction:column;
  gap:var(--e-2)}
.ficha-topo{display:flex;align-items:flex-start;gap:var(--e-3)}
.ficha-nome{display:flex;gap:var(--e-2);flex:1;min-width:0}
.ficha-nome .ponto{position:static;width:10px;height:10px;margin-top:7px;flex:0 0 10px}
.ficha-nome h2{font-size:var(--t-lg);line-height:1.2}
.ficha-valor{text-align:right;white-space:nowrap}
.ficha-valor .v{font-size:var(--t-lg);font-weight:600}
.ficha-motivo{padding:0 var(--e-1);font-size:var(--t-sm);color:var(--tinta-2);
  font-style:italic}
.acoes{display:flex;flex-direction:column;gap:var(--e-2)}
.acoes form{display:flex;flex-direction:column;gap:var(--e-2)}

/* concluir e receber: a ação principal, aberta sozinha quando já confirmou */
.receber{border:1px solid var(--linha);border-radius:var(--r-2);overflow:hidden;
  background:var(--cartao)}
.receber > summary{list-style:none;border-radius:0;justify-content:center}
.receber > summary::-webkit-details-marker{display:none}
.receber[open] > summary{border-radius:0;background:var(--vinho-lav);color:var(--vinho);
  border-bottom:1px solid var(--linha)}
.receber form{padding:var(--e-3)}
.formas .chip{flex:1 1 auto;justify-content:center;min-width:106px}

.ruim{border-top:1px solid var(--linha);padding-top:var(--e-2)}
.ruim > summary{list-style:none;min-height:var(--toque);display:flex;align-items:center;
  justify-content:center;cursor:pointer}
.ruim > summary::-webkit-details-marker{display:none}
.ruim[open] > summary{background:var(--vinho-lav);color:var(--vinho)}
.ruim form{margin-top:var(--e-2)}
.ruim input{min-height:var(--toque);padding:0 12px;border-radius:var(--r-1);
  border:1px solid var(--linha-2);background:var(--cartao);color:var(--tinta)}
.prazo-agenda{padding:var(--e-2) var(--e-3);border-radius:var(--r-1);
  background:var(--ambar-lav);color:var(--ambar)}
.zap{color:var(--verde);border-color:var(--verde)}

/* ── mensagens prontas do WhatsApp ─────────────────────────────────────── */
.mensagens-cabecalho{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--e-3);padding:var(--e-5) var(--e-4) var(--e-3)}
.mensagens-cabecalho h2{font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso);font-size:var(--t-xl);
  line-height:1.15;color:var(--vinho)}
.mensagens-cabecalho .obs{max-width:520px;margin-top:var(--e-1);font-size:var(--t-sm);
  color:var(--tinta-2)}
.mensagens-cabecalho .btn{flex:0 0 auto}
.mensagens-dica{display:flex;align-items:flex-start;gap:var(--e-2);margin:0 var(--e-4) var(--e-3);
  padding:var(--e-3);border:1px solid var(--vinho-med);border-radius:var(--r-2);
  background:var(--vinho-lav);color:var(--vinho)}
.mensagens-dica-icone{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;
  border-radius:50%;background:var(--cartao);color:var(--vinho)}
.mensagens-dica-icone .ic{width:18px;height:18px}
.mensagens-dica p{font-size:var(--t-sm);line-height:1.4;color:var(--tinta-2)}
.mensagens-lista{display:flex;flex-direction:column;gap:var(--e-3);padding:0 var(--e-4) var(--e-5)}
.mensagem-card{padding:var(--e-3);border:1px solid var(--linha);border-radius:var(--r-2);
  background:var(--cartao);box-shadow:0 2px 8px color-mix(in srgb,var(--tinta) 5%,transparent)}
.mensagem-card-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e-3)}
.mensagem-titulo{display:flex;align-items:center;gap:var(--e-2);min-width:0}
.mensagem-icone{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;
  border-radius:var(--r-1);background:var(--vinho-lav);color:var(--vinho)}
.mensagem-icone .ic{width:20px;height:20px}
.mensagem-titulo h3{font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso);font-size:var(--t-md);line-height:1.2;
  overflow-wrap:anywhere}
.mensagem-categoria{display:block;margin-top:2px;font-size:var(--t-xs);color:var(--tinta-3);
  letter-spacing:.08em}
.mensagem-status{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.mensagem-status .st{display:inline-block;margin:0}
.mensagem-corpo{margin:var(--e-3) 0;padding:var(--e-3);border-radius:var(--r-1);
  background:var(--fundo);border:1px solid var(--linha);font-size:var(--t-sm);
  line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--tinta-2)}
.mensagem-acoes{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.mensagem-acoes form{display:flex}
.mensagem-acoes .btn{min-height:42px}
.mensagem-arquivada{opacity:.72}
@media(max-width:520px){
  .mensagens-cabecalho{align-items:stretch;flex-direction:column}
  .mensagens-cabecalho .btn{width:100%}
  .mensagem-card-topo{flex-direction:column}
  .mensagem-status{justify-content:flex-start}
  .mensagem-acoes > .btn,.mensagem-acoes form,.mensagem-acoes form .btn{flex:1 1 140px}
}

.mensagens-editor-cabecalho{padding:var(--e-5) var(--e-4) var(--e-2)}
.mensagens-editor-cabecalho h2{font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso);font-size:var(--t-xl);
  line-height:1.15;color:var(--vinho)}
.mensagens-editor-cabecalho .obs{margin-top:var(--e-1);font-size:var(--t-sm);color:var(--tinta-2)}
.mensagem-formulario{padding-top:var(--e-3)}
.mensagem-formulario textarea{min-height:168px;line-height:1.5}
.mensagem-variaveis{padding:var(--e-3);margin-bottom:var(--e-3);border-radius:var(--r-2);
  background:var(--vinho-lav);border:1px solid var(--vinho-med)}
.mensagem-variaveis .chips{margin-top:var(--e-2)}
.mensagem-variaveis .chip{min-height:38px;padding:6px 10px;font-size:var(--t-sm);
  color:var(--vinho);border-color:var(--vinho-med);background:var(--cartao)}
.mensagem-preview{margin-top:var(--e-3);padding:var(--e-3);border-radius:var(--r-2);
  border:1px solid var(--linha);background:var(--cartao-2)}
.mensagem-preview p{margin-top:var(--e-2);padding:var(--e-3);border-radius:var(--r-1);
  background:var(--cartao);border:1px solid var(--linha);white-space:pre-wrap;
  overflow-wrap:anywhere;line-height:1.5;color:var(--tinta-2)}

/* ── automações de confirmação e presença ──────────────────────────────── */
.automacoes-config{margin:var(--e-4) 0;display:flex;flex-direction:column;gap:var(--e-3)}
.automacoes-config h2{margin-top:calc(-1 * var(--e-2))}
.automacoes-config .campo{margin:0}
.avisos-automaticos{margin-bottom:var(--e-4);border-color:var(--ambar);
  background:var(--ambar-lav)}
.avisos-automaticos h2{margin:var(--e-1) 0 var(--e-3)}
.lista-avisos-automaticos{display:flex;flex-direction:column;gap:var(--e-2);
  margin-bottom:var(--e-3)}
.aviso-automatico-item{display:flex;flex-direction:column;gap:2px;padding:var(--e-2);
  border-radius:var(--r-1);background:var(--cartao);border:1px solid var(--linha)}
.aviso-automatico-item b{color:var(--tinta)}
.aviso-automatico-item span{font-size:var(--t-sm);color:var(--tinta-2)}

/* ── ficar indisponível ──────────────────────────────────────────────────── */
.periodo{display:grid;grid-template-columns:1fr auto auto;gap:var(--e-2);
  align-items:end}
.periodo .campo{margin-bottom:0}
.periodo input{min-width:0}
.presos{margin:var(--e-3) 0 0}
.presos .item{grid-template-columns:var(--col-hora) 4px minmax(0,1fr);
  align-items:start;padding-bottom:var(--e-2)}
.presos .dir{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--e-2);
  padding:var(--e-2) var(--e-3) 0;text-align:left}
.chip.pequeno{min-height:38px;padding:6px var(--e-2);font-size:var(--t-sm)}

/* ── serviços feitos juntos: preferência editável, histórico preservado ─── */
.atalho-tempos-juntos{padding-top:0}
.tempos-juntos-intro{padding-bottom:var(--e-3)}
.tempos-juntos-lista{padding:0 var(--e-4);display:flex;flex-direction:column;
  gap:var(--e-3)}
.tempo-junto-item{display:flex;flex-direction:column;gap:var(--e-3)}
.tempo-junto-cabecalho{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--e-3)}
.tempo-junto-cabecalho h2{font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso);font-size:var(--t-md)}
.tempo-junto-form{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--e-2);align-items:end}
.tempo-junto-form .campo{margin-bottom:0}
.tempo-junto-entrada{display:flex;align-items:center;gap:var(--e-2)}
.tempo-junto-entrada input{width:100%}
@media(max-width:420px){
  .tempo-junto-form{grid-template-columns:1fr}
  .tempo-junto-form .btn{width:100%}
}
.dia-acoes{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-top:var(--e-2)}
.dia-acoes .btn{flex:1 1 auto}

/* ── clientes ────────────────────────────────────────────────────────────── */
.procurar{display:flex;align-items:center;gap:var(--e-2);margin-top:var(--e-3);
  border:1px solid var(--linha-2);border-radius:99px;padding:0 var(--e-3);
  background:var(--cartao)}
.procurar .ic{color:var(--tinta-3);flex:0 0 auto}
.procurar input{flex:1;min-width:0;border:0;background:none;color:var(--tinta);
  min-height:var(--toque);padding:0}
.procurar input:focus{outline:none}
.procurar .btn{padding:0 var(--e-2);min-height:36px;border:0}
.item-cliente{grid-template-columns:minmax(0,1fr) auto;padding:var(--e-3)}
.item-cliente .seta{color:var(--tinta-3)}
.grade-cliente{padding-left:0;padding-right:0}
.marca-caixa{display:flex;align-items:center;gap:var(--e-2);min-height:var(--toque);
  font-size:var(--t-base)}
.marca-caixa input{width:20px;height:20px;accent-color:var(--vinho)}
.campo textarea{min-height:88px;padding:var(--e-2) 12px;border-radius:var(--r-1);
  border:1px solid var(--linha-2);background:var(--cartao);color:var(--tinta);
  font-family:inherit;resize:vertical}
.campo .dica{margin-top:2px;text-transform:none;letter-spacing:0}

/* ── caixa ───────────────────────────────────────────────────────────────── */
.mes-troca{display:flex;align-items:center;gap:var(--e-2);margin-top:var(--e-3)}
.mes-troca input{flex:1;min-width:0;min-height:var(--toque);border-radius:var(--r-1);
  border:1px solid var(--linha-2);background:var(--cartao);color:var(--tinta);
  padding:0 var(--e-2)}
.dois-numeros{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-3);
  margin:var(--e-3) var(--e-4) 0}
.dois-numeros > div{min-width:0}
.dois-numeros .v{font-size:var(--t-xl)}
.bloco-link{display:block;text-decoration:none}
.acoes-caixa{padding:var(--e-3) var(--e-4) 0}
.item-cat,.item-extrato{grid-template-columns:auto minmax(0,1fr) auto;padding:var(--e-3)}
.item-extrato{grid-template-columns:var(--col-hora) auto minmax(0,1fr) auto}
.ic-cat{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;
  place-items:center;background:var(--cartao-2);color:var(--tinta-2)}
.ic-cat.entrou{background:var(--verde-lav);color:var(--verde)}
.ic-cat.saiu{background:var(--ambar-lav);color:var(--ambar)}
.item .vl.pos{color:var(--verde)} .item .vl.neg{color:var(--tinta-2)}
.apagar,.ligar{background:none;border:0;color:var(--tinta-3);cursor:pointer;
  min-height:36px;min-width:36px;display:grid;place-items:center;margin-top:2px}
.apagar:hover,.ligar:hover{color:var(--vinho)}

/* ── serviços ────────────────────────────────────────────────────────────── */
.item-servico{grid-template-columns:4px minmax(0,1fr) auto;padding:var(--e-3) var(--e-3) var(--e-3) 0}
.item-servico .txt{padding-left:var(--e-3);text-decoration:none;color:inherit}
.item-servico.desligado{opacity:.55}
.item-servico.desligado .nm{text-decoration:line-through}
.dois-campos{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-2)}
.conta-viva{padding:var(--e-2) var(--e-3);background:var(--vinho-lav);
  border-radius:var(--r-1);color:var(--vinho);font-weight:600;margin-bottom:var(--e-3)}

/* ── jornada ─────────────────────────────────────────────────────────────── */
.jornada{display:flex;flex-direction:column;gap:var(--e-2);margin:var(--e-3) 0}
.dia{border:1px solid var(--linha);border-radius:var(--r-2);padding:var(--e-3);
  background:var(--cartao);opacity:.6}
.dia.trabalha{opacity:1;border-color:var(--vinho-med)}
.dia-nome{display:flex;align-items:center;gap:var(--e-2);min-height:var(--toque);
  font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso);font-size:var(--t-md);text-transform:capitalize}
.dia-nome input{width:20px;height:20px;accent-color:var(--vinho)}
.dia-faixas{display:flex;align-items:center;gap:var(--e-2);margin-top:var(--e-1)}
.dia-faixas .rot{flex:0 0 46px}
.dia-faixas input{width:74px;min-height:38px;text-align:center;border-radius:var(--r-1);
  border:1px solid var(--linha-2);background:var(--fundo);color:var(--tinta);
  font-variant-numeric:tabular-nums}

/* ── anamnese ────────────────────────────────────────────────────────────── */
.consentir{margin-bottom:var(--e-4);border-color:var(--vinho-med);
  background:var(--vinho-lav)}
.texto-consentimento{font-size:var(--t-sm);line-height:1.6;color:var(--tinta-2);
  margin:var(--e-2) 0}
.marca-caixa.destaque{font-weight:600;align-items:flex-start;gap:var(--e-2);
  padding:var(--e-2) 0}
.marca-caixa.destaque input{margin-top:2px;flex:0 0 20px}
.perguntas{display:flex;flex-direction:column;gap:var(--e-2)}
.pergunta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);
  padding:var(--e-2) 0;border-bottom:1px solid var(--linha)}
.p-txt{flex:1;min-width:180px;font-size:var(--t-base)}
.alertas{display:flex;gap:var(--e-2);align-items:flex-start;text-align:left}
.alertas ul{margin-top:var(--e-1);padding-left:16px;list-style:disc}
.alertas li{font-size:var(--t-sm)}

/* ── equipe ──────────────────────────────────────────────────────────────── */
.item-pessoa{grid-template-columns:auto minmax(0,1fr) auto;padding:var(--e-3)}
.bolinha{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;
  place-items:center;color:#fff;font-weight:600;font-size:var(--t-base)}
.cores{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-bottom:var(--e-3)}
.cor-op{width:40px;height:40px;border-radius:50%;cursor:pointer;position:relative;
  border:2px solid transparent}
.cor-op input{position:absolute;opacity:0}
.cor-op:has(input:checked){border-color:var(--tinta);box-shadow:0 0 0 2px var(--fundo) inset}

/* ── caminho para o perfil ───────────────────────────────────────────────── */
/* A bolinha sozinha ninguém lê como "tem menu aqui": o contorno e a setinha
   são o que fazem ela ser tocada. Foi por não ter isso que o botão de sair
   ficou invisível. */
.avatar{position:relative}
.avatar-marca{position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;
  border-radius:50%;background:var(--cartao);border:1px solid var(--linha-2);
  display:grid;place-items:center;color:var(--tinta-3)}
.avatar-marca .ic{width:11px;height:11px;stroke-width:2.4}

/* no PC o perfil é item do menu lateral, colado embaixo */
.nav-pe{display:none}
@media(min-width:1100px){
  .nav-pe{display:flex;align-items:center;gap:12px;margin-top:auto;
    padding:0 13px;min-height:44px;border-radius:var(--r-1);
    color:var(--tinta-3);font-size:var(--t-base);
    border-top:1px solid var(--linha);margin-bottom:var(--e-3)}
  .nav-pe.on{background:var(--vinho-lav);color:var(--vinho)}
  .nav-pe .ic{width:1.25em;height:1.25em}
}
.btn.sair{color:var(--vermelho);border-color:var(--vermelho)}

/* ── metas ───────────────────────────────────────────────────────────────── */
.definir-meta{margin-top:var(--e-3)}
.meta-cima em{font-style:normal;font-size:var(--t-sm);color:var(--tinta-3);
  font-weight:600}
.servicos-faz{max-height:none}
.servicos-faz .chip{padding-left:var(--e-3)}
.servicos-faz .ponto{position:static;width:8px;height:8px;flex:0 0 8px;
  margin-right:2px}

/* ── quem atende ─────────────────────────────────────────────────────────── */
.com-quem{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.com-quem i{width:7px;height:7px;border-radius:50%;display:inline-block;
  flex:0 0 7px}
.com-quem-linha{margin-top:var(--e-1)}
.com-quem-linha .com-quem i{width:9px;height:9px;flex:0 0 9px}
.quem-ve{margin-top:var(--e-3)}
.quem-ve .chip{text-decoration:none;min-height:38px;padding:6px var(--e-3);
  font-size:var(--t-sm)}
.quem-ve .chip.on{border-color:var(--vinho);background:var(--vinho-lav);
  color:var(--vinho);font-weight:600}
.bolinha-mini{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 9px}
.ver-livre{margin-top:var(--e-2);text-transform:none;letter-spacing:0}

/* ── documentos legais e o aceite ────────────────────────────────────────── */
/* Três telas usam este bloco: a política pública, o canal do titular e o portão
   do aceite. Nenhuma delas estende o base.html — são autônomas de propósito —
   então a largura de leitura e o respiro moram aqui e não no layout. */
.doc-pagina{min-height:100vh;min-height:100dvh;background:var(--fundo);
  padding:var(--e-4) var(--e-3);
  padding-bottom:calc(var(--e-5) + env(safe-area-inset-bottom))}
.doc{max-width:640px;margin:0 auto}
.doc h1{font-size:var(--t-xl);color:var(--vinho);line-height:1.15}
.doc h3{font-size:var(--t-md);font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso);color:var(--tinta);
  margin-top:var(--e-4);margin-bottom:var(--e-1)}
.doc p{font-size:var(--t-base);line-height:1.65;color:var(--tinta-2);
  margin-top:var(--e-2)}
.doc ul{margin-top:var(--e-2);padding-left:18px;list-style:disc}
.doc li{font-size:var(--t-base);line-height:1.6;color:var(--tinta-2);
  margin-top:var(--e-1)}
.doc .elo{display:inline-flex;align-items:center;gap:6px;min-height:var(--toque);
  color:var(--vinho);text-decoration:none;font-size:var(--t-base)}
.doc-versao{font-size:var(--t-sm);color:var(--tinta-3);
  letter-spacing:.04em;margin-bottom:var(--e-2)}

/* O texto do termo rola DENTRO da caixa: no celular, com o botão no fim de uma
   página de três mil palavras, ela desiste antes de chegar lá. */
.doc-caixa{max-height:52vh;overflow-y:auto;margin-top:var(--e-3);
  padding:var(--e-3);border:1px solid var(--linha-2);border-radius:var(--r-2);
  background:var(--cartao)}
.doc-caixa h3:first-child,.doc-caixa p:first-child{margin-top:0}

/* Grudado embaixo: sem isto o "Aceitar e entrar" fica no fim de um texto longo
   e some da tela dela. */
.aceite-fim{position:sticky;bottom:0;padding:var(--e-3) 0;
  padding-bottom:calc(var(--e-3) + env(safe-area-inset-bottom));
  background:var(--fundo);border-top:1px solid var(--linha);margin-top:var(--e-3)}
.aceite-fim .btn{margin-top:var(--e-2)}
.aceite-fim .dica{text-transform:none;letter-spacing:0;margin-top:var(--e-2)}

.encarregado{margin-top:var(--e-4);padding:var(--e-3);border-radius:var(--r-2);
  background:var(--vinho-lav);border:1px solid var(--vinho-med)}
.encarregado h3{margin-top:0}
.encarregado .dica{text-transform:none;letter-spacing:0;margin-top:var(--e-2)}

/* ── começar (onboarding) ────────────────────────────────────────────────── */
/* Três segmentos com CLASSE, nunca largura em style= inline (ADR-001 §9):
   largura cravada no HTML não tem estado intermediário e some no dia em que o
   CSS muda. Quem lê com leitor de tela recebe "Passo 2 de 3" no aria-label. */
.passos{display:flex;gap:6px;margin-bottom:var(--e-3)}
.passos i{flex:1;height:6px;border-radius:99px;background:var(--linha-2)}
.passos i.feito{background:var(--vinho)}
.passos i.atual{background:var(--vinho-med)}

.passo-topo{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e-2);margin-bottom:var(--e-3)}
.passo-topo .btn{padding:0 var(--e-2)}

/* uma linha por serviço: faço / quanto / quantos minutos */
.preco-linha{display:grid;grid-template-columns:minmax(0,1fr) 92px 84px;
  gap:var(--e-2);align-items:end;padding:var(--e-2) 0;
  border-bottom:1px solid var(--linha)}
.preco-linha .campo{margin-bottom:0}
.preco-linha .campo input{text-align:center;font-variant-numeric:tabular-nums}
.preco-faco{align-self:center;min-width:0}
.preco-faco span{overflow-wrap:anywhere}
.preco-linha.com-erro{background:var(--vermelho-lav);border-radius:var(--r-1)}
.preco-erro{grid-column:1/-1;display:flex;align-items:center;gap:6px;
  font-size:var(--t-sm);color:var(--vermelho)}
.falta-algum{margin-top:var(--e-4);text-transform:none;letter-spacing:0}

.comecar-cartao .nao-mostrar{background:transparent;border:0;color:var(--tinta-3);
  font-size:var(--t-sm);min-height:var(--toque);width:100%}

/* ── a caixa de colar e a prévia ─────────────────────────────────────────── */
.colar{min-height:180px;font-family:inherit;line-height:1.5}
.previa-num{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-3);
  margin-bottom:var(--e-3);font-size:var(--t-base);color:var(--tinta-2)}
.previa-num span{display:inline-flex;align-items:center;gap:6px}
.previa-num b{color:var(--tinta);font-variant-numeric:tabular-nums}

.previa-linha{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--e-2);padding:var(--e-2) 0;border-bottom:1px solid var(--linha)}
.previa-linha .marca-caixa{align-items:flex-start;padding-top:6px}
.previa-campos{display:flex;flex-wrap:wrap;gap:var(--e-2);min-width:0}
.previa-campos input{flex:1 1 140px;min-width:0;min-height:var(--toque);
  padding:10px 12px;border-radius:var(--r-1);border:1px solid var(--linha-2);
  background:var(--cartao);color:var(--tinta)}
.previa-campos input[type=date]{flex:0 1 168px}
.previa .repetida{opacity:.7}
.previa .repetida .rot{flex:1 0 100%;color:var(--tinta-3)}
/* a linha original, do jeito que ela colou: é por ela que ela se acha na lista */
.previa .crua{flex:1 0 100%;font-size:var(--t-sm);color:var(--tinta-3);
  overflow-wrap:anywhere}

/* dois botões no cabeçalho da lista de clientes: o primeiro empurra os dois
   para a direita, senão eles colam no título. Classe própria de propósito — a
   regra solta em `.tit .btn` mudaria de lugar o botão de outras cinco telas. */
.tit-acoes .btn:first-of-type{margin-left:auto}

/* ── instalar e sem internet ─────────────────────────────────────────────── */
/* Duas telas PÚBLICAS e autônomas, que não estendem o base.html: a de instalar
   — o endereço que vai na mensagem de boas-vindas — e a de sem internet, que é
   a única página que o service worker guarda no aparelho. Como nenhuma delas
   passa pelo layout do aplicativo, a casca mora aqui. */
.pagina-solta{min-height:100vh;min-height:100dvh;background:var(--fundo);
  padding:var(--e-4) var(--e-3);
  padding-bottom:calc(var(--e-5) + env(safe-area-inset-bottom))}
.folha{max-width:560px;margin-inline:auto}
.folha h1{font-size:var(--t-xl);color:var(--vinho);line-height:1.2;
  display:flex;align-items:center;gap:var(--e-2)}
.folha h1 .ic{flex:0 0 auto}
.titulo-solto{font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso);font-size:var(--t-md);
  color:var(--tinta);margin-top:var(--e-4)}
.folha .apoio{font-size:var(--t-base);line-height:1.6;color:var(--tinta-2);
  margin-top:var(--e-2)}
.folha .recado{margin:var(--e-3) 0 0;display:flex;align-items:flex-start;
  gap:var(--e-2)}
.folha .recado .ic{flex:0 0 auto;margin-top:3px}
/* .btn e .recado são flex; sem esta linha o atributo hidden não esconde nada */
.btn[hidden],.recado[hidden]{display:none}

/* Um caso por aparelho, em sanfona — mesmo desenho do .receber da ficha. Todos
   abrem no toque sem JavaScript: o script só decide qual já nasce aberto. */
.caso{margin-top:var(--e-2);border-radius:var(--r-2);background:var(--cartao);
  border:1px solid transparent}
.caso[open]{border-color:var(--linha)}
.caso > summary{list-style:none;display:flex;align-items:center;gap:var(--e-2);
  min-height:var(--toque);padding:var(--e-2) var(--e-3);cursor:pointer;
  font-size:var(--t-base);font-weight:600;color:var(--tinta);
  border-radius:var(--r-2)}
.caso > summary::-webkit-details-marker{display:none}
.caso > summary span{flex:1;min-width:0}
.caso > summary .ic{color:var(--vinho);flex:0 0 auto}
.caso > summary .seta{color:var(--tinta-3)}
.caso[open] > summary{background:var(--vinho-lav);color:var(--vinho);
  border-bottom:1px solid var(--linha);border-radius:var(--r-2) var(--r-2) 0 0}
.caso[open] > summary .seta{transform:rotate(180deg)}
.caso-corpo{padding:var(--e-3)}
.caso-corpo .btn.bloco{margin-bottom:var(--e-3)}

/* o passo a passo numerado: reaproveita a bolinha .passo-n da tela de marcar */
.caminho{display:flex;flex-direction:column;gap:var(--e-2)}
.caminho li{display:flex;align-items:flex-start;gap:var(--e-2);
  font-size:var(--t-base);line-height:1.55;color:var(--tinta-2)}
.caminho li > span:last-child{flex:1;min-width:0}
.caminho .passo-n{margin-top:2px}
.caminho b{color:var(--tinta)}

/* o endereço do site, para quem vai digitar na mão no navegador de verdade */
.endereco{margin-top:var(--e-2);padding:var(--e-3);border-radius:var(--r-1);
  background:var(--vinho-lav);border:1px solid var(--vinho-med)}
.endereco span{display:block;font-size:var(--t-base);font-weight:600;
  color:var(--vinho);overflow-wrap:anywhere}
.endereco .btn{width:100%;margin-top:var(--e-2)}

/* as duas listas do "sem internet": aqui o ícone é SINAL, não enfeite — é ele
   que diz, antes da leitura, se a linha é o que dá ou o que não dá */
.sinal{display:flex;flex-direction:column;gap:var(--e-2);margin-top:var(--e-2)}
.sinal li{display:flex;align-items:flex-start;gap:var(--e-2);
  font-size:var(--t-base);line-height:1.5;color:var(--tinta-2)}
.sinal .ic{flex:0 0 auto;margin-top:3px}
.sinal.pode .ic{color:var(--verde)}
.sinal.nao-pode .ic{color:var(--vermelho)}

.fim-solta{margin-top:var(--e-5);padding-top:var(--e-3);
  border-top:1px solid var(--linha);display:flex;flex-direction:column;
  gap:var(--e-2)}
.fim-solta .apoio{margin-top:0}
/* elo é LINHA própria e não texto no meio do parágrafo: em linha ele virava um
   alvo de 20px encostado no fim de uma frase */
.fim-solta .elo{display:flex;align-items:center;gap:var(--e-2);
  min-height:var(--toque);color:var(--vinho);font-weight:600;
  font-size:var(--t-base)}

/* Link de texto puro tem uns 20px; o alvo do projeto é o dedo dela. E `flex` e
   não `inline-flex` porque em linha ele encostava no "Esqueci minha senha" —
   dois alvos de dedo colados são dois toques errados. */
.entrar a.dica{display:flex;align-items:center;justify-content:center;
  min-height:var(--toque);padding:0 var(--e-3)}

/* ── dívida e recebimentos parciais ────────────────────────────────────── */
.receber-home{margin-bottom:var(--e-4);border-color:var(--vinho-med)}
.receber-home-cabecalho{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e-3);margin-bottom:var(--e-2)}
.receber-home-cabecalho h2{margin:2px 0 0}
.dividas-home{border-top:1px solid var(--linha)}
.divida-home{border-bottom:1px solid var(--linha)}
.divida-home > summary{list-style:none;cursor:pointer}
.divida-home > summary::-webkit-details-marker{display:none}
.divida-home > summary.item{grid-template-columns:minmax(0,1fr) auto;
  padding:var(--e-3);gap:var(--e-3)}
.divida-home > summary.item .txt{min-width:0}
.divida-home > summary.item .btn{flex:0 0 auto}
.divida-home[open] > summary{background:var(--vinho-lav)}
.divida-home .btn.pequeno{min-height:36px;padding:6px 12px;font-size:var(--t-sm)}
.receber-home-form{padding:var(--e-3);background:var(--cartao-2);
  border-top:1px solid var(--linha)}
.receber-home-form .campo{margin-bottom:var(--e-2)}
.receber-home-form .rot{display:block;text-align:center;margin-top:var(--e-1)}
.saldo-devedor{width:100%;box-shadow:none;background:var(--vermelho-lav);
  border-color:color-mix(in srgb,var(--vermelho) 25%,var(--linha))}
.historico-pagamentos{width:100%;padding-top:var(--e-3);
  border-top:1px solid var(--linha)}
.linha-pagamento{display:flex;justify-content:space-between;gap:var(--e-2);
  padding:var(--e-2) 0;border-bottom:1px solid var(--linha);
  font-size:var(--t-sm);color:var(--tinta-2)}
.linha-pagamento b{color:var(--verde);font-variant-numeric:tabular-nums}

/* ── remuneração da equipe ─────────────────────────────────────────────── */
.remuneracao-form{margin:var(--e-4) 0;padding:var(--e-3);
  border:1px solid var(--linha);border-radius:var(--r-2);background:var(--cartao-2)}
.remuneracao-tipos{margin-bottom:var(--e-3)}
.remuneracao-valores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-3)}
.remuneracao-valores .campo{margin:0}
.com-sufixo{display:flex;align-items:center;border:1px solid var(--linha-2);
  border-radius:var(--r-1);background:var(--cartao)}
.com-sufixo input{flex:1;min-width:0;border:0;background:transparent}
.com-sufixo span{padding:0 var(--e-3);color:var(--tinta-2);font-weight:600}
.caixa-equipe-explica{padding:var(--e-2) var(--e-3);line-height:1.5}
.equipe-caixa .item{grid-template-columns:minmax(0,1fr) auto;padding:var(--e-3)}
.equipe-caixa .item .dir{min-width:fit-content}

/* ── relatório financeiro ─────────────────────────────────────────────── */
.filtros-relatorio{margin-bottom:var(--e-3);box-shadow:0 2px 10px color-mix(in srgb,var(--tinta) 5%,transparent)}
.filtros-relatorio > .grade{padding:0;margin:0 0 var(--e-2)}
.periodo-relatorio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-3)}
.filtros-relatorio-grade{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-3)}
.exportar-relatorio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--e-2);margin-bottom:var(--e-3)}
.resumo-relatorio{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:var(--e-4)}
.resumo-relatorio .cartao{box-shadow:0 2px 8px color-mix(in srgb,var(--tinta) 4%,transparent)}
.tabela-rolagem{overflow-x:auto;border:1px solid var(--linha);
  border-radius:var(--r-2);background:var(--cartao)}
.tabela-relatorio{width:100%;min-width:780px;border-collapse:collapse;
  font-size:var(--t-sm)}
.tabela-relatorio th,.tabela-relatorio td{padding:10px 12px;text-align:left;
  border-bottom:1px solid var(--linha);vertical-align:top}
.tabela-relatorio th{background:var(--vinho-lav);color:var(--vinho);font-weight:700}
.tabela-relatorio td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tabela-relatorio tbody tr:last-child td{border-bottom:0}
.lista-relatorio-recebimentos .item{grid-template-columns:var(--col-hora) minmax(0,1fr) auto;
  padding:var(--e-3)}
.lista-relatorio-recebimentos .item .h{padding-left:0}

@media(max-width:700px){
  .receber-home-cabecalho{align-items:flex-start;flex-direction:column}
  .remuneracao-valores,.periodo-relatorio,.filtros-relatorio-grade,
  .exportar-relatorio{grid-template-columns:1fr}
  .resumo-relatorio{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ═══ 05-publico.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   PÚBLICO — a página de quem ainda não tem conta (templates/publico/landing)
   Só tokens de 00-tokens.css: a página e o app têm de parecer a mesma coisa,
   e o tema escuro vem de graça. Tudo prefixado com .lp para não vazar no app.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Os três trabalhos do dia (no :root porque o build exige todo token lá, e é
   ali que o tema escuro troca o --vinho de que eles dependem). A cor É informação: a mesma cor marca o horário no
   dia de exemplo e a coluna lá embaixo, para o olho ligar um ao outro. */
:root{--atende:var(--vinho);--recepcao:var(--verde);--admin:var(--ambar);
  --cor:var(--linha-2);--lp-larg:1120px;--lp-margem:max(16px,var(--e-5))}

.lp main{max-width:var(--lp-larg);margin:0 auto;padding:0 var(--lp-margem)}

.lp-topo{
  max-width:var(--lp-larg);margin:0 auto;padding:var(--e-4) var(--lp-margem);
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--e-3);
}
.lp-marca{font-size:var(--t-lg);color:var(--tinta);display:inline-flex;align-items:center;gap:10px}
.lp-marca img{width:30px;height:30px;border-radius:7px}
.lp-entrar{font-size:var(--t-sm);font-weight:600}

/* ── primeira dobra ──────────────────────────────────────────────────────── */
.lp-abre{
  display:grid;gap:var(--e-5);
  padding:var(--e-4) 0 var(--e-5);
}
@media (min-width:900px){
  .lp-abre{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:clamp(32px,5vw,72px);align-items:start;padding-top:var(--e-5)}
}

.lp-titulo{
  font-size:clamp(34px,4.6vw + 12px,66px);line-height:1.02;letter-spacing:-.02em;
  max-width:13ch;color:var(--tinta);
  /* o título é a gravação no corpo da câmera: largo e firme (vence o .serif) */
  font-stretch:122%;font-weight:700;
}
.lp-sub{
  margin-top:var(--e-4);max-width:44ch;
  font-size:var(--t-md);line-height:1.55;color:var(--tinta-2);
}

.lp-preco-curto{
  margin-top:var(--e-4);border-collapse:collapse;width:100%;max-width:440px;
  font-size:var(--t-base);
}
.lp-preco-curto th,.lp-preco-curto td{padding:10px 0;border-bottom:1px solid var(--linha);text-align:left}
.lp-preco-curto thead th{font-size:var(--t-sm);font-weight:600;color:var(--tinta-3);padding-top:0}
.lp-preco-curto tbody th{font-weight:400;color:var(--tinta-2);padding-right:var(--e-3)}
.lp-preco-curto td{text-align:right;font-weight:600;white-space:nowrap;padding-left:var(--e-3)}
.lp-preco-curto thead th:not(:first-child){text-align:right}

.lp-acao{margin-top:var(--e-4);display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3)}
.lp-acao-nota{font-size:var(--t-sm);color:var(--tinta-2)}

/* ── o dia de uma cadeira ────────────────────────────────────────────────── */
.lp-dia{
  background-color:var(--cartao);      /* -color: o shorthand apagaria as marcas do .visor */border:1px solid var(--linha);border-radius:var(--r-3);
  padding:var(--e-4);box-shadow:var(--sombra);
}
.lp-dia-leg{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:var(--e-2);margin-bottom:var(--e-3)}
.lp-dia-leg .serif{font-size:var(--t-lg)}
.lp-dia-chaves{display:flex;flex-wrap:wrap;gap:var(--e-1) var(--e-3);font-size:var(--t-xs);color:var(--tinta-2)}
.lp .k{display:inline-flex;align-items:center;gap:6px}
.lp-dia-chaves .k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cor)}
.lp .k-atende{--cor:var(--atende)} .lp .k-recepcao{--cor:var(--recepcao)} .lp .k-admin{--cor:var(--admin)}

/* O trilho vertical é o dia; cada horário é uma conta pendurada nele. */
.lp-dia-lista{position:relative;font-size:var(--t-sm)}
.lp-dia-lista::before{content:"";position:absolute;left:calc(3.4em + 11px);top:6px;bottom:6px;
  width:2px;background:var(--linha)}
.lp-dia-lista li{
  position:relative;display:grid;grid-template-columns:3.4em 1fr;gap:30px;
  padding:9px 0;line-height:1.4;
}
.lp-dia-lista li::before{
  content:"";position:absolute;left:calc(3.4em + 6px);top:14px;
  width:12px;height:12px;border-radius:50%;
  background:var(--cartao);border:3px solid var(--cor,var(--linha-2));
}
.lp-dia-lista time{font-variant-numeric:tabular-nums;color:var(--tinta-3);padding-top:1px}
.lp-dia-lista b{display:block;font-weight:600;color:var(--tinta)}
.lp-dia-lista span{color:var(--tinta-2)}
.lp-dia-lista .t-atende{--cor:var(--atende)}
.lp-dia-lista .t-recepcao{--cor:var(--recepcao)}
.lp-dia-lista .t-admin{--cor:var(--admin)}
.lp-dia-lista .t-vao span{font-style:italic;color:var(--tinta-3)}

/* A marcação recusada: o único horário da lista que NÃO aconteceu. */
.lp-dia-lista .lp-recusa > div{
  border:1px dashed var(--linha-2);border-radius:var(--r-1);padding:8px 10px;margin:-2px 0;
  background:var(--fundo);
}
.lp-dia-lista .lp-recusa b{text-decoration:line-through;text-decoration-color:var(--tinta-3);color:var(--tinta-2)}
.lp-dia-lista .lp-recusa::before{background:var(--fundo);border-style:dashed}

/* O único movimento da página: o dia se desenrola uma vez, na chegada. */
@media (prefers-reduced-motion:no-preference){
  .lp-dia-lista li{animation:lp-entra .5s cubic-bezier(.2,.7,.2,1) both}
  .lp-dia-lista li:nth-child(2){animation-delay:.12s}
  .lp-dia-lista li:nth-child(3){animation-delay:.24s}
  .lp-dia-lista li:nth-child(4){animation-delay:.36s}
  .lp-dia-lista li:nth-child(5){animation-delay:.48s}
  .lp-dia-lista li:nth-child(6){animation-delay:.60s}
  .lp-dia-lista li:nth-child(7){animation-delay:.72s}
}
@keyframes lp-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── seções de texto ─────────────────────────────────────────────────────── */
.lp main > section:not(.lp-abre){padding:var(--e-5) 0;border-top:1px solid var(--linha)}
.lp-h2{font-size:var(--t-2xl);line-height:1.12;letter-spacing:-.01em;max-width:22ch}
.lp-corpo{margin-top:var(--e-3);max-width:62ch;color:var(--tinta-2);line-height:1.6}

.lp-tres-col{display:grid;gap:var(--e-4);margin-top:var(--e-5)}
@media (min-width:800px){.lp-tres-col{grid-template-columns:repeat(3,1fr)}}
.lp-trab{border-top:3px solid var(--cor);padding-top:var(--e-3)}
.lp-trab h3{font-family:var(--f-t);font-stretch:var(--f-t-largura);font-weight:var(--f-t-peso);font-size:var(--t-lg);color:var(--tinta)}
.lp-trab ul{margin-top:var(--e-2);display:grid;gap:var(--e-2)}
.lp-trab li{font-size:var(--t-base);color:var(--tinta-2);line-height:1.5;padding-left:1em;position:relative}
.lp-trab li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--cor)}

.lp-planos-grade{display:grid;gap:var(--e-3);margin-top:var(--e-4)}
@media (min-width:720px){.lp-planos-grade{grid-template-columns:1fr 1fr}}
.lp-plano{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--r-2);padding:var(--e-4)}
.lp-plano-pro{border-color:var(--vinho)}
.lp-plano h3{font-size:var(--t-xl);color:var(--vinho)}
.lp-valores{margin:var(--e-3) 0}
.lp-valores div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e-2);
  padding:8px 0;border-bottom:1px solid var(--linha)}
.lp-valores dt{color:var(--tinta-2);font-size:var(--t-base)}
.lp-valores dd{margin:0;font-weight:600;font-size:var(--t-lg);white-space:nowrap}
.lp-valores small{font-size:var(--t-xs);font-weight:400;color:var(--tinta-3);margin-left:2px}
.lp-plano p{color:var(--tinta-2);font-size:var(--t-base);line-height:1.55}
.lp-planos-nota{margin-top:var(--e-3);font-size:var(--t-sm);color:var(--tinta-2)}

.lp-form{margin-top:var(--e-4);max-width:420px}

.lp-pe{
  max-width:var(--lp-larg);margin:var(--e-5) auto 0;padding:var(--e-4) var(--lp-margem) var(--e-5);
  border-top:1px solid var(--linha);display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-4);
  font-size:var(--t-sm);color:var(--tinta-2);
}
.lp-pe span{margin-right:auto}

/* ── formulário do teste grátis (app/routes/cadastro.py) ── */
.lp-form{max-width:30rem;margin-top:var(--e-4)}
.lp-form select{width:100%}
.lp-erro{display:block;margin-top:4px;font-size:var(--t-sm);color:var(--vermelho)}
.lp-form-nota{margin-top:var(--e-3);font-size:var(--t-xs);color:var(--tinta-3);line-height:1.5}
.lp-isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cc-acesso{display:grid;grid-template-columns:auto 1fr;gap:var(--e-2) var(--e-3);margin:var(--e-3) 0}
.cc-acesso dt{color:var(--tinta-3);font-size:var(--t-sm)}
.cc-acesso dd{font-weight:600;word-break:break-all}
.cc-senha{font-family:ui-monospace,Consolas,monospace;font-size:var(--t-lg);letter-spacing:.06em}
.cc-aviso{margin:var(--e-3) 0;font-size:var(--t-sm)}