/* ============================================================
   BARBEARIA — estilos próprios do nicho

   Carregado DEPOIS de main.css, que continua sendo a identidade
   visual do Finanze: as variáveis (--gold, --surface-1, --border,
   --radius-*), o reset, o header, o login, a navegação inferior,
   os modais de alerta e os cards de configuração vêm todos de lá.

   Aqui mora só o que a barbearia tem e a loja de roupas não tinha:
   o calendário da agenda, o bloco do corte marcado, a ficha do
   cliente e o catálogo de serviços.
   ============================================================ */

/* Cores de estado do agendamento. Ficam num lugar só porque o mesmo
   par (cor / cor de fundo) é usado no bloco do calendário, no ponto
   da lista e no selo do drawer — e três tons diferentes de "cancelado"
   espalhados pelo arquivo é como esse tipo de coisa desanda. */
:root {
  --ag-agendado:      #D4AF37;
  --ag-agendado-bg:   rgba(212, 175, 55, 0.12);
  --ag-concluido:     #22C55E;
  --ag-concluido-bg:  rgba(34, 197, 94, 0.12);
  --ag-cancelado:     #6B6B6B;
  --ag-cancelado-bg:  rgba(107, 107, 107, 0.10);
  --ag-faltou:        #EF4444;
  --ag-faltou-bg:     rgba(239, 68, 68, 0.10);

  /* Altura de um minuto na régua do dia. 1.5px dá 45px por meia hora:
     alto o suficiente para o nome do cliente caber numa linha. */
  --ag-px-min: 1.5px;
  --ag-gutter: 52px;
}

/* ============================================================
   AGENDA — barra de controle
   ============================================================ */
.ag-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ag-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3px;
}

.ag-nav-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.ag-nav-btn:hover { background: var(--surface-3); color: var(--gold); }

.ag-periodo {
  flex: 1;
  min-width: 140px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: capitalize;
}

.ag-periodo-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0.02em;
}

