/* 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 "Esmalte leve" (ADR-001 §11)

   A regra que define esta direção, e que nasceu de uma rejeição:
       cor forte só em traço, texto e ponto.
       campo grande sempre no tom lavado da mesma cor.
   O vinho tem ~7:1 de contraste sobre branco — ótimo para texto, agressivo
   como campo cheio. O que cansava a vista era a ÁREA, não a cor.

   Tema: o claro é a base do :root. O escuro redefine SÓ tokens, em dois
   lugares — na preferência do aparelho e no data-theme. Nenhuma cor pode ser
   declarada apenas dentro de um desses blocos, senão a página renderiza o
   texto de um tema sobre o fundo do outro.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── superfícies ─────────────────────────────────────────────────────── */
  --fundo:#FCFAFA;
  --cartao:#FFFFFF;
  --cartao-2:#F7F2F4;

  /* ── texto ───────────────────────────────────────────────────────────── */
  --tinta:#2B2226;      /* quase-preto QUENTE; preto puro pesa no olho */
  --tinta-2:#6E5F65;
  --tinta-3:#7A6A70;    /* 5,09:1 — carrega o horário da agenda, então se calcula */

  /* ── traço ───────────────────────────────────────────────────────────── */
  --linha:#ECE4E6;
  --linha-2:#DCD0D4;

  /* ── marca ───────────────────────────────────────────────────────────── */
  --vinho:#9B2C55;
  --vinho-lav:#FBF2F5;  /* campo grande usa ESTE */
  --vinho-med:#EFDCE3;
  --sobre-vinho:#FFFFFF;

  /* ── sinal (nunca decoração) ─────────────────────────────────────────── */
  --verde:#2C7256;  --verde-lav:#EAF4EF;
  --ambar:#96601A;  --ambar-lav:#FBF1E4;
  --vermelho:#A32A22; --vermelho-lav:#FBEDEC;

  /* ── cor do SERVIÇO ──────────────────────────────────────────────────── */
  /* sempre token: cravada no HTML não vira com o tema, e no escuro sumia */
  --sv-1:#9B2C55; --sv-2:#B8446E; --sv-3:#C25C82; --sv-4:#8E4A6B; --sv-5:#6E2340;

  /* ── tipografia ──────────────────────────────────────────────────────── */
  --f:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --f-t:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;

  /* 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);

  --r-1:8px; --r-2:12px; --r-3:16px;
  --toque:44px;                                /* alvo mínimo de dedo */
  --col-hora:clamp(60px, 4vw + 45.6px, 76px);
  --barra:59px;                                /* altura da barra de baixo */
  --sombra:0 1px 2px rgba(43,34,38,.05), 0 4px 14px rgba(43,34,38,.04);

  /* 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 ─────────────────────────────────────────────────────────── */
/* :not([data-theme="light"]) para a escolha explícita da usuária vencer o
   sistema operacional dela nos dois sentidos. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fundo:#181316;
    --cartao:#201A1D;
    --cartao-2:#282023;
    --tinta:#F0E8EA; --tinta-2:#BBA9AF; --tinta-3:#9A898E;
    --linha:#2E2528; --linha-2:#3D3135;
    --vinho:#EFA0B4;              /* clareado: vinho cheio brilha no escuro */
    --vinho-lav:#2A1D22; --vinho-med:#3A2830;
    --sobre-vinho:#201A1D;        /* branco sobre rosa claro dá 2:1 */
    --verde:#7CC3A0;  --verde-lav:#1B2A23;
    --ambar:#DCA96A;  --ambar-lav:#2C2317;
    --vermelho:#E58A7E; --vermelho-lav:#2E1D1B;
    --sv-1:#F4B0C0; --sv-2:#E58AA8; --sv-3:#CE7A96; --sv-4:#B86A85; --sv-5:#A05A75;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --fundo:#181316;
  --cartao:#201A1D;
  --cartao-2:#282023;
  --tinta:#F0E8EA; --tinta-2:#BBA9AF; --tinta-3:#9A898E;
  --linha:#2E2528; --linha-2:#3D3135;
  --vinho:#EFA0B4;
  --vinho-lav:#2A1D22; --vinho-med:#3A2830;
  --sobre-vinho:#201A1D;
  --verde:#7CC3A0;  --verde-lav:#1B2A23;
  --ambar:#DCA96A;  --ambar-lav:#2C2317;
  --vermelho:#E58A7E; --vermelho-lav:#2E1D1B;
  --sv-1:#F4B0C0; --sv-2:#E58AA8; --sv-3:#CE7A96; --sv-4:#B86A85; --sv-5:#A05A75;
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
}

/* ═══ 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;
  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 em maiúscula — o menorzinho da tela, por isso o token de contraste
   dele é calculado, não estimado. */
.rot{
  font-size:var(--t-xs);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-3);
}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.serif{font-family:var(--f-t);font-weight:400}

:focus-visible{outline:2px solid var(--vinho);outline-offset:2px}
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(--cartao);border-bottom:1px solid var(--linha);
  padding:var(--e-4) var(--e-4) var(--e-3);position:relative;
}
.topo::after{                       /* a cor da marca aparece como TRAÇO */
  content:'';position:absolute;left:var(--e-4);right:var(--e-4);bottom:-1px;
  height:2px;background:var(--vinho);opacity:.85;
}
.topo-linha{display:flex;align-items:flex-start;gap:var(--e-2)}
.topo h1{font-family:var(--f-t);font-weight:400;font-size:var(--t-xl);
  line-height:1.1;letter-spacing:-.01em;margin-top:4px}

/* ── barra de navegação ──────────────────────────────────────────────────── */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--cartao);border-top:1px solid var(--linha);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(--tinta-3);font-size:var(--t-sm);font-weight:500;
}
.nav a.on{color:var(--vinho)}
/* Í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:58px;height:58px;border-radius:19px;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. */
  background:var(--vinho);color:var(--sobre-vinho);
  border:3px solid var(--fundo);
  display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.18);
}
.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(--linha);
    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:var(--vinho-lav)}
  .nav .ic{width:1.25em;height:1.25em}
  .nav-marca{display:block;font-family:var(--f-t);font-size:var(--t-lg);
    padding:0 13px var(--e-4);color:var(--tinta)}
  .fab{position:static;width:auto;height:auto;margin:var(--e-3) 12px 0;
    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;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:transparent;color:var(--tinta-2);border-color:var(--linha-2)}
.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-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-weight:400;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:99px;background:var(--vinho)}
.item .txt{min-width:0}
.item .nm{font-family:var(--f-t);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:.06em;
  text-transform:uppercase;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-weight:400;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)}

/* ═══ 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-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 form{margin-top:var(--e-4);text-align:left}
.entrar .recado{margin:var(--e-3) 0 0}

.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-weight:400;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}

.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-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-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{min-height:var(--toque);display:flex;align-items:center;
  color:var(--tinta-3);font-size:var(--t-sm);cursor:pointer}
.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)}
.zap{color:var(--verde);border-color:var(--verde)}

/* ── 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)}
.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-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}