/* ============================================================
   GUEBO STYLE — cores do logo: preto, branco e amarelo-ouro
   ============================================================ */

:root {
  --fundo: #000000;
  --cartao: #141414;
  --borda: #e0b812;       /* bordas no amarelo-ouro */
  --texto: #ffffff;
  --texto-suave: #a8a8a8;
  --destaque: #e0b812;    /* amarelo-ouro do logo */
  --erro: #e57373;
  --ok: #81c784;
  --raio: 10px;
}

* { box-sizing: border-box; }

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

#tela {
  max-width: 480px;
  margin: 0 auto;
  padding: 1.5rem 1rem calc(2rem + env(safe-area-inset-bottom, 0px));
}

/* ===== Marca ===== */
.marca { text-align: center; margin: 0.5rem 0 1.5rem; }
.marca img { display: block; width: 180px; height: 180px; margin: 0 auto; }
.marca p { margin: 0.25rem 0 0; color: var(--texto-suave); font-style: italic; }
.marca small {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--destaque);
  border-radius: 999px;
  color: var(--destaque);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ===== Cartões ===== */
.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.cartao h2 { margin: 0 0 1rem; font-size: 1.1rem; color: var(--destaque); }
.centro { text-align: center; }
.suave { color: var(--texto-suave); font-size: 0.9rem; }

/* ===== Formulários ===== */
.campo { display: block; margin-bottom: 1rem; font-size: 0.9rem; color: var(--destaque); }
.campo input {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.75rem;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  font-size: 1rem;
}
.campo select {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.75rem;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  font-size: 1rem;
}
.campo input:focus, .campo select:focus { outline: none; box-shadow: 0 0 0 2px var(--destaque); }
.campo small { display: block; margin-top: 0.3rem; }
.rotulo { font-size: 0.9rem; color: var(--destaque); }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

