/* Martinho — estilos do sistema. As cores vêm de tokens.css; aqui não há cor fixa. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 15px/22px var(--font-texto);
}
a { color: var(--azul); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }

/* ---------- Estrutura ---------- */
.topo {
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 10;
}
.topo__conteudo {
  max-width: 960px; margin: 0 auto; padding: var(--espaco-2) var(--espaco-4);
  display: flex; align-items: center; gap: var(--espaco-4); flex-wrap: wrap;
}
.topo__logo { display: flex; }
.topo__logo img { height: 36px; width: auto; }
.nav { display: flex; gap: var(--espaco-1); flex: 1; }
.nav a {
  color: var(--texto-suave); text-decoration: none; font-weight: 600;
  padding: var(--espaco-2) var(--espaco-3); border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--texto); }
.nav a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--dourado); }
.topo__usuario { display: flex; align-items: center; gap: var(--espaco-3); color: var(--texto-suave); font-size: 13px; }
.topo__usuario form { margin: 0; }

.pagina { max-width: 960px; margin: 0 auto; padding: var(--espaco-6) var(--espaco-4) var(--espaco-8); display: flex; flex-direction: column; gap: var(--espaco-6); }
.pagina--estreita { max-width: 560px; }
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--espaco-4); flex-wrap: wrap; }
.cabecalho__textos { display: flex; flex-direction: column; gap: var(--espaco-1); min-width: 0; }
.titulo { font: 700 24px/30px var(--font-marca); font-variation-settings: 'opsz' 11; }
.subtitulo { font: 600 17px/24px var(--font-texto); }
.legenda { font: 500 13px/18px var(--font-texto); color: var(--texto-suave); }
.rotulo { font: 600 12px/16px var(--font-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.linha-acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; }

/* ---------- Mensagens ---------- */
.mensagens { display: flex; flex-direction: column; gap: var(--espaco-2); margin: 0; padding: 0; list-style: none; }
.mensagem { padding: var(--espaco-3) var(--espaco-4); border-radius: var(--raio-md); font-weight: 500; }
.mensagem--success { background: var(--sucesso-fundo); color: var(--sucesso); }
.mensagem--error { background: var(--perigo-fundo); color: var(--perigo); }
.mensagem--warning, .mensagem--info { background: var(--alerta-fundo); color: var(--alerta); }

/* ---------- Botões ---------- */
.btn {
  font: 600 15px/22px var(--font-texto); min-height: 44px; padding: 0 var(--espaco-4);
  border-radius: var(--raio-md); border: 1px solid transparent; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2);
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primario { background: var(--azul); color: var(--sobre-azul); }
.btn--primario:hover { background: var(--azul-hover); }
.btn--secundario { background: var(--superficie); color: var(--texto); border-color: var(--linha-forte); }
.btn--secundario:hover { background: var(--superficie-destaque); }
.btn--perigo { background: transparent; color: var(--perigo); border-color: var(--perigo); }
.btn--perigo:hover { background: var(--perigo-fundo); }
.btn--texto { background: transparent; color: var(--texto-suave); padding: 0 var(--espaco-2); }
.btn--texto:hover { color: var(--texto); }
.btn--pequeno { min-height: 36px; padding: 0 var(--espaco-3); font-size: 13px; }
.btn--icone { width: 44px; padding: 0; }

/* ---------- Formulários ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-md); box-shadow: var(--sombra-cartao); padding: var(--espaco-4); }
.formulario { display: flex; flex-direction: column; gap: var(--espaco-4); }
.formulario__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--espaco-4); }
.campo { display: flex; flex-direction: column; gap: var(--espaco-1); min-width: 0; }
.campo label { font: 600 13px/18px var(--font-texto); }
.campo input, .campo select, .campo textarea, .busca input {
  font: 400 15px/22px var(--font-texto); color: var(--texto); background: var(--superficie);
  min-height: 44px; padding: var(--espaco-2) var(--espaco-3); width: 100%;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-md);
}
.campo textarea { min-height: 88px; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible, .busca input:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.campo__ajuda { font: 500 13px/18px var(--font-texto); color: var(--texto-suave); }
.campo__erro { font: 500 13px/18px var(--font-texto); color: var(--perigo); }
.campo--erro input, .campo--erro select, .campo--erro textarea { border-color: var(--perigo); }
.erro-geral { background: var(--perigo-fundo); color: var(--perigo); border-radius: var(--raio-md); padding: var(--espaco-3) var(--espaco-4); font-weight: 500; }
.busca { display: flex; gap: var(--espaco-2); flex: 1; min-width: 220px; max-width: 420px; }

/* ---------- Status ---------- */
.status {
  display: inline-flex; align-items: center; gap: 6px; font: 600 12px/16px var(--font-texto);
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--raio-pilula); white-space: nowrap;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--agendado { color: var(--azul); background: var(--superficie-destaque); }
.status--concluido { color: var(--sucesso); background: var(--sucesso-fundo); }
.status--cancelado { color: var(--texto-suave); background: var(--neutro-fundo); }
.status--faltou { color: var(--perigo); background: var(--perigo-fundo); }

/* ---------- Agenda ---------- */
.navegacao-dia { display: flex; align-items: center; gap: var(--espaco-2); flex-wrap: wrap; }
.lista-agenda { display: flex; flex-direction: column; gap: var(--espaco-3); margin: 0; padding: 0; list-style: none; }
.agendamento {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--espaco-1) var(--espaco-4); align-items: start;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-md);
  padding: var(--espaco-4); box-shadow: var(--sombra-cartao);
}
.agendamento--encerrado { opacity: .72; }
.agendamento__hora { font: 600 20px/24px var(--font-texto); font-variant-numeric: tabular-nums; grid-row: span 2; }
.agendamento__cliente { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.agendamento__cliente a { color: inherit; text-decoration: none; }
.agendamento__cliente a:hover { text-decoration: underline; }
.agendamento__meta { font: 500 13px/18px var(--font-texto); color: var(--texto-suave); grid-column: 2; }
.agendamento__acoes { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin-top: var(--espaco-2); }
.agendamento__acoes form { margin: 0; }
.aniversario { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--espaco-2); font: 600 12px/16px var(--font-texto); color: var(--dourado-texto); white-space: nowrap; }
.aniversario::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: var(--dourado); }
.agora { display: flex; align-items: center; gap: var(--espaco-2); color: var(--dourado-texto); font: 600 12px/16px var(--font-texto); letter-spacing: .06em; text-transform: uppercase; }
.agora::after { content: ""; flex: 1; height: 2px; background: var(--dourado); }

