/* =====================================================================
   Xic — Reservas: modo aplicação.
   Página da equipa em ecrã inteiro, com barra de separadores em baixo.
   ===================================================================== */

body.xic-app-ecra {
  margin: 0;
  padding: 0;
  /* Mesmo tom da barra de separadores, de propósito: no iPhone sobra
     sempre uma faixa em baixo que o sistema pinta com o fundo da página.
     Sendo a mesma cor, a barra parece continuar até ao fim do ecrã. */
  background: #141a1d;
  color: #e9e6df;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;

  /* A aplicação ocupa o ecrã todo: o conteúdo rola por dentro e a barra
     de separadores é parte do layout, não um elemento colado por cima.
     É isto que a impede de se mexer, aconteça o que acontecer à página. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.xic-app-ecra .xic-app-conteudo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Assim que a barra passa a ser filha do body (ver gestao.js), deixa de
   precisar de posição fixa: fica em baixo por construção. */
body.xic-app-ecra > .xic-tabs {
  position: static !important;
  flex: 0 0 auto;
}

/* Com o aspeto claro, o fundo acompanha. */
body.xic-app-ecra.xic-app-clara { background: #f4f2ec; color: #171310; }

.xic-app-conteudo {
  max-width: 760px;
  margin: 0 auto;
  padding:
    calc(18px + env(safe-area-inset-top))
    max(16px, env(safe-area-inset-left))
    32px
    max(16px, env(safe-area-inset-right));
}

/* =====================================================================
   Barra de separadores
   A barra é movida para dentro do <body> (ver gestao.js), por isso os
   estilos não podem depender de nenhum contentor acima dela.
   ===================================================================== */
.xic-tabs {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 env(safe-area-inset-bottom) !important;
  z-index: 2147483000;
  display: flex !important;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: rgba(20, 26, 29, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #2b3439;
}
.xic-tabs.xic-tabs--claro {
  background: rgba(255, 255, 255, 0.96);
  border-top-color: #ddd8cc;
}

.xic-tabs .xic-tab {
  flex: 1 1 0;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 4px 8px;
  margin: 0;
  text-decoration: none !important;
  box-shadow: none;
  border: 0;
  background: none;
  color: #8b979d;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.12s ease;
}
.xic-tabs.xic-tabs--claro .xic-tab { color: #7d746a; }

.xic-tabs .xic-tab svg {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px;
  display: block;
  flex: 0 0 auto;
}
.xic-tabs .xic-tab span { display: block; }

.xic-tabs .xic-tab[aria-current="page"] { color: #2c93ab; }
.xic-tabs.xic-tabs--claro .xic-tab[aria-current="page"] { color: #174e5c; }
.xic-tabs .xic-tab:hover, .xic-tabs .xic-tab:visited { color: inherit; }
.xic-tabs .xic-tab:active { opacity: 0.65; }

/* Pontinho por baixo do separador ativo */
.xic-tabs .xic-tab::after { content: ""; display: block; height: 3px; width: 18px; border-radius: 2px; background: transparent; }
.xic-tabs .xic-tab[aria-current="page"]::after { background: currentColor; }

/* =====================================================================
   Ecrã inicial
   ===================================================================== */
.xic-inicio__saudacao { margin: 0 0 20px; }
.xic-reservas .xic-inicio__saudacao h2 { margin: 2px 0 0; font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.15; }

.xic-numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px; margin: 0 0 24px;
}
.xic-numero {
  padding: 14px 12px;
  background: #1c2226; border: 1px solid #2b3439; border-radius: 12px;
  text-align: center;
}
body.xic-app-clara .xic-numero { background: #fff; border-color: #ddd8cc; }
.xic-numero__valor { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.xic-numero__rotulo { display: block; margin-top: 5px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: #8b979d; }
.xic-numero--alerta .xic-numero__valor { color: #e0553c; }
.xic-numero--alerta { border-color: #6b2a1f; }

.xic-seguintes { margin: 0 0 22px; }
.xic-reservas .xic-seguintes h3 {
  margin: 0 0 10px; font-size: 0.76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; color: #8b979d;
}
.xic-seguinte {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; margin-bottom: 8px;
  background: #1c2226; border: 1px solid #2b3439; border-radius: 12px;
  text-decoration: none; color: inherit;
}
body.xic-app-clara .xic-seguinte { background: #fff; border-color: #ddd8cc; }
.xic-seguinte__hora { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 52px; }
.xic-seguinte__nome { font-weight: 600; }
.xic-seguinte__meta { font-size: 0.85rem; color: #8b979d; }
.xic-seguinte__mesa {
  margin-left: auto; padding: 3px 9px; border-radius: 20px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  background: #234c57; color: #cfeaf1;
}
.xic-seguinte__mesa[data-vazia="sim"] { background: transparent; color: #e0553c; border: 1px solid #6b2a1f; }

.xic-inicio__accoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }

/* O cartão inteiro é um link, mas o texto mantém a cor normal. */
.xic-reservas .xic-seguinte,
.xic-reservas .xic-seguinte:hover,
.xic-reservas .xic-seguinte:visited { color: inherit; text-decoration: none; }
.xic-reservas .xic-seguinte:hover { border-color: #3d6b78; }
.xic-reservas .xic-seguinte__meta { color: #8b979d; }

/* =====================================================================
   Barra de separadores: presa em baixo, sem saltos
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; }
body.xic-app-ecra { overscroll-behavior-y: none; }

/* Nenhum antepassado com transform/filter, para o 'fixed' não descolar. */
body.xic-app-ecra .xic-app-conteudo,
body.xic-app-ecra .xic-reservas { transform: none; filter: none; }


/* =====================================================================
   Escondidos na aplicação: barras de cookies e bandeiras de tradução.
   São de outros plugins; aqui não fazem sentido e roubam espaço.
   ===================================================================== */
body.xic-app-ecra #cookie-law-info-bar,
body.xic-app-ecra #cookie-law-info-again,
body.xic-app-ecra .cli-modal,
body.xic-app-ecra .cli-barmodal,
body.xic-app-ecra #cmplz-cookiebanner-container,
body.xic-app-ecra .cmplz-cookiebanner,
body.xic-app-ecra .cmplz-manage-consent,
body.xic-app-ecra #moove_gdpr_cookie_info_bar,
body.xic-app-ecra #moove_gdpr_cookie_modal,
body.xic-app-ecra #iubenda-cs-banner,
body.xic-app-ecra .iubenda-cs-container,
body.xic-app-ecra #BorlabsCookieBox,
body.xic-app-ecra #usercentrics-root,
body.xic-app-ecra .cookie-notice-container,
body.xic-app-ecra #cookie-notice,
body.xic-app-ecra .pum-overlay,
body.xic-app-ecra .gtranslate_wrapper,
body.xic-app-ecra .gt_float_switcher,
body.xic-app-ecra #google_translate_element,
body.xic-app-ecra .goog-te-banner-frame,
body.xic-app-ecra .weglot-container,
body.xic-app-ecra .wg-drop,
body.xic-app-ecra .trp-language-switcher,
body.xic-app-ecra .trp-floater-ls,
body.xic-app-ecra .wpml-ls,
body.xic-app-ecra .wpml-floating-language-switcher,
body.xic-app-ecra .lang-item,
body.xic-app-ecra .polylang-switcher,
body.xic-app-ecra .qtranxs_widget,
body.xic-app-ecra .flags,
body.xic-app-ecra .language-switcher {
  display: none !important;
  visibility: hidden !important;
}
body.xic-app-ecra { top: 0 !important; } /* o Google Tradutor empurra o body */

/* =====================================================================
   Blocos das definições da equipa
   ===================================================================== */
.xic-bloco {
  padding: 16px 16px 18px;
  margin: 0 0 14px;
  background: #1c2226;
  border: 1px solid #2b3439;
  border-radius: 12px;
}
body.xic-app-clara .xic-bloco { background: #fff; border-color: #ddd8cc; }
.xic-reservas .xic-bloco h3 { margin: 0 0 6px; font-size: 1.05rem; }
.xic-reservas .xic-bloco .xic-btn { margin-top: 12px; }

.xic-reservas .xic-btn--perigo { background: #a82d1b; }

.xic-dias-lista { list-style: none; margin: 10px 0 14px; padding: 0; }
.xic-dias-lista li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px dashed #2b3439; font-size: 0.95rem;
}
body.xic-app-clara .xic-dias-lista li { border-bottom-color: #ddd8cc; }
.xic-dias-lista form { margin: 0; }

.xic-dias-juntar { margin: 0; }
.xic-dias-juntar span { display: flex; gap: 8px; align-items: center; }
.xic-reservas .xic-dias-juntar input[type="date"] { width: auto; flex: 1 1 auto; }

.xic-g-pausado { font-weight: 600; }

/* =====================================================================
   Tipos de letra e contraste dentro da aplicação
   O tema do site tem as suas letras para títulos; aqui queremos as
   mesmas do resto da aplicação, para não parecer colado.
   ===================================================================== */
body.xic-app-ecra .xic-reservas h2,
body.xic-app-ecra .xic-reservas h3,
body.xic-app-ecra .xic-reservas h4,
body.xic-app-ecra .xic-reservas summary,
body.xic-app-ecra .xic-reservas strong,
body.xic-app-ecra .xic-reservas label,
body.xic-app-ecra .xic-reservas button,
body.xic-app-ecra .xic-reservas input,
body.xic-app-ecra .xic-reservas select,
body.xic-app-ecra .xic-reservas textarea {
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
}

body.xic-app-ecra .xic-reservas h2 {
  font-size: clamp(1.35rem, 4.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 2px 0 4px;
}
body.xic-app-ecra .xic-reservas h3 {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  color: inherit;
}
body.xic-app-ecra .xic-reservas label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #b6c0c5;
}
body.xic-app-clara .xic-reservas label { color: #5c534c; }

/* "Início", "Reservas", "Sala", "Definições" no topo de cada vista */
body.xic-app-ecra .xic-reservas .xic-rotulo {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7fc4d6;
}
body.xic-app-clara .xic-reservas .xic-rotulo { color: #174e5c; }

/* Contraste: os cinzentos estavam demasiado apagados no escuro. */
.xic-gestao--escuro { --xic-cinza: #a9b4ba; }
body.xic-app-ecra .xic-ajuda,
body.xic-app-ecra .xic-numero__rotulo,
body.xic-app-ecra .xic-seguinte__meta,
body.xic-app-ecra .xic-g-contadores { color: #a9b4ba; }
body.xic-app-clara .xic-ajuda,
body.xic-app-clara .xic-numero__rotulo,
body.xic-app-clara .xic-seguinte__meta,
body.xic-app-clara .xic-g-contadores { color: #5c534c; }

body.xic-app-ecra .xic-numero { border-color: #39444a; }
body.xic-app-ecra .xic-bloco { border-color: #39444a; }
body.xic-app-ecra .xic-seguinte { border-color: #39444a; }
body.xic-app-ecra .xic-g-cartao { border-color: #3d484f; }

body.xic-app-ecra .xic-reservas .xic-g-mini,
body.xic-app-ecra .xic-reservas .xic-g-accoes button {
  color: #e9e6df; border-color: #4a555c; background: #262f34;
}
body.xic-app-clara .xic-reservas .xic-g-mini,
body.xic-app-clara .xic-reservas .xic-g-accoes button {
  color: #171310; border-color: #171310; background: #fff;
}

/* "A seguir" e os títulos das definições, com o mesmo peso visual */
body.xic-app-ecra .xic-seguintes h3 { color: inherit; }

/* =====================================================================
   Campos de data e hora: no iPhone tendem a passar a largura da página
   ===================================================================== */
body.xic-app-ecra .xic-reservas input[type="date"],
body.xic-app-ecra .xic-reservas input[type="time"],
body.xic-app-ecra .xic-reservas input[type="number"],
body.xic-app-ecra .xic-reservas input[type="text"],
body.xic-app-ecra .xic-reservas input[type="tel"],
body.xic-app-ecra .xic-reservas input[type="email"],
body.xic-app-ecra .xic-reservas select,
body.xic-app-ecra .xic-reservas textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px; /* abaixo disto, o iPhone dá zoom sozinho ao tocar */
}
body.xic-app-ecra .xic-reservas input[type="date"],
body.xic-app-ecra .xic-reservas input[type="time"] {
  -webkit-appearance: none;
  display: block;
  height: 46px;
  line-height: normal;
}
body.xic-app-ecra .xic-reservas select { padding-right: 34px; }

/* As linhas com campo + botão têm de poder encolher */
.xic-g-escolher, .xic-g-relogio, .xic-dias-juntar span { min-width: 0; flex-wrap: wrap; }
.xic-g-escolher > *, .xic-g-relogio > *, .xic-dias-juntar span > * { min-width: 0; }
body.xic-app-ecra .xic-g-escolher input[type="date"],
body.xic-app-ecra .xic-g-relogio input[type="time"],
body.xic-app-ecra .xic-dias-juntar input[type="date"] {
  flex: 1 1 140px;
  width: auto;
}
body.xic-app-ecra .xic-g-escolher .xic-g-mini,
body.xic-app-ecra .xic-g-relogio .xic-g-mini,
body.xic-app-ecra .xic-dias-juntar .xic-g-mini { flex: 0 0 auto; }

/* Nada dentro da aplicação pode ser mais largo do que o ecrã */
body.xic-app-ecra .xic-reservas,
body.xic-app-ecra .xic-vista,
body.xic-app-ecra .xic-bloco,
body.xic-app-ecra .xic-g-nova { max-width: 100%; overflow-x: hidden; }
body.xic-app-ecra .xic-g-nova { box-sizing: border-box; }

/* =====================================================================
   CookieYes e GTranslate: fora da aplicação da equipa.
   (Continuam a funcionar normalmente no resto do site.)
   ===================================================================== */
body.xic-app-ecra .cky-consent-container,
body.xic-app-ecra .cky-consent-bar,
body.xic-app-ecra .cky-modal,
body.xic-app-ecra .cky-overlay,
body.xic-app-ecra .cky-btn-revisit-wrapper,
body.xic-app-ecra .cky-revisit-bottom-left,
body.xic-app-ecra .cky-revisit-bottom-right,
body.xic-app-ecra [class*="cky-"],
body.xic-app-ecra [id*="cky-"],
body.xic-app-ecra #cookieyes,
body.xic-app-ecra .gtranslate_wrapper,
body.xic-app-ecra .gt_float_switcher,
body.xic-app-ecra #gt_float_wrapper,
body.xic-app-ecra .gt_switcher,
body.xic-app-ecra .gt_switcher_wrapper,
body.xic-app-ecra [class*="gt_container"],
body.xic-app-ecra .gt-current-lang,
body.xic-app-ecra .gt_selector,
body.xic-app-ecra .glink,
body.xic-app-ecra .switcher,
body.xic-app-ecra #google_translate_element,
body.xic-app-ecra .skiptranslate,
body.xic-app-ecra .goog-te-banner-frame,
body.xic-app-ecra .goog-te-gadget,
body.xic-app-ecra #cookie-law-info-bar,
body.xic-app-ecra .cli-modal,
body.xic-app-ecra #cmplz-cookiebanner-container,
body.xic-app-ecra #moove_gdpr_cookie_info_bar,
body.xic-app-ecra #cookie-notice {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* O tradutor do Google empurra o body para baixo. Aqui não. */
body.xic-app-ecra { top: 0 !important; }
html.translated-ltr body.xic-app-ecra,
html.translated-rtl body.xic-app-ecra { top: 0 !important; }

/* =====================================================================
   Campos todos com o mesmo aspeto dentro da aplicação
   (o tema e o browser tratavam a hora e os números de outra maneira)
   ===================================================================== */
body.xic-app-ecra .xic-reservas input:not([type="checkbox"]):not([type="radio"]),
body.xic-app-ecra .xic-reservas select,
body.xic-app-ecra .xic-reservas textarea {
  background: #141a1d;
  color: #e9e6df;
  border: 1.5px solid #4a555c;
  border-radius: 9px;
  padding: 12px 13px;
  box-shadow: none;
  color-scheme: dark;
}
body.xic-app-clara .xic-reservas input:not([type="checkbox"]):not([type="radio"]),
body.xic-app-clara .xic-reservas select,
body.xic-app-clara .xic-reservas textarea {
  background: #fff;
  color: #171310;
  border-color: #c9c2b6;
  color-scheme: light;
}
body.xic-app-ecra .xic-reservas input:focus,
body.xic-app-ecra .xic-reservas select:focus,
body.xic-app-ecra .xic-reservas textarea:focus {
  border-color: #2c93ab;
  outline: 2px solid rgba(44, 147, 171, 0.35);
  outline-offset: 1px;
}

/* Botões com o mesmo raio dos campos */
body.xic-app-ecra .xic-reservas .xic-g-mini,
body.xic-app-ecra .xic-reservas .xic-g-accoes button { border-radius: 9px; border-width: 1.5px; }
body.xic-app-ecra .xic-reservas .xic-btn { border-radius: 10px; box-shadow: none; border-width: 0; }
body.xic-app-ecra .xic-reservas .xic-btn:hover { transform: none; box-shadow: none; }
body.xic-app-ecra .xic-g-cartao { border-radius: 12px; border-width: 1.5px; }
body.xic-app-ecra .xic-g-nova { border-radius: 12px; }

/* =====================================================================
   Acertos finais da barra e dos títulos
   ===================================================================== */

/* A margem para a barra de gestos do iPhone estava a deixar demasiado
   espaço vazio por baixo dos separadores. Damos o suficiente para não
   ficar por baixo do risco do iPhone, e nada mais. */
.xic-tabs {
  padding: 0 0 min(env(safe-area-inset-bottom), 14px) !important;
}
.xic-tabs .xic-tab { padding: 8px 4px 6px; }

/* Os títulos estavam a apanhar a cor de títulos do tema e ficavam
   esbatidos. Dentro da aplicação, mandamos nós. */
body.xic-app-ecra .xic-reservas h2,
body.xic-app-ecra .xic-reservas h3,
body.xic-app-ecra .xic-reservas h4,
body.xic-app-ecra .xic-reservas strong,
body.xic-app-ecra .xic-reservas summary,
body.xic-app-ecra .xic-seguinte__nome,
body.xic-app-ecra .xic-numero__valor {
  color: #f0ede6;
  opacity: 1;
  -webkit-text-fill-color: currentColor;
}
body.xic-app-clara .xic-reservas h2,
body.xic-app-clara .xic-reservas h3,
body.xic-app-clara .xic-reservas h4,
body.xic-app-clara .xic-reservas strong,
body.xic-app-clara .xic-reservas summary,
body.xic-app-clara .xic-seguinte__nome,
body.xic-app-clara .xic-numero__valor {
  color: #171310;
}
body.xic-app-ecra .xic-numero--alerta .xic-numero__valor { color: #e0553c; }

/* =====================================================================
   Barra: altura mínima, sem reservar a faixa da barra de gestos
   ===================================================================== */
body.xic-app-ecra > .xic-tabs,
.xic-tabs {
  padding-top: 4px !important;
  padding-bottom: 10px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.xic-tabs .xic-tab { padding: 6px 4px 4px !important; gap: 2px; }
.xic-tabs .xic-tab svg { width: 22px !important; height: 22px !important; }
.xic-tabs .xic-tab::after { height: 2px; margin-top: 0; }

/* Os três números cabem sempre na mesma linha */
.xic-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
.xic-numero { padding: 12px 6px; }
.xic-numero__rotulo { letter-spacing: 0.06em; font-size: 0.68rem; }

/* =====================================================================
   Largura: a aplicação ocupa sempre o ecrã todo
   Num contentor em coluna, uma margem automática faz a caixa encolher
   à volta do conteúdo — era por isso que cada página tinha uma largura
   diferente e que o Início mudava de largura ao abrir o formulário.
   ===================================================================== */
body.xic-app-ecra > .xic-app-conteudo {
  width: 100% !important;
  align-self: stretch;
  box-sizing: border-box;
}
body.xic-app-ecra .xic-reservas,
body.xic-app-ecra .xic-gestao--painel,
body.xic-app-ecra .xic-vista {
  width: 100% !important;
  box-sizing: border-box;
}
body.xic-app-ecra > .xic-tabs { align-self: stretch; }

/* A faixa preta em baixo era o iPhone a encolher a página. Com o
   viewport-fit=cover a aplicação passa a ir até ao fundo, e é aqui que
   voltamos a dar espaço à barra de gestos — mas só o necessário. */
body.xic-app-ecra > .xic-tabs {
  padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
}

/* Escolher o dia fica numa linha só, por baixo das setas */
.xic-g-dias { align-items: center; }
.xic-g-escolher { flex: 1 0 100%; margin-top: 4px; }
body.xic-app-ecra .xic-g-escolher input[type="date"] { flex: 1 1 auto; }

/* O "Apontar reserva de telefone" estava a mudar de cor quando aberto */
body.xic-app-ecra .xic-reservas summary,
body.xic-app-ecra .xic-g-nova[open] > summary { color: #f0ede6; }
body.xic-app-clara .xic-reservas summary,
body.xic-app-clara .xic-g-nova[open] > summary { color: #171310; }

/* =====================================================================
   Barra: altura fixa, sem a faixa da barra de gestos do iPhone
   (as apps do sistema reservam 34pt aqui; a pedido, não reservamos)
   ===================================================================== */
body.xic-app-ecra > .xic-tabs,
.xic-tabs {
  padding-bottom: 12px !important;
}

/* Na aplicação só existem o conteúdo e a barra. Se algum plugin deixar
   marcas soltas no fim da página, não podem roubar espaço à barra. */
body.xic-app-ecra > *:not(.xic-app-conteudo):not(.xic-tabs) {
  display: none !important;
}

/* =====================================================================
   O body não leva margens nem espaçamentos próprios: a aplicação vai do
   topo ao fundo do ecrã e é ela que trata do entalhe e da barra de gestos.
   ===================================================================== */
body.xic-app-ecra {
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  max-height: 100vh;
  max-height: 100dvh;
}
body.xic-app-ecra > .xic-app-conteudo { padding-top: calc(18px + env(safe-area-inset-top)); }


/* =====================================================================
   Barra: cor sólida, igual ao fundo da página, para a emenda com a
   faixa do iPhone não se ver. A separação fica a cargo do traço de cima.
   ===================================================================== */
.xic-tabs {
  background: #141a1d !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid #313b41 !important;
}
.xic-tabs.xic-tabs--claro {
  background: #f4f2ec !important;
  border-top-color: #ddd8cc !important;
}

/* Os cartões ganham um tom acima do novo fundo, para não desaparecerem */
body.xic-app-ecra .xic-numero,
body.xic-app-ecra .xic-bloco,
body.xic-app-ecra .xic-seguinte,
body.xic-app-ecra .xic-g-cartao { background: #1e252a; }
body.xic-app-ecra .xic-g-nova { background: #1a2126; }
body.xic-app-clara .xic-numero,
body.xic-app-clara .xic-bloco,
body.xic-app-clara .xic-seguinte,
body.xic-app-clara .xic-g-cartao,
body.xic-app-clara .xic-g-nova { background: #ffffff; }

.xic-versao { opacity: 0.55; font-size: 0.8rem; margin-top: 4px; }

/* =====================================================================
   Zona do relógio e da bateria
   O espaço do topo estava dentro da área que rola, por isso o texto
   passava por baixo da hora ao deslizar. Passa a ser do próprio ecrã da
   aplicação: o conteúdo rola por baixo dele e nunca lá chega.
   ===================================================================== */
body.xic-app-ecra {
  padding-top: env(safe-area-inset-top, 0px) !important;
  box-sizing: border-box;
}
body.xic-app-ecra > .xic-app-conteudo {
  padding-top: 14px !important;
}

/* Margem por baixo dos rótulos: dá folga ao risco dos gestos do iPhone
   sem deixar a barra a flutuar. */
body.xic-app-ecra > .xic-tabs,
.xic-tabs { padding-bottom: 20px !important; }

/* A planta, dentro da aplicação, não pode prender o dedo: deslizar por
   cima dela desloca a página como em qualquer outro sítio. */
body.xic-app-ecra .xic-sala:not(.xic-sala--editor) { touch-action: pan-y pinch-zoom; }
body.xic-app-ecra .xic-sala:not(.xic-sala--editor) .xic-mesa { touch-action: inherit; }

/* =====================================================================
   Barra de separadores em cápsula flutuante
   ===================================================================== */
body.xic-app-ecra > .xic-tabs,
.xic-tabs {
  margin: 0 auto 14px !important;
  width: calc(100% - 24px) !important;
  max-width: 440px;
  padding: 6px !important;
  gap: 2px;
  background: #1e262b !important;
  border: 1px solid #2c363c !important;
  border-top: 1px solid #2c363c !important;
  border-radius: 30px !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.xic-tabs.xic-tabs--claro {
  background: #ffffff !important;
  border-color: #e2ded2 !important;
  box-shadow: 0 6px 22px rgba(23, 19, 16, 0.14);
}

.xic-tabs .xic-tab {
  padding: 9px 4px 8px !important;
  gap: 3px;
  border-radius: 24px;
  color: #8d9aa1;
  transition: background 0.16s ease, color 0.16s ease;
}
.xic-tabs.xic-tabs--claro .xic-tab { color: #7d746a; }

/* O separador ativo ganha fundo próprio, como nas apps de hoje */
.xic-tabs .xic-tab[aria-current="page"] {
  background: #2b363d;
  color: #f0ede6;
}
.xic-tabs.xic-tabs--claro .xic-tab[aria-current="page"] {
  background: #f2efe7;
  color: #174e5c;
}
.xic-tabs .xic-tab[aria-current="page"] svg { color: #4fc3dd; }
.xic-tabs.xic-tabs--claro .xic-tab[aria-current="page"] svg { color: #174e5c; }

/* Sem o traço por baixo: agora quem marca o ativo é o fundo */
.xic-tabs .xic-tab::after { display: none !important; }

.xic-tabs .xic-tab svg { width: 21px !important; height: 21px !important; }
.xic-tabs .xic-tab span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; }

/* O conteúdo respira antes da cápsula */
body.xic-app-ecra > .xic-app-conteudo { padding-bottom: 10px !important; }

/* Dia fechado que ainda tem reservas marcadas */
.xic-dia-alerta {
  display: inline-block; margin-top: 3px;
  font-size: 0.8rem; font-weight: 700;
  color: #e0553c !important; text-decoration: underline; text-underline-offset: 2px;
}

/* Dias fechados que já passaram: recolhidos, fora do caminho */
.xic-dias-passados { margin-top: 14px; }
.xic-reservas .xic-dias-passados summary {
  cursor: pointer; padding: 8px 0;
  font-size: 0.9rem; font-weight: 600; color: #a9b4ba;
  list-style: revert;
}
body.xic-app-clara .xic-reservas .xic-dias-passados summary { color: #6b5a50; }
.xic-dias-passados .xic-dias-lista { opacity: 0.75; }
.xic-dias-passados form { margin-top: 10px; }