/* ==========================================================================
   Painel — continua o css/app.css, só com o que é do painel.
   Também feito pro celular: o barbeiro olha a agenda com o telefone na mão,
   entre um cliente e outro.
   ========================================================================== */

.painel__corpo {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Seis abas agora — em vez de espremer num grid de 4 colunas fixas, a barra
   rola na horizontal (mesma ideia das .pastilhas) até virar barra lateral
   de desktop, lá embaixo. */
.painel .abas {
  display: flex;
  grid-template-columns: none;
  max-width: 560px;
  overflow-x: auto;
  scrollbar-width: none;
}

.painel .abas::-webkit-scrollbar { display: none; }

.painel .aba {
  flex: 1 0 66px;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Cartões do dashboard (Início, Financeiro)
   -------------------------------------------------------------------------- */

.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.cartao__rotulo {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--apaga);
}

.cartao__valor {
  display: block;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  margin-top: 5px;
}

.cartao__valor--ouro { color: var(--ouro-claro); }
.cartao__valor--verde { color: var(--verde); }
.cartao__valor--vermelho { color: var(--vermelho); }

.atalhos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

.atalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: var(--r-m);
  background: var(--carvao);
  border: 1px solid var(--linha);
  color: var(--texto);
  text-decoration: none;
  font-size: 12px;
  text-align: center;
}

.atalho svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--ouro);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Desktop: a lista de abas vira barra lateral fixa; o conteúdo ganha coluna
   larga com grade de cartões em mais colunas. Mesmo HTML — só o CSS muda.
   ========================================================================== */
@media (min-width: 960px) {
  .painel .abas {
    position: fixed;
    inset: 0 auto 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 220px;
    max-width: none;
    padding: 24px 12px;
    overflow-y: auto;
    background: var(--carvao);
    backdrop-filter: none;
    border-top: 0;
    border-right: 1px solid var(--linha);
    border-radius: 0;
  }

  .painel .aba {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--r-m);
    font-size: 14px;
  }

  .painel .aba svg { width: 20px; height: 20px; }
  .painel .aba--ativa { background: var(--ouro-fundo); }

  .cabeca,
  .painel__corpo {
    max-width: 1040px;
    margin-left: 220px;
  }

  .cabeca { padding: 36px 32px 14px; }
  .painel__corpo { padding: 0 32px 40px; }

  .grade-cartoes { grid-template-columns: repeat(4, 1fr); }
  .atalhos { grid-template-columns: repeat(5, 1fr); }
  .fichas { grid-template-columns: repeat(2, 1fr); }

  .rodape-espaco { display: none; }
}

/* --------------------------------------------------------------------------
   Entrada
   -------------------------------------------------------------------------- */

.entrada {
  max-width: 380px;
  margin: 0 auto;
  padding: 12dvh 24px 40px;
  text-align: center;
}

.entrada__logo { width: 96px; margin-bottom: 20px; }

.entrada h1 {
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.entrada__texto { color: var(--fraco); margin: 6px 0 28px; font-size: 14px; }

.entrada form { text-align: left; }

.entrada__volta { margin-top: 26px; font-size: 13.5px; }
.entrada__volta a { color: var(--fraco); }

.campo-senha { position: relative; }
.campo-senha input { padding-right: 46px !important; }

.campo-senha__olho {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--apaga);
}

.campo-senha__olho svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.campo-senha__olho--ativo { color: var(--ouro); }

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */

.cabeca {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 16px 14px;
}

.cabeca__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cabeca__titulo {
  font-size: 29px;
  text-transform: uppercase;
  font-weight: 700;
}

.cabeca__quem { text-decoration: none; }

.cabeca__papel {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--apaga);
}

/* --------------------------------------------------------------------------
   Recado depois de uma ação
   -------------------------------------------------------------------------- */

.recado {
  margin: 0 0 16px;
  padding: 12px 15px;
  border-radius: var(--r-p);
  font-size: 14px;
  border: 1px solid var(--linha);
  background: var(--carvao);
}

