:root {
  color-scheme: light;
  --bg: #fdf4f8;
  --bg-cartao: #ffffff;
  --rosa: #c97fa5;
  --rosa-forte: #c04a78;
  --rosa-suave: #f8e3ee;
  --texto: #4a3540;
  /* Contraste conferido: 5.6:1 no card branco, 5.2:1 no fundo rosa e 4.6:1 dentro do
     selo de "outros" — os três lugares onde essa cor vira texto de verdade (serviço,
     preço, telefone, rótulo de formulário). O tom antigo (#c9a3b6) dava 2.2:1. */
  --texto-fraco: #7d5f6e;
  --erro: #c0392b;
  --borda: #f8e3ee;
  --borda-hoje: #eeb0cf;
  --dourado: #d9a85c;
  --sombra-cartao: 0 2px 10px rgba(150, 60, 100, 0.08), 0 1px 2px rgba(150, 60, 100, 0.06);
  --sombra-flutuante: 0 10px 24px rgba(192, 74, 120, 0.35);
  --fonte-titulo: "Fraunces", "Iowan Old Style", Georgia, serif;
  --fonte-corpo: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Cores por categoria de serviço (ver SERVICOS em app.js) — cada uma tem um tom
     "forte" (texto/selo) e um "suave" (fundo), sempre pastel pra combinar com o resto. */
  --cat-pe-mao-forte: var(--rosa-forte);
  --cat-pe-mao-suave: var(--rosa-suave);
  --cat-pe-forte: #2f7aa8;
  --cat-pe-suave: #dbeef7;
  --cat-mao-forte: #2f8f63;
  --cat-mao-suave: #dcf2e7;
  --cat-tintura-forte: #9c7a1f;
  --cat-tintura-suave: #f5ecd2;
  --cat-sobrancelha-forte: #6f54a8;
  --cat-sobrancelha-suave: #e9e2f7;
  --cat-outros-forte: var(--texto-fraco);
  --cat-outros-suave: var(--borda);
}

* { box-sizing: border-box; }

/* Sem isso, uma classe que define "display" no mesmo elemento (ex.: .tela-cheia) vence
   o atributo [hidden] por causa da ordem do cascata — o elemento "escondido" aparece
   mesmo assim. Isso fazia a tela de "sem acesso" aparecer por cima do app. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  -webkit-font-smoothing: antialiased;
  /* Desliga o "puxa recarrega a página inteira" nativo do navegador — tem o nosso
     próprio indicador (#pull-refresh) fazendo isso de um jeito mais controlado. */
  overscroll-behavior-y: contain;
}

body {
  background-image: radial-gradient(circle at 100% 0%, rgba(201, 127, 165, 0.1), transparent 55%);
  background-attachment: fixed;
  transition: background-image 1.2s ease;
}
/* Tom de fundo muda sozinho com a hora do dia (ver aplicarPeriodoDoDia em app.js) — bem
   sutil, só textura, não mexe em nenhuma outra cor do app. */
body[data-periodo="manha"] {
  background-image: radial-gradient(circle at 100% 0%, rgba(255, 205, 160, 0.18), transparent 55%);
}
body[data-periodo="noite"] {
  background-image: radial-gradient(circle at 100% 0%, rgba(140, 74, 130, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(74, 42, 58, 0.05), transparent 45%);
}

h1, h2 { margin: 0; font-family: var(--fonte-titulo); }

button { font-family: inherit; }

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

.tela-cheia {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.cartao {
  background: var(--bg-cartao);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  max-width: 320px;
  box-shadow: var(--sombra-cartao);
}

.texto-fraco { color: var(--texto-fraco); }
.texto-centro { text-align: center; }
.texto-erro { color: var(--erro); font-size: 0.9em; }

#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: 72px; /* espaço pro rodapé fixo */
}

/* Indicador do puxar-pra-atualizar — posição controlada via `top` inline pelo JS
   durante o arraste (ver configurarPullToRefresh em app.js); `transform` fica livre
   só pra centralizar e pro giro durante o carregamento. */
.pull-refresh {
  position: fixed;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-cartao);
  box-shadow: var(--sombra-cartao);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  z-index: 20;
  opacity: 0;
}
.pull-refresh.girando { animation: pull-girar 0.7s linear infinite; }
@keyframes pull-girar { to { transform: translateX(-50%) rotate(360deg); } }

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--bg-cartao);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 5;
}