.ag-hoje-btn {
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.ag-hoje-btn:hover { border-color: var(--gold); color: var(--gold); }

/* Alternador Dia / Semana / Mês */
.ag-modos {
  display: flex;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}

.ag-modo {
  padding: 7px 15px;
  font-size: 0.78rem;
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.ag-modo:hover { color: var(--text-secondary); }

.ag-modo.ativo {
  background: var(--gold);
  color: #0A0A0A;
}

/* Faixa de números do dia/período visível */
.ag-resumo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.ag-resumo-item {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 8px;
  text-align: center;
}

.ag-resumo-val {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.ag-resumo-lbl {
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 3px;
}

.ag-resumo-item.ag-r-fat .ag-resumo-val { color: var(--green); }
.ag-resumo-item.ag-r-abertos .ag-resumo-val { color: var(--gold); }

/* ============================================================
   AGENDA — visão DIA (régua de horas)
   ============================================================ */
.ag-dia {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ag-dia-corpo {
  position: relative;
  padding-left: var(--ag-gutter);
}

/* Uma linha por hora. O clique nela abre o formulário já com a hora. */
.ag-hora {
  position: relative;
  border-top: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s var(--ease);
}

.ag-hora:first-child { border-top: none; }
.ag-hora:hover { background: var(--gold-subtle); }

.ag-hora-lbl {
  position: absolute;
  left: calc(-1 * var(--ag-gutter));
  top: -1px;
  width: var(--ag-gutter);
  padding-right: 9px;
  text-align: right;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Meia hora: risco mais leve, só para o olho ancorar */
.ag-meia {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed rgba(42, 42, 42, 0.55);
  pointer-events: none;
}

/* Linha do "agora" — só aparece quando o dia exibido é hoje */
.ag-agora {
  position: absolute;
  left: var(--ag-gutter);
  right: 0;
  height: 0;
  border-top: 2px solid var(--red);
  z-index: 4;
  pointer-events: none;
}

.ag-agora::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
}

/* Camada onde os blocos são posicionados.

   Ela existe por um detalhe do CSS: elemento absoluto se posiciona pelo
   PADDING-box do ancestral, não pelo content-box. Sem esta camada
   recuada, `left: 6px` num bloco cairia dentro da coluna das horas, por
   cima dos rótulos. */
.ag-blocos {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ag-gutter);
  right: 0;
}

/* Bloco do corte marcado, posicionado pelo horário */
.ag-bloco {
  position: absolute;
  left: 6px;
  right: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--ag-agendado);
  background: var(--ag-agendado-bg);
  backdrop-filter: blur(2px);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  z-index: 3;
  transition: var(--transition);
}

.ag-bloco:hover {
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
}

.ag-bloco-nome {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ag-bloco-sub {
  font-size: 0.68rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ag-bloco-val {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* Quanto o bloco mostra depende de quanta altura o horário lhe dá.

   Meia hora são 45px, e três linhas empilhadas (nome, serviço, valor)
   pedem uns 64px — o texto seria cortado no meio. Então:

     até 20 min  →  só o nome
     até 35 min  →  nome e valor lado a lado, sem o serviço
     acima disso →  as três linhas                                      */
.ag-bloco { line-height: 1.28; }

.ag-bloco.ag-medio {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 4px 9px;
}

.ag-bloco.ag-medio .ag-bloco-sub  { display: none; }
.ag-bloco.ag-medio .ag-bloco-nome { flex: 1; min-width: 0; }
.ag-bloco.ag-medio .ag-bloco-val  { flex-shrink: 0; }

.ag-bloco.ag-curto { padding: 3px 9px; justify-content: center; }
.ag-bloco.ag-curto .ag-bloco-sub,
.ag-bloco.ag-curto .ag-bloco-val { display: none; }

.ag-bloco.st-concluido { border-left-color: var(--ag-concluido); background: var(--ag-concluido-bg); }
.ag-bloco.st-concluido .ag-bloco-val { color: var(--green); }
.ag-bloco.st-cancelado { border-left-color: var(--ag-cancelado); background: var(--ag-cancelado-bg); }
.ag-bloco.st-cancelado .ag-bloco-nome { text-decoration: line-through; color: var(--text-muted); }
.ag-bloco.st-cancelado .ag-bloco-sub,
.ag-bloco.st-cancelado .ag-bloco-val { color: var(--text-muted); }
.ag-bloco.st-faltou { border-left-color: var(--ag-faltou); background: var(--ag-faltou-bg); }
.ag-bloco.st-faltou .ag-bloco-val { color: var(--red); }

/* Dois cortes no mesmo horário dividem a largura, em vez de um sumir
   atrás do outro. É o sintoma de agendamento duplicado, e precisa
   aparecer na tela e não só na hora que o segundo cliente chega. */
.ag-bloco[data-col="2-0"] { right: 50%; margin-right: 3px; }
.ag-bloco[data-col="2-1"] { left: 50%; margin-left: 3px; }
.ag-bloco[data-col="3-0"] { right: 66.6%; margin-right: 2px; }
.ag-bloco[data-col="3-1"] { left: 33.3%; right: 33.3%; }
.ag-bloco[data-col="3-2"] { left: 66.6%; margin-left: 2px; }

/* ============================================================
   AGENDA — visão SEMANA
   ============================================================ */
.ag-semana-scroll {
  overflow-x: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}

.ag-semana {
  min-width: 620px;
}

.ag-semana-head {
  display: grid;
  grid-template-columns: var(--ag-gutter) repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface-1);
  z-index: 5;
}

.ag-sem-dia {
  padding: 9px 4px;
  text-align: center;
  border-left: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
}

.ag-sem-dia:hover { background: var(--surface-3); }

.ag-sem-dia-sem {
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.ag-sem-dia-num {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

.ag-sem-dia.hoje .ag-sem-dia-num {
  color: #0A0A0A;
  background: var(--gold);
  width: 26px;
  height: 26px;
  line-height: 26px;
  border-radius: 50%;
  margin: 1px auto 0;
}

.ag-sem-corpo {
  display: grid;
  grid-template-columns: var(--ag-gutter) repeat(7, 1fr);
  position: relative;
}

.ag-sem-col {
  position: relative;
  border-left: 1px solid var(--border);
}

.ag-sem-gutter { position: relative; }

.ag-sem-linha {
  height: calc(60 * var(--ag-px-min));
  border-top: 1px solid var(--border);
}

.ag-sem-gutter .ag-sem-linha {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
  padding-right: 8px;
  font-variant-numeric: tabular-nums;
}

/* Na semana o bloco é estreito: só nome e hora cabem */
.ag-semana .ag-bloco {
  left: 2px;
  right: 2px;
  padding: 3px 5px;
  border-left-width: 2px;
}

.ag-semana .ag-bloco-nome { font-size: 0.68rem; }
.ag-semana .ag-bloco-sub  { font-size: 0.6rem; }
.ag-semana .ag-bloco-val  { display: none; }

/* Choque de horário na semana: a coluna tem uns 80px, e parti-la ao meio
   não deixaria nem o nome caber. Os blocos ficam escalonados, como
   cartas sobrepostas — dá para ver que há mais de um sem perder o de
   cima. Quem quiser o detalhe abre o dia. */
.ag-semana .ag-bloco[data-col$="-1"] { left: 9px;  right: -3px; z-index: 4; }
.ag-semana .ag-bloco[data-col$="-2"] { left: 16px; right: -9px; z-index: 5; }

/* ============================================================
   AGENDA — visão MÊS
   ============================================================ */
.ag-mes {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ag-mes-sem {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
}

.ag-mes-sem span {
  padding: 9px 0;
  text-align: center;
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.ag-mes-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.ag-mes-dia {
  min-height: 78px;
  padding: 6px 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s var(--ease);
}

.ag-mes-dia:hover { background: var(--gold-subtle); }
.ag-mes-dia:nth-child(7n + 1) { border-left: none; }

.ag-mes-dia.fora { opacity: 0.32; }

.ag-mes-num {
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.ag-mes-dia.hoje .ag-mes-num {
  color: #0A0A0A;
  background: var(--gold);
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
  text-align: center;
}

/* Pontinhos: um por corte do dia, na cor do estado */
.ag-mes-pontos {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 1px;
}

.ag-mes-ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ag-agendado);
}

.ag-mes-ponto.st-concluido { background: var(--ag-concluido); }
.ag-mes-ponto.st-cancelado { background: var(--ag-cancelado); }
.ag-mes-ponto.st-faltou    { background: var(--ag-faltou); }

.ag-mes-fat {
  margin-top: auto;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

/* Título de bloco dentro de uma tela.

   O main.css tem `.home-section-label { display: none }` — no Finanze
   ela é um resquício desligado, e reaproveitá-la aqui daria um título
   que nunca aparece. */
.bb-secao {
  margin: 18px 0 8px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.bb-secao:first-child { margin-top: 0; }

/* ============================================================
   LISTA DE CORTES (usada na Home e na aba Agenda em telas curtas)
   ============================================================ */
.ag-lista { display: flex; flex-direction: column; gap: 8px; }

.ag-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ag-agendado);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: var(--transition);
}

.ag-item:hover { border-color: var(--border-hover); border-left-color: var(--gold); transform: translateX(2px); }

.ag-item.st-concluido { border-left-color: var(--ag-concluido); }
.ag-item.st-cancelado { border-left-color: var(--ag-cancelado); opacity: 0.6; }
.ag-item.st-faltou    { border-left-color: var(--ag-faltou); }

.ag-item-hora {
  min-width: 46px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.ag-item-body { flex: 1; min-width: 0; }

.ag-item-nome {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ag-item-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ag-item-val {
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ag-item.st-concluido .ag-item-val { color: var(--green); }

.ag-vazio {
  padding: 34px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.ag-vazio-ico {
  display: block;
  font-size: 1.9rem;
  margin-bottom: 8px;
  opacity: 0.55;
}

/* Selo de estado, no drawer e na ficha do cliente */
.ag-selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--ag-agendado-bg);
  color: var(--ag-agendado);
}

.ag-selo.st-concluido { background: var(--ag-concluido-bg); color: var(--ag-concluido); }
.ag-selo.st-cancelado { background: var(--ag-cancelado-bg); color: var(--ag-cancelado); }
.ag-selo.st-faltou    { background: var(--ag-faltou-bg);    color: var(--ag-faltou); }

/* Botão flutuante de novo agendamento */
.ag-fab {
  position: fixed;
  right: 18px;
  bottom: 84px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-dark));
  color: #0A0A0A;
  box-shadow: var(--shadow-purple), var(--shadow-md);
  cursor: pointer;
  z-index: 60;
  transition: var(--transition);
}

.ag-fab:hover  { transform: scale(1.06); }
.ag-fab:active { transform: scale(0.96); }

body:not(.aba-agenda) .ag-fab { display: none; }

@media (min-width: 900px) {
  .ag-fab { bottom: 28px; right: 28px; }
}

/* ============================================================
   DRAWER DO AGENDAMENTO
   Reaproveita .est-drawer / .est-overlay do main.css; aqui vai só
   o miolo próprio.
   ============================================================ */
.ag-dr-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.ag-dr-quando {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ag-dr-data {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.ag-dr-linhas {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 16px;
}

.ag-dr-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  background: var(--surface-1);
  font-size: 0.85rem;
}

.ag-dr-lbl { color: var(--text-muted); font-size: 0.78rem; }
.ag-dr-val { font-weight: 600; text-align: right; }
.ag-dr-val-gold { color: var(--gold); }

.ag-dr-acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ag-dr-acoes .ag-dr-full { grid-column: 1 / -1; }

.ag-btn-concluir {
  padding: 14px;
  font-size: 0.92rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--green), #16A34A);
  color: #fff;
  cursor: pointer;
  transition: var(--transition);
}

.ag-btn-concluir:hover { filter: brightness(1.08); }

/* Botão com ícone à esquerda do rótulo. O .btn-ghost do main.css não
   prevê ícone, e sem o flex o SVG desalinha da linha de base do texto. */
.bb-btn-ico {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.bb-btn-ico svg { flex-shrink: 0; }

/* Botão do WhatsApp.

   Verde da marca, e não o dourado do sistema: é o único botão que leva
   para fora do app, e a cor é o que faz a pessoa reconhecer para onde
   antes de ler. Vale igual na agenda e na ficha do cliente. */
.bb-btn-wpp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: #25D366;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
}

.bb-btn-wpp:hover  { background: #1EBE5A; }
.bb-btn-wpp:active { transform: scale(0.985); }
.bb-btn-wpp svg    { flex-shrink: 0; }

/* ============================================================
   MODAL "CONCLUIR CORTE" — o equivalente ao fechar a venda
   ============================================================ */
.at-valor-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 12px 14px;
  background: var(--surface-2s);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}

.at-valor-pre {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* O seletor precisa do ancestral para ganhar de `input[type="number"]`
   do main.css, que é mais específico do que uma classe sozinha — sem
   isso o campo do valor sai com a caixinha padrão de formulário, e o
   número que o barbeiro digita, que é a informação mais importante
   desta tela, fica do tamanho de um rótulo. */
.at-valor-wrap .at-valor-input {
  width: 100%;
  max-width: 210px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--gold);
  font-family: inherit;
  /* O !important existe para vencer a regra anti-zoom do main.css, que
     no celular força 16px !important em todo input[type=number] — ela
     está lá porque o iOS dá zoom em campo com fonte menor que 16px, e
     2.6rem é bem maior, então nada do que ela protege se perde aqui. */
  font-size: 2.6rem !important;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  outline: none;
  -moz-appearance: textfield;
}

.at-valor-wrap .at-valor-input:focus {
  border: none;
  box-shadow: none;
  outline: none;
}

.at-valor-wrap .at-valor-input::-webkit-outer-spin-button,
.at-valor-wrap .at-valor-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Atalhos de gorjeta/valor cheio — o barbeiro raramente digita */
.at-sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-bottom: 16px;
}

.at-sugestao {
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  font-variant-numeric: tabular-nums;
}

.at-sugestao:hover { border-color: var(--gold); color: var(--gold); }

.at-formas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.at-forma {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.at-forma:hover { border-color: var(--border-hover); }

.at-forma.ativa {
  border-color: var(--gold);
  background: var(--gold-subtle);
  color: var(--gold);
}

.at-forma-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ============================================================
   SERVIÇOS
   ============================================================ */
.srv-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.srv-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.srv-card:hover { border-color: var(--border-hover); }
.srv-card.inativo { opacity: 0.5; }

.srv-ico {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--gold-subtle);
  color: var(--gold);
  font-size: 1.15rem;
}

.srv-body { flex: 1; min-width: 0; }

.srv-nome {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srv-meta {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.srv-preco {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.srv-acoes { display: flex; gap: 4px; }

.srv-acao {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}

.srv-acao:hover { border-color: var(--gold); color: var(--gold); }
.srv-acao.danger:hover { border-color: var(--red); color: var(--red); }

/* ============================================================
   CLIENTES
   ============================================================ */
.cli-lista { display: flex; flex-direction: column; gap: 8px; }

.cli-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: var(--transition);
}

.cli-card:hover { border-color: var(--gold); transform: translateX(2px); }

.cli-av {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #0A0A0A;
  font-size: 0.95rem;
  font-weight: 700;
}

.cli-body { flex: 1; min-width: 0; }

.cli-nome {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cli-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.cli-right { text-align: right; flex-shrink: 0; }

.cli-total {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.cli-visitas {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* ── Reputação do cliente ────────────────────────────────────────
   Só faltas pesam. Cancelar avisando não conta: quem liga libera o
   horário para outro, e punir isso seria punir a consideração.     */
.cli-selo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.cli-selo-mini {
  padding: 1px 7px;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

.cli-selo.st-otimo   { background: var(--green-subtle);              color: var(--green); }
.cli-selo.st-bom     { background: var(--green-subtle);              color: var(--green); }
.cli-selo.st-ok      { background: rgba(107, 107, 107, 0.16);        color: var(--text-secondary); }
.cli-selo.st-atencao { background: rgba(245, 158, 11, 0.14);         color: var(--warning); }
.cli-selo.st-ruim    { background: var(--red-subtle);                color: var(--red); }
.cli-selo.st-novo    { background: var(--gold-subtle);               color: var(--gold); }

/* A faixa do topo da ficha, com o selo e o porquê dele */
.cli-reputacao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.cli-reputacao-txt {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.cli-reputacao.st-otimo,
.cli-reputacao.st-bom     { border-color: rgba(34, 197, 94, 0.3); }
.cli-reputacao.st-atencao { border-color: rgba(245, 158, 11, 0.35); }
.cli-reputacao.st-ruim    { border-color: rgba(239, 68, 68, 0.35); }

/* Cliente sumido: passou do dobro do intervalo habitual dele */
.cli-sumido .cli-sub { color: var(--warning); }

.cli-hist { display: flex; flex-direction: column; gap: 6px; }

.cli-hist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}

.cli-hist-data { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cli-hist-serv { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-hist-val  { font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }

/* ============================================================
   FORMULÁRIOS DA BARBEARIA
   Reaproveita .est-drawer, .cfg-label, .cfg-input do main.css.
   ============================================================ */
.bb-campo { margin-bottom: 14px; }

.bb-campo-duplo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.bb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.bb-chip {
  padding: 9px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.bb-chip:hover { border-color: var(--border-hover); }

.bb-chip.ativo {
  border-color: var(--gold);
  background: var(--gold-subtle);
  color: var(--gold);
}

/* Marca o serviço deduzido do histórico do cliente. Sem ele, o chip já
   viria marcado e o barbeiro não saberia se foi escolha do sistema ou
   memória do cliente. */
.bb-chip-selo {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--gold);
  color: #0A0A0A;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: 1px;
}

.bb-chip-sub {
  display: block;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 1px;
}

.bb-chip.ativo /* Marca o serviço deduzido do histórico do cliente. Sem ele, o chip já
   viria marcado e o barbeiro não saberia se foi escolha do sistema ou
   memória do cliente. */
.bb-chip-selo {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--gold);
  color: #0A0A0A;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: 1px;
}

.bb-chip-sub { color: var(--gold-dark); }

/* Duração em minutos, com a leitura em horas ao lado do campo */
.bb-dur-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bb-dur-row .cfg-input { flex: 1; min-width: 0; }

.bb-dur-eq {
  flex-shrink: 0;
  min-width: 74px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* No rótulo do formulário de agendamento a coluna é estreita, então a
   leitura vira um complemento discreto do próprio rótulo. */
.cfg-label .bb-dur-eq {
  min-width: 0;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Sugestão de cliente já cadastrado enquanto se digita o nome */
.bb-sugestoes {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 190px;
  overflow-y: auto;
  background: var(--surface-3);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 40;
}

.bb-sugestao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.bb-sugestao:last-child { border-bottom: none; }
.bb-sugestao:hover { background: var(--gold-subtle); }

.bb-sug-nome { font-size: 0.85rem; font-weight: 600; }
.bb-sug-info { font-size: 0.72rem; color: var(--text-muted); }

/* Retrato do cliente reconhecido, abaixo do telefone */
.bb-ctx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--gold-subtle);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: var(--radius-md);
}

.bb-ctx-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.bb-ctx-txt strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold);
}

.bb-ctx-txt span {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* Cliente que nunca veio: nada a lembrar, então nada de dourado */
.bb-ctx.bb-ctx-novo {
  background: var(--surface-2s);
  border-color: var(--border);
}

.bb-ctx-novo .bb-ctx-txt strong { color: var(--text-secondary); }

/* Cliente que costuma faltar: a faixa muda de cor, porque este é o
   instante em que a informação ainda muda alguma decisão. */
.bb-ctx.bb-ctx-alerta {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.35);
}

.bb-ctx-alerta .bb-ctx-txt strong { color: var(--warning); }

.bb-campo-rel { position: relative; }

/* ============================================================
   AJUSTES DE TELA
   ============================================================ */
@media (max-width: 720px) {
  /* O botão flutuante já cobre "agendar" aqui. Manter o do banner só
     empurraria a agenda para baixo com um bloco dourado do tamanho da
     tela, dizendo o que o + já diz. */
  #agenda .page-banner-actions { display: none; }

  .ag-topo { gap: 8px; }
  .ag-modos { width: 100%; }
  .ag-modo { flex: 1; text-align: center; padding: 8px 4px; }
  .ag-resumo { grid-template-columns: repeat(2, 1fr); }
  .ag-mes-dia { min-height: 62px; padding: 4px 3px; }
  .ag-mes-fat { display: none; }
  .srv-lista { grid-template-columns: 1fr; }
  .at-formas { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   DESPESAS E RESUMOS — os retoques que só a barbearia usa

   O grosso do CSS destes dois módulos já existe em main.css:
   ela é a mesma folha do Finanze de roupas, e veio inteira no
   fork, com `desp-*` e `retro-*` dentro. O que falta são estas
   três regras, que nasceram aqui.
   ═══════════════════════════════════════════════════════════ */

/* A legenda embaixo do lucro na home.

   Ela existe para o número não ser lido como se fosse do dia. O
   bloco ao lado diz "Cortes hoje", e sem esta linha a leitura
   natural seria "lucro hoje" — que é outro número, e menor. */
.home-stat-pill-sub {
  font-size: 0.58rem;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  text-align: center;
  margin-top: -2px;
}

/* O contador de resumos novos, sobreposto ao ícone do atalho.

   No menu de cima o badge fica ao lado do texto (.nav-resumos-badge,
   em main.css). Aqui não cabe: o atalho do celular é um ícone com
   rótulo embaixo, e o número tem de pousar sobre o ícone. */
.home-qbtn { position: relative; }

.home-qbtn-badge {
  position: absolute;
  top: 0;
  right: 18%;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: #0A0A0A;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-radius: 999px;
  pointer-events: none;
}

/* Oito atalhos em duas fileiras de quatro.

   Eram quatro, e a folha herdada já os põe em `repeat(4, 1fr)` — a
   segunda fileira se forma sozinha. O que muda aqui é só o respiro
   entre elas, que sem isto ficava colado. */
@media (max-width: 768px) {
  .home-quick-grid { row-gap: 14px; }
}