:root {
  --roxo: #7c3aed;
  --roxo-escuro: #6d28d9;
  --texto: #1f2937;
  --texto-fraco: #6b7280;
  --borda: #d1d5db;
  --fundo: #f5f3ff;
  --card: #ffffff;
  --verde: #059669;
  --vermelho: #dc2626;
  --ambar: #b45309;
  /* A agenda tem cor propria: marcar horario nao e mexer em dinheiro, e a cor
     e o que separa as duas coisas na barra de cima. */
  --agenda: #0f766e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
}

/* ---------- Cabeçalho e navegação ---------- */

header {
  background: var(--card);
  border-bottom: 1px solid var(--borda);
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Marca: a foto redonda ao lado do nome. */
.marca { display: flex; align-items: center; gap: 12px; }

.marca-foto {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  /* A foto e em pe e tem duas pessoas: puxa o enquadramento pra faixa dos
     rostos, senao o recorte redondo pega a bancada da cozinha. */
  object-position: 50% 42%;
  border: 2px solid var(--roxo);
}

header h1 { margin: 0; font-size: 19px; }
.subtitulo { margin: 2px 0 0; font-size: 14px; color: var(--texto-fraco); }

nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-top: 10px;
  padding-bottom: 2px;
  scrollbar-width: none;
}
nav::-webkit-scrollbar { display: none; }