.recado--ok   { border-color: rgba(74,222,128,.3);  color: #86EFAC; background: rgba(74,222,128,.08); }
.recado--erro { border-color: rgba(248,113,113,.3); color: #FCA5A5; background: rgba(248,113,113,.08); }

/* --------------------------------------------------------------------------
   Navegação de dia
   -------------------------------------------------------------------------- */

.navdia {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 12px;
}

.navdia__seta {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--grafite);
  border: 1px solid var(--linha);
  color: var(--texto);
  flex-shrink: 0;
}

.navdia__seta svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.navdia__meio { flex: 1; text-align: center; line-height: 1.2; }

.navdia__meio strong {
  display: block;
  font-family: var(--display);
  font-size: 20px;
  text-transform: uppercase;
}

.navdia__meio span { font-size: 13px; color: var(--fraco); }

.navdia__hoje { margin: -6px 0 14px; text-align: center; font-size: 13px; }

/* --------------------------------------------------------------------------
   Pastilhas de filtro
   -------------------------------------------------------------------------- */

.pastilhas {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 14px;
  scrollbar-width: none;
}

.pastilhas::-webkit-scrollbar { display: none; }

.pastilha {
  flex: 0 0 auto;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  background: var(--carvao);
  color: var(--fraco);
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
}

.pastilha--ativa {
  border-color: var(--ouro);
  background: var(--ouro-fundo);
  color: var(--ouro-claro);
}

/* --------------------------------------------------------------------------
   Números do dia
   -------------------------------------------------------------------------- */

.numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.numero {
  padding: 13px 8px;
  border-radius: var(--r-m);
  background: var(--carvao);
  border: 1px solid var(--linha);
  text-align: center;
}

.numero b {
  display: block;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
}

.numero span {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--apaga);
}

.numero--ouro b { color: var(--ouro-claro); font-size: 18px; }

/* --------------------------------------------------------------------------
   Bloqueios do dia
   -------------------------------------------------------------------------- */

.folgas { margin-bottom: 14px; display: grid; gap: 8px; }

.folga {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--r-p);
  background: rgba(248,113,113,.07);
  border: 1px solid rgba(248,113,113,.22);
  font-size: 13.5px;
  color: #FCA5A5;
}

.folga strong { font-variant-numeric: tabular-nums; margin-right: 6px; }
.folga span { color: var(--apaga); margin-left: 6px; font-size: 12px; }

/* --------------------------------------------------------------------------
   Marcações
   -------------------------------------------------------------------------- */

.marcacoes { display: grid; gap: 10px; }

.marcacao {
  display: flex;
  gap: 14px;
  padding: 14px;
  border-radius: var(--r-g);
  background: var(--carvao);
  border: 1px solid var(--linha);
}

.marcacao--cancelado,
.marcacao--faltou { opacity: .5; }

.marcacao--atendido { border-color: rgba(74,222,128,.22); }
.marcacao--confirmado { border-color: rgba(212,175,106,.3); }

.marcacao__hora {
  text-align: center;
  flex-shrink: 0;
  width: 54px;
  padding-top: 2px;
  line-height: 1.15;
}

.marcacao__hora b {
  display: block;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  color: var(--ouro-claro);
  font-variant-numeric: tabular-nums;
}

.marcacao__hora span { font-size: 11px; color: var(--apaga); }

.marcacao__meio { flex: 1; min-width: 0; }

.marcacao__meio h3 {
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.marcacao__servico {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--fraco);
}

.marcacao__baixo {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--apaga);
}

.marcacao__nota {
  margin: 8px 0 0;
  padding: 8px 11px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  font-size: 13px;
  color: var(--fraco);
  font-style: italic;
}


/* Estado do lembrete automático de WhatsApp. Informativo e discreto: o
   barbeiro só precisa notar quando FALHA — o resto é ruído de fundo. */

/* ---------- Tela de Horários ---------- */

/* Uma linha por dia no horário da barbearia. Em telas estreitas o nome do dia
   ocupa a linha inteira e os campos descem, senão o time input encolhe demais
   pra ser tocável. */
