/* Sunday in Lisbon: the booking flow and «a minha reserva» (owner: reservas-front). Loaded after tokens.css
   and site.css; every value is a token from those files, none is redefined. The markup comes from
   site/src/_partes/reserva.mjs.

   Composition: one question per screen on cream (forms only on cream, brand-brief). Above it, the page title
   and the spine of the steps on the menu's navy rule. Options share one vocabulary: navy 1 px rule, radius
   4 px, navy fill when picked; the party size is picked from circles, the brand's other shape (seals, the
   plate). Groups (the month, each service) are titled like the menu's boxes, in capitals with the rule
   running on. The summary and the booking sit in the menu's rule box with the seal on its corner. Flat: no
   shadow, no gradient. The motion of the step swap lives at the end of the file; reservar.js only adds the
   classes. */

/* ---------- the top: title and spine ---------- */

.reserva__topo { display: grid; gap: var(--space-m); padding-top: var(--space-l); }
.reserva__titulo {
  font-family: var(--font-display); font-weight: var(--weight-display); font-feature-settings: var(--font-feature-display);
  font-size: var(--step-3); line-height: var(--leading-display); letter-spacing: var(--tracking-display);
}
@media (min-width: 64em) {
  .reserva__topo { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--space-l); align-items: end; padding-top: var(--space-xl); }
  .reserva__titulo { padding-bottom: var(--space-s); }
}

/* The spine: what you answered, where you are, the way back. Columns sized by their words, so five steps
   and «Esplanada» fit at 320 px; the step you are on carries the bar, like a tab. */
