/* =============================================================================
   PAINEL DA AGENDA
   Feito para ser usado no celular, entre um atendimento e outro: alvo de
   toque grande, pouca informação por linha, ação principal sempre visível.
   ========================================================================== */

/* Mesma paleta do site , eucalipto, areia e off-white quente. O painel é
   olhado dezenas de vezes por dia; cor forte aqui vira cansaço visual. */
:root {
  --marca: #8ba99e;
  --marca-escura: #6d8b80;
  --marca-clara: #eaf1ee;
  --acento: #d9a68c;
  --acento-claro: #f9f1ec;
  --creme: #fbf9f7;
  --branco: #fff;
  --texto: #413d39;
  --suave: #8a827b;
  --borda: #ece5de;
  --erro: #b5726e;
  --sucesso: #7ba58c;
  --raio: 12px;
  --sombra: 0 1px 10px rgba(120,100,85,.07);
}

* { box-sizing: border-box; }

/* Sem isto, `.tela-login` (display:grid) continuaria na tela depois do login:
   o atributo `hidden` do HTML perde para qualquer regra de display do autor. */
[hidden] { display: none !important; }

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

h2 { font-size: 16px; margin: 26px 0 10px; }
h2 small { font-weight: 400; color: var(--suave); font-size: 13px; }
h3 { font-size: 16px; margin: 0 0 14px; }

/* ---- Login ---------------------------------------------------------------- */
.tela-login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.caixa-login {
  background: var(--branco); padding: 28px 24px;
  border-radius: var(--raio); box-shadow: var(--sombra);
  width: 100%; max-width: 340px;
}
.caixa-login h1 { font-size: 18px; margin: 0 0 20px; text-align: center; }