.agendamento--alerta { border-color: var(--alerta); box-shadow: inset 0 0 0 1px var(--alerta); }
.agendamento__alerta { grid-column: 2 / -1; background: var(--alerta-fundo); color: var(--alerta); font: 600 13px/18px var(--font-texto);
  border-radius: var(--raio-sm); padding: var(--espaco-2) var(--espaco-3); margin-top: var(--espaco-1); }

.equipe { display: flex; flex-direction: column; gap: var(--espaco-2); }
.equipe__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--espaco-2); }
.equipe__membro { display: flex; align-items: center; gap: var(--espaco-3); flex-wrap: wrap; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--raio-md); padding: var(--espaco-3) var(--espaco-4); }
.equipe__ponto { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--sucesso); }
.equipe__membro--parcial .equipe__ponto { background: var(--alerta); }
.equipe__membro--ausente .equipe__ponto { background: var(--perigo); }
.equipe__membro--folga .equipe__ponto { background: var(--linha-forte); }
.equipe__textos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.equipe__acoes { display: flex; gap: var(--espaco-1); flex-wrap: wrap; width: 100%; padding-left: calc(10px + var(--espaco-3)); }
.equipe__acoes form { margin: 0; }

/* ---------- Listas e tabelas ---------- */
.vazio { text-align: center; padding: var(--espaco-8) var(--espaco-4); color: var(--texto-suave); display: flex; flex-direction: column; gap: var(--espaco-3); align-items: center; }
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-md); overflow: hidden; }
.tabela th { text-align: left; font: 600 12px/16px var(--font-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); padding: var(--espaco-3) var(--espaco-4); border-bottom: 1px solid var(--linha); }
.tabela td { padding: var(--espaco-3) var(--espaco-4); border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--superficie-destaque); }
.tabela a { color: var(--texto); font-weight: 600; text-decoration: none; }
.tabela a:hover { text-decoration: underline; }
.numero, .tabela .numero { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--espaco-4); margin: 0; }
.dados dt { font: 600 12px/16px var(--font-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.dados dd { margin: var(--espaco-1) 0 0; overflow-wrap: anywhere; }

/* ---------- Login ---------- */
.tela-marca {
  min-height: 100vh; min-height: 100dvh; background: var(--marinho); color: #ffffff;
  display: flex; align-items: center; justify-content: center; padding: var(--espaco-8) var(--espaco-4);
}
.login { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: var(--espaco-6); }
.login__marca { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-3); text-align: center; }
.login__marca h1 { font: 700 36px/40px var(--font-marca); font-variation-settings: 'opsz' 11; }
.login__marca .fio { width: 56px; height: 2px; background: var(--dourado); }
.login .cartao { width: 100%; color: var(--texto); }

/* ---------- Horários (sistema) ---------- */
.campo-copiar { flex: 1; min-width: 220px; min-height: 44px; padding: var(--espaco-2) var(--espaco-3); font: 400 15px/22px var(--font-texto);
  color: var(--texto); background: var(--fundo); border: 1px solid var(--linha-forte); border-radius: var(--raio-md); }
.marcar { display: inline-flex; align-items: center; gap: var(--espaco-2); font-weight: 600; cursor: pointer; min-height: 44px; }
.marcar input { width: 20px; height: 20px; accent-color: var(--azul); }
.turno { display: flex; align-items: center; gap: var(--espaco-2); color: var(--texto-suave); font-size: 13px; }
.turno input { font: 400 15px/22px var(--font-texto); color: var(--texto); background: var(--superficie); min-height: 44px;
  padding: var(--espaco-1) var(--espaco-2); border: 1px solid var(--linha-forte); border-radius: var(--raio-md); font-variant-numeric: tabular-nums; }
.tabela--semana td { vertical-align: middle; }

/* ---------- Página pública de agendamento ---------- */
.publico { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.publico__topo { background: var(--marinho); color: #ffffff; padding: var(--espaco-8) 0 var(--espaco-6);
  padding-top: calc(var(--espaco-8) + env(safe-area-inset-top, 0px)); border-bottom: 2px solid var(--dourado); }
.publico__conteudo { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 var(--espaco-4); }
.publico__rotulo { color: var(--dourado); }
.publico__nome { font: 700 32px/36px var(--font-marca); font-variation-settings: 'opsz' 11; margin-top: var(--espaco-2); }
.publico__endereco { margin-top: var(--espaco-2); opacity: .86; }
.publico__principal > * { min-width: 0; }
.publico__principal { flex: 1; display: flex; flex-direction: column; gap: var(--espaco-4); padding-top: var(--espaco-6); padding-bottom: var(--espaco-8); }
.publico__contato { text-align: center; }
.publico__rodape { display: flex; align-items: center; justify-content: center; gap: var(--espaco-2); padding: var(--espaco-4);
  padding-bottom: calc(var(--espaco-4) + env(safe-area-inset-bottom, 0px)); color: var(--texto-suave); font-size: 13px; }

.passo { min-width: 0; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-md); padding: var(--espaco-4);
  display: flex; flex-direction: column; gap: var(--espaco-3); scroll-margin-top: var(--espaco-4); }
.passo__titulo { display: flex; align-items: center; gap: var(--espaco-3); }
.passo__numero { width: 28px; height: 28px; border-radius: 50%; background: var(--marinho); color: #ffffff;
  display: inline-flex; align-items: center; justify-content: center; font: 600 13px/1 var(--font-texto); flex: none; }
.passo__trocar { margin-left: auto; font-weight: 600; font-size: 13px; }
.passo__escolha { color: var(--texto-suave); padding-left: calc(28px + var(--espaco-3)); }

.opcoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espaco-2); }
.opcoes--grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.opcao { display: flex; align-items: center; gap: var(--espaco-3); min-height: 56px; padding: var(--espaco-3) var(--espaco-4);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-md); color: var(--texto); text-decoration: none; transition: background-color .15s, border-color .15s; }
.opcao:hover { background: var(--superficie-destaque); border-color: var(--azul); }
.opcao--centro { flex-direction: column; justify-content: center; text-align: center; padding: var(--espaco-4) var(--espaco-2); }
.opcao__nome { font-weight: 600; flex: 1; min-width: 0; }
.opcao__detalhe { color: var(--texto-suave); font-size: 13px; }
.opcao__preco { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.opcao__inicial { width: 48px; height: 48px; border-radius: 50%; background: var(--superficie-destaque); color: var(--azul);
  display: inline-flex; align-items: center; justify-content: center; font: 700 22px/1 var(--font-marca); }

.dias { max-width: 100%; display: flex; gap: var(--espaco-2); overflow-x: auto; padding-bottom: var(--espaco-2); scroll-snap-type: x proximity; }
.dia { flex: none; width: 64px; padding: var(--espaco-2) 0; border: 1px solid var(--linha-forte); border-radius: var(--raio-md);
  display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--texto); text-decoration: none; scroll-snap-align: start; }