/* ===== Dias da semana (liga/desliga) ===== */
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; margin: 0.35rem 0 0.75rem; }
.dia {
  padding: 0.6rem 0;
  background: transparent;
  color: var(--texto-suave);
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
.dia.ligado { background: var(--destaque); color: #000; border-color: var(--destaque); font-weight: 700; }

.botao {
  display: block;
  width: 100%;
  padding: 0.8rem;
  border: 0;
  border-radius: var(--raio);
  background: var(--destaque);
  color: #000000;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.botao:disabled { opacity: 0.5; cursor: default; }
.botao.secundario { background: transparent; color: var(--destaque); border: 1px solid var(--destaque); }

.erro { color: var(--erro); font-size: 0.9rem; margin: -0.25rem 0 1rem; }

.botao.perigo { background: transparent; color: var(--erro); border: 1px solid var(--erro); }
.cartao .botao { margin-top: 1rem; }

/* ===== Listas ===== */
.lista { list-style: none; margin: 0; padding: 0; }
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid #2e2e2e;
  cursor: pointer;
}
.item:last-child { border-bottom: 0; }
.item:hover { background: #1c1c1c; }
.item .valor { color: var(--destaque); font-weight: 600; white-space: nowrap; }
.item.inativo, .item.inativo .valor { color: var(--texto-suave); }
.etiqueta {
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--texto-suave);
  border-radius: 999px;
  font-size: 0.7rem;
}

/* ===== Escolhas do cliente ===== */
.item.escolher { cursor: pointer; justify-content: flex-start; }
.item.escolher .nome { flex: 1; }
.item.escolher input { width: 20px; height: 20px; margin: 0; accent-color: var(--destaque); flex: none; }
#servicos li { border-bottom: 1px solid #2e2e2e; }
#servicos li:last-child { border-bottom: 0; }
#servicos .item { border-bottom: 0; }
.total { text-align: right; margin: 0.75rem 0 0; }
.total strong { color: var(--destaque); font-size: 1.15rem; }

.opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 0.5rem; }
.opcao {
  padding: 0.85rem 0.5rem;
  background: transparent;
  color: var(--texto);
  border: 1px solid #3a3a3a;
  border-radius: var(--raio);
  font-size: 1rem;
  cursor: pointer;
}
.opcao.escolhida { background: var(--destaque); color: #000; border-color: var(--destaque); font-weight: 700; }

/* ===== Dia e horário ===== */
.link { background: none; border: 0; color: var(--destaque); font-size: 0.95rem; cursor: pointer; padding: 0 0 0.75rem; }
.resumo { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1.25rem; }

.faixa-dias {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.dia-faixa {
  flex: 0 0 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.55rem 0.25rem;
  background: transparent;
  color: var(--texto);
  border: 1px solid #3a3a3a;
  border-radius: var(--raio);
  cursor: pointer;
  scroll-snap-align: start;
}
.dia-faixa span { font-size: 0.75rem; color: var(--texto-suave); }
.dia-faixa strong { font-size: 0.95rem; }
.dia-faixa i, .legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dia-faixa:disabled { opacity: 0.45; cursor: default; }
.dia-faixa.escolhido { border-color: var(--destaque); background: #2a2408; }
.dia-faixa.escolhido span { color: var(--destaque); }
.verde i, i.verde { background: #4caf50; }
.amarelo i, i.amarelo { background: var(--destaque); }
.vermelho i, i.vermelho { background: #e53935; }
.legenda { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--texto-suave); display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.legenda i { margin-left: 0.5rem; }
.legenda i:first-child { margin-left: 0; }

.periodo-horas { margin-top: 0.9rem; }
.periodo-horas > span { display: block; font-size: 0.9rem; color: var(--texto-suave); margin-bottom: 0.4rem; }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.5rem; }
.hora {
  padding: 0.7rem 0;
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--destaque);
  border-radius: var(--raio);
  font-size: 1rem;
  cursor: pointer;
}
.hora.escolhida { background: var(--destaque); color: #000; font-weight: 700; }

/* ===== Confirmação ===== */
.resumo h2 { margin-bottom: 0.4rem; }
.destaque { color: var(--destaque); }
.botao.google { background: #fff; color: #1f1f1f; margin-bottom: 0.6rem; display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.botao.google .g { font-weight: 800; color: #4285f4; font-size: 1.15rem; }
.link.centro { display: block; margin: 0.75rem auto 0; padding: 0; }
.campo input[type="date"] { color-scheme: dark; }
.sucesso h2 { font-size: 1.4rem; }
.sucesso p { margin: 0.6rem 0; }
.aviso-prazo {
  margin-top: 1rem !important;
  padding: 0.75rem;
  border: 1px dashed var(--destaque);
  border-radius: var(--raio);
  font-size: 0.95rem;
}

/* ===== Gestão: tela mais larga no notebook + menu de baixo ===== */
body.gestao #tela { max-width: 760px; padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }

.menu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  background: #0d0d0d;
  border-top: 1px solid var(--destaque);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.menu[hidden] { display: none; }
.menu button {
  flex: 1;
  max-width: 200px;
  padding: 0.55rem 0 0.6rem;
  background: none;
  border: 0;
  color: var(--texto-suave);
  font-size: 0.8rem;
  cursor: pointer;
}
.menu .icone { display: block; font-size: 1.3rem; }
.menu button.ativo { color: var(--destaque); font-weight: 700; }

/* ===== Agenda do dia ===== */
.periodo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.periodo > button {
  width: 44px;
  height: 44px;
  background: transparent;
  color: var(--destaque);
  border: 1px solid var(--destaque);
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  flex: none;
}
.periodo strong { display: block; font-size: 1.1rem; }
.periodo .link { padding: 0.2rem 0 0; font-size: 0.85rem; }
.resumo-dia { margin: 0.75rem 0 0; }
.resumo-dia .link { padding: 0 0 0 0.5rem; font-size: 0.85rem; }

.cartao.agenda { padding: 0.5rem; overflow-x: auto; }
.grade { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.grade thead th { color: var(--destaque); font-size: 0.9rem; padding: 0.4rem 0.2rem; }
.grade thead th:first-child, .grade tbody th { width: 3.4rem; }
.grade tbody th { color: var(--texto-suave); font-size: 0.85rem; font-weight: 600; text-align: left; vertical-align: top; padding-top: 0.55rem; }
.grade td {
  border-radius: 8px;
  padding: 0.45rem 0.5rem;
  vertical-align: top;
  font-size: 0.9rem;
  overflow: hidden;
}
.grade td.livre { color: #444; text-align: center; border: 1px dashed #2e2e2e; }
.grade td.ocupado { background: #2a2408; border: 1px solid var(--destaque); cursor: pointer; }
.grade td.ocupado strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grade td.ocupado small { display: block; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grade td.atendido { background: #16260f; border-color: #4caf50; }
.grade td.nao_compareceu { background: #2a1010; border-color: #e53935; }
.grade tr.passou th, .grade tr.passou td.livre { opacity: 0.4; }
.suave-titulo { color: var(--texto-suave) !important; font-size: 0.95rem !important; }

/* ===== Agendar pela gestão ===== */
.grade td.vago { cursor: pointer; color: #555; font-size: 1.1rem; }
.grade td.vago:hover { color: var(--destaque); border-color: var(--destaque); background: #1a1708; }
.cliente-escolhido {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--destaque);
  border-radius: var(--raio);
  margin: 0.35rem 0 0.5rem;
}
.cliente-escolhido .link { padding: 0; }
#n-resultados .item { padding: 0.55rem 0.25rem; }
#n-cliente .link { padding: 0.25rem 0 0.5rem; }
#n-cliente .campo { margin-bottom: 0.5rem; }

/* ===== Bloqueios ===== */
.grade td.bloqueado {
  background: repeating-linear-gradient(45deg, #1a1a1a, #1a1a1a 6px, #222 6px, #222 12px);
  border: 1px solid #555;
  color: var(--texto-suave);
  text-align: center;
  font-size: 0.85rem;
  cursor: pointer;
}
.abas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem; }
.abas .opcao { font-size: 0.9rem; }
#bloquear-dia { margin: 0.5rem 0.25rem 0.25rem; width: calc(100% - 0.5rem); }

/* ===== Janela do agendamento ===== */
.zap { color: #25d366; font-weight: 600; text-decoration: none; font-size: 1.05rem; }
.painel p { margin: 0; }
.painel .opcoes { margin-bottom: 0.5rem; }
.painel .horas { margin-bottom: 0.5rem; }
.campo input[type="date"] { color-scheme: dark; }

/* ===== Área do cliente ===== */
#meus .item { align-items: flex-start; }
#meus .item small { font-size: 0.85rem; }
.titulo-novo { color: var(--destaque); font-size: 1.05rem; margin: 1.25rem 0 0.75rem; text-align: center; }
.botao.zap-botao { background: #25d366; color: #000; text-align: center; text-decoration: none; }

.ola { display: flex; justify-content: space-between; align-items: baseline; }
.ola h2 { margin-bottom: 0.5rem; }
.ola .link { padding: 0; font-size: 0.9rem; }
.entrar-cliente { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1.25rem; }
.entrar-cliente .botao { width: auto; margin: 0; padding: 0.6rem 1rem; font-size: 0.95rem; }

/* ===== Caixa ===== */
.formas { grid-template-columns: 1fr 1fr; }
.total-caixa { display: flex; flex-direction: column; align-items: center; margin-top: 1rem; }
.total-caixa strong { font-size: 2rem; color: var(--destaque); }
.lista.compacta .item { padding: 0.55rem 0.25rem; cursor: default; }
.lista.compacta .item:hover { background: none; }
.lista.compacta small { font-size: 0.8rem; }
.periodo > strong { flex: 1; font-size: 1.1rem; }

/* ===== Lembretes ===== */
button.zap { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
#lembretes-amanha { margin-top: 0.75rem; }
.item.lembrete { cursor: default; }
.item.lembrete:hover { background: none; }
.item.lembrete .opcao { flex: none; padding: 0.5rem 0.75rem; font-size: 0.9rem; }
.opcao.zap-opcao { background: #25d366; border-color: #25d366; color: #000; font-weight: 700; }

/* ===== Indicadores ===== */
.abas.tres { grid-template-columns: 1fr 1fr 1fr; margin: 0; }
.abas.tres .opcao { font-size: 0.85rem; padding: 0.7rem 0.25rem; }
#i-periodo { margin-bottom: 0.75rem; }
#i-periodo .opcao { padding: 0.55rem 0.25rem; font-size: 0.85rem; }
.ranking { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.ranking th { color: var(--destaque); font-weight: 600; text-align: left; padding: 0.4rem 0.3rem; font-size: 0.8rem; }
.ranking td { padding: 0.6rem 0.3rem; border-top: 1px solid #2e2e2e; }
.ranking th:nth-child(n+3), .ranking td:nth-child(n+3) { text-align: center; width: 3.6rem; }
.ranking th:first-child, .ranking td:first-child { width: 1.8rem; }
.ranking tbody tr { cursor: pointer; }
.ranking tbody tr:hover { background: #1c1c1c; }
.num-ruim { color: var(--erro); font-weight: 700; }
.legenda-indicador { font-size: 0.8rem; margin: 0.75rem 0 0; }
.historico { max-height: 45vh; overflow-y: auto; }
#a-janela .opcao { font-size: 0.8rem; padding: 0.55rem 0.2rem; }
.voltar .item { cursor: default; align-items: center; }
.voltar .item:hover { background: none; }
.voltar .opcao { flex: none; padding: 0.5rem 0.7rem; font-size: 0.85rem; }
.clicavel { cursor: pointer; }
.retorno { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; font-size: 0.9rem; margin: 0.25rem 0 0.5rem; }
.retorno input {
  width: 4.2rem;
  padding: 0.45rem;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--texto);
  font-size: 0.95rem;
  text-align: center;
}
.retorno .opcao { flex: none; padding: 0.45rem 0.8rem; font-size: 0.85rem; }
.aviso-voltar {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  background: #2a2408;
  border: 1px solid var(--destaque);
  border-radius: var(--raio);
  color: var(--destaque);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.aniversariantes .item { cursor: default; align-items: center; }
.aniversariantes .item:hover { background: none; }
.aniversariantes .opcao { flex: none; padding: 0.5rem 0.7rem; font-size: 0.85rem; }
.campo textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.75rem;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  font: inherit;
  font-size: 0.95rem;
  resize: vertical;
}

/* ===== Caixa de marcar ===== */
.marcar { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 1rem; cursor: pointer; }
.marcar input { width: 20px; height: 20px; accent-color: var(--destaque); }

/* ===== Janela que sobe de baixo ===== */
.painel-fundo {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.painel {
  width: 100%;
  max-width: 480px;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 92vh;
  overflow-y: auto;
}
.painel h3 { margin: 0 0 0.5rem; color: var(--destaque); }
.painel .campo, .painel .marcar { margin-bottom: 0.25rem; }
.painel .erro { margin: 0; }

/* ===== Mensagem rápida ===== */
#aviso-rapido {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  background: var(--destaque);
  color: #000000;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-weight: 600;
}