.espinha {
  display: grid; grid-template-columns: repeat(var(--n, 5), auto); justify-content: space-between; column-gap: var(--space-2xs);
  list-style: none; border-bottom: var(--rule) solid var(--color-rule);
}
.elo { position: relative; display: grid; min-width: 0; }
.elo > a, .elo__caixa {
  position: relative; display: grid; justify-items: start; row-gap: 6px;
  min-height: var(--tap); padding: var(--space-2xs) 0 var(--space-s);
  color: var(--color-text); text-decoration: none;
}
.elo > a::after, .elo__caixa::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--color-text); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-micro) var(--ease-out);
}
.elo--agora .elo__caixa::after { transform: scaleX(1); }
.elo__n {
  display: grid; place-items: center; width: 28px; height: 28px;
  border: var(--rule) solid var(--navy-muted); border-radius: var(--radius-round);
  font: var(--weight-label) .875rem / 1 var(--font-text); font-variant-numeric: var(--numeric); color: var(--navy-muted);
}
.elo__n .ico { width: 16px; height: 16px; min-width: 0; min-height: 0; }
.elo--feito .elo__n { background: var(--navy); border-color: var(--navy); color: var(--white); }
.elo--agora .elo__n { border: var(--rule-strong) solid var(--navy); color: var(--navy); background: var(--white); }
.elo__t { font: var(--weight-label) .8125rem / 1.15 var(--font-text); color: var(--navy-muted); }
.elo--agora .elo__t, .elo--feito .elo__t { color: var(--navy); }
.elo__v { min-height: 1.2em; font-size: .8125rem; line-height: 1.2; font-variant-numeric: var(--numeric); }
.elo__v:empty { display: none; }
.elo__v-longo { display: none; }
@media (min-width: 48em) {
  .espinha { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); column-gap: var(--space-s); }
  .elo > a, .elo__caixa {
    grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n t" "n v";
    column-gap: var(--space-xs); row-gap: 2px; align-items: center; padding: var(--space-xs) 0 var(--space-s);
  }
  .elo__n { grid-area: n; width: 34px; height: 34px; font-size: .9375rem; }
  .elo__t { grid-area: t; font-size: var(--step--1); }
  .elo__v { grid-area: v; font-size: var(--step--1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .elo__v:empty { display: block; }
  .elo__v-longo { display: inline; }
  .elo__v-curto { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .elo > a:hover::after { transform: scaleX(1); background: var(--navy-muted); }
}

/* ---------- the stage: one question ---------- */

.reserva__palco { padding-block: var(--space-xl) var(--space-2xl); }
.reserva__palco > * + * { margin-top: var(--space-l); }
.reserva__palco > .pergunta + .pergunta__sub { margin-top: var(--space-s); }
.reserva__palco > .aviso + * { margin-top: var(--space-m); }
@media (min-width: 64em) { .reserva__palco { padding-block: var(--space-2xl) var(--space-3xl); } }

.pergunta {
  max-width: 16ch;
  font-family: var(--font-display); font-weight: var(--weight-display); font-feature-settings: var(--font-feature-display);
  font-size: var(--step-4); line-height: var(--leading-display); letter-spacing: var(--tracking-display);
  outline-offset: 6px; scroll-margin-top: var(--space-m);
}
.pergunta:focus:not(:focus-visible) { outline: none; }
.pergunta__sub { max-width: 44ch; font-size: var(--step-1); line-height: 1.45; }

.nota-palco {
  display: flex; gap: var(--space-2xs); align-items: flex-start; max-width: 60ch;
  font-size: var(--step--1); line-height: var(--leading-ui); color: var(--color-text-muted);
}
.nota-palco .ico { margin-top: -.05em; color: var(--navy); }
.nota-palco a, .aviso a { color: var(--navy); font-weight: var(--weight-label); }
.nota-palco a { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: calc((1.3em - var(--tap)) / 2); }

/* A group's title, as the titles of the menu's boxes: capitals, then the navy rule running to the edge. */
.grupo__titulo {
  display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--space-s); row-gap: 2px;
  margin-bottom: var(--space-s);
  font: var(--weight-strong) var(--step--1) / 1.2 var(--font-text); letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.grupo__titulo::after { content: ""; flex: 1 0 var(--space-xl); align-self: center; height: var(--rule); background: var(--color-rule); }
.grupo__intervalo { font-weight: var(--weight-text); letter-spacing: 0; text-transform: none; color: var(--color-text-muted); }

/* ---------- options: one vocabulary for people, days, times and zones ---------- */

.opc {
  position: relative; display: grid; place-items: center; min-width: 0;
  color: var(--navy); background: transparent; text-decoration: none;
  border: var(--rule) solid var(--navy); border-radius: var(--radius);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
a.opc:not(.is-off):active { transform: scale(.97); }
.opc.is-posta, .opc[aria-pressed="true"], .opc.is-tocada { background: var(--navy); border-color: var(--navy); color: var(--white); }
.opc.is-tocada { transition: none; }
.opc.is-off { cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  a.opc:not(.is-off):not(.is-posta):not([aria-pressed="true"]):not(.is-tocada):hover { background: var(--cream-deep); }
}

/* 1: how many people. Circles, like the seals; the figures in Figtree Light, like the prices. */
.pessoas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-s); max-width: 24rem; list-style: none; }
.opc--pessoas {
  aspect-ratio: 1; border-radius: var(--radius-round);
  font: var(--weight-text-light) clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem) / 1 var(--font-text); font-variant-numeric: var(--numeric);
}
@media (min-width: 48em) {
  .pessoas { grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 46rem; }
}

/* 2: the month. Seven columns from Monday, six weeks from this one; no boxes, the picked day in navy. */
.calendario { max-width: 42rem; }
.calendario__mes { margin-bottom: var(--space-2xs); }
.calendario__semana, .calendario__grelha { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendario__semana abbr {
  padding-block: var(--space-2xs); text-align: center; text-decoration: none;
  font-size: .8125rem; font-weight: var(--weight-label); color: var(--color-text-muted);
}
.calendario__grelha { list-style: none; row-gap: 2px; }
.calendario__grelha > li { min-width: 0; display: flex; }
.dia {
  flex: 1; display: grid; grid-template-rows: 14px auto minmax(1.15em, auto); align-content: center; justify-items: center; row-gap: 3px;
  min-height: 64px; padding: 6px 1px; border-color: transparent; text-align: center;
}
.dia:focus-visible { z-index: 1; outline-offset: 1px; }
.dia__marca { font-size: .6875rem; line-height: 14px; font-weight: var(--weight-strong); }
.dia__n { font: var(--weight-ui) 1.25rem / 1 var(--font-text); font-variant-numeric: var(--numeric); }
.dia__p { font-size: .6875rem; line-height: 1.1; font-weight: var(--weight-label); text-wrap: balance; }
.dia.is-hoje { border-color: var(--navy); }
.dia.is-almost .dia__p, .dia.is-filling .dia__p { color: var(--navy); }
.dia.is-off { background: var(--cream-deep); border-color: var(--cream-deep); color: var(--navy-muted); }
.dia.is-hoje.is-off { border-color: var(--navy-muted); }
.calendario__grelha > .is-fora { display: grid; place-items: center; min-height: 64px; }
.is-fora .dia__n { font: var(--weight-text) 1.25rem / 1 var(--font-text); font-variant-numeric: var(--numeric); color: var(--rule-soft); }
.calendario__grelha > .calendario__linha-nota {
  grid-column: 1 / -1; display: block; margin-block: 2px var(--space-2xs); padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius); background: var(--navy); color: var(--white);
  font-size: var(--step--1); font-weight: var(--weight-label); line-height: var(--leading-ui);
}
.calendario__nota { min-height: 1.3em; margin-top: var(--space-xs); font-weight: var(--weight-label); line-height: var(--leading-ui); max-width: 60ch; }
.calendario__nota:empty { min-height: 0; margin: 0; }
@media (max-width: 29.99em) {
  /* edge to edge on a phone, so seven columns keep 44 px at 320 */
  .calendario__semana, .calendario__grelha { margin-inline: calc(-1 * var(--space-gutter) + 4px); }
}
@media (min-width: 30em) { .calendario__grelha { gap: 4px; } }
@media (min-width: 48em) {
  .dia, .calendario__grelha > .is-fora { min-height: 78px; }
  .dia__n, .is-fora .dia__n { font-size: 1.5rem; }
  .dia__marca, .dia__p { font-size: .75rem; }
}

