/* ============================================================
   VIDAS — Auditório · Tela de pré-agendamento
   Usa os tokens de auditorio.css. Calendário no mesmo espírito do /servir:
   grade mensal, chips por turno, legenda embaixo — mas com as cores da VIDAS.
   ============================================================ */

.pagina-agenda { background: var(--claro); }

/* ---------- Topo ---------- */
.agenda-topo {
  background: linear-gradient(135deg, var(--azul) 0%, #123b5c 100%);
  padding: calc(var(--header-h) + 2rem) 0 2rem;
  color: #fff;
}
.agenda-topo h1 {
  font-size: clamp(1.5rem, 5vw, 2.4rem); font-weight: 900; line-height: 1.18;
  max-width: 20ch;
}
.agenda-topo-sub { color: rgba(255,255,255,.82); margin-top: .8rem; max-width: 52ch; font-size: 1rem; }

.passos {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.5rem; padding: 0;
}
.passo {
  display: flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  padding: .4rem .8rem; border-radius: 50px;
}
.passo span {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.16); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .72rem;
}
.passo.atual { color: #fff; border-color: var(--teal2); background: rgba(20,184,166,.16); }
.passo.atual span { background: var(--teal); }
.passo.feito { color: var(--teal2); }
.passo.feito span { background: var(--teal); }

/* ---------- Aviso permanente ---------- */
.aviso-analise {
  display: flex; gap: .7rem; align-items: flex-start;
  margin: 1.25rem auto 0; padding: .95rem 1.1rem;
  background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid var(--ouro);
  border-radius: var(--radius-sm); font-size: .92rem; color: #78350f; line-height: 1.55;
}
.aviso-analise strong { color: #7c2d12; }

/* ---------- Layout ---------- */
.agenda-main {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
  padding-top: 1.25rem; padding-bottom: 3rem;
  align-items: start;
}
@media (min-width: 980px) {
  .agenda-main { grid-template-columns: 1fr 360px; gap: 1.75rem; }
}

.bloco {
  background: #fff; border: 1px solid var(--linha); border-radius: var(--radius);
  padding: 1.25rem 1.1rem; margin-bottom: 1.25rem;
  box-shadow: var(--sombra);
}
@media (min-width: 760px) { .bloco { padding: 1.6rem 1.5rem; } }
.bloco-topo { margin-bottom: 1.1rem; }
.bloco-topo h2 { font-size: 1.15rem; font-weight: 800; color: var(--azul); }
.bloco-topo p { font-size: .92rem; color: var(--cinza); margin-top: .3rem; }

/* ---------- Calendário ---------- */
.cal-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: .8rem;
}
.cal-barra strong {
  font-size: 1rem; font-weight: 800; color: var(--azul);
  text-align: center; flex: 1;
}
.cal-nav {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--linha); background: #fff; color: var(--azul);
  font-size: 1.1rem; cursor: pointer; transition: var(--trans);
}
.cal-nav:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.cal-nav:disabled { opacity: .35; cursor: not-allowed; }

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-dow {
  text-align: center; font-size: .68rem; font-weight: 800; color: var(--cinza);
  text-transform: uppercase; letter-spacing: .04em; padding: 4px 0;
}
.cal-dow.fim { color: var(--ouro); }