.dia:hover { background: var(--superficie-destaque); }
.dia__semana, .dia__mes { font: 600 11px/14px var(--font-texto); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); }
.dia__numero { font: 600 20px/24px var(--font-texto); font-variant-numeric: tabular-nums; }
.dia--ativo { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }
.dia--ativo .dia__semana, .dia--ativo .dia__mes { color: var(--sobre-azul); }
.dia--ativo:hover { background: var(--azul-hover); }

.horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--espaco-2); }
.horario { min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--linha-forte);
  border-radius: var(--raio-md); color: var(--texto); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.horario:hover { background: var(--superficie-destaque); border-color: var(--azul); }
.horario--ativo { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }

.corpo-forte { font-weight: 600; }
.opcao--barbeiro { padding: var(--espaco-3); }
.opcao__textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.opcao__situacao { font: 500 13px/18px var(--font-texto); color: var(--texto-suave); }
.opcao__situacao--hoje { color: var(--sucesso); }
.opcao--indisponivel { opacity: .6; cursor: default; }
.opcao--indisponivel:hover { background: transparent; border-color: var(--linha-forte); }
.resumo { background: var(--superficie-destaque); border-radius: var(--raio-md); padding: var(--espaco-3) var(--espaco-4); display: flex; flex-direction: column; gap: var(--espaco-1); }
.confirmado { align-items: flex-start; }
.confirmado__marca { width: 48px; height: 2px; background: var(--dourado); }