nav a {
  flex-shrink: 0;
  padding: 9px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  color: var(--texto-fraco);
  background: var(--fundo);
}
nav a.ativo { background: var(--roxo); color: #fff; }

/* A Agenda vem antes de tudo e em verde: as outras abas sao o caixa (dinheiro),
   ela nao. O risquinho depois dela reforca que sao dois assuntos. */
nav a.agenda { background: #ccfbf1; color: var(--agenda); }
nav a.agenda.ativo { background: var(--agenda); color: #fff; }

nav .divisor {
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  margin: 3px 5px;
  background: var(--borda);
}

main { max-width: 720px; margin: 0 auto; padding: 16px; }

/* ---------- Cartões e formulários ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}
.card h2 { margin: 0 0 14px; font-size: 17px; }

label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.campo { margin-bottom: 14px; }

input, select, textarea {
  width: 100%;
  padding: 12px;
  font-size: 17px;   /* 16px+ evita o zoom automatico do iOS ao focar */
  font-family: inherit;
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--roxo);
  outline-offset: 1px;
  border-color: var(--roxo);
}

button {
  min-height: 44px;
  padding: 12px 20px;
  font-size: 17px;
  font-family: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--roxo);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
button:hover { background: var(--roxo-escuro); }
button:disabled { opacity: 0.6; cursor: not-allowed; }

.botao-largo { width: 100%; }

/* Um <a> que precisa parecer botão (ex: "+ Marcar horário", que leva pra outra
   tela em vez de abrir formulário aqui). */
a.botao-largo {
  display: block;
  box-sizing: border-box;
  padding: 12px 20px;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 10px;
}

/* ---------- Avisos ---------- */

.aviso { padding: 12px 14px; border-radius: 10px; font-weight: 600; margin-bottom: 14px; }
.aviso.ok { background: #d1fae5; color: #065f46; }
.aviso.erro { background: #fee2e2; color: #991b1b; }
/* Nem sucesso nem erro: o horario foi salvo, mas ela precisa ver o recado.
   Como nao e "ok", nao desaparece sozinho. */
.aviso.atencao { background: #fef3c7; color: var(--ambar); }
.oculto { display: none !important; }

/* ---------- Listas e itens ---------- */

.itens { list-style: none; margin: 0; padding: 0; }
.itens li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
}
.itens li:last-child { border-bottom: none; }

/* Lado direito de um item: preço, selo e ações, sempre juntos e sem quebrar. */
.item-direita {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.quem { color: var(--texto-fraco); font-size: 14px; }
.preco { font-weight: 700; white-space: nowrap; }
.vazio { padding: 28px; text-align: center; color: var(--texto-fraco); }

/* ---------- Resumo ---------- */

.resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.resumo div {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 12px 14px;
}
.resumo span {
  display: block;
  font-size: 12px;
  color: var(--texto-fraco);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.resumo strong { font-size: 21px; }

/* ---------- Confirmação em linha ---------- */

.excluir {
  min-height: 0;
  background: none;
  border: 1px solid var(--borda);
  padding: 7px 12px;
  font-size: 14px;
  color: var(--vermelho);
  border-radius: 8px;
}
.excluir:hover { background: #fee2e2; border-color: var(--vermelho); }

.confirmar { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.confirmar button { min-height: 0; padding: 7px 12px; font-size: 14px; border-radius: 8px; }
.confirmar .sim { background: var(--vermelho); }
.confirmar .nao { background: none; color: var(--texto-fraco); border: 1px solid var(--borda); }

/* ---------- Tela de senha ---------- */

.tela-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}
.caixa-login { width: 100%; max-width: 380px; }
.caixa-login .card { margin: 0; text-align: center; padding: 26px 22px; }

/* A foto grande da tela de senha: e a primeira coisa que ela ve. */
.foto-login {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 42%;
  border: 4px solid var(--roxo);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.25);
}
.caixa-login h1 { margin: 14px 0 0; }
.caixa-login .subtitulo { margin: 4px 0 22px; }
.caixa-login .campo { text-align: left; }
.caixa-login button { width: 100%; }
.dica { margin: 14px 0 0; font-size: 13px; color: var(--texto-fraco); }

/* ---------- Tela de lançar ---------- */

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

.chip {
  min-height: 0;
  padding: 10px 14px;
  font-size: 15px;
  background: var(--fundo);
  color: var(--texto);
  border: 2px solid transparent;
  border-radius: 999px;
}
.chip:hover { background: #ede9fe; }
.chip.ativo { background: var(--roxo); color: #fff; }
.chip.fiado.ativo { background: var(--ambar); }

.link {
  min-height: 0;
  padding: 6px 0;
  background: none;
  color: var(--roxo);
  font-size: 14px;
  text-decoration: underline;
}
.link:hover { background: none; }

.sugestoes {
  border: 1px solid var(--borda);
  border-radius: 10px;
  margin-top: 6px;
  overflow: hidden;
}
.sugestoes button {
  min-height: 0;
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px;
  background: #fff;
  color: var(--texto);
  border: none;
  border-bottom: 1px solid var(--borda);
  border-radius: 0;
  font-weight: 500;
}
.sugestoes button:last-child { border-bottom: none; }
.sugestoes button:hover { background: var(--fundo); }
.sugestoes .nova { color: var(--roxo); font-weight: 700; }
/* Caminho secundário: existe, mas não disputa atenção com o cadastrar. */
.sugestoes .sem-cadastro { color: var(--texto-fraco); font-size: 15px; }

.escolhida {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 12px;
  background: #ede9fe;
  border-radius: 10px;
  font-weight: 700;
}

.linha-servico { display: flex; align-items: center; gap: 8px; }
.linha-servico .nome { flex: 1; font-weight: 600; }
.linha-servico input { width: 120px; text-align: right; }
.linha-servico .tirar {
  min-height: 0;
  padding: 8px 12px;
  background: none;
  color: var(--vermelho);
  border: 1px solid var(--borda);
  border-radius: 8px;
}

.total-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-top: 2px solid var(--borda);
  margin-bottom: 8px;
}
.total-linha strong { font-size: 22px; }

/* ---------- Tela de fiado ---------- */

.devedora { display: flex; flex-direction: column; gap: 10px; }
.devedora-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.devedora-topo h3 { margin: 0; font-size: 17px; word-break: break-word; }
.nome-link { color: var(--texto); text-decoration: underline; }
.devedora-valor { font-size: 20px; font-weight: 700; color: var(--ambar); }
.devedora-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.devedora-acoes button, .devedora-acoes a {
  flex: 1;
  min-width: 120px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.botao-cobrar { background: #25d366; color: #fff; }
.botao-cobrar.desligado { background: var(--borda); color: var(--texto-fraco); pointer-events: none; }
.botao-recebi { background: var(--verde); color: #fff; border: none; cursor: pointer; }
.caixa-recebi { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.caixa-recebi .chips { margin-bottom: 4px; }

/* ---------- Tela de clientes ---------- */

.linha-check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.linha-check input { width: auto; }

.cliente-link {
  min-height: 0;
  flex: 1;
  text-align: left;
  background: none;
  color: var(--texto);
  padding: 0;
  font-weight: 600;
  font-size: 16px;
}
.cliente-link:hover { background: none; text-decoration: underline; }

.selo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.selo-deve { background: #fef3c7; color: var(--ambar); }
.selo-ok { background: #d1fae5; color: var(--verde); }
.selo-credito { background: #dbeafe; color: #1d4ed8; }

.visita { border-bottom: 1px solid var(--borda); padding: 12px 0; }
.visita:last-child { border-bottom: none; }
.visita-topo { display: flex; justify-content: space-between; font-weight: 700; }
.visita ul { list-style: none; margin: 6px 0 0; padding: 0; }
.visita li { display: flex; justify-content: space-between; font-size: 15px; color: var(--texto-fraco); }
.pagamento-linha { display: flex; justify-content: space-between; padding: 10px 0; color: var(--verde); font-weight: 600; }
.saldo-final { display: flex; justify-content: space-between; padding-top: 14px; border-top: 2px solid var(--borda); font-size: 19px; font-weight: 700; }

/* ---------- Tela de agenda ---------- */

/* ---------- Faixa da semana ---------- */

.semana {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 8px;
  margin-bottom: 16px;
}

.semana-topo { display: flex; align-items: center; gap: 8px; }
.semana-topo > div { flex: 1; text-align: center; }
.semana-topo strong { display: block; font-size: 17px; }

.seta { width: 52px; padding: 0; font-size: 26px; line-height: 1; }

/* Sete colunas iguais: cabe num celular de 360px sem rolar de lado. */
.semana-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 8px;
}

.dia-celula {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 2px;
  background: var(--fundo);
  color: var(--texto);
  border: 2px solid transparent;
  border-radius: 10px;
  font-weight: 600;
}
.dia-celula:hover { background: #ccfbf1; }

.dia-abrev { font-size: 11px; text-transform: uppercase; color: var(--texto-fraco); }
.dia-numero { font-size: 17px; font-weight: 700; line-height: 1.1; }

/* O número de clientes do dia. Sem ninguém, vira um ponto fraco — ocupa o mesmo
   espaço, então a faixa não muda de altura conforme a semana enche. */
.dia-quantas {
  font-size: 12px;
  font-weight: 700;
  min-width: 18px;
  border-radius: 999px;
  background: var(--agenda);
  color: #fff;
}
.dia-quantas.nenhuma { background: none; color: var(--borda); }

/* Hoje: contorno. Dia escolhido: preenchido. Os dois juntos continuam legíveis. */
.dia-celula.hoje { border-color: var(--agenda); }
.dia-celula.ativo { background: var(--agenda); color: #fff; }
.dia-celula.ativo .dia-abrev { color: #d1fae5; }
.dia-celula.ativo .dia-quantas { background: #fff; color: var(--agenda); }
.dia-celula.ativo .dia-quantas.nenhuma { background: none; color: #99f6e4; }

/* "sexta, 14/08" começa em minúscula no título do dia. */
#dia-nome { text-transform: capitalize; }

/* ---------- Botão flutuante (canto inferior direito) ---------- */

.flutuante {
  position: fixed;
  right: 16px;
  /* Acima da barra de gestos do celular, senão o dedo pega o sistema. */
  bottom: 22px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--agenda);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(15, 118, 110, 0.4);
}
.flutuante:hover { background: #115e59; }
.flutuante::before { content: "📅"; font-size: 17px; }

/* Nas telas que têm o botão flutuante, o último card precisa de espaço embaixo
   pra não ficar escondido atrás dele. */
main.com-flutuante { padding-bottom: 84px; }

/* ---------- Tela do mês: o calendário ---------- */

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

.calendario-semana {
  margin-bottom: 6px;
}
.calendario-semana span {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-fraco);
}

/* Casa do dia. Quadrada no celular; cresce e mostra os nomes em tela maior. */
.casa {
  min-height: 46px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 4px;
  background: var(--fundo);
  color: var(--texto);
  border: 2px solid transparent;
  border-radius: 8px;
  text-align: left;
}
.casa:hover { background: #ccfbf1; }

/* Casa fora do mês: espaço reservado, sem número e sem clique. */
.casa.fora { background: none; border-color: transparent; }

.casa-topo { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.casa-numero { font-size: 15px; font-weight: 700; line-height: 1; }

/* A bolinha com quantas clientes tem no dia. */
.casa-quantas {
  min-width: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--agenda);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* Dia livre fica pálido, pra vista bater direto nos dias que têm gente. */
.casa.livre .casa-numero { color: var(--texto-fraco); font-weight: 600; }

.casa.hoje { border-color: var(--agenda); }
.casa.escolhida { background: var(--agenda); color: #fff; }
.casa.escolhida .casa-numero { color: #fff; }
.casa.escolhida .casa-quantas { background: #fff; color: var(--agenda); }

/* Os nomes dentro da casa: só entram quando há largura de verdade. No celular
   estreito eles não caberiam legíveis, e a contagem já diz que tem gente. */
.casa-nomes { display: none; }

@media (min-width: 560px) {
  .casa { min-height: 74px; }
  .casa-nomes {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
  }
  .casa-nome, .casa-mais {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--agenda);
  }
  .casa-mais { color: var(--texto-fraco); }
  .casa.escolhida .casa-nome, .casa.escolhida .casa-mais { color: #d1fae5; }
}

/* ---------- Tela do mês: o dia escolhido ---------- */

.dia-do-mes h2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
/* "sexta, 14/08" -> "Sexta, 14/08" */
.dia-do-mes .titulo-dia { text-transform: capitalize; }
.dia-do-mes .botao-largo { margin-top: 12px; background: var(--agenda); }
.dia-do-mes .botao-largo:hover { background: #115e59; }

.selo-hoje { background: var(--agenda); color: #fff; vertical-align: middle; }

/* Alerta de "hoje tem cliente", no alto da tela de lançar. Verde e com borda
   grossa: e a unica coisa verde naquela tela, entao o olho vai nela primeiro. */
.alerta-hoje {
  display: block;
  padding: 14px;
  margin-bottom: 16px;
  background: #ccfbf1;
  border: 2px solid var(--agenda);
  border-radius: 14px;
  color: var(--agenda);
  text-decoration: none;
}
.alerta-hoje:hover { background: #99f6e4; }
.alerta-hoje strong { display: block; font-size: 17px; }
.alerta-hoje .horarios {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--texto);
}

.marcada { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
/* tabular-nums alinha as horas em coluna: 09:00 e 14:30 com a mesma largura. */
.marcada .hora {
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--agenda);
  white-space: nowrap;
}

/* Os botoes de acao da agenda tambem em verde: dentro da tela, nada lembra o
   roxo do caixa. */
#marcar-neste-dia, #salvar { background: var(--agenda); }
#marcar-neste-dia:hover, #salvar:hover { background: #115e59; }

/* Atalho que aparece depois de marcar, levando pro dia na aba Agenda. */
.atalho-agenda {
  display: block;
  padding: 14px;
  margin-bottom: 16px;
  background: #ccfbf1;
  border: 2px solid var(--agenda);
  border-radius: 14px;
  color: var(--agenda);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.atalho-agenda:hover { background: #99f6e4; }
.nome-marcada { font-weight: 600; word-break: break-word; }

.zap {
  min-height: 0;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  background: #25d366;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

/* É um <a> (vai pra tela de marcar), mas tem que parecer o mesmo botãozinho
   que o "Excluir" do lado. */
.mudar {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--agenda);
  background: none;
  border: 1px solid var(--borda);
  border-radius: 8px;
  text-decoration: none;
}
.mudar:hover { background: #ccfbf1; border-color: var(--agenda); }

/* O resto do verde, só dentro da agenda: setas do dia, chip de serviço
   escolhido, links e o foco dos campos. */
.seta { background: var(--agenda); }
.seta:hover { background: #115e59; }
#botoes-servico .chip.ativo { background: var(--agenda); }
#form-marcacao .link, .dia-titulo .link, #sugestoes .nova { color: var(--agenda); }
#form-marcacao input:focus, #form-marcacao textarea:focus {
  outline-color: var(--agenda);
  border-color: var(--agenda);
}

#form-marcacao h2 { margin: 4px 0 14px; }
.opcional { font-weight: 500; color: var(--texto-fraco); }

/* Dia e hora lado a lado: cabem juntos e economizam uma rolagem no celular. */
.lado-a-lado { display: flex; gap: 10px; }
.lado-a-lado .campo { flex: 1; }

/* ---------- Faixa de demonstração ---------- */
/* Só existe nesta cópia de demonstração: o sistema real não tem esta faixa. */

.faixa-demo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: #1f2937;
  color: #f9fafb;
  font-size: 14px;
  line-height: 1.35;
}

.faixa-demo-texto { flex: 1 1 200px; }
.faixa-demo strong { color: #fcd34d; }

.faixa-demo-confirmar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.faixa-demo-botao {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1px solid #6b7280;
  border-radius: 999px;
  background: transparent;
  color: #f9fafb;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.faixa-demo-botao:hover { background: #374151; }
.faixa-demo .oculto { display: none; }

/* O ícone quadrado no lugar da foto: sem recorte deslocado. */
.marca-foto { object-position: center; background: var(--card); }

/* Nome comprido quebrava letra a letra ("Marlen e Aparec ida"): num celular de
   390px, os tres botoes da direita nao deixavam largura nenhuma para o nome.
   Agora o nome ocupa a linha inteira e os botoes descem para a linha de baixo,
   encostados a direita. */
#marcacoes li { flex-wrap: wrap; row-gap: 8px; }
#marcacoes .marcada { flex: 1 1 100%; }
#marcacoes .marcada > div { min-width: 0; }
#marcacoes .item-direita { margin-left: auto; }
.nome-marcada { overflow-wrap: break-word; word-break: normal; }