/* Os componentes de seleção de serviço, grade de horários e o aviso de
   "carregando" saíram daqui para o app.css: a tela de marcar pelo balcão,
   dentro do painel, usa os mesmos — e o painel não carrega este arquivo. */

/* =====================================================
   Agendaki — tela publica de agendamento (/a/{token})

   Carrega DEPOIS do app.css e so nas telas publicas. O painel nao precisa
   destas regras, e a tela publica e a que mais importa em desempenho: ela
   abre no 4G, vinda de um link do WhatsApp, muitas vezes no primeiro contato
   da pessoa com o estabelecimento.

   Tudo aqui e pensado para o polegar: alvo minimo de 44px, nada de hover como
   unica pista de estado, e a acao principal sempre alcancavel sem rolar de
   volta ao topo.
   ===================================================== */

.pagina-agendar {
    background: var(--fundo);
    /* Espaco para a barra de envio fixa no rodape nao cobrir o ultimo campo. */
    padding-bottom: 6.5rem;
}

.agenda-conteudo {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

/* ===== Capa do estabelecimento ===== */

.agenda-capa {
    background: linear-gradient(135deg, var(--marca-escura), var(--marca));
    color: #fff;
    padding: 1.6rem 1rem 1.4rem;
    text-align: center;
}

.agenda-capa-interno {
    max-width: 560px;
    margin: 0 auto;
}

.agenda-logo {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    object-fit: cover;
    background: rgba(255, 255, 255, .2);
    margin-bottom: .6rem;
}

/* Sem logo: as iniciais do nome, no lugar de um quadrado cinza vazio. */
.agenda-inicial {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    margin: 0 auto .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .2);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .5px;
}

.agenda-capa h1 {
    font-size: 1.35rem;
    line-height: 1.25;
    margin-bottom: .25rem;
}

.agenda-capa .categoria,
.agenda-capa .endereco {
    font-size: .85rem;
    opacity: .9;
}

.agenda-capa-acoes {
    margin-top: .9rem;
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.agenda-capa-acoes a {
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: .4rem .9rem;
    font-size: .85rem;
    font-weight: 600;
}
.agenda-capa-acoes a:hover { text-decoration: none; background: rgba(255, 255, 255, .28); }

/* ===== Etapas ===== */

.etapa {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1rem;
    margin-top: 1rem;
}

.etapa-titulo {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .85rem;
}

.etapa-numero {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--marca-clara);
    color: var(--marca-escura);
    font-size: .78rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Etapa ainda nao liberada fica visivel mas apagada: esconder faria a tela
   pular de tamanho a cada escolha, e a pessoa perde a referencia de onde
   estava. */
.etapa[aria-disabled="true"] {
    opacity: .45;
    pointer-events: none;
}

/* ===== Datas ===== */

/* Rola na horizontal em vez de quebrar: um calendario de 60 dias em grade
   ocuparia a tela inteira e empurraria os horarios para fora do campo de
   visao. */
.datas-fita {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .4rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.datas-fita::-webkit-scrollbar { display: none; }

.data-chip {
    flex: 0 0 auto;
    min-width: 76px;
    scroll-snap-align: start;
    border: 1.5px solid var(--borda);
    border-radius: var(--raio);
    background: var(--branco);
    padding: .55rem .4rem;
    text-align: center;
    cursor: pointer;
    font: inherit;
    color: var(--texto);
}

.data-chip .dia { font-size: .74rem; color: var(--texto-suave); text-transform: capitalize; }
.data-chip .num { font-size: .95rem; font-weight: 700; margin-top: .1rem; }

.data-chip[aria-pressed="true"] {
    border-color: var(--marca-escura);
    background: var(--marca-escura);
    color: #fff;
}
.data-chip[aria-pressed="true"] .dia { color: rgba(255, 255, 255, .85); }

/* ===== Resumo e envio ===== */

.resumo {
    background: var(--marca-clara);
    border-radius: var(--raio);
    padding: .8rem;
    margin-bottom: 1rem;
    font-size: .9rem;
}

.resumo-linha {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .18rem 0;
}
.resumo-linha strong { color: var(--marca-escura); }

.resumo-total {
    border-top: 1px solid var(--marca);
    margin-top: .4rem;
    padding-top: .45rem;
    font-size: 1rem;
    font-weight: 700;
}

/* Barra fixa no rodape: em celular a pessoa termina de preencher com o
   polegar no fim da tela, e mandar ela rolar de volta ao topo para achar o
   botao e o jeito mais rapido de perder um agendamento. */
.barra-envio {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(8px);
    border-top: 1px solid var(--borda);
    padding: .75rem 1rem;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
    z-index: 20;
}

.barra-envio-interno {
    max-width: 560px;
    margin: 0 auto;
}


/* ===== Meus agendamentos ===== */

.agendamento-card {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-left: 4px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: .9rem;
    margin-bottom: .75rem;
}

/* A cor da borda esquerda e a leitura rapida da lista: a pessoa abre para
   saber se ja confirmaram, e a resposta precisa estar antes do texto. */
.agendamento-card.st-pendente   { border-left-color: var(--amarelo); }
.agendamento-card.st-confirmado { border-left-color: var(--marca-escura); }
.agendamento-card.st-cancelado  { border-left-color: var(--vermelho); opacity: .65; }
.agendamento-card.st-concluido  { border-left-color: var(--texto-suave); opacity: .8; }

.agendamento-quando {
    font-weight: 700;
    font-size: 1rem;
    text-transform: capitalize;
}

.agendamento-servico { font-size: .9rem; color: var(--texto-suave); margin-top: .1rem; }

.agendamento-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .7rem;
    flex-wrap: wrap;
}

.selo {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    padding: .18rem .55rem;
    border-radius: 999px;
    border: 1px solid transparent;
}
.selo.st-pendente      { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.selo.st-confirmado    { background: var(--marca-clara); color: #5b21b6; border-color: #ddd6fe; }
.selo.st-cancelado     { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.selo.st-concluido     { background: var(--fundo); color: var(--texto-suave); border-color: var(--borda); }
.selo.st-nao_compareceu{ background: #fee2e2; color: #991b1b; border-color: #fecaca; }

.publico-rodape-agendaki {
    text-align: center;
    color: var(--texto-suave);
    font-size: .8rem;
    padding: 1.5rem 1rem 0;
}
.publico-rodape-agendaki a { color: var(--marca-escura); font-weight: 600; }

/* ===== Telas estreitas ===== */

@media (max-width: 380px) {
    .agenda-capa h1 { font-size: 1.18rem; }
    .data-chip      { min-width: 68px; }
    /* Os ajustes de .servico-item e .horarios-grade foram junto com as regras
       deles para o app.css — o painel usa os mesmos componentes. */
}