/* Balanço */
.filtros { display: flex; flex-direction: column; gap: var(--espaco-3); }
.atalhos { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
.atalhos__lista { display: flex; gap: var(--espaco-2); overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
/* Aberto, o "Escolher datas" ocupa a linha inteira para caber o formulário. */
.personalizado[open] { flex-basis: 100%; }
.atalho {
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--espaco-4);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-pilula); background: var(--superficie);
  color: var(--texto); font: 600 13px/18px var(--font-texto); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.atalho:hover { background: var(--superficie-destaque); }
.atalho[aria-current="page"] { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }
.personalizado summary { list-style: none; width: fit-content; }
.personalizado summary::-webkit-details-marker { display: none; }
.personalizado__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espaco-3); margin-top: var(--espaco-3); }
.personalizado__form .campo { flex: 1; min-width: 140px; }
.filtro-barbeiro { max-width: 320px; }
/* Painel: período, número em destaque e gráfico */
.painel { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-1); text-align: center; padding: var(--espaco-4) var(--espaco-4) var(--espaco-6); }
.painel__periodo { width: 100%; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: var(--espaco-2); margin-bottom: var(--espaco-2); }
.painel__datas { display: flex; flex-direction: column; min-width: 0; }
.painel__total { font: 600 56px/60px var(--font-texto); margin-top: var(--espaco-2); }
.painel__unidade { font: 500 15px/22px var(--font-texto); color: var(--texto-suave); }
/* Faturamento do período, logo abaixo da quantidade. */
.painel__valor { font: 600 28px/34px var(--font-texto); margin-top: var(--espaco-3); font-variant-numeric: tabular-nums; }
.variacao { font: 600 13px/18px var(--font-texto); color: var(--texto-suave); }
.variacao--alta { color: var(--sucesso); }
.variacao--baixa { color: var(--perigo); }
.variacao .legenda { font-weight: 500; }

/* Gráfico de barras: uma cor só, barras finas (até 24px) com 2px de
   respiro entre elas, topo arredondado e base reta. A linha fina de cima
   marca o dia mais movimentado, com o número ao lado. */