.cal-cel {
  position: relative; min-height: 58px; padding: 4px 2px 5px;
  border: 1.5px solid var(--linha); border-radius: 10px; background: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; transition: border-color .2s, background .2s, transform .12s;
  font: inherit;
}
@media (min-width: 700px) { .cal-cel { min-height: 68px; } }
.cal-cel:hover:not(:disabled) { border-color: var(--teal); }
.cal-cel:active:not(:disabled) { transform: scale(.97); }
.cal-cel:focus-visible { outline: 3px solid rgba(13,148,136,.45); outline-offset: 2px; }
.cal-cel.vazio { border: 0; background: transparent; cursor: default; min-height: 0; }
.cal-cel:disabled { background: #f8fafc; color: #cbd5e1; cursor: not-allowed; border-style: dashed; }
.cal-cel.hoje { box-shadow: 0 0 0 2px rgba(13,148,136,.25) inset; }
.cal-cel.premium { background: #fffdf5; }
.cal-cel.tem-sel { border-color: var(--teal); background: #f0fdfa; box-shadow: 0 4px 14px rgba(13,148,136,.18); }
.cal-cel.ativo { border-color: var(--azul); box-shadow: 0 0 0 2px var(--azul) inset; }

.cal-num { font-size: .88rem; font-weight: 800; color: var(--azul); line-height: 1.1; }
.cal-cel:disabled .cal-num { color: #cbd5e1; }
.cal-pontos { display: flex; gap: 3px; }
.cal-ponto {
  width: 7px; height: 7px; border-radius: 2px; background: #cbd5e1;
}
.cal-ponto.livre { background: #a7f3d0; }
.cal-ponto.sel   { background: var(--teal); }
.cal-ponto.ocupado { background: #e2e8f0; }
.cal-selo {
  position: absolute; top: -5px; right: -3px;
  font-size: .58rem; font-weight: 900; color: #7c2d12;
  background: var(--ouro); border-radius: 50px; padding: 0 4px; line-height: 1.5;
}

.cal-legenda {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  justify-content: center; margin: 1rem 0 .4rem; padding: 0;
  font-size: .78rem; color: var(--cinza);
}
.cal-legenda li { display: inline-flex; align-items: center; gap: .35rem; }
.leg { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.leg-livre { background: #a7f3d0; }
.leg-sel { background: var(--teal); }
.leg-ocupado { background: #e2e8f0; }
.leg-caro { background: var(--ouro); }
.cal-nota { font-size: .8rem; color: var(--cinza); text-align: center; margin-top: .2rem; }

/* ---------- Painel do dia ---------- */
.painel-dia {
  margin-top: 1rem; border: 1.5px solid var(--teal); border-radius: var(--radius);
  background: #f0fdfa; padding: 1rem;
  animation: sobe .25s ease;
}
@keyframes sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.painel-dia-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.painel-dia-topo h3 { font-size: 1rem; font-weight: 800; color: var(--azul); }
.painel-dia-topo p { font-size: .82rem; color: var(--cinza); margin-top: .15rem; }
.painel-fechar {
  border: 0; background: #fff; border-radius: 50%; width: 32px; height: 32px; flex: none;
  cursor: pointer; color: var(--cinza); font-size: 1rem; line-height: 1;
}
.turno-ops { display: grid; gap: .55rem; }
@media (min-width: 620px) { .turno-ops { grid-template-columns: repeat(3, 1fr); } }
.turno-op {
  display: flex; align-items: center; gap: .7rem; text-align: left;
  border: 1.5px solid var(--linha); background: #fff; border-radius: 12px;
  padding: .75rem .85rem; cursor: pointer; transition: var(--trans);
  min-height: 62px; font: inherit;
}
.turno-op:hover:not(:disabled) { border-color: var(--teal); }
.turno-op:disabled { opacity: .5; cursor: not-allowed; background: #f8fafc; }
.turno-op.on { border-color: var(--teal); background: #ccfbf1; }
.turno-op-marca {
  width: 22px; height: 22px; flex: none; border-radius: 6px;
  border: 2px solid #cbd5e1; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 900; color: #fff;
}
.turno-op.on .turno-op-marca { background: var(--teal); border-color: var(--teal); }
.turno-op b { display: block; font-size: .92rem; color: var(--azul); }
.turno-op small { display: block; font-size: .76rem; color: var(--cinza); }
.painel-aviso { margin-top: .7rem; font-size: .8rem; color: #92400e; }

/* O atributo hidden precisa vencer qualquer display: flex/grid abaixo. */
[hidden] { display: none !important; }

/* ---------- Extras ---------- */
.extras-lista { display: grid; gap: .6rem; }
.extra-op {
  border: 1.5px solid var(--linha); border-radius: 12px; background: #fff;
  padding: .8rem .9rem; transition: var(--trans);
}
.extra-op.on { border-color: var(--teal); background: #f0fdfa; }
.extra-cab { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; }
.extra-cab input { width: 20px; height: 20px; margin-top: .15rem; flex: none; accent-color: var(--teal); }
.extra-nome { font-weight: 700; color: var(--azul); font-size: .95rem; }
.extra-preco { font-size: .82rem; color: var(--teal-txt); font-weight: 700; }
.extra-desc { font-size: .85rem; color: var(--cinza); margin-top: .45rem; line-height: 1.55; }
.extra-qtd { margin-top: .6rem; display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.extra-qtd input { width: 90px; border: 1.5px solid var(--linha); border-radius: 8px; padding: .4rem .5rem; font-size: 16px; }

/* ---------- Menu expansível do que está incluso ---------- */
.incluso-menu {
  margin-top: 1.1rem; border: 1.5px solid var(--teal); border-radius: 12px;
  background: #f0fdfa; overflow: hidden;
}
.incluso-menu > summary {
  cursor: pointer; list-style: none; padding: .9rem 1rem;
  font-weight: 800; color: var(--azul); font-size: .95rem;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
}
.incluso-menu > summary::-webkit-details-marker { display: none; }
.incluso-menu > summary::after { content: '＋'; color: var(--teal); font-weight: 900; }
.incluso-menu[open] > summary::after { content: '－'; }
.incluso-corpo { padding: 0 1rem 1rem; }
.incluso-item-menu { border-top: 1px solid #ccfbf1; }
.incluso-item-menu > summary {
  cursor: pointer; list-style: none; padding: .65rem 0;
  font-size: .92rem; font-weight: 600; color: #134e4a;
  display: flex; align-items: center; gap: .5rem;
}
.incluso-item-menu > summary::-webkit-details-marker { display: none; }
.incluso-item-menu > summary::after { content: '›'; margin-left: auto; color: var(--teal); font-size: 1.1rem; }
.incluso-item-menu[open] > summary::after { transform: rotate(90deg); }
.incluso-item-menu p { font-size: .87rem; color: #475569; padding: 0 0 .7rem 1.9rem; line-height: 1.6; }
.incluso-item-menu .ic { font-size: 1.05rem; }
.incluso-rodape { font-size: .82rem; color: var(--cinza); padding-top: .8rem; border-top: 1px solid #ccfbf1; margin-top: .4rem; }

/* ---------- Formulários ---------- */
.campos { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .campos { grid-template-columns: 1fr 1fr; } .campo-largo { grid-column: 1 / -1; } }
.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo > span { font-size: .84rem; font-weight: 700; color: var(--azul); }
.campo > span i { font-weight: 500; font-style: normal; color: var(--cinza); }
.campo input, .campo select, .campo textarea {
  border: 1.5px solid var(--linha); border-radius: 12px; padding: .75rem .85rem;
  font-size: 16px; min-height: 50px; background: #fff; transition: var(--trans); width: 100%;
}
.campo textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(13,148,136,.14);
}
.campo input.erro { border-color: #e11d48; }

.mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent {
  display: flex; gap: .6rem; align-items: flex-start;
  margin-top: 1rem; font-size: .86rem; color: var(--cinza); line-height: 1.55;
}
.consent input { width: 20px; height: 20px; flex: none; margin-top: .1rem; accent-color: var(--teal); }

.form-erro { display: none; margin: .9rem 0 0; color: #be123c; font-weight: 600; font-size: .9rem; }
.form-erro.show { display: block; }
.sob-botao { text-align: center; font-size: .82rem; color: var(--cinza); margin-top: .6rem; }

/* ---------- Resumo ---------- */
.resumo { position: sticky; top: calc(var(--header-h) + 12px); }
.resumo-card {
  background: #fff; border: 1px solid var(--linha); border-radius: var(--radius);
  padding: 1.2rem 1.1rem; box-shadow: 0 14px 40px rgba(10,37,64,.10);
}
.resumo-card h2 { font-size: 1.05rem; font-weight: 800; color: var(--azul); margin-bottom: .8rem; }
.resumo-vazio p { font-size: .9rem; color: var(--cinza); }
.resumo-dias, .resumo-extras { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .55rem; }
.resumo-dias li, .resumo-extras li {
  display: flex; justify-content: space-between; gap: .7rem;
  font-size: .87rem; padding-bottom: .55rem; border-bottom: 1px dashed var(--linha);
}
.resumo-dias b { display: block; color: var(--azul); font-size: .9rem; }
.resumo-dias small { color: var(--cinza); font-size: .78rem; }
.resumo-dias .val, .resumo-extras .val { font-weight: 800; color: var(--azul); white-space: nowrap; }
.resumo-dias .tag-fator {
  display: inline-block; background: #fef3c7; color: #92400e; font-size: .68rem;
  font-weight: 800; padding: 0 .35rem; border-radius: 4px; margin-left: .3rem;
}
.resumo-dias .tag-pacote {
  display: inline-block; background: #ccfbf1; color: #115e59; font-size: .68rem;
  font-weight: 800; padding: 0 .35rem; border-radius: 4px; margin-left: .3rem;
}
.resumo-linha { display: flex; justify-content: space-between; font-size: .88rem; color: var(--cinza); padding: .2rem 0; }
.resumo-linha strong { color: var(--azul); }
.resumo-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: .6rem; padding-top: .8rem; border-top: 2px solid var(--linha);
}
.resumo-total span { font-size: .88rem; font-weight: 700; color: var(--azul); }
.resumo-total strong { font-size: 1.5rem; font-weight: 900; color: var(--teal-txt); }
.resumo-obs { font-size: .76rem; color: var(--cinza); margin: .7rem 0 1rem; line-height: 1.5; }
.resumo-remover {
  border: 0; background: none; color: #be123c; font-size: .74rem; font-weight: 700;
  cursor: pointer; padding: 0; margin-top: .2rem;
}

/* ---------- Sucesso ---------- */
.bloco.sucesso { border-color: var(--teal); }
.sucesso-selo {
  width: 54px; height: 54px; border-radius: 50%; margin-bottom: .8rem;
  background: linear-gradient(135deg, var(--teal), var(--teal2)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 900;
}
.bloco.sucesso h2 { font-size: 1.3rem; font-weight: 900; color: var(--azul); }
.bloco.sucesso h3 { font-size: 1.05rem; font-weight: 800; color: var(--azul); margin-bottom: .3rem; }
.bloco.sucesso p { font-size: .93rem; color: #334155; margin-top: .5rem; line-height: 1.6; }
.bloco.sucesso p.muted { color: var(--cinza); font-size: .88rem; }
.protocolo { font-size: 1rem !important; }
.protocolo strong { font-size: 1.25rem; color: var(--teal); letter-spacing: .04em; }
.sucesso-acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.sucesso-acoes .btn { flex: 1 1 200px; }
.divisor { border: 0; border-top: 1px solid var(--linha); margin: 1.6rem 0 1.1rem; }

/* ---------- Barra fixa do celular ---------- */
.barra-valor {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  display: none; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(10,37,64,.98); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.barra-valor span { display: block; font-size: .72rem; color: rgba(255,255,255,.65); }
.barra-valor strong { display: block; font-size: 1.15rem; font-weight: 900; color: #fff; line-height: 1.2; }
.barra-valor .btn { min-height: 46px; padding: .6rem 1.4rem; }

@media (max-width: 979px) {
  .resumo { position: static; }
  .barra-valor.on { display: flex; }
  .pagina-agenda { padding-bottom: 80px; }
}