/* ============================================================================
   PMS HOTEL — base.css (F2b.1)
   ----------------------------------------------------------------------------
   Reset moderno, tipografia base, foco visível (WCAG 2.2 AA), marcação de
   texto, barra de deslocamento e utilitários mínimos.

   Regras: PROMPT-FRONTEND-PHP.md §5.2, §5.3, §10 e §11.
   Depende de tokens.css e fontes.css — carregar por esta ordem:
     fontes.css  ->  tokens.css  ->  base.css  ->  componentes.css  ->  ecras.css

   ZERO cores literais neste ficheiro (§11.8): só var(--…) do tokens.css.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Reset moderno
   --------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* `hidden` QUER DIZER ESCONDIDO.
   ------------------------------
   O browser esconde um elemento com `hidden` através de uma regra sua, e uma
   regra de autor ganha SEMPRE à do browser, por mais fraca que seja. Basta um
   componente dizer `display: flex` para o `hidden` deixar de valer — e os
   componentes deste design system dizem-no quase todos.

   Já tinha acontecido três vezes, e das três remendou-se um componente de cada
   vez: o `<dialog>` fechado que ficava desenhado por baixo da lista (20/09), o
   aviso flutuante e o aviso do sítio. À quarta — a faixa de mensagens do
   Balcão, que aparecia como uma caixa azul vazia por baixo do «Fechar a
   venda» — trata-se a família toda, e no sítio onde se trata: uma regra, aqui.

   O `!important` é o que a regra pede: ela tem de ganhar a qualquer `display`
   que um componente venha a declarar, hoje ou daqui a um ano. */
[hidden] {
  display: none !important;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol,
fieldset, legend {
  margin: 0;
  padding: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

/* A âncora de um link interno não fica escondida sob a barra de topo. */
:target {
  scroll-margin-top: calc(var(--altura-topo) + var(--e-16));
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

svg {
  fill: currentColor;
}

/* O utilizador escreveu — não lhe tires o que escreveu nem o tamanho da caixa. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

textarea {
  resize: vertical;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

button[disabled],
input[disabled],
select[disabled],
textarea[disabled],
[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

fieldset {
  border: 0;
  min-width: 0;
}

hr {
  height: 1px;
  border: 0;
  background: var(--linha-forte);
}

/* ---------------------------------------------------------------------------
   2. Tipografia base (§5.2)
   --------------------------------------------------------------------------- */

body {
  min-height: 100vh;
  background: var(--fundo-app);
  background-attachment: fixed;
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  font-weight: var(--peso-corpo);
  line-height: var(--altura-linha-corpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  line-height: var(--altura-linha-titulo);
  color: var(--tinta);
  text-wrap: balance;
}

h1 { font-size: var(--t-ecra); font-weight: var(--peso-titulo-forte); }
h2 { font-size: var(--t-cartao); }
h3 { font-size: var(--t-subtitulo); }
h4, h5, h6 { font-size: var(--t-corpo); }

p {
  text-wrap: pretty;
}

small {
  font-size: var(--t-rotulo);
  color: var(--tinta-secundaria);
}

strong, b {
  font-weight: var(--peso-forte);
}

a {
  color: var(--tinta);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--duracao-rapida) var(--curva-saida);
}

a:hover {
  color: var(--primario-hover);
}

code, kbd, samp, pre {
  font-family: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: var(--t-rotulo);
}

/* Dinheiro e quantidades não dançam: dígitos de largura fixa (§5.2). */
table,
input[type="number"],
[data-numerico] {
  font-variant-numeric: tabular-nums;
}

/* Tabelas: o desenho fino é do componente; aqui só o que nunca muda. */
table {
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
  font-weight: var(--peso-forte);
}

caption {
  text-align: left;
  color: var(--tinta-muda);
}

/* Rótulos de secção e cabeçalhos de coluna (§5.2). */
.pms-rotulo-seccao {
  font-size: var(--t-chip);
  letter-spacing: var(--espacamento-rotulo);
  /* sem maiúsculas: ver a nota no topo do tokens.css */
  color: var(--tinta-muda);
  font-weight: var(--peso-forte);
}

/* ---------------------------------------------------------------------------
   3. Foco visível — WCAG 2.2 AA (§10)
   Anel de 2px com 2px de afastamento, mais um halo de contraste para o anel
   se ver tanto sobre superfície clara como sobre superfície escura.
   Nunca se remove o outline.
   --------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--foco-contraste);
  border-radius: var(--raio-pequeno);
}

/* Rato e toque não desenham o anel; teclado desenha sempre. */
:focus:not(:focus-visible) {
  outline: none;
}

/* Alvos que o JS foca por código (diálogos, painéis) não levam anel. */
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   4. Marcação de texto e barra de deslocamento
   --------------------------------------------------------------------------- */

::selection {
  background: var(--marcacao-bg);
  color: var(--marcacao-fg);
}

::placeholder {
  color: var(--tinta-muda);
  opacity: 1;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--tinta-desativada) var(--borda-suave);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--borda-suave);
}

::-webkit-scrollbar-thumb {
  background: var(--tinta-desativada);
  border-radius: var(--raio-pilula);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--tinta-muda);
}

/* ---------------------------------------------------------------------------
   5. Utilitários mínimos
   Só o que a casca e os componentes vão precisar em todo o lado. Tudo o que
   for de um ecrã só vive em ecras.css.
   --------------------------------------------------------------------------- */

/* Visível para leitores de ecrã, invisível no monitor. */
.pms-so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Saltar para o conteúdo: escondido até receber foco pelo teclado. */
.pms-saltar {
  position: absolute;
  left: var(--e-16);
  top: calc(var(--e-8) * -10);
  z-index: var(--z-aviso);
  padding: var(--e-8) var(--e-16);
  background: var(--superficie);
  color: var(--tinta);
  border-radius: var(--raio-pilula);
  box-shadow: var(--sombra-flutuante);
  text-decoration: none;
}

.pms-saltar:focus-visible {
  top: var(--e-8);
}

/* Faixa de conteúdo: largura máxima e gutter mínimo (§6 e §10). */
.pms-conteudo {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Quem desliza na horizontal é este contentor, nunca o corpo da página (§10). */
.pms-desliza-h {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* Empilhar e alinhar — o mínimo, para não repetir flex em cada componente. */
.pms-pilha {
  display: flex;
  flex-direction: column;
  gap: var(--e-12);
}

.pms-linha-flex {
  display: flex;
  align-items: center;
  gap: var(--e-8);
  flex-wrap: wrap;
}

.pms-empurra {
  margin-left: auto;
}

/* Texto. */
.pms-muda { color: var(--tinta-muda); }
.pms-secundaria { color: var(--tinta-secundaria); }
.pms-numero { text-align: right; font-variant-numeric: tabular-nums; }

.pms-trunca {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Célula sem valor é travessão, nunca vazia (§4). */
.pms-vazio::before {
  content: "—";
  color: var(--tinta-desativada);
}

/* ---------------------------------------------------------------------------
   6. Responsivo (§10)
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .pms-conteudo {
    padding-inline: var(--gutter-telemovel);
  }
}

/* ---------------------------------------------------------------------------
   7. Movimento reduzido (§5.3) — corta tudo o que se move.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duracao-rapida: 1ms;
    --duracao-normal: 1ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   8. Impressão — o papel não leva fundos nem casca.
   --------------------------------------------------------------------------- */

@media print {
  body {
    background: none;
    color: var(--escuro-2);
  }

  .pms-saltar,
  [data-imprimir="nao"] {
    display: none !important;
  }
}