.dia-horario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linha);
}

.dia-horario:last-of-type { border-bottom: 0; }

.dia-horario__nome {
  flex: 1 1 100%;
  font-family: var(--fonte-titulo, inherit);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fraco);
}

.dia-horario__fechado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--fraco);
  cursor: pointer;
}

.dia-horario__ate { font-size: 12.5px; color: var(--apaga); }

.dia-horario input[type="time"],
.faixa input[type="time"] {
  padding: 9px 10px;
  border: 1px solid var(--linha);
  border-radius: var(--r-p);
  background: var(--grafite);
  color: var(--texto);          /* sem isto o Chrome pinta o relógio de preto */
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.dia-horario input[type="time"]:focus,
.faixa input[type="time"]:focus {
  outline: none;
  border-color: var(--ouro);
}

@media (min-width: 560px) {
  .dia-horario__nome { flex: 0 0 110px; }
}

/* ---------- faixas de cada barbeiro ---------- */

.bloco--dia { padding-bottom: 12px; }

.bloco__titulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.bloco__vazio {
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--apaga);
}

.faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.faixa + .faixa { border-top: 1px solid var(--linha); }

.faixa__hora {
  flex: 1;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

.faixa__acao { margin-left: auto; }


/* A pausa não é uma linha no banco — é o buraco entre duas faixas. Aqui ela
   aparece recuada e apagada, pra ler como "vazio" e não como atendimento. */
.pausa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
  padding: 7px 0 7px 12px;
  border-left: 2px dashed var(--linha);
}

.pausa__hora {
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--apaga);
}

.pausa__nome {
  flex: 1;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--apaga);
}

.faixa__rotulo {
  flex: 0 0 58px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fraco);
}

.faixa--pausa {
  padding-top: 4px;
  border-top: 0;
}

.faixa--pausa .faixa__rotulo { color: var(--apaga); }

.faixa--nova {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--linha);
}

.marcacao__lembrete {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 8px 0 0;
  font-size: 11.5px;
  letter-spacing: .01em;
  color: var(--apaga);
}

.marcacao__lembrete::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.marcacao__lembrete--ok   { color: var(--verde); }
.marcacao__lembrete--erro { color: var(--vermelho); }

.marcacao__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
}

.marcacao__botoes { display: contents; }

.mini {
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid var(--linha);
  background: transparent;
  color: var(--fraco);
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
}

.mini--zap { color: var(--texto); font-variant-numeric: tabular-nums; }
.mini--ok  { border-color: rgba(74,222,128,.32);  color: #86EFAC; }
.mini--mau { border-color: rgba(248,113,113,.28); color: #FCA5A5; }

/* --------------------------------------------------------------------------
   Listas simples (clientes, serviços)
   -------------------------------------------------------------------------- */

.fichas { display: grid; gap: 10px; }

.ficha {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border-radius: var(--r-m);
  background: var(--carvao);
  border: 1px solid var(--linha);
  text-decoration: none;
  color: inherit;
}

.ficha__meio { flex: 1; min-width: 0; }

.ficha__meio h3 {
  font-size: 16.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.ficha__meio p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--fraco);
}

.ficha__lado {
  text-align: right;
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--apaga);
}

.ficha__lado b {
  display: block;
  font-family: var(--display);
  font-size: 16px;
  color: var(--ouro-claro);
}

/* Foto do serviço/adicional: o mesmo quadradinho que o cliente vê no site. */
.ficha__foto {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(150deg, var(--relevo), var(--grafite));
}

.ficha__foto--vazia { opacity: .45; }

/* Campo de foto nos formulários de Serviços e Adicionais */
.campo-foto__linha { display: flex; align-items: center; gap: 14px; }

.campo-foto__img {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  border: 1px solid var(--linha);
  object-fit: cover;
  flex-shrink: 0;
}

.campo-foto__img[hidden] { display: none; }

/* O input de arquivo fica invisível por cima do botão: o botão é o que se vê,
   o toque cai no input e abre a galeria/câmera do celular. */