/* ---- Topo e abas ---------------------------------------------------------- */
.topo {
  background: var(--marca); color: #fff;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 10;
}
.topo strong { letter-spacing: .08em; text-transform: uppercase; font-size: 14px; }
.topo-nome { flex: 1; font-size: 13px; opacity: .85; }
.link { background: none; border: 0; color: #fff; font-size: 13px; cursor: pointer; text-decoration: underline; }

.abas {
  display: flex; gap: 2px; overflow-x: auto;
  background: var(--branco); border-bottom: 1px solid var(--borda);
  position: sticky; top: 48px; z-index: 9;
}
.aba {
  flex: 1; min-width: 78px;
  background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 13px 8px; font-size: 13px; font-family: inherit;
  color: var(--suave); cursor: pointer; white-space: nowrap;
}
.aba.ativa { color: var(--marca-escura); border-bottom-color: var(--marca); font-weight: 600; }

.conteudo { max-width: 720px; margin: 0 auto; padding: 16px 14px 60px; }

/* ---- Cartões de resumo ------------------------------------------------------ */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.cartao {
  background: var(--branco); border-radius: var(--raio);
  padding: 12px; text-align: center; box-shadow: var(--sombra);
}
.cartao b { display: block; font-size: 22px; color: var(--marca-escura); }
.cartao span { font-size: 11px; color: var(--suave); }
.cartao.alerta b { color: var(--acento); }

/* ---- Agendamento (linha) ----------------------------------------------------- */
.agendamento {
  background: var(--branco);
  border-radius: var(--raio);
  border-left: 4px solid var(--marca);
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: var(--sombra);
}
.agendamento.pendente { border-left-color: var(--acento); }
.agendamento.cancelado { border-left-color: #ccc; opacity: .65; }
.agendamento.falta { border-left-color: var(--erro); opacity: .8; }
.agendamento.concluido { border-left-color: var(--sucesso); }

.ag-topo { display: flex; align-items: baseline; gap: 8px; }
.ag-hora { font-size: 17px; font-weight: 700; color: var(--marca-escura); }
.ag-nome { flex: 1; font-weight: 600; }
.ag-detalhe { font-size: 13px; color: var(--suave); margin-top: 2px; }
.ag-obs {
  font-size: 13px; margin-top: 6px; padding: 6px 8px;
  background: var(--acento-claro); border-radius: 8px; color: #8a6552;
}

/* Etiquetas em tons lavados: precisam diferenciar de relance, não gritar.
   O texto é sempre bem mais escuro que o fundo para continuar legível. */
.etiqueta {
  display: inline-block; padding: 1px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
}
.etiqueta.pendente { background: var(--acento-claro); color: #9a6b52; }
.etiqueta.confirmado { background: var(--marca-clara); color: #4d7566; }
.etiqueta.concluido { background: #eceef3; color: #5b6478; }
.etiqueta.cancelado { background: #f3f0ec; color: #7d746c; }
.etiqueta.falta { background: #f7ebea; color: #9d605c; }
.etiqueta.site { background: #eef2f1; color: #62786f; }
.etiqueta.avisado { background: var(--marca-clara); color: #4d7566; }

.ag-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.acao {
  border: 1px solid var(--borda); background: var(--branco);
  border-radius: 8px; padding: 7px 11px;
  font-size: 13px; font-family: inherit; color: var(--texto);
  cursor: pointer; text-decoration: none; display: inline-block;
}
.acao:hover { border-color: var(--marca); }
.acao.principal { background: var(--marca); color: #fff; border-color: var(--marca); }
.acao.whats { background: #25d366; color: #fff; border-color: #25d366; }
.acao.perigo { color: var(--erro); }

/* ---- Formulários --------------------------------------------------------------- */
.campo { display: block; margin-bottom: 12px; flex: 1; }
.campo > span { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.campo em { font-weight: 400; font-style: normal; color: var(--suave); }
.linha { display: flex; gap: 10px; }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--borda); border-radius: 10px;
  padding: 11px 12px;
  font-size: 16px; /* menor que isto faz o iPhone dar zoom ao focar */
  font-family: inherit; background: var(--branco); color: var(--texto);
}
input[type="color"] { padding: 4px; height: 44px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marca); outline-offset: 1px; }

.checkbox { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 14px; }
.checkbox input { width: auto; }

.botao, .botao-secundario {
  width: 100%; border: 0; border-radius: 10px; padding: 13px;
  font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.botao { background: var(--marca); color: #fff; }
.botao:hover { background: var(--marca-escura); }
.botao:disabled { opacity: .6; cursor: default; }
.botao-secundario { background: var(--branco); color: var(--texto); border: 1px solid var(--borda); }
.botao-pequeno {
  background: var(--branco); border: 1px solid var(--borda); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; font-family: inherit; cursor: pointer;
}
.botao-icone {
  width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--branco);
  font-size: 18px; cursor: pointer;
}

.filtros { background: var(--branco); padding: 14px; border-radius: var(--raio); box-shadow: var(--sombra); margin-bottom: 14px; }

.navegador-dia { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.navegador-dia input[type="date"] { flex: 1; }
.info-dia { font-size: 13px; color: var(--suave); margin: 0 0 12px; text-transform: capitalize; }

.sugestoes { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.sugestao {
  border: 1px solid var(--borda); background: var(--branco);
  border-radius: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.sugestao:hover { border-color: var(--marca); }

/* ---- Configurações -------------------------------------------------------------- */
.item-config {
  background: var(--branco); border-radius: var(--raio);
  padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--sombra);
  display: flex; align-items: center; gap: 10px;
}
.item-config .info { flex: 1; min-width: 0; }
.item-config .info b { display: block; }
.item-config .info span { font-size: 13px; color: var(--suave); }
.marcador-cor { width: 10px; height: 34px; border-radius: 5px; flex: 0 0 10px; }

.logo-atual {
  border: 1px dashed var(--borda); border-radius: 10px;
  padding: 8px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--branco); color: var(--suave); font-size: 13px;
}
.logo-atual img { max-height: 40px; max-width: 100%; object-fit: contain; }

.dia-expediente {
  background: var(--branco); border-radius: var(--raio);
  padding: 10px 12px; margin-bottom: 6px; box-shadow: var(--sombra);
}
.dia-expediente .cabeca { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dia-expediente .cabeca b { flex: 1; font-size: 14px; }
.dia-expediente .horas { display: flex; gap: 8px; }
.dia-expediente .horas .campo { margin-bottom: 0; }
.dia-expediente.fechado .horas { opacity: .4; }

/* ---- Mensagens ------------------------------------------------------------------- */
.erro {
  background: #fbf1f0; border: 1px solid #f0dedd; color: var(--erro);
  border-radius: 10px; padding: 9px 12px; font-size: 14px; margin: 0 0 12px;
}
.painel-aviso {
  background: var(--acento-claro); border: 1px solid #f0dccf; color: #8a6552;
  border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px;
}
.carregando, .vazio { color: var(--suave); font-size: 14px; padding: 14px; text-align: center; }

.aviso-flutuante {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: var(--texto); color: #fff;
  padding: 11px 18px; border-radius: 24px; font-size: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2); z-index: 100; max-width: 90vw;
}

/* ---- Modal ------------------------------------------------------------------------ */
dialog {
  border: 0; border-radius: var(--raio); padding: 20px;
  width: min(420px, 92vw); box-shadow: 0 8px 40px rgba(0,0,0,.25);
}
dialog::backdrop { background: rgba(40,35,30,.45); }
.modal-acoes { display: flex; gap: 8px; margin-top: 6px; }

@media (min-width: 640px) {
  .conteudo { padding: 20px 20px 60px; }
}

/* ---- Acréscimos da versão multi-estúdio ------------------------------------- */

.sub-login { font-size: 13px; color: var(--suave); text-align: center; margin: -12px 0 18px; }

/* O link público é a coisa que a dona mais copia no dia a dia , mandar para
   cliente, colar na bio do Instagram. Fica destacado, não escondido. */
.caixa-endereco {
  background: var(--marca-clara); border-radius: var(--raio);
  padding: 12px 14px; margin-bottom: 16px; font-size: 13px;
}
.caixa-endereco span { display: block; color: var(--suave); margin-bottom: 3px; }
.caixa-endereco a { color: var(--marca-escura); font-weight: 600; word-break: break-all; }

.mascara-telefone { letter-spacing: .02em; }

/* =============================================================================
   REFINAMENTO VISUAL , padrão Horário VIP
   ========================================================================== */

:root {
  --ouro: #f5b83d;
  --sombra-suave: 0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.06);
}

body { letter-spacing: -.005em; }

/* Topo com a mesma assinatura dourada do site público: quem usa os dois
   reconhece que é o mesmo sistema. */
.topo {
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--marca) 92%, #fff 8%) 0%,
      var(--marca) 60%,
      color-mix(in srgb, var(--marca) 88%, #000 12%) 100%);
  border-bottom: 2px solid var(--ouro);
}

.cartao, .agendamento, .item-config, .filtros, .dia-expediente {
  box-shadow: var(--sombra-suave);
  border: 1px solid rgba(16,24,40,.05);
}

.cartao b { letter-spacing: -.02em; }
.ag-hora { letter-spacing: -.02em; }

.aba.ativa { border-bottom-width: 3px; }

.acao, .botao, .botao-secundario, .botao-pequeno {
  transition: transform .1s, box-shadow .18s, background .15s;
}
.acao:active, .botao:active, .botao-secundario:active { transform: translateY(1px); }

.botao { box-shadow: 0 5px 14px color-mix(in srgb, var(--marca) 30%, transparent); }

.aviso-flutuante {
  background: #101828;
  box-shadow: 0 8px 26px rgba(16,24,40,.28);
  border: 1px solid rgba(255,255,255,.08);
}

/* Login do salão: mesma construção do painel da plataforma, mas com a cor do
   salão no fundo. A dona vê a marca dela, não a nossa. */
.tela-login {
  min-height: 100dvh;
  background:
    radial-gradient(120% 90% at 50% -10%,
      color-mix(in srgb, var(--marca) 78%, #fff 22%) 0%,
      var(--marca) 55%,
      color-mix(in srgb, var(--marca) 72%, #000 28%) 100%);
}
.caixa-login {
  border-radius: 20px; padding: 32px 26px 28px;
  box-shadow: 0 20px 54px rgba(16,24,40,.30);
  animation: entrarPainel .3s ease-out both;
}
@keyframes entrarPainel {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.caixa-login h1 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.caixa-login input { padding: 14px 15px; border-radius: 12px; background: #fbfbfc; }
.caixa-login input:focus {
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 22%, transparent);
}

@media (prefers-reduced-motion: reduce) { .caixa-login { animation: none; } }

.rotulo-servicos { font-size: 12px; font-weight: 600; margin: 14px 0 8px; }
.lista-servicos { max-height: 190px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.lista-servicos .checkbox { margin-bottom: 8px; font-size: 14px; }

/* ---- Quanto entrou ----------------------------------------------------------- */

/* Duas colunas, e não as três do resumo do topo: aqui os valores são em reais,
   e "R$ 12.345,67" a 22px não cabe em 86px de área útil num celular de 375px.
   Com duas colunas sobram ~160px e o valor fica numa linha só. */
.cartoes-dinheiro { grid-template-columns: repeat(2, 1fr); }
.cartoes-dinheiro .cartao b { font-size: 19px; }

.periodos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pilula {
  border: 1px solid var(--borda); background: var(--branco); color: var(--suave);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer;
}
.pilula.ativa { background: var(--marca-clara); border-color: var(--marca); color: var(--marca-escura); font-weight: 600; }

.aviso-presos { margin: 12px 0; }

.fatura { display: grid; gap: 10px; margin-bottom: 18px; }
.linha-fatura {
  background: var(--branco); border-radius: var(--raio);
  padding: 12px 14px; box-shadow: var(--sombra);
}
.fatura-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fatura-nome { font-weight: 600; font-size: 14px; }
.fatura-topo b { font-size: 15px; color: var(--marca-escura); white-space: nowrap; }
.fatura-pe { display: block; font-size: 11px; color: var(--suave); margin-top: 6px; }

/* A barra é leitura de relance: qual serviço paga as contas. O fundo fica
   visível mesmo com 0%, senão a linha parece truncada. */
.barra { display: block; height: 5px; border-radius: 999px; background: #eceef3; margin-top: 8px; }
.barra > span { display: block; height: 100%; border-radius: 999px; background: var(--marca); }

/* ---- Selo de novidade -------------------------------------------------------- */

/* Número pequeno colado no link, e nada de modal ao entrar: quem abre o painel
   às 8h da manhã está atrás da agenda do dia, e qualquer coisa por cima dela é
   obstáculo. O selo espera. */
#linkNovidades { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.selo {
  display: inline-grid; place-items: center;
  min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 999px; background: var(--acento); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1; text-decoration: none;
}