/* «Outra data» */
.outra-data { max-width: 30rem; }
.outra-data .controlo { max-width: none; }
.outra-data__linha { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.outra-data__linha .controlo__campo { flex: 1 1 11rem; width: auto; min-width: 0; }
input[type="date"].controlo__campo { -webkit-appearance: none; appearance: none; }

/* 3: the times, grouped by service */
.servicos { max-width: 52rem; }
.servico + .servico { margin-top: var(--space-xl); }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: var(--space-2xs); list-style: none; }
.horas > li { display: flex; }
.hora { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: var(--space-2xs) 4px; text-align: center; }
.hora__t { font-weight: var(--weight-label); line-height: 1.1; font-variant-numeric: var(--numeric); }
.hora__p { font-size: .75rem; line-height: 1.1; font-weight: var(--weight-label); text-wrap: balance; }
.hora.is-esgotado { background: var(--cream-deep); border-color: var(--cream-deep); color: var(--navy-muted); }
.hora.is-esgotado .hora__t { font-weight: var(--weight-text); text-decoration: line-through; text-decoration-thickness: var(--rule); }
@media (min-width: 48em) { .horas { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); } }
.servico__fechado { display: flex; gap: var(--space-2xs); align-items: flex-start; color: var(--color-text-muted); font-weight: var(--weight-label); }

/* no time on the day: the nearest days that have one */
.alternativas__titulo { font-weight: var(--weight-label); }
.reserva__palco > .alternativas { margin-top: var(--space-s); }
.alternativas, .zonas { display: grid; gap: var(--space-2xs); max-width: 32rem; list-style: none; }
.alternativa {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-s);
  min-height: 56px; padding: var(--space-xs) var(--space-m); font-weight: var(--weight-label); text-align: left;
}

/* 4: the zone, as rows: the name, and under it what it is or why it cannot be picked */
.zona {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome ico" "sub ico";
  justify-items: start; align-items: center; column-gap: var(--space-s); row-gap: 2px;
  min-height: 68px; padding: var(--space-xs) var(--space-m); text-align: left;
}
.zona__nome { grid-area: nome; font: var(--weight-label) var(--step-1) / 1.2 var(--font-text); }
.zona__sub { grid-area: sub; font-size: var(--step--1); line-height: var(--leading-ui); color: var(--color-text-muted); }
.zona > .ico { grid-area: ico; }
.zona.is-posta .zona__sub, .zona[aria-pressed="true"] .zona__sub, .zona.is-tocada .zona__sub { color: var(--mist); }
.zona.is-off { background: var(--cream-deep); border-color: var(--cream-deep); color: var(--navy-muted); }
.zona.is-off .zona__sub { color: var(--navy-muted); font-weight: var(--weight-label); }

/* ---------- notices ---------- */