.grafico { width: 100%; margin: var(--espaco-6) 0 0; }
.grafico__area {
  position: relative; height: 160px; display: grid; grid-template-columns: repeat(var(--barras), minmax(0, 1fr));
  align-items: end; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha-forte);
}
.grafico__maior { position: absolute; top: -20px; left: 0; font: 600 12px/16px var(--font-texto); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.grafico__coluna { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 0 1px; text-decoration: none; }
.grafico__barra { width: 100%; max-width: 24px; background: var(--azul); border-radius: 4px 4px 0 0; transition: background-color .15s; }
a.grafico__coluna:hover .grafico__barra, a.grafico__coluna:focus-visible .grafico__barra { background: var(--azul-hover); }
.grafico__dica {
  display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 2;
  flex-direction: column; align-items: center; padding: var(--espaco-1) var(--espaco-2); white-space: nowrap;
  background: var(--superficie-elevada); border: 1px solid var(--linha); border-radius: var(--raio-sm); box-shadow: var(--sombra-flutuante);
  color: var(--texto); font: 500 12px/16px var(--font-texto);
}
.grafico__dica strong { font-size: 15px; line-height: 20px; }
a.grafico__coluna:hover .grafico__dica, a.grafico__coluna:focus-visible .grafico__dica { display: flex; }
/* Dica das primeiras e últimas barras alinhada para dentro, para não sair da tela. */
.grafico__coluna:nth-child(-n+4) .grafico__dica { left: 0; transform: none; }
.grafico__coluna:nth-last-child(-n+3) .grafico__dica { left: auto; right: 0; transform: none; }
.grafico__eixo { display: grid; grid-template-columns: repeat(var(--barras), minmax(0, 1fr)); margin-top: var(--espaco-1); }
.grafico__eixo span { font: 500 11px/14px var(--font-texto); color: var(--texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.grafico__eixo .grafico__hoje { color: var(--texto); font-weight: 700; }

.estatisticas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-4); margin: 0; }
.estatisticas dt { font: 500 13px/18px var(--font-texto); color: var(--texto-suave); }
.estatisticas dd { margin: 0; font: 600 24px/30px var(--font-texto); }
.detalhamento { list-style: none; margin: 0; padding: 0; }
.detalhamento li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-3); padding: var(--espaco-3) var(--espaco-4); border-bottom: 1px solid var(--linha); }
.detalhamento li:last-child { border-bottom: 0; }
.detalhamento a { color: var(--texto); font-weight: 600; text-decoration: none; }
.detalhamento a:hover { text-decoration: underline; }
.dia-balanco { display: flex; flex-direction: column; gap: var(--espaco-2); }
.dia-balanco__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-3); flex-wrap: wrap; }
.dia-balanco__topo h3 { font-size: 15px; }
.linhas { list-style: none; margin: 0; padding: 0; }
.linha-atendimento { display: grid; grid-template-columns: 52px 1fr auto; gap: var(--espaco-3); align-items: center; padding: var(--espaco-3) var(--espaco-4); border-bottom: 1px solid var(--linha); }
.linha-atendimento:last-child { border-bottom: 0; }
.linha-atendimento__hora { font-weight: 600; font-variant-numeric: tabular-nums; }
.linha-atendimento__textos { display: flex; flex-direction: column; min-width: 0; }
.linha-atendimento__textos a { color: var(--texto); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.linha-atendimento__textos a:hover { text-decoration: underline; }
.etiqueta { font: 600 11px/14px var(--font-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--dourado-texto); }

/* Registrar atendimento */
.grupo { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espaco-3); min-width: 0; }
.grupo legend { padding: 0; margin-bottom: var(--espaco-3); }
.cliente-novo summary { cursor: pointer; color: var(--azul); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.cliente-novo[open] summary { margin-bottom: var(--espaco-3); }

/* Histórico: valor de cada atendimento e números das listas por serviço e barbeiro. */
.linha-atendimento__valor { font-weight: 600; }
.detalhamento__numeros { display: inline-flex; align-items: baseline; gap: var(--espaco-3); white-space: nowrap; }
.servicos-marcar { display: flex; flex-wrap: wrap; gap: 0 var(--espaco-4); }

@media (max-width: 560px) {
  .topo__usuario span { display: none; }
  /* No celular, o menu desce para uma linha própria, abaixo da marca. */
  .topo__conteudo { row-gap: 0; }
  .topo__usuario { margin-left: auto; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; min-width: 0; margin: 0 calc(-1 * var(--espaco-2)); }
  .nav a { padding: var(--espaco-2); white-space: nowrap; }
  .painel__total { font-size: 48px; line-height: 52px; }
  .agendamento { grid-template-columns: auto 1fr; }
  .agendamento .status { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}