.topo h1 {
  font-size: 1.3em;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.marca-emoji {
  font-size: 0.8em;
  filter: drop-shadow(0 1px 1px rgba(192, 74, 120, 0.25));
}

.botao-icone {
  background: none;
  border: none;
  color: var(--texto);
  font-size: 1.3em;
  padding: 6px 10px;
  border-radius: 10px;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.botao-icone:active { background: var(--rosa-suave); transform: scale(0.92); }

.topo-direita { display: flex; align-items: center; gap: 4px; }
.botao-pendencias { font-size: 0.95em; display: flex; align-items: center; gap: 2px; }

.aviso-offline { margin: -8px 0 12px; }

.banner-erro {
  background: #fbe4e1;
  color: var(--erro);
  padding: 10px 16px;
  font-size: 0.9em;
}

.view { padding: 16px; flex: 1; }

.nav-data {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  min-height: 46px;
}

.nav-data > .botao-icone { margin-top: 2px; }

.data-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.25em;
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;
}

/* Botão "voltar pra hoje / semana atual" — um chip de verdade, não mais um linkzinho.
   Some/aparece junto com [hidden], e a keyframe roda de novo a cada vez que ele
   reaparece porque o elemento sai e volta pra árvore de render. */
.botao-hoje {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 6px auto 0;
  background: var(--rosa-suave);
  border: 1px solid var(--borda-hoje);
  color: var(--rosa-forte);
  font-weight: 600;
  font-size: 0.78em;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  animation: chip-entra 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.botao-hoje:active { transform: scale(0.94); background: var(--borda-hoje); }

@keyframes chip-entra {
  from { opacity: 0; transform: scale(0.7) translateY(-2px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.lista-dia, .lista-clientes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@keyframes item-entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Esqueleto de carregamento — reaproveita a forma real do card (dia-rotulo/horario já
   têm tamanho fixo mesmo vazios), só troca o conteúdo por blocos pulsando. */
@keyframes skeleton-pulso {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.skeleton-linha {
  height: 10px;
  width: 65%;
  background: var(--borda);
  border-radius: 6px;
  margin: 4px 0;
  animation: skeleton-pulso 1.1s ease-in-out infinite;
}
.skeleton-linha.curta { width: 35%; }
.item-dia.skeleton, .linha-semana.skeleton { pointer-events: none; }
.item-dia.skeleton .horario, .linha-semana.skeleton .dia-rotulo {
  background: var(--borda);
  color: transparent;
  animation: skeleton-pulso 1.1s ease-in-out infinite;
}

.item-cliente {
  background: var(--bg-cartao);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--sombra-cartao);
  animation: item-entra 0.32s ease both;
  animation-delay: calc(var(--i, 0) * 45ms);
  transition: transform 0.12s ease;
}
.item-cliente:active { transform: scale(0.985); }

/* item-dia é só o "trilho": recorta e posiciona; quem tem fundo/sombra/padding de
   verdade é o item-dia-conteudo, que desliza por cima das ações reveladas no swipe. */
.item-dia {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  animation: item-entra 0.32s ease both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.item-dia-conteudo {
  position: relative;
  z-index: 1;
  background: var(--bg-cartao);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--sombra-cartao);
  touch-action: pan-y;
}
.item-dia-conteudo:active { transform: scale(0.985); }

/* Ações reveladas ao arrastar o card pra esquerda — ficam escondidas atrás do conteúdo
   (overflow:hidden do .item-dia) até o JS deslizar o conteúdo com translateX. */
.acoes-swipe {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}
.acao-swipe {
  width: 66px;
  border: none;
  color: #fff;
  font-size: 1.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.acao-reagendar { background: var(--rosa); }
.acao-apagar { background: var(--erro); border-top-right-radius: 14px; border-bottom-right-radius: 14px; }

.item-dia .horario {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 52px;
  text-align: center;
  flex-shrink: 0;
  color: var(--rosa-forte);
  background: var(--rosa-suave);
  border-radius: 10px;
  padding: 6px 4px;
  font-size: 0.85em;
}

/* ---------- Horário que o servidor recusou ---------- */
/* Ele continua na lista de propósito (sumir sem explicação seria pior), mas não pode
   parecer um horário confirmado — foi assim que agendamentos dela ficaram presos só no
   celular dela, sem ninguém perceber. Ver renderizarListaDia em app.js. */
.item-dia.nao-salvou .item-dia-conteudo {
  background: #fdf0ee;
  box-shadow: inset 0 0 0 1.5px var(--erro), var(--sombra-cartao);
}
.item-dia.nao-salvou .horario {
  background: #f7dcd8;
  color: var(--erro);
}
.aviso-nao-salvou {
  margin-top: 3px;
  font-size: 0.74em;
  font-weight: 600;
  color: var(--erro);
  line-height: 1.3;
}
/* Na semana a linha é pequena demais pra um aviso escrito — cor + tachado bastam. */
.item-semana.nao-salvou .nome { color: var(--erro); text-decoration: line-through; }

.item-dia.bloqueio { opacity: 0.75; }
.item-dia.bloqueio .horario { background: var(--borda); color: var(--texto-fraco); }

/* Cor por categoria de serviço no selo de horário (view do dia) */
.item-dia .horario.cat-pe-mao { background: var(--cat-pe-mao-suave); color: var(--cat-pe-mao-forte); }
.item-dia .horario.cat-pe { background: var(--cat-pe-suave); color: var(--cat-pe-forte); }
.item-dia .horario.cat-mao { background: var(--cat-mao-suave); color: var(--cat-mao-forte); }
.item-dia .horario.cat-tintura { background: var(--cat-tintura-suave); color: var(--cat-tintura-forte); }
.item-dia .horario.cat-sobrancelha { background: var(--cat-sobrancelha-suave); color: var(--cat-sobrancelha-forte); }
.item-dia .horario.cat-outros { background: var(--cat-outros-suave); color: var(--cat-outros-forte); }

/* Lista da semana (tela view-semana) */
.lista-semana {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.total-periodo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-cartao);
  border-radius: 14px;
  padding: 12px 16px;
  margin-top: 10px;
  font-size: 0.9em;
  color: var(--texto-fraco);
  box-shadow: var(--sombra-cartao);
}
.total-periodo .linha-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.total-periodo strong { color: var(--rosa-forte); font-family: var(--fonte-titulo); font-size: 1.3em; }
/* O "previsto" é a conta secundária — o que ela já recebeu é que manda na leitura. */
.total-periodo .linha-total.previsto { font-size: 0.92em; }
.total-periodo .linha-total.previsto strong {
  color: var(--texto-fraco);
  font-size: 1.05em;
  font-weight: 600;
}

/* ---------- Mês: calendário de verdade ---------- */
/* 7 colunas (Dom→Sáb). Cada célula ganha um tom de fundo proporcional ao melhor dia do
   mês (--proporcao, vinda do JS) — o mês inteiro se lê num relance, sem virar 30
   quadradinhos iguais. */
.cabecalho-semana-mes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
  font-size: 0.66em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-fraco);
  text-align: center;
}

.grade-mes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.dia-mes {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background-color: var(--bg-cartao);
  /* proporção 0 → transparente; 1 → rosa-suave cheio. Fica atrás do número. */
  background-image: linear-gradient(rgba(201, 127, 165, calc(var(--proporcao, 0) * 0.28)), rgba(201, 127, 165, calc(var(--proporcao, 0) * 0.28)));
  font-family: var(--fonte-corpo);
  color: var(--texto);
  cursor: pointer;
  transition: transform 0.1s ease;
  animation: item-entra 0.3s ease both;
  animation-delay: calc(var(--i, 0) * 12ms);
}
.dia-mes:active { transform: scale(0.92); }
.dia-mes.fora { visibility: hidden; cursor: default; } /* casinha antes do dia 1 */
.dia-mes.skeleton {
  pointer-events: none;
  background: var(--borda);
  border-color: transparent;
  animation: skeleton-pulso 1.1s ease-in-out infinite;
}
.dia-mes .num-dia-mes { font-size: 0.9em; font-weight: 600; line-height: 1; }
.dia-mes.tem .num-dia-mes { color: var(--rosa-forte); }
.dia-mes .valor-dia-mes {
  font-size: 0.6em;
  font-weight: 600;
  color: var(--rosa-forte);
  font-variant-numeric: tabular-nums;
}
.dia-mes.hoje {
  border-color: var(--rosa-forte);
  box-shadow: 0 0 0 2px rgba(192, 74, 120, 0.25);
}
.dia-mes.hoje .num-dia-mes { color: var(--rosa-forte); }

/* ---------- Dica do swipe (uma vez só, na primeira abertura) ---------- */
/* O card espia pra esquerda e volta sozinho, revelando os botões de reagendar/apagar por
   um instante — sem isso ninguém descobre que o gesto existe. */
@keyframes espiada-swipe {
  0%, 12% { transform: translateX(0); }
  38%, 62% { transform: translateX(-88px); }
  88%, 100% { transform: translateX(0); }
}
.item-dia.dica-swipe .item-dia-conteudo {
  animation: espiada-swipe 2s cubic-bezier(0.32, 0.72, 0.35, 1) 0.6s both;
}
/* Quem pediu menos movimento no sistema não leva a animação — a função continua lá. */
@media (prefers-reduced-motion: reduce) {
  .item-dia.dica-swipe .item-dia-conteudo { animation: none; }
}

.linha-semana {
  background: var(--bg-cartao);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid transparent;
  box-shadow: var(--sombra-cartao);
  animation: item-entra 0.32s ease both;
  animation-delay: calc(var(--i, 0) * 45ms);
  transition: transform 0.12s ease;
}
.linha-semana:active { transform: scale(0.985); }
.linha-semana.hoje { border-color: var(--borda-hoje); box-shadow: 0 0 0 3px rgba(238, 176, 207, 0.35), var(--sombra-cartao); }

.linha-semana .dia-rotulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--rosa-suave);
}
.linha-semana .dia-rotulo .nome-dia { font-size: 0.6em; color: var(--rosa-forte); text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }
.linha-semana .dia-rotulo .num-dia { font-family: var(--fonte-titulo); font-size: 1.1em; font-weight: 700; color: var(--texto); line-height: 1; }

.linha-semana.hoje .dia-rotulo {
  background: var(--rosa-forte);
  box-shadow: 0 0 0 4px rgba(192, 74, 120, 0.15);
}
.linha-semana.hoje .dia-rotulo .nome-dia { color: #fce8f1; opacity: 1; }
.linha-semana.hoje .dia-rotulo .num-dia { color: #fff; }

.linha-semana .itens-dia {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-top: 2px;
}

.item-semana { display: flex; gap: 6px; font-size: 0.75em; align-items: baseline; }
.item-semana .hora { color: var(--rosa-forte); font-weight: 700; flex-shrink: 0; min-width: 34px; font-variant-numeric: tabular-nums; }
.item-semana .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-semana.bloqueio .nome { text-decoration: line-through; opacity: 0.7; }

/* Bolinha de cor por categoria de serviço — dá pra escanear a semana toda sem ler nada */
.ponto-servico {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
  background: var(--cat-outros-forte);
}
.ponto-servico.cat-pe-mao { background: var(--cat-pe-mao-forte); }
.ponto-servico.cat-pe { background: var(--cat-pe-forte); }
.ponto-servico.cat-mao { background: var(--cat-mao-forte); }
.ponto-servico.cat-tintura { background: var(--cat-tintura-forte); }
.ponto-servico.cat-sobrancelha { background: var(--cat-sobrancelha-forte); }

.vazio-dia-semana { color: var(--texto-fraco); font-size: 0.78em; padding-top: 3px; }

.item-dia .info { flex: 1; min-width: 0; }
.item-dia .info .nome {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-dia .info .detalhe {
  font-size: 0.85em;
  color: var(--texto-fraco);
}
.item-dia.bloqueio .nome { text-decoration: line-through; }

.item-cliente .nome { font-weight: 600; }
.item-cliente .detalhe { font-size: 0.85em; color: var(--texto-fraco); }
.item-cliente .resumo-cliente { font-size: 0.78em; color: var(--rosa-forte); margin-top: 2px; }

.avatar-cliente {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rosa-suave);
  color: var(--rosa-forte);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.05em;
}

.linha-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.linha-titulo h2 { font-size: 1.2em; }

/* "Nada marcado pra esse dia" agora É o botão de marcar — antes era só texto e a ação
   ficava no "+" flutuante, sem ligação visível com a frase (auditoria 2026-09-05). */
.vazio-convite {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 28px 16px;
  border: 1.5px dashed var(--borda-hoje);
  border-radius: 16px;
  background: var(--bg-cartao);
  color: var(--texto-fraco);
  font-family: var(--fonte-corpo);
  font-size: 0.95em;
  line-height: 1.7;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease;
}
.vazio-convite strong { color: var(--rosa-forte); font-size: 1.1em; }
.vazio-convite:active { transform: scale(0.98); border-color: var(--rosa); }

.botao-flutuante {
  position: fixed;
  right: 20px;
  bottom: 84px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--rosa-forte);
  background-image: linear-gradient(155deg, #d6669a 0%, var(--rosa-forte) 100%);
  color: white;
  font-size: 1.8em;
  line-height: 1;
  box-shadow: var(--sombra-flutuante);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.botao-flutuante:active { transform: scale(0.9) rotate(-4deg); }

/* Botão flutuante secundário — "voltar pra semana", só na tela do dia. Fica do lado
   oposto ao "+" (esquerda) e num tom mais discreto, pra não competir com a ação
   principal. Reaparece com o mesmo "pop" do chip de hoje quando some/volta com [hidden]. */
.botao-flutuante-voltar {
  left: 20px;
  right: auto;
  width: 48px;
  height: 48px;
  background: var(--bg-cartao);
  background-image: none;
  color: var(--rosa-forte);
  border: 1px solid var(--borda-hoje);
  font-size: 1.6em;
  font-weight: 700;
  box-shadow: var(--sombra-cartao);
  animation: chip-entra 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.botao-flutuante-voltar:active { transform: scale(0.9); }

/* "Bloquear horário" — saiu do rodapé (que virou só navegação) pra cá. Fica acima do "+"
   na tela do dia, menor e discreto: é ação menos comum que marcar uma cliente. */
.botao-flutuante-menor {
  width: 46px;
  height: 46px;
  bottom: 148px; /* 84 (base do "+") + 56 (altura dele) + 8 de folga */
  background: var(--bg-cartao);
  background-image: none;
  border: 1px solid var(--borda-hoje);
  font-size: 1.3em;
  box-shadow: var(--sombra-cartao);
  animation: chip-entra 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.botao-flutuante-menor:active { transform: scale(0.9); }

.rodape {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--bg-cartao);
  border-top: 1px solid var(--borda);
  padding: 6px 8px env(safe-area-inset-bottom);
  gap: 6px;
}

.tab {
  flex: 1;
  padding: 10px 4px;
  background: none;
  border: none;
  border-radius: 12px;
  color: var(--texto-fraco);
  font-size: 0.85em;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tab-ativa { color: var(--rosa-forte); font-weight: 600; background: var(--rosa-suave); }

.botao-secundario, .botao-primario, .botao-perigo {
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 1em;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.botao-secundario:active, .botao-primario:active, .botao-perigo:active { transform: scale(0.97); }
.botao-primario { background: var(--rosa-forte); color: white; font-weight: 600; box-shadow: 0 4px 12px rgba(192, 74, 120, 0.25); }
.botao-secundario { background: var(--rosa-suave); color: var(--texto); }
.botao-perigo { background: #fbe4e1; color: var(--erro); margin-right: auto; }

dialog {
  border: none;
  border-radius: 18px;
  padding: 0;
  background: var(--bg-cartao);
  color: var(--texto);
  width: min(400px, 92vw);
  box-shadow: 0 20px 50px rgba(74, 53, 64, 0.25);
}
dialog::backdrop { background: rgba(74, 42, 58, 0.45); backdrop-filter: blur(2px); }

dialog form {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

dialog h2 { font-size: 1.3em; margin-bottom: 2px; }

label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9em;
  color: var(--texto-fraco);
}

input, select {
  background: var(--bg);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 10px;
  color: var(--texto);
  font-size: 1em;
  font-family: var(--fonte-corpo);
  transition: border-color 0.15s ease;
}
input:focus, select:focus { outline: none; border-color: var(--rosa); }

.campo-servicos { display: flex; flex-direction: column; gap: 6px; }
.rotulo-servicos { font-size: 0.9em; color: var(--texto-fraco); }

.opcoes-servico { display: flex; flex-direction: column; gap: 6px; }
.opcao-servico {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 10px;
  font-size: 0.95em;
  color: var(--texto);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.opcao-servico input[type="checkbox"] { accent-color: var(--rosa-forte); width: 18px; height: 18px; flex-shrink: 0; }
.opcao-servico:has(input:checked) { border-color: var(--rosa); background: var(--rosa-suave); }

/* Um grupo de <label> dentro de um <div> perderia o gap do "dialog form" (o flex é do
   pai, não passa pro filho) — por isso o bloco repete o mesmo espaçamento. */
.bloco-campos { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Grade de horários ---------- */
.campo-horarios { display: flex; flex-direction: column; gap: 6px; }

.grade-horarios {
  display: grid;
  /* Com a grade de meia em meia hora são ~21 botões — 4 colunas viravam 6 linhas altas.
     Auto-fill com largura mínima acomoda 4 ou 5 colunas conforme a tela, sem ficar alto. */
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
  max-height: 42vh;
  overflow-y: auto;
}

.chip-horario {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 46px; /* alvo confortável pro dedo, mesmo sem o rótulo de quem ocupa */
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 8px 4px;
  font-family: var(--fonte-corpo);
  font-size: 0.95em;
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}
.chip-horario:active { transform: scale(0.95); }
.chip-horario.selecionado {
  background: var(--rosa-forte);
  border-color: var(--rosa-forte);
  color: #fff;
}
.chip-horario:disabled {
  cursor: not-allowed;
  background: var(--borda);
  border-color: var(--borda);
  color: var(--texto-fraco);
}
/* O riscado fica só no número da hora: text-decoration num elemento pai desce pros
   filhos e não dá pra cancelar embaixo, o que riscaria o nome da cliente junto. */
.chip-horario.ocupado .chip-hora { text-decoration: line-through; }
.chip-quem {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68em;
  font-weight: 400;
}

/* Ocupa a linha inteira da grade em vez de virar mais uma "célula" ao lado dos botões. */
.grade-aviso {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85em;
  color: var(--texto-fraco);
}

.botoes-modal {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.lista-pendencias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
}

.item-pendencia {
  background: var(--bg);
  border-radius: 12px;
  padding: 12px;
}
.item-pendencia .titulo-pendencia { font-weight: 600; }
.item-pendencia .erro-pendencia { color: var(--erro); font-size: 0.85em; margin: 4px 0 8px; }
.item-pendencia .botoes-pendencia { display: flex; gap: 8px; }
.item-pendencia .botoes-pendencia button { flex: 1; font-size: 0.85em; padding: 8px 10px; }