.aviso {
  display: flex; gap: var(--space-xs); align-items: flex-start; max-width: 42rem;
  padding: var(--space-s) var(--space-m); border: var(--rule) solid var(--navy); border-radius: var(--radius);
  outline-offset: 4px;
}
.aviso > .ico { margin-top: .1em; color: var(--navy); }
.aviso p { line-height: var(--leading-ui); }
.aviso--erro { border: var(--rule-strong) solid var(--color-error); }
.aviso--erro > .ico { color: var(--color-error); }
.aviso__acao { margin-top: var(--space-s); }
.aviso:focus:not(:focus-visible) { outline: none; }

/* ---------- 5: the details, the summary and the button ---------- */

/* a block on a phone, so the button pinned to the bottom stays pinned through the whole form */
.dados > * + * { margin-top: var(--space-xl); }
.dados > .dados__enviar { margin-top: var(--space-m); }
.dados > .dados__campos { margin-top: 0; }
.dados__mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dados__campos > * + * { margin-top: var(--space-m); }
.dados__campos .controlo, .dados__fim .controlo { max-width: 32rem; }
.controlo__opcional { font-weight: var(--weight-text); color: var(--color-text-muted); }
.controlo__tel { display: flex; }
.controlo__prefixo {
  display: grid; place-items: center; flex: none; padding-inline: var(--space-xs);
  border-radius: var(--radius) 0 0 var(--radius); background: var(--navy); color: var(--white); font-weight: var(--weight-label);
}
.controlo__tel .controlo__campo { border-radius: 0 var(--radius) var(--radius) 0; }
.controlo__tel.is-internacional .controlo__prefixo { display: none; }
.controlo__tel.is-internacional .controlo__campo { border-radius: var(--radius); }
.controlo__campo::placeholder { color: var(--navy-muted); }
.controlo__contador { white-space: nowrap; }
.controlo__erro[hidden], .controlo__contador[hidden] { display: none; }
.controlo__erro { font-weight: var(--weight-label); }
.controlo--check { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-xs); align-items: start; }
.controlo--check input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--navy); }
.controlo--check label { line-height: var(--leading-ui); }
.controlo--check .controlo__erro { grid-column: 1 / -1; }
.controlo--check input[aria-invalid="true"] { outline: var(--rule-strong) solid var(--color-error); outline-offset: 2px; }
.dados__privacidade { margin-top: var(--space-2xs); padding-left: calc(24px + var(--space-xs)); font-size: var(--step--1); }
.dados__privacidade a { display: inline-flex; align-items: center; min-height: var(--tap); }

.resumo-erros {
  max-width: 32rem; padding: var(--space-s) var(--space-m);
  border: var(--rule-strong) solid var(--color-error); border-radius: var(--radius); outline-offset: 4px;
}
.resumo-erros:focus:not(:focus-visible) { outline: none; }
.resumo-erros__titulo { display: flex; gap: var(--space-2xs); align-items: center; font-weight: var(--weight-strong); color: var(--color-error); }
.resumo-erros ul { display: grid; gap: 2px; margin-top: var(--space-2xs); list-style: none; }
.resumo-erros a { display: inline-flex; align-items: center; min-height: 36px; color: var(--navy); font-weight: var(--weight-label); }
.resumo-erros li:not(:has(a)) { padding-block: var(--space-2xs); }

/* The summary in the menu's rule box: the title cuts the rule, the seal sits on the corner. The house rules
   come in the same box, before the consent and the button. */
.resumo { max-width: 32rem; }
.resumo__lista { margin: 0; }
.resumo__linha {
  display: grid; grid-template-columns: 5.25rem minmax(0, 1fr) auto; column-gap: var(--space-s); align-items: baseline;
  padding-block: var(--space-2xs); border-bottom: var(--rule) solid var(--color-rule-soft);
}
.resumo__linha dt { font-size: var(--step--1); font-weight: var(--weight-label); color: var(--color-text-muted); }
.resumo__linha dd { margin: 0; }
.resumo__linha dd:not(.resumo__mudar) { font-weight: var(--weight-ui); }
.resumo__mudar a { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: calc((1.58em - var(--tap)) / 2); font-size: var(--step--1); font-weight: var(--weight-label); }
.regras__titulo { margin-top: var(--space-m); font: var(--weight-strong) var(--step--1) / var(--leading-ui) var(--font-text); }
.regras__lista { display: grid; gap: var(--space-2xs); margin-top: var(--space-2xs); list-style: none; font-size: var(--step--1); line-height: var(--leading-ui); }
.regras__lista li { position: relative; }
.regras__lista li { padding-left: var(--space-s); }
.regras__lista li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 5px; height: 5px; border-radius: var(--radius-round); background: var(--color-text); }
.regras__demo { display: flex; gap: var(--space-2xs); align-items: flex-start; margin-top: var(--space-s); font-size: var(--step--1); line-height: var(--leading-ui); font-weight: var(--weight-label); }