.campo-foto__botao { position: relative; overflow: hidden; cursor: pointer; }
.campo-foto__botao:focus-within { border-color: var(--ouro); }
.campo-foto__botao input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.campo-foto__tirar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--texto);
}

.campo-foto__tirar input { width: auto; }

/* --------------------------------------------------------------------------
   Busca
   -------------------------------------------------------------------------- */

.busca { margin-bottom: 16px; }

.busca input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-m);
  border: 1px solid var(--linha);
  background: var(--carvao);
  color: var(--texto);
  font-size: 16px;
}

.busca input::placeholder { color: rgba(243, 241, 237, .62); }

.busca input:focus { outline: 0; border-color: var(--ouro); }

/* --------------------------------------------------------------------------
   Caixa
   -------------------------------------------------------------------------- */

.caixa-grande {
  padding: 22px;
  border-radius: var(--r-g);
  background: linear-gradient(155deg, rgba(212,175,106,.15), var(--carvao) 62%);
  border: 1px solid rgba(212,175,106,.3);
  text-align: center;
  margin-bottom: 14px;
}

.caixa-grande span {
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ouro);
}

.caixa-grande b {
  display: block;
  font-family: var(--display);
  font-size: 40px;
  font-weight: 600;
  margin-top: 6px;
}

.caixa-grande small {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--fraco);
}

/* --------------------------------------------------------------------------
   Aviso de senha provisória
   -------------------------------------------------------------------------- */

.alerta {
  margin: 0 0 16px;
  padding: 13px 15px;
  border-radius: var(--r-p);
  background: rgba(248,113,113,.1);
  border: 1px solid rgba(248,113,113,.3);
  color: #FCA5A5;
  font-size: 13.5px;
  line-height: 1.5;
}

.alerta a { color: #FCA5A5; }

/* --------------------------------------------------------------------------
   Sugestão de cliente no Encaixar (lista que abre embaixo do campo)
   -------------------------------------------------------------------------- */

.campo--sugere { position: relative; }

.sugestoes {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 30;
  margin-top: 4px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: var(--r-m);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}

.sugestoes__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--linha);
}

.sugestoes__item:last-child { border-bottom: 0; }

.sugestoes__item strong {
  font-weight: 600;
  color: var(--texto);
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
}

.sugestoes__item span {
  font-size: 13px;
  color: var(--fraco);
}

.sugestoes__item:hover,
.sugestoes__item--marcado { background: var(--ouro-fundo); }

/* --------------------------------------------------------------------------
   Agenda do dia em grade (mesmo formato do Ageenda): faixa com os dias do
   mês em cima, uma coluna por barbeiro, fundo rosado fora do expediente.
   -------------------------------------------------------------------------- */

.agenda-topo { margin-bottom: 14px; }

.agenda-topo__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.agenda-topo__titulo {
  font-size: 24px;
  text-transform: none;
  letter-spacing: .01em;
  color: var(--ouro-claro);
}

.agenda-topo__titulo small {
  display: block;
  font-family: var(--corpo);
  font-size: 13px;
  font-weight: 400;
  color: var(--fraco);
}

.agenda-topo__botoes { display: flex; gap: 6px; flex-wrap: wrap; }