/* The one button of the flow says what it does, in a sentence (no capitals: «10h30» keeps its h). On a phone
   it stays at the bottom of the screen; the page has no bottom bar (data-sem-barra). */
.dados__enviar {
  position: sticky; bottom: 0; z-index: 2;
  margin: var(--space-m) calc(-1 * var(--space-gutter)) 0;
  padding: var(--space-xs) var(--space-gutter) calc(var(--space-xs) + env(safe-area-inset-bottom, 0px));
  background: var(--cream); border-top: var(--rule) solid var(--color-rule-soft);
}
.dados__botao {
  width: 100%; justify-content: space-between; gap: var(--space-s);
  min-height: 56px; padding-block: var(--space-xs); white-space: normal; text-align: left;
  font-size: var(--step-0); line-height: 1.25; letter-spacing: 0; text-transform: none;
}
.dados__botao .ico { flex: none; }
.dados__botao[aria-busy="true"] { cursor: progress; }
.dados__botao:disabled { background: var(--navy); border-color: var(--navy); color: var(--white); opacity: .8; }
@media (max-width: 47.99em) {
  /* a field that takes focus is never left under the button pinned to the bottom */
  html:has(.dados__enviar) { scroll-padding-bottom: 112px; }
}
@media (min-width: 48em) {
  .dados__enviar { position: static; margin: var(--space-l) 0 0; padding: 0; background: none; border: 0; }
  .dados__botao { width: auto; max-width: 100%; padding-inline: var(--space-m); }
}
/* From 1024 px the summary stands beside the fields, in view while the details are typed. */
@media (min-width: 64em) {
  .dados { display: grid; grid-template-columns: minmax(0, 32rem) minmax(0, 27rem); grid-template-areas: "campos resumo" "fim resumo" "enviar resumo"; grid-template-rows: auto auto 1fr; column-gap: var(--space-3xl); align-items: start; }
  .dados > * + * { margin-top: 0; }
  .dados__campos { grid-area: campos; }
  .dados__fim { grid-area: fim; margin-top: var(--space-l); }
  .dados > .dados__enviar { grid-area: enviar; }
  .dados > .resumo { grid-area: resumo; position: sticky; top: var(--space-l); margin-top: calc(var(--step-1) / 2); }
}

/* ---------- «a minha reserva» ---------- */

.ficha__topo { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; padding-block: var(--space-xl) var(--space-l); }
.ficha__topo > * { grid-column: 1; }
.ficha__lead { margin-top: var(--space-m); max-width: 32em; }
.ficha__ate { margin-top: var(--space-xs); font: var(--weight-label) var(--step-2) / var(--leading-heading) var(--font-text); }
.ficha__topo--selo { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-s); }
.ficha__topo--selo > :not(.ficha__selo):not(.ficha__titulo) { grid-column: 1 / -1; }
.ficha__selo { --selo-anel: 104px; grid-column: 2; grid-row: 1; align-self: start; }
@media (max-width: 22.49em) { .ficha__selo { display: none; } .ficha__topo--selo { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 48em) {
  .ficha__topo { padding-block: var(--space-2xl) var(--space-xl); }
  /* the seal spans the three rows; the last one takes its spare height, so the sentence stays under the title */
  .ficha__topo--selo { column-gap: var(--space-xl); grid-template-rows: auto auto 1fr; }
  .ficha__topo--selo > :not(.ficha__selo):not(.ficha__titulo) { grid-column: 1; }
  .ficha__selo { --selo-anel: clamp(160px, 10vw + 110px, 230px); grid-row: 1 / span 3; align-self: center; }
}

.ficha { padding-bottom: var(--space-section); }
.ficha > * + * { margin-top: var(--space-xl); }
.ficha__grelha { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); align-items: start; }
@media (min-width: 64em) { .ficha__grelha { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); } }
.ficha__resumo { max-width: 36rem; }
.ficha__lado > * + * { margin-top: var(--space-l); }
.ficha__acoes { margin-top: var(--space-l); }

.talao__lista { margin: 0; }
.talao__linha {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--space-s); align-items: baseline;
  padding-block: var(--space-xs); border-bottom: var(--rule) solid var(--color-rule-soft);
}
.talao__linha dt { font-size: var(--step--1); font-weight: var(--weight-label); color: var(--color-text-muted); }
.talao__linha dd { margin: 0; font-size: var(--step-1); line-height: 1.3; font-weight: var(--weight-label); overflow-wrap: anywhere; }
/* the code is read out over the phone: one line, never split at its hyphen */
.talao__codigo { letter-spacing: .06em; white-space: nowrap; }
@media (max-width: 23.99em) {
  .talao__linha { grid-template-columns: 5.25rem minmax(0, 1fr); }
  .talao__codigo { letter-spacing: .02em; }
}
.talao__estado.is-cancelada, .talao__estado.is-nao_apareceu { color: var(--navy-muted); }
.talao__acoes { margin-top: var(--space-m); }
.talao__acoes .btn { max-width: 100%; white-space: normal; text-align: left; }

.ficha__subtitulo { font: var(--weight-label) var(--step--1) / var(--leading-ui) var(--font-text); color: var(--color-text-muted); }
.ficha__morada { display: flex; gap: var(--space-2xs); align-items: flex-start; margin-top: var(--space-2xs); font-size: var(--step-1); line-height: 1.35; font-weight: var(--weight-ui); }
.ficha__morada .ico { margin-top: .12em; }
.ficha__onde .acoes { margin-top: var(--space-2xs); column-gap: var(--space-l); }
.ficha__guardar { max-width: 40ch; }
.ficha__copiar { margin-top: var(--space-3xs); padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
.ficha__copiar[hidden] { display: none; }
.ficha__cancelar { margin-top: var(--space-m); }
.cancelar .acoes { gap: var(--space-s); }

/* ---------- motion: the step swap ----------
   Only the script adds these classes, so a page that arrives from the server is always fully visible.
   Forward comes in from the right, back from the left: the direction is the information. */
@keyframes reserva-frente { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes reserva-tras { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes reserva-opcao { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes reserva-escreve { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes reserva-esqueleto { from { opacity: .45; } to { opacity: 1; } }
.palco-frente { animation: reserva-frente 320ms var(--ease-out) both; }
.palco-tras { animation: reserva-tras 320ms var(--ease-out) both; }
/* the exit starts on the tap, in parallel with the request; the stage dims, it never blanks */
.palco-sai { opacity: .25; transform: translateX(-12px); transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out); pointer-events: none; }
.palco-sai--tras { transform: translateX(12px); }
.palco-frente [data-opcoes] .opc, .palco-tras [data-opcoes] .opc {
  animation: reserva-opcao 280ms var(--ease-out) both;
  animation-delay: min(calc(var(--i, 0) * 11ms), 240ms);
}
.elo--escreve .elo__v { animation: reserva-escreve 380ms var(--ease-out) 100ms both; }
.esqueleto__hora { display: block; flex: 1; min-height: 52px; border: var(--rule) solid var(--rule-soft); border-radius: var(--radius); }
.esqueleto__barra { display: inline-block; width: 7rem; height: .8em; border-radius: 2px; background: var(--rule-soft); }
.esqueleto .grupo__titulo::after { background: var(--rule-soft); }
.esqueleto { animation: reserva-esqueleto 900ms ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .palco-frente, .palco-tras, .palco-frente [data-opcoes] .opc, .palco-tras [data-opcoes] .opc,
  .elo--escreve .elo__v, .esqueleto { animation: none; }
  .palco-sai, .palco-sai--tras { opacity: .5; transform: none; transition: none; }
  .opc, .elo > a::after, .elo__caixa::after { transition: none; }
  a.opc:not(.is-off):active { transform: none; }
}
html.quieto .palco-frente, html.quieto .palco-tras, html.quieto [data-opcoes] .opc,
html.quieto .elo--escreve .elo__v, html.quieto .esqueleto { animation: none; }

@media print {
  .espinha, .ficha__selo, .ficha__copiar, .ficha__cancelar, .talao__acoes, .dados__enviar { display: none !important; }
}