.faixa-dias {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.faixa-dias::-webkit-scrollbar { display: none; }

.faixa-dias__dia {
  flex: 1 0 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 0 7px;
  border-radius: 8px;
  border-bottom: 3px solid transparent;
  background: var(--carvao);
  color: var(--texto);
  text-decoration: none;
  line-height: 1.1;
}

.faixa-dias__dia small { font-size: 9px; letter-spacing: .05em; color: var(--fraco); }
.faixa-dias__dia b { font-family: var(--display); font-size: 17px; font-weight: 500; }

.faixa-dias__dia--fds { background: rgba(212, 175, 106, .07); }
.faixa-dias__dia--fds small { color: var(--ouro); }
.faixa-dias__dia--tem { border-bottom-color: var(--verde); }
.faixa-dias__dia--hoje { box-shadow: inset 0 0 0 1px var(--ouro); }

.faixa-dias__dia--ativo { background: var(--ouro); color: #17120A; }
.faixa-dias__dia--ativo small { color: #17120A; }

/* grade */

.grade {
  border: 1px solid var(--linha);
  border-radius: var(--r-g);
  overflow: hidden;
  background: var(--carvao);
}

.grade__cabeca,
.grade__corpo {
  display: grid;
  grid-template-columns: 48px repeat(var(--colunas), minmax(0, 1fr));
}

.grade__cabeca { border-bottom: 1px solid var(--linha); }

.grade__canto { border-right: 1px solid var(--linha); }

.grade__barbeiro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 6px;
  font-size: 14px;
  font-weight: 600;
  border-right: 1px solid var(--linha);
  min-width: 0;
}

.grade__barbeiro:last-child { border-right: 0; }

.grade__barbeiro img,
.grade__barbeiro .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 14px;
  flex-shrink: 0;
}

.grade__corpo {
  position: relative;
  max-height: 72vh;
  overflow-y: auto;
}

.grade__horas {
  position: relative;
  height: var(--altura);
  border-right: 1px solid var(--linha);
}

.grade__horas span {
  position: absolute;
  right: 6px;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--fraco);
  font-variant-numeric: tabular-nums;
}

.grade__horas span:first-child { transform: none; }

/* Fundo da coluna = indisponível (rosado); o expediente fica por cima, escuro. */
.grade__coluna {
  position: relative;
  height: var(--altura);
  border-right: 1px solid var(--linha);
  background: rgba(248, 113, 113, .17);
  cursor: copy;
}

.grade__coluna:last-of-type { border-right: 0; }

/* Linhas de meia hora (forte) e de 15 minutos (fraca), por cima de tudo. */
.grade__coluna::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.09) 0 1px, transparent 1px calc(var(--hora) / 2)),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px calc(var(--hora) / 4));
}

.grade__livre {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--carvao);
}

.grade__bloqueio {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, rgba(248,113,113,.16) 0 8px, rgba(248,113,113,.07) 8px 16px);
  border-top: 2px solid rgba(248, 113, 113, .5);
  cursor: not-allowed;
}

.grade__bloqueio span {
  display: block;
  padding: 3px 6px;
  font-size: 11px;
  color: #FCA5A5;
}

.grade__ag {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 3px 6px;
  overflow: hidden;
  text-align: left;
  border: 0;
  border-left: 3px solid var(--ouro);
  border-radius: 6px;
  background: linear-gradient(160deg, rgba(239, 217, 163, .95), rgba(212, 175, 106, .95));
  color: #17120A;
  font-size: 12px;
  line-height: 1.25;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.grade__ag b { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.grade__ag span { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.grade__ag small { font-size: 11px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.grade__ag--confirmado { border-left-color: #17120A; }

.grade__ag--atendido {
  background: rgba(74, 222, 128, .2);
  border-left-color: var(--verde);
  color: var(--texto);
}

.grade__agora {
  position: absolute;
  left: 48px;
  right: 0;
  z-index: 3;
  height: 2px;
  background: var(--vermelho);
  pointer-events: none;
}

.grade__agora::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vermelho);
}

.grade__dica { margin: 8px 0 4px; font-size: 12px; color: var(--apaga); }

.grade-dialogo {
  width: min(520px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--linha);
  border-radius: var(--r-g);
  background: var(--preto);
  color: var(--texto);
}

.grade-dialogo::backdrop { background: rgba(0, 0, 0, .6); }
.grade-dialogo form[method="dialog"] { margin-top: 12px; }

/* --------------------------------------------------------------------------
   Notificações no celular (Minha conta)
   -------------------------------------------------------------------------- */

.notif {
  padding: 14px;
  border: 1px solid var(--linha);
  border-radius: var(--r-g);
  background: var(--carvao);
}

.notif__estado { margin: 0 0 12px; font-size: 14px; color: var(--fraco); }
.notif .botao + .botao { margin-top: 10px; }