/* Estilos base do appMotel.
 *
 * Todo CSS do projeto é externo: não existe <style> nem style="" em template
 * (regra do CLAUDE.md, e a CSP do SecurityHeadersMiddleware a torna efetiva).
 *
 * Layout: sidebar fixa à esquerda no desktop, gaveta sobreposta no mobile.
 * Existe UM menu no DOM; o que muda entre os dois é este arquivo.
 *
 * Sumário
 *   1. Tokens e reset
 *   2. Sidebar
 *   3. Barra mobile e sobreposição
 *   4. Área de conteúdo e cabeçalho de tela
 *   5. Painéis, cartões e tabelas
 *   6. Formulários e botões
 *   7. Mensagens, notificações e estados
 *      (inclui o diálogo de confirmação, `.confirm`)
 *   8. Breakpoints
 */

/* --- Breakpoints do projeto ------------------------------------------------
 *
 * Media query não lê custom property — `@media (max-width: var(--bp))` não é
 * CSS válido —, então os dois breakpoints do projeto não podem morar em
 * `:root` junto do resto dos tokens. Esta lista é a fonte única: qualquer
 * arquivo que abrir um `@media` de largura aponta para cá com um comentário
 * de uma linha, em vez de reexplicar o valor.
 *
 *   640px — cartão, grade e tabela empilham (`.table--cards`, `.card-grid`,
 *           `.room-grid`, `.chart-box`). É o ponto em que uma linha de
 *           tabela com várias colunas deixa de caber lado a lado no telefone.
 *   900px — a coluna fixa da sidebar vira gaveta sobreposta. Repetido em
 *           `sidebar.js` (constante `DESKTOP_MIN_WIDTH`); os dois têm que
 *           mudar juntos.
 */

/* --- 1. Tokens e reset --------------------------------------------------- */

:root {
  /* Diz ao navegador em que tema desenhar o que NÃO é nosso: barra de rolagem,
     lista suspensa do <select>, seletor de data, setinhas do campo numérico,
     caixa de seleção e o amarelo do preenchimento automático. Sem isto o CSS
     escurecia a página e o navegador continuava desenhando essas peças no
     claro. */
  color-scheme: light;

  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  /* Superfície secundária: cabeçalho de tabela, fundo de botão discreto. */
  --color-surface-alt: #eef1f5;
  --color-row-hover: #f9fafb;
  --color-border: #d8dce3;
  --color-text: #1f2430;
  /* O cinza secundário é lido sobre TRÊS fundos claros — branco do painel,
     #f5f6f8 da página e #eef1f5 da superfície secundária (cabeçalho de tabela,
     cartão). Em #6b7280 ele passava só no primeiro: 4,8:1 no branco, 4,5:1 na
     página e 4,3:1 na superfície secundária. Aqui vale 5,5, 5,1 e 4,9. */
  --color-muted: #626976;
  --color-primary: #1f4e79;
  --color-primary-dark: #163a5a;
  /* Tinta sobre a primária. Não é "branco": no tema escuro a primária clareia,
     e o token é o que garante que o par continue sendo lido como par. */
  --color-on-primary: #ffffff;
  /* A primária ESCRITA sobre a superfície é outro token do que a primária que
     PREENCHE o botão. No tema escuro os dois andam em direções opostas: o
     preenchimento clareia o suficiente para se separar do fundo, e a tinta
     clareia MUITO mais para ser lida em cima dele. Um token só não atende aos
     dois — era o que deixava o rótulo de `.btn--secondary` em 3,1:1. */
  --color-primary-ink: #1f4e79;
  --color-secondary-hover: #e8eef4;
  --color-success: #1b7f4c;
  --color-danger: #b02a37;
  /* Vermelho que PREENCHE o botão destrutivo, com o par de hover — a mesma
     separação que `--color-primary`/`--color-primary-dark` já faz. No escuro
     `--color-danger` clareia para ser lido como TINTA sobre a superfície, e
     branco sobre aquele rosa daria 2:1; o preenchimento escurece em vez de
     clarear. */
  --color-danger-fill: #b02a37;
  --color-danger-fill-dark: #8f2531;
  --color-warning: #9a6700;
  --color-settled: #1b4f8f;
  /* Índigo da situação "Reservado". O legado usa marrom, que cai perto demais
     do vermelho de "Ocupado"; este matiz fica separado dos quatro que já
     existem (verde, vermelho, âmbar e cinza) sob visão normal e sob as três
     formas de daltonismo — a menor separação é contra o cinza, e ainda assim
     ela é maior que a de qualquer outro roxo testado. Contraste 9,7:1 sobre o
     branco, o mais alto das cinco. */
  --color-reserved: #4c3095;

  /* Fundos das tarjas de situação e das mensagens. Cada um é o par do tom de
     tinta acima, e os dois viajam juntos: trocar um sem o outro é como a
     tarja perde o contraste. */
  --tint-success: #e7f5ec;
  --tint-danger: #fbeaec;
  --tint-warning: #fdf6e3;
  --tint-reserved: #efe9fa;
  --tint-settled: #e8f0fb;
  --tint-neutral: #eceff3;

  /* Gráficos. As duas séries moram aqui, e não no CSS de uma tela só, porque
     o faturamento e a ocupação leem as mesmas: a cor segue a ENTIDADE, e uma
     cópia por tela é como as duas passariam a discordar. */
  --chart-grid: #e6e9ee;
  --chart-axis: #8b93a1;
  --series-lodging: #2a78d6;
  --series-sales: #eb6834;
  /* O balão do gráfico tem tokens próprios: no tema escuro a tinta do texto é
     clara, e reaproveitá-la como fundo do balão daria caixa clara com letra
     clara. */
  --tooltip-bg: #1f2430;
  --tooltip-ink: #ffffff;

  /* Sombra de quem flutua sobre a página (o toast). É token porque no escuro
     preto sobre preto não separa nada, e a profundidade tem de vir mais forte. */
  --shadow-float: 0 6px 20px rgba(0, 0, 0, 0.18);
  /* Sombra rasa do painel — ele não flutua, só precisa de um reforço além da
     borda de 1px. O motivo mora no comentário de `.panel`: no tema escuro a
     superfície contra o fundo vale 1,15:1, perto do teto do que os dois tons
     conseguem diferir, e é lá que a sombra faz o trabalho de verdade — no
     claro ela é quase imperceptível de propósito, porque ali a borda já
     resolve sozinha.

     São DUAS camadas: a de 1px desenha o contato do painel com a página, a de
     14px desenha o afastamento. Uma camada só não faz as duas coisas — curta
     demais vira um risco escuro na borda; longa demais deixa o painel boiando
     sem apoio. */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.06);

  /* --- Escala tipográfica --------------------------------------------------
   *
   * Seis degraus, não uma progressão livre: cobre da legenda menor (rótulo de
   * tabela, badge, contador de paginação) até o maior título de painel, e
   * cada tamanho hoje em uso no projeto cai em algum deles — não sobra degrau
   * nem falta um. Tamanho novo que "quase" serve é sinal para reusar o
   * degrau existente, não para abrir um sétimo.
   *
   * Em rem, e não em px: px é fixo mesmo quando a pessoa aumenta o tamanho de
   * fonte do navegador (zoom de acessibilidade, letra maior do Windows); rem
   * deriva do tamanho de fonte raiz e acompanha essa preferência. Este
   * projeto não redefine o `font-size` do <html>, então 1rem parte de 16px —
   * a base que todo valor abaixo assume.
   */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.9375rem;/* 15px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.375rem;   /* 22px */
  --text-2xl: 1.625rem;  /* 26px */

  /* --- Escala de espaçamento ------------------------------------------------
   *
   * Progressão 4/8/12/16/24/32. Os quatro primeiros degraus sobem de 4 em 4 —
   * a unidade fina que separa ícone de texto, ou o padding de um badge; os
   * dois últimos dobram o passo, porque ali o uso passa a ser espaçamento
   * entre BLOCOS (painel, cartão, página), não dentro de um componente
   * pequeno.
   */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* --- Barra lateral -----------------------------------------------------
   *
   * O menu tem tokens PRÓPRIOS, e não os da primária. Ele é uma superfície de
   * 244px, não um botão: quando a paleta escura clareou a primária — o que o
   * botão precisa, senão o azul-marinho some no fundo escuro —, a coluna
   * inteira clareou junto e toda a tinta escrita nela caiu abaixo de 4,5:1.
   * Com token próprio o botão clareia e o menu escurece, cada um para o lado
   * que o seu papel pede.
   *
   * As sobreposições ficam em `rgba` de branco de propósito: elas compõem
   * sobre o fundo do menu, seja ele qual for, e servem aos dois temas sem
   * precisar de um segundo valor.
   */
  --color-sidebar: #1f4e79;
  --color-sidebar-ink: #dce6f1;
  --color-sidebar-ink-strong: #ffffff;
  --color-sidebar-ink-muted: #bcd0e6;
  --color-sidebar-hover: rgba(255, 255, 255, 0.10);
  --color-sidebar-active: rgba(255, 255, 255, 0.16);
  --color-sidebar-divider: rgba(255, 255, 255, 0.14);
  /* Contorno de botão dentro do menu ("Sair", "Modo claro"): mais opaco que o
     divisor porque é peça de interface e precisa de 3:1 contra o fundo. Em
     0,28 ficava em 2,1:1 e o botão parecia não ter borda. */
  --color-sidebar-outline: rgba(255, 255, 255, 0.45);

  /* --- Escala de arredondamento -------------------------------------------
   *
   * Três degraus e uma pílula, porque CONTÊINER e CONTROLE não se arredondam
   * igual. Com um valor só nos dois — que era o caso até aqui —, o painel
   * tinha o mesmo canto duro do campo de texto dentro dele, e a hierarquia
   * entre "a caixa" e "o que está na caixa" se perdia.
   *
   *   --radius      6px   traço fino: o botão dentro do menu, a linha de
   *                       alerta no cartão de quarto — o que é pequeno demais
   *                       para arredondar sem virar bolha.
   *   --radius-md  10px   cartão, campo de formulário, caixa de mensagem
   *                       e BOTÃO.
   *   --radius-lg  14px   painel e diálogo — o contêiner de nível mais alto.
   *   --radius-pill       pílula de filtro, etiqueta, tarja de situação.
   *
   * O botão fica no mesmo degrau do campo de texto, e não na pílula: os dois
   * têm 44px de altura e ficam lado a lado na barra de filtro, onde arredondar
   * só um deles até o fim quebra o par. Em 999px a altura vira o raio, e o que
   * era um botão passa a ler como cápsula.
   *
   * A pílula sobra para quem se lê como ETIQUETA — o filtro, a situação do
   * quarto, o papel do usuário. Ali a forma é o que separa um rótulo de um
   * botão, e é ela que diz que aquilo não se aperta.
   */
  --radius: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  /* --gap sempre foi 16px; --space-4 também é — a mudança é só o valor
     passar a apontar para o token, para nada quebrar. */
  --gap: var(--space-4);

  --sidebar-width: 244px;
  --sidebar-width-collapsed: 64px;
  --mobile-bar-height: 56px;

  /* Alvo mínimo de toque. Recepção usa o sistema em pé, muitas vezes com uma
     mão só; 44px é o piso recomendado pelo WCAG para alvo apontável. */
  --touch-target: 44px;

  /* --- Paleta escura ------------------------------------------------------
   *
   * Os VALORES ficam aqui, uma vez só; os dois seletores abaixo apenas
   * re-apontam os tokens em uso. Duas listas de valores seria como o tema
   * seguido pelo sistema operacional e o escolhido no menu passariam a ser
   * temas diferentes.
   *
   * Não é a paleta clara invertida: cada tom foi escolhido contra a superfície
   * escura e conferido por contraste. Texto 13,5:1, secundário 7,4:1, cada
   * tinta de tarja sobre o seu próprio fundo acima de 6:1, e o par do gráfico
   * revalidado nas cinco checagens (faixa de luminosidade, croma, separação
   * sob daltonismo, piso de visão normal e contraste) contra #1c212a.
   *
   * A primeira conferência olhou TINTA contra SUPERFÍCIE e parou aí. O que
   * escapou foi a primária nos outros dois papéis que ela exerce: como FUNDO
   * (a barra lateral, que clareou junto com o botão e derrubou tudo que está
   * escrito nela) e como TINTA sobre a superfície (o botão secundário, em
   * 3,1:1). Os dois ganharam token próprio — `--color-sidebar*` e
   * `--color-primary-ink` — e é por isso que a lista abaixo é maior do que a
   * de tokens em uso.
   */
  --dark-bg: #12151b;
  --dark-surface: #1c212a;
  --dark-surface-alt: #262c37;
  --dark-row-hover: #232833;
  /* Mais clara do que o resto da paleta escura pediria: no escuro é a BORDA,
     e não o degrau de fundo, que separa o painel da página — superfície
     contra fundo vale 1,15:1 e nenhum ajuste razoável levaria isso longe. Em
     #39414f a moldura ficava em 1,8:1 e o cartão se dissolvia no fundo. */
  --dark-border: #4a5464;
  --dark-text: #e8ebf1;
  --dark-muted: #a7b1c0;
  /* A primária clareia porque é PREENCHIMENTO de botão: azul-marinho sobre
     superfície escura vira um botão que não se distingue do fundo. O menu não
     depende mais deste token — ele tem os seus, logo abaixo. */
  --dark-primary: #2f6fb0;
  --dark-primary-dark: #255a90;
  /* Tinta, não preenchimento: 7,1:1 sobre o painel, 6,5:1 sobre a linha em
     hover e 5,5:1 sobre o fundo de hover do botão secundário. Clarear a
     própria primária até aqui não é opção — o branco em cima dela cairia
     para 2,3:1. */
  --dark-primary-ink: #74b0f0;
  --dark-secondary-hover: #2c3442;
  --dark-success: #4ec27f;
  --dark-danger: #f08a94;
  --dark-danger-fill: #b04a54;
  --dark-danger-fill-dark: #9c3d47;
  --dark-warning: #e0b64a;
  --dark-settled: #7fb3ec;
  --dark-reserved: #b5a0f0;
  --dark-tint-success: #17301f;
  --dark-tint-danger: #33191d;
  --dark-tint-warning: #322a13;
  --dark-tint-reserved: #241f3a;
  --dark-tint-settled: #16283d;
  --dark-tint-neutral: #262c37;
  --dark-chart-grid: #2c333f;
  --dark-chart-axis: #98a2b1;
  --dark-series-lodging: #3f86d0;
  --dark-series-sales: #d9722f;
  --dark-tooltip-bg: #2b3240;
  --dark-tooltip-ink: #e8ebf1;
  --dark-shadow-float: 0 8px 24px rgba(0, 0, 0, 0.6);
  --dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.4);

  /* O menu ESCURECE enquanto a primária clareia. Continua sendo o navy do
     sistema, agora do lado escuro da paleta: acima do fundo da página, com o
     mesmo peso de superfície do painel. Tinta 9,5:1, secundária 5,9:1, item
     ativo 9,7:1 — os três passavam de 4,5:1 no tema claro e voltam a passar
     aqui. */
  --dark-sidebar: #1b2739;
  --dark-sidebar-ink: #c3cfe0;
  --dark-sidebar-ink-strong: #ffffff;
  --dark-sidebar-ink-muted: #93a4bd;
  --dark-sidebar-hover: rgba(255, 255, 255, 0.08);
  --dark-sidebar-active: rgba(255, 255, 255, 0.14);
  --dark-sidebar-divider: rgba(255, 255, 255, 0.12);
  --dark-sidebar-outline: rgba(255, 255, 255, 0.45);
}

/* O tema escuro vale quando o sistema pede E o usuário não escolheu o claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: var(--dark-bg);
    --color-surface: var(--dark-surface);
    --color-surface-alt: var(--dark-surface-alt);
    --color-row-hover: var(--dark-row-hover);
    --color-border: var(--dark-border);
    --color-text: var(--dark-text);
    --color-muted: var(--dark-muted);
    --color-primary: var(--dark-primary);
    --color-primary-dark: var(--dark-primary-dark);
    --color-primary-ink: var(--dark-primary-ink);
    --color-secondary-hover: var(--dark-secondary-hover);
    --color-success: var(--dark-success);
    --color-danger: var(--dark-danger);
    --color-danger-fill: var(--dark-danger-fill);
    --color-danger-fill-dark: var(--dark-danger-fill-dark);
    --color-warning: var(--dark-warning);
    --color-settled: var(--dark-settled);
    --color-reserved: var(--dark-reserved);
    --tint-success: var(--dark-tint-success);
    --tint-danger: var(--dark-tint-danger);
    --tint-warning: var(--dark-tint-warning);
    --tint-reserved: var(--dark-tint-reserved);
    --tint-settled: var(--dark-tint-settled);
    --tint-neutral: var(--dark-tint-neutral);
    --chart-grid: var(--dark-chart-grid);
    --chart-axis: var(--dark-chart-axis);
    --series-lodging: var(--dark-series-lodging);
    --series-sales: var(--dark-series-sales);
    --tooltip-bg: var(--dark-tooltip-bg);
    --tooltip-ink: var(--dark-tooltip-ink);
    --shadow-float: var(--dark-shadow-float);
    --shadow-sm: var(--dark-shadow-sm);
    --color-sidebar: var(--dark-sidebar);
    --color-sidebar-ink: var(--dark-sidebar-ink);
    --color-sidebar-ink-strong: var(--dark-sidebar-ink-strong);
    --color-sidebar-ink-muted: var(--dark-sidebar-ink-muted);
    --color-sidebar-hover: var(--dark-sidebar-hover);
    --color-sidebar-active: var(--dark-sidebar-active);
    --color-sidebar-divider: var(--dark-sidebar-divider);
    --color-sidebar-outline: var(--dark-sidebar-outline);
  }
}

/* E vale sempre que o usuário escolheu o escuro no menu, mesmo com o sistema
   no claro — a recepção de madrugada não deveria depender da configuração do
   computador do balcão. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: var(--dark-bg);
  --color-surface: var(--dark-surface);
  --color-surface-alt: var(--dark-surface-alt);
  --color-row-hover: var(--dark-row-hover);
  --color-border: var(--dark-border);
  --color-text: var(--dark-text);
  --color-muted: var(--dark-muted);
  --color-primary: var(--dark-primary);
  --color-primary-dark: var(--dark-primary-dark);
  --color-primary-ink: var(--dark-primary-ink);
  --color-secondary-hover: var(--dark-secondary-hover);
  --color-success: var(--dark-success);
  --color-danger: var(--dark-danger);
  --color-danger-fill: var(--dark-danger-fill);
  --color-danger-fill-dark: var(--dark-danger-fill-dark);
  --color-warning: var(--dark-warning);
  --color-settled: var(--dark-settled);
  --color-reserved: var(--dark-reserved);
  --tint-success: var(--dark-tint-success);
  --tint-danger: var(--dark-tint-danger);
  --tint-warning: var(--dark-tint-warning);
  --tint-reserved: var(--dark-tint-reserved);
  --tint-settled: var(--dark-tint-settled);
  --tint-neutral: var(--dark-tint-neutral);
  --chart-grid: var(--dark-chart-grid);
  --chart-axis: var(--dark-chart-axis);
  --series-lodging: var(--dark-series-lodging);
  --series-sales: var(--dark-series-sales);
  --tooltip-bg: var(--dark-tooltip-bg);
  --tooltip-ink: var(--dark-tooltip-ink);
  --shadow-float: var(--dark-shadow-float);
  --shadow-sm: var(--dark-shadow-sm);
  --color-sidebar: var(--dark-sidebar);
  --color-sidebar-ink: var(--dark-sidebar-ink);
  --color-sidebar-ink-strong: var(--dark-sidebar-ink-strong);
  --color-sidebar-ink-muted: var(--dark-sidebar-ink-muted);
  --color-sidebar-hover: var(--dark-sidebar-hover);
  --color-sidebar-active: var(--dark-sidebar-active);
  --color-sidebar-divider: var(--dark-sidebar-divider);
  --color-sidebar-outline: var(--dark-sidebar-outline);
}

* { box-sizing: border-box; }

/* O atributo `hidden` precisa vencer o `display` das nossas classes.
 *
 * O navegador esconde `[hidden]` com um `display: none` de folha de usuário,
 * que perde para QUALQUER regra nossa que declare display — e é isso que
 * mantinha na tela o botão escondido por `auto-filter.js`: `.btn` é
 * `display: inline-flex`, e ganhava. Sem `!important` o problema volta na
 * primeira regra mais específica (`.toolbar .btn` já bastaria), porque
 * `[hidden]` tem a especificidade de uma classe, não mais que isso.
 *
 * Vale para o projeto inteiro: `element.hidden = true` some com o elemento,
 * seja ele qual for. É o mesmo que normalize.css faz, e pelo mesmo motivo. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Em rem, e não em px: em px a página ignora quem aumentou a fonte no
     navegador; em rem os 15px continuam sendo o padrão, e a preferência de
     quem lê passa a valer por cima dele. */
  font-size: var(--text-base);
  /* O padrão do navegador é ~1,2, apertado para os parágrafos de explicação que
     existem em quase toda tela ("Sobre", relatórios, telas de confirmação). O
     recibo tem o seu, então a bobina não é afetada. */
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

/* Link em texto corrido. Sem uma regra aqui ele fica no azul e no roxo padrão
   do navegador — que no tema escuro dá 1,2:1 contra a superfície, e no claro
   não é nenhuma das cores do sistema. Quem já pinta link por classe (`.btn`,
   `.sidebar__link`, `.cell-link`) tem especificidade maior e continua mandando;
   basta a cor, porque declaração de autor vence a folha do navegador inclusive
   no `:visited`. */
a { color: var(--color-primary-ink); }
/* O sublinhado fica: cor não pode ser a única coisa que diz que é link. Some no
   hover, que é onde o ponteiro já confirma. */
a:hover { text-decoration: none; }

/* Títulos abaixo do h1 e régua. Hoje todo h2 e h3 do projeto usa
   `.panel__title`, mas sem estes o primeiro que nascer sem classe salta para o
   tamanho e a margem do navegador. O topo de h2 usa --space-5 (e não o
   --space-4 mais próximo, que colaria com o de h3) para preservar a margem
   maior que a de h3 — a hierarquia visual entre os dois se perderia se os
   dois colassem no mesmo degrau. */
h2 { font-size: var(--text-lg); margin: var(--space-5) 0 var(--space-2); }
h3 { font-size: var(--text-lg); margin: var(--space-4) 0 var(--space-2); }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--gap) 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px var(--space-4);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.skip-link:focus { left: 0; }

/* Foco sempre visível: o teclado é o caminho de quem opera rápido no balcão. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  /* Tinta, não preenchimento: o anel corre por cima da página e do menu, e no
     escuro a primária de preenchimento daria 3,5:1 contra o fundo. */
  outline: 2px solid var(--color-primary-ink);
  outline-offset: 2px;
}

/* --- 2. Sidebar ---------------------------------------------------------- */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  background: var(--color-sidebar);
  color: var(--color-sidebar-ink);
  z-index: 40;
  transition: width 0.18s ease, transform 0.22s ease;
}

.sidebar__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3) var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-sidebar-divider);
  min-height: var(--mobile-bar-height);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  /* 10px aparece dezenas de vezes no projeto — entre --space-2 (8px) e
     --space-3 (12px) — como o respiro padrão entre ícone e texto, e em boa
     parte dos paddings de botão, célula e toast. Não virou token pela mesma
     razão de --gap ter ficado sozinho como alias de --space-4: colar para
     qualquer lado mudaria a densidade de quase toda tela ao mesmo tempo, e
     aqui o valor é deliberado, não um acidente de quem não tinha token à
     mão. Fica literal onde aparece; este comentário não se repete a cada
     ocorrência. */
  gap: 10px;
  flex: 1;
  min-width: 0;
  color: var(--color-sidebar-ink-strong);
  font-size: var(--text-lg);
  font-weight: 700;
  text-decoration: none;
}
.sidebar__brand .bi { font-size: var(--text-xl); flex-shrink: 0; }
.sidebar__brand-text { white-space: nowrap; overflow: hidden; }

.sidebar__collapse,
.sidebar__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-sidebar-ink);
  font-size: var(--text-base);
  cursor: pointer;
}
.sidebar__collapse:hover,
.sidebar__close:hover { background: var(--color-sidebar-hover); color: var(--color-sidebar-ink-strong); }

/* O X só existe na gaveta; a seta de recolher, só na coluna. */
.sidebar__close { display: none; }

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0 var(--space-4);
}

.sidebar__section {
  margin: var(--space-4) var(--space-4) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sidebar-ink-muted);
  white-space: nowrap;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  min-height: var(--touch-target);
  color: var(--color-sidebar-ink);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.sidebar__link .bi { font-size: var(--text-lg); width: 20px; flex-shrink: 0; text-align: center; }
.sidebar__link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__link:hover { background: var(--color-sidebar-hover); color: var(--color-sidebar-ink-strong); }

.sidebar__link.is-active {
  background: var(--color-sidebar-active);
  border-left-color: var(--color-sidebar-ink-strong);
  color: var(--color-sidebar-ink-strong);
  font-weight: 600;
}

.sidebar__footer {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-sidebar-divider);
}

.sidebar__user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sidebar__user .bi { font-size: var(--text-2xl); flex-shrink: 0; }
.sidebar__user-info { display: flex; flex-direction: column; min-width: 0; }
.sidebar__user-name {
  font-weight: 600;
  color: var(--color-sidebar-ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar__user-role { font-size: var(--text-xs); color: var(--color-sidebar-ink-muted); }

.sidebar__logout {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-sidebar-outline);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-sidebar-ink);
  font: inherit;
  cursor: pointer;
  /* O rodapé tem botão (tema, sair) e link (minha senha). Sem isto o link sai
     sublinhado no meio de dois botões que não são. */
  text-decoration: none;
}
.sidebar__logout:hover { background: var(--color-sidebar-hover); color: var(--color-sidebar-ink-strong); }
.sidebar__logout .bi { font-size: var(--text-lg); width: 20px; text-align: center; }

/* Sem tema escolhido, o menu leva os dois botões e mostra o que vai para o
   lado OPOSTO ao do sistema operacional — é o único que muda alguma coisa ao
   clicar. `display: none`, e não recorte visual: o botão escondido também sai
   da ordem de tabulação e do leitor de tela. Com tema escolhido o servidor já
   manda um botão só, sem estas classes. */
.theme-toggle--to-light { display: none; }
@media (prefers-color-scheme: dark) {
  .theme-toggle--to-dark { display: none; }
  .theme-toggle--to-light { display: flex; }
}

/* Modo recolhido: só os ícones. O rótulo deixa de sair do DOM e passa a usar
   o mesmo recorte de `.visually-hidden` — ele some da tela sem sumir do nome
   acessível do link, que passa a ser lido pelo texto escondido (o `title`
   deixou de ser a única fonte). */
.sidebar-is-collapsed .sidebar {
  width: var(--sidebar-width-collapsed);
}
.sidebar-is-collapsed .sidebar__brand-text,
.sidebar-is-collapsed .sidebar__link span,
.sidebar-is-collapsed .sidebar__logout span,
.sidebar-is-collapsed .sidebar__user-info {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Recolhido, o rótulo da seção não cabe — mas some junto com ele a separação
   entre "Operação" e "Gestão", e a lista vira uma pilha só de ícones. O rótulo
   vira o divisor que mantém os dois grupos legíveis. */
.sidebar-is-collapsed .sidebar__section {
  height: 0;
  margin: 10px var(--space-3);
  padding: 0;
  overflow: hidden;
  border-top: 1px solid var(--color-sidebar-divider);
}
.sidebar-is-collapsed .sidebar__header { justify-content: center; padding: var(--space-4) var(--space-2); }
/* O logo sai e o botao fica: recolhido, ele e o unico caminho de volta. A seta
   inverte para anunciar que agora expande. */
.sidebar-is-collapsed .sidebar__brand { display: none; }
.sidebar-is-collapsed .sidebar__collapse .bi { transform: rotate(180deg); }
.sidebar-is-collapsed .sidebar__link,
.sidebar-is-collapsed .sidebar__logout { justify-content: center; padding: 0; gap: 0; }
.sidebar-is-collapsed .sidebar__user { justify-content: center; }
.sidebar-is-collapsed .sidebar__footer { padding: var(--space-3) var(--space-2) var(--space-4); }

/* --- 3. Barra mobile e sobreposição -------------------------------------- */

/* As duas só existem abaixo do breakpoint; aqui ficam desligadas. */
.mobile-bar { display: none; }
.sidebar-overlay { display: none; }

/* --- 4. Área de conteúdo -------------------------------------------------- */

.page {
  max-width: 1100px;
  margin: var(--space-5) auto;
  padding: 0 var(--space-5);
}

.has-sidebar .page {
  margin-left: var(--sidebar-width);
  margin-right: 0;
  max-width: calc(1100px + var(--sidebar-width));
  transition: margin-left 0.18s ease;
}
.sidebar-is-collapsed.has-sidebar .page {
  margin-left: var(--sidebar-width-collapsed);
}

/* `<h1>` sem classe continua existindo: é o da tela de login e o das páginas
   de erro, que não têm menu atrás e por isso não têm de que ser etiquetadas. */
h1 { font-size: var(--text-xl); margin: 0 0 var(--space-1); }

/* --- Cabeçalho de tela ----------------------------------------------------
 *
 * Três peças com papéis distintos: a ETIQUETA diz onde a pessoa está no menu,
 * o TÍTULO diz o que ela abriu, e o SUBTÍTULO explica a regra da tela quando
 * ela não é evidente. Antes o `<h1>` sozinho respondia pelos três, e telas
 * irmãs — "Entrada de estoque", "Saída de estoque", "Ajuste de inventário" —
 * ficavam indistinguíveis de relance, que é como a recepção lê.
 *
 * A marcação vem de `partials/_page_header.html`; o comentário de lá explica
 * o que entra em cada parâmetro.
 */
.page-header { margin: 0 0 var(--space-5); }

/* Trilha de navegação. Ocupa o lugar da antiga etiqueta, que dizia o mesmo
   passo anterior como texto morto: aqui cada passo é link, e quem abriu a
   conta de um quarto volta às ocupações sem procurar o item no menu.

   Ela QUEBRA em vez de rolar. Uma trilha de quatro passos com número de
   quarto não cabe na largura do telefone, e barra de rolagem própria dentro
   do cabeçalho esconde justamente o começo do caminho — que é a parte que
   leva de volta. */
.breadcrumb { margin-bottom: var(--space-3); }

.breadcrumb__trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.breadcrumb__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
}

/* A barra é gerada pelo CSS, e não escrita na marcação: a lista ordenada já
   estrutura a sequência, e um <span> com "/" no HTML seria só mais um
   elemento para o leitor de tela anunciar entre um passo e outro. */
.breadcrumb__step + .breadcrumb__step::before {
  content: "/";
  color: var(--color-border);
}

.breadcrumb__link {
  color: var(--color-muted);
  text-decoration: none;
}
.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
  color: var(--color-primary-ink);
  text-decoration: underline;
}

/* O passo atual não é link — a pessoa já está nele. O que o separa dos
   anteriores é a tinta cheia e o peso, não uma cor nova: ele repete o título
   logo abaixo, e chamar mais atenção que o próprio título seria inverter a
   hierarquia da tela. */
.breadcrumb__step--current {
  color: var(--color-text);
  font-weight: 600;
}

/* A barra de acento é do CSS, e não da marcação: ela não informa nada que o
   título já não diga, e um <span> vazio no HTML só existiria para ser pintado
   — leitor de tela anunciaria um elemento a mais sem conteúdo nenhum.
   `align-self: stretch` a faz acompanhar o título que quebra em duas linhas;
   o `min-height` é o piso para quando o título couber numa só. */
.page-header__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-2xl);
  line-height: 1.25;
}
.page-header__title::before {
  content: "";
  flex-shrink: 0;
  align-self: stretch;
  width: 4px;
  min-height: 1.1em;
  border-radius: var(--radius-pill);
  background: var(--color-primary-ink);
}

/* Subtítulo: a frase que explica a regra da tela. Itálico para se separar do
   título sem gastar mais um tamanho de fonte, e limitado a 70ch — a medida em
   que o olho ainda acha o começo da linha seguinte. A tabela ou a grade abaixo
   continuam ocupando a largura inteira; o limite é só do texto corrido. */
.page-subtitle {
  margin: var(--space-3) 0 var(--space-5);
  max-width: 70ch;
  color: var(--color-muted);
  font-style: italic;
}

/* O subtítulo pertence ao cabeçalho mesmo estando fora dele na marcação (o
   comentário do partial explica por quê), e a margem tem de refletir isso: o
   espaço até o CONTEÚDO passa a ser carregado por ele, e quem vem antes recolhe
   o seu. Sem isto o subtítulo caía 36px abaixo do título — mais longe dele do
   que do painel que explica.

   Os três casos são os que existem: o cabeçalho solto, o cabeçalho dentro da
   barra de ferramentas, e a tela que precisa de dois parágrafos (as
   configurações). Onde `:has()` não existir, o subtítulo apenas fica um degrau
   mais longe do título; nada quebra. */
.page-header:has(+ .page-subtitle),
.toolbar:has(+ .page-subtitle),
.page-subtitle:has(+ .page-subtitle) { margin-bottom: 0; }

/* --- 5. Painéis, cartões e tabelas --------------------------------------- */

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  /* Os 20px de antes eram um valor fora da escala, herdado de quando não
     havia escala: ele ficava entre --space-4 e --space-5 sem que ninguém
     tivesse decidido a densidade: colar num dos dois teria mudado a cara de
     toda tela como efeito colateral de uma migração de tokens.

     Agora a decisão é deliberada e é --space-5 nos dois eixos: 24px dentro do
     painel e 24px até o próximo. O que se ganha é o painel deixar de encostar
     no seguinte — com 16px entre eles e 20px dentro, o vão externo era MENOR
     que o interno, e dois painéis seguidos liam como um só, dividido por um
     risco. O mobile continua em --space-4: lá a largura é que é escassa. */
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  /* Sombra rasa: no tema escuro a superfície do painel contra o fundo vale
     1,15:1, e só a borda de 1px separava o painel do resto da página. A
     sombra reforça essa separação sem competir com a de quem FLUTUA sobre a
     página (`--shadow-float`, do toast). Só aqui: gastar sombra também em
     `.card`, `.room-card` e tabela achataria a hierarquia — o painel é o
     único nível que precisa dela. */
  box-shadow: var(--shadow-sm);
}
.panel--message { max-width: 520px; margin: 60px auto; text-align: center; }
.panel__title { margin: 0 0 var(--space-4); font-size: var(--text-lg); }

.card-grid {
  display: grid;
  /* auto-fit, não auto-fill: com auto-fill o navegador cria todas as trilhas
     que couberem e as vazias continuam ocupando espaço, espremendo os cartões
     que existem — era o que fazia "R$" cair sozinho numa linha. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--gap);
}
/* Cartão de indicador (o número do painel, do faturamento e do total da conta).
 *
 * O fundo é a superfície SECUNDÁRIA, e não a primária: metade dos cartões mora
 * dentro de um `.panel`, e ali um cartão branco sobre painel branco só existia
 * pela moldura de 1px. Com o tom secundário ele se separa nos dois lugares —
 * dentro do painel e solto sobre a página.
 */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
/* Valor nunca quebra no meio: "R$" numa linha e o número na outra lê como
   defeito. Se não couber, o cartão cresce. Dígito de largura fixa porque os
   cartões ficam lado a lado e os valores se comparam na vertical. */
.card__value {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Mesma tipografia do rótulo de `.detail-grid` e do cabeçalho de tabela: é o
   mesmo papel nas três — dizer de que é o número que está do lado. */
.card__label {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.35;
}

/* Variante de ATENÇÃO do cartão indicador: o saldo em aberto de uma conta.
 *
 * A cor não é a única marca — o rótulo abaixo do número já diz "Em aberto",
 * como manda a regra que vale para o gráfico de faturamento. Ela existe para o
 * número saltar numa tela em que os cartões são todos iguais, que é a da
 * recepção decidindo se pode encerrar a ocupação.
 *
 * `--color-warning` é tinta, não preenchimento: pintar o fundo inteiro exigiria
 * um par novo de cores validado contra os dois temas, e o que se precisa aqui é
 * de destaque, não de alarme.
 */
.card--warning {
  border-color: var(--color-warning);
}
.card--warning .card__value {
  color: var(--color-warning);
}

/* Variante do cartão indicador como link inteiro: o cartão de atalho abre uma
   tela ao ser clicado em qualquer ponto, não só num texto dentro dele. */
a.card {
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
a.card:hover,
a.card:focus-visible {
  border-color: var(--color-primary-ink);
  transform: translateY(-1px);
}
/* "Ver quartos" e o ícone que o segue: pista de que o cartão inteiro é
   clicável, sem depender só do cursor virar ponteiro. */
.card__go {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary-ink);
}

/* A rolagem fica no contêiner: o corpo da página nunca rola na horizontal. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th, td {
  padding: 10px var(--space-3);
  text-align: left;
  /* Alinhado ao meio, e não pela linha de base: quase toda tabela do sistema
     tem uma célula com botão, e pela base o texto das outras subia com ele. */
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}
/* O cabeçalho diz de que é a coluna; quem se lê é o dado. Por isso ele fica no
   cinza secundário e ganha um risco de 2px — a faixa sozinha não separava o
   cabeçalho do corpo, e a primeira linha de dados encostava nele. */
thead th {
  background: var(--color-surface-alt);
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border-bottom: 2px solid var(--color-border);
}
/* A última linha não leva risco: embaixo dela já vem a borda do painel, e as
   duas juntas viram um traço duplo. */
tbody tr:last-child > td { border-bottom: 0; }
tbody tr:hover { background: var(--color-row-hover); }
/* Rodapé de totais: a linha que se procura primeiro na tela e no papel. */
tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--color-border);
  border-bottom: 0;
}
/* Dígito de largura fixa: sem isto a coluna de dinheiro fica com as casas
   decimais desalinhadas de uma linha para a outra, e a conferência de um
   fechamento de turno passa a ser feita número a número. */
.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.cell-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Identificador que abre a ficha do registro. Fica no próprio número, e não
   como mais um botão em .cell-actions, porque aquela célula já carrega a linha
   de mudança de situação — e o número é o que a recepção procura na tela. */
.cell-link { color: var(--color-primary-ink); font-weight: 700; text-decoration: underline; }
.cell-link:hover { text-decoration: none; }

/* Pares rótulo-valor de um registro. Diferente de tabela: aqui cada item é um
   campo do MESMO objeto, e o rótulo precisa aparecer em qualquer largura. */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  /* Linha e coluna eram 14px e var(--gap) (16px) — perto o bastante para
     colar sem mudar nada visível; a migração para tokens os igualou. */
  gap: var(--gap);
  margin: 0;
}
.detail-grid__item { min-width: 0; }
.detail-grid dt {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-muted);
  margin-bottom: 2px;
}
.detail-grid dd { margin: 0; }

/* Pílulas de filtro — cada uma é um <a>, não um botão: navega para uma URL
   com o filtro aplicado, e "selecionado" é a própria rota, marcada por
   `aria-current="page"` — o mesmo atributo que a paginação usa para dizer
   "você está aqui". */
/* A margem inferior é da FILA, não da pílula: sem ela o filtro escolhido
   encostava na barra de busca logo abaixo, e as duas liam como um controle só
   de duas linhas. */
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
}
.filter-chip:hover { background: var(--color-secondary-hover); }
.filter-chip[aria-current="page"] {
  border-color: var(--color-primary-ink);
  background: var(--tint-settled);
  color: var(--color-settled);
  font-weight: 600;
}
/* A contagem dentro do chip é dígito, então tabular-nums pelo mesmo motivo de
   `.card__value`: ela muda de filtro para filtro e não pode balançar a
   largura da pílula ao lado. */
.filter-chip b { font-variant-numeric: tabular-nums; }

/* Campo de busca em linha. O ícone é decoração — quem nomeia o campo para
   leitor de tela é o <label> ou `aria-label` de verdade, não o glifo. */
.search-field { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.search-field .bi { color: var(--color-muted); flex-shrink: 0; }
.search-field input { flex: 1; min-width: 120px; }

/* Estado vazio de uma listagem ("nenhum quarto cadastrado ainda"). Vive
   dentro de um `.panel`, e o círculo do ícone usa o mesmo tom neutro do
   `.card`, para não parecer um alerta. */
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-muted);
  font-size: var(--text-xl);
}
.empty-state__title { margin: 0; font-weight: 600; }
.empty-state__text { margin: 0; max-width: 34ch; color: var(--color-muted); }

/* "Mostrando 41-60 de 1.238 registros": discreta de propósito — quem decide
   a página é o link ao lado, este texto só situa. */
.pagination__summary { font-size: var(--text-sm); color: var(--color-muted); }

/* --- 6. Formulários e botões --------------------------------------------- */

.field { margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.field label { font-weight: 600; font-size: var(--text-sm); }
/* Campo de texto. A caixa de seleção e o botão de rádio ficam FORA: quem os
   desenha é o navegador, e dar a eles o preenchimento, a moldura e o fundo de
   um campo de texto era o que os deixava tortos dentro do grupo de opções. O
   `hidden` sai junto por higiene — ele não tem caixa nenhuma. */
input:not(:where([type="checkbox"], [type="radio"], [type="hidden"])),
select,
textarea {
  /* A mesma altura do `.btn`. Na barra de filtro o campo fica ao lado do botão
     que o aplica, e 38px contra 44px deixava os dois desencontrados.
     O `:where()` existe para a exclusão não custar especificidade: sem ele a
     regra passaria a ganhar de classes como `.input--quantity`, que precisa ser
     mais baixa para caber na linha da tabela. */
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  /* 16px evita o zoom automático do iOS ao focar o campo — fica fora da
     escala tipográfica de propósito: o gatilho do iOS é o valor exato (abaixo
     de 16px ele aplica zoom), e --text-lg (18px) resolveria isso também, mas
     destoaria do resto do formulário sem necessidade nenhuma. */
  font-size: 16px;
  background: var(--color-surface);
  /* A tinta precisa ser DITA. Campo de formulário não herda `color` do body: o
     navegador usa `fieldtext`, que é preto. A paleta escurecia o fundo, a letra
     continuava preta, e o campo virava um retângulo ilegível a 1,3:1. */
  color: var(--color-text);
  max-width: 100%;
}
/* Lista suspensa: a seta passa a ser nossa.
 *
 * A do sistema operacional muda de desenho e de tamanho entre Windows, macOS e
 * Android, e é o que fazia o mesmo filtro parecer outro controle em cada
 * balcão. Ela é feita de dois gradientes — um "◥" e um "◤" lado a lado formam
 * o "v" — e não de uma imagem `data:`, porque a CSP do projeto é `self` e
 * abrir `img-src data:` por causa de uma seta sairia caro.
 *
 * `[multiple]` fica de fora: aquele não é uma lista suspensa, é uma caixa de
 * rolagem, e não tem seta nenhuma para substituir.
 */
select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-6);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) center, calc(100% - 14px) center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* O Firefox entrega o texto de exemplo com opacidade 0,54; a cor já é a de
   texto secundário, e o desconto em cima dela o empurraria para fora do AA. */
::placeholder { color: var(--color-muted); opacity: 1; }

/* Campo numérico sem as setinhas de incremento.
 *
 * As duas setas que o navegador cola na direita de um `type="number"` são um
 * alvo de 8px de largura em cima do valor — no balcão, com o dedo, quem mira o
 * fim do campo acaba somando um centavo à tarifa sem perceber. Elas também
 * mudam de desenho entre Chrome, Firefox e Safari, pelo mesmo motivo que a
 * seta do `select` acima virou nossa.
 *
 * Digitar continua sendo o caminho, e as setas do TECLADO seguem funcionando:
 * o que sai é o botãozinho, não o incremento.
 *
 * Precisa dos dois lados: `appearance: textfield` é o que resolve no Firefox,
 * e os pseudo-elementos `-webkit-*-spin-button` são o que resolvem nos
 * navegadores baseados em Chromium e no Safari.
 */
input[type="number"] {
  appearance: textfield;
  -webkit-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  /* A margem é do próprio botão; sem zerá-la sobra um vão à direita do valor. */
  margin: 0;
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--color-surface-alt);
  color: var(--color-muted);
  cursor: not-allowed;
}

/* Caixa de seleção e botão de rádio quem desenha é o navegador: `accent-color`
   é o que faz a marca deles seguir a cor do sistema, e não o azul padrão. O
   tamanho é maior que o de fábrica porque o alvo é o dedo, no balcão. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
}

/* Caixa única (um `BooleanField`, como "Ativo"): a marca vem ANTES do rótulo,
   na mesma linha. Empilhada — que é o desenho cru do Django dentro do `.field`
   em coluna —, ela fica sozinha embaixo e não diz a que pergunta responde. */
.field--check {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: var(--touch-target);
}
.field--check label { font-weight: 400; }
/* Ajuda e erro descem para a linha de baixo, alinhados com a caixa. */
.field--check .field__help,
.field--check .errorlist { flex-basis: 100%; }

/* Grupo de opções — `RadioSelect` e `CheckboxSelectMultiple`.
 *
 * É o pedaço mais cru que o Django entrega: <div>s aninhados sem classe
 * nenhuma, com o <input> DENTRO do <label>. O gancho é o rótulo e a <div> que
 * o Django põe em volta do grupo, nunca a profundidade do aninhamento, que
 * muda de uma versão do Django para outra.
 *
 * O elemento é um <fieldset> com <legend>, e não uma <div> com <label>: o
 * `for=` de um grupo aponta para a PRIMEIRA opção, e um leitor de tela anuncia
 * "Tipo" só naquela. É o que `field.field.widget.use_fieldset` pede.
 */
.field--choices {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  /* <fieldset> nasce com `min-width: min-content`, e é isso que faz um grupo
     largo estourar a coluna em vez de quebrar. */
  min-width: 0;
}
.field--choices legend { padding: 0; margin-bottom: var(--space-1); font-weight: 600; font-size: var(--text-sm); }
.field--choices > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px var(--space-4);
}
.field--choices > div label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* 32px, e não os 44 de `--touch-target`: aqui são muitas linhas seguidas (a
     lista de acessórios do quarto passa de dez), e 44 em cada uma faria a tela
     rolar sem necessidade. Continua acima dos 24px que a WCAG 2.2 pede para
     alvo apontável. */
  min-height: 32px;
  /* O rótulo aqui é o nome da OPÇÃO, não o do campo: sem isto herdaria o
     negrito da legenda e competiria com o rótulo do grupo. */
  font-weight: 400;
  font-size: var(--text-sm);
}
.field__help { color: var(--color-muted); font-size: var(--text-xs); }

/* Erro de campo. A marcação vem do próprio `{{ field.errors }}`: o Django já
   devolve a lista com o id para onde o `aria-describedby` do controle aponta, e
   remontá-la à mão era o que deixava essa referência apontando para nada. */
.errorlist {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-danger);
  font-size: var(--text-xs);
}
.errorlist li + li { margin-top: 2px; }
/* Erro que não é de nenhum campo ("a senha não confere", "o período está
   invertido"). Vira a MESMA caixa de `.message--error`: lista de marcadores
   vermelhos era o desenho cru do Django, e a recepção lê estado em caixa, não
   em bolinha. */
.form-errors {
  list-style: none;
  margin: 0 0 var(--gap);
  padding: 10px var(--space-4);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  background: var(--tint-danger);
  color: var(--color-danger);
}
.form-errors li + li { margin-top: var(--space-2); }
.form-actions { display: flex; gap: 10px; margin-top: var(--space-4); flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
/* Sem preenchimento, o rótulo e a moldura ficam por conta da TINTA primária: a
   primária de preenchimento daria 3,1:1 na superfície escura, e 2,4:1 com o
   ponteiro em cima. É o segundo botão mais usado do sistema. */
.btn--secondary { background: transparent; border-color: var(--color-primary-ink); color: var(--color-primary-ink); }
.btn--secondary:hover { background: var(--color-secondary-hover); border-color: var(--color-primary-ink); color: var(--color-primary-ink); }
.btn--small { min-height: 34px; padding: var(--space-1) 10px; font-size: var(--text-sm); }

/* Ação destrutiva CHEIA: só onde o clique já executa e não há segunda pergunta
   — a tela de confirmação do cancelamento e o sim do `.confirm`. */
.btn--danger {
  background: var(--color-danger-fill);
  border-color: var(--color-danger-fill);
  color: var(--color-on-primary);
}
.btn--danger:hover {
  background: var(--color-danger-fill-dark);
  border-color: var(--color-danger-fill-dark);
}

/* Ação destrutiva de CONTORNO: o estorno, que se repete linha a linha na
   tabela, e o caminho até a tela de cancelamento. Pintar de vermelho cheio
   também o que se repete é como o vermelho deixa de significar alguma coisa. */
.btn--danger-outline {
  background: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.btn--danger-outline:hover {
  background: var(--tint-danger);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* Vale para qualquer variante: o estado é do botão, não da caixa em que ele
   está. Subiu do `.confirm` do stay_open.css, que era o único que o tinha. */
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* --- 7. Mensagens, notificações e estados -------------------------------- */

/* Faixa fixa dentro da página ("3 produtos no estoque mínimo"). Descreve o
   ESTADO da tela, então não vira pop-up: fica ali enquanto for verdade. O que
   virou toast é o RESULTADO de uma ação, logo abaixo. */
.message { padding: 10px var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-2); border: 1px solid; }
.message--success { background: var(--tint-success); border-color: var(--color-success); color: var(--color-success); }
.message--error { background: var(--tint-danger); border-color: var(--color-danger); color: var(--color-danger); }
.message--info, .message--warning { background: var(--tint-warning); border-color: var(--color-warning); color: var(--color-warning); }

/* Notificação pop-up (toast) do django.contrib.messages.
 *
 * Sai do fluxo da página: a confirmação aparece por cima, some sozinha e não
 * empurra o conteúdo para baixo a cada ação. O HTML vem do servidor
 * (partials/_toasts.html); o toasts.js só fecha e conta o tempo. */
.toasts {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 60;   /* acima da gaveta (35) e da barra mobile (30) */
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  /* A coluna ocupa uma faixa inteira da tela; sem isto o espaço vazio entre um
     toast e outro roubaria o clique dos botões que ficam embaixo dela. */
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-muted);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
  /* Texto escuro sobre branco, cor só na borda e no ícone: por cima da página o
     toast concorre com o que está atrás dele, e a leitura não pode depender de
     distinguir o tom do fundo. */
  color: var(--color-text);
  animation: toast-in 0.18s ease-out;
}

.toast--success { border-left-color: var(--color-success); }
.toast--error { border-left-color: var(--color-danger); }
.toast--warning { border-left-color: var(--color-warning); }
.toast--info,
.toast--debug { border-left-color: var(--color-primary); }

.toast__icon { font-size: var(--text-lg); line-height: 1.4; }
.toast--success .toast__icon { color: var(--color-success); }
.toast--error .toast__icon { color: var(--color-danger); }
.toast--warning .toast__icon { color: var(--color-warning); }
.toast--info .toast__icon,
.toast--debug .toast__icon { color: var(--color-primary); }

.toast__text {
  flex: 1;
  margin: 0;
  align-self: center;
  /* Nome de produto ou de quarto sem espaço não pode estourar a largura fixa. */
  overflow-wrap: anywhere;
}

.toast__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-sm);
  cursor: pointer;
}
.toast__close:hover { background: var(--color-surface-alt); color: var(--color-text); }

/* Saída: a classe entra pelo JS, que remove o elemento no fim da transição. */
.toast.is-leaving {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}

/* Só existe dentro da barra mobile, sobre o fundo do menu. */
.badge {
  background: var(--color-sidebar-active);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: var(--text-xs);
  white-space: nowrap;
}

.status { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; }
.status--available { background: var(--tint-success); color: var(--color-success); }
.status--reserved { background: var(--tint-reserved); color: var(--color-reserved); }
.status--occupied { background: var(--tint-danger); color: var(--color-danger); }
.status--cleaning { background: var(--tint-warning); color: var(--color-warning); }
/* Conta fechada: o hóspede ainda está no quarto, mas o valor já está apurado.
   Fica em azul, e não no vermelho de "ocupado" nem no verde de "encerrada",
   porque é um terceiro estado — pintá-lo como um dos dois faria a recepção ler
   errado de relance, que é justamente como o painel é lido. */
.status--settled { background: var(--tint-settled); color: var(--color-settled); }
.status--maintenance { background: var(--tint-neutral); color: var(--color-muted); }

.is-low { color: var(--color-danger); font-weight: 700; }
/* O saldo em aberto numa linha de tabela: a mesma tinta de `.card--warning`,
   sobre a mesma superfície, e pelo mesmo motivo — destaque, não alarme. O
   valor em si já diz que há saldo; a cor faz a linha saltar numa lista em que
   quase todas mostram R$ 0,00. */
.is-owing { color: var(--color-warning); font-weight: 700; }
.muted { color: var(--color-muted); }

/* Visível só para leitor de tela. Existe para o rótulo de campo que a tela não
   precisa mostrar — numa tabela, a coluna já diz o que o campo é, mas sem
   <label> o campo fica sem nome para quem navega por teclado e leitor. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Mesmo recorte de `.sr-only`, com outro nome para o outro motivo de uso: o
   rótulo próprio SOME da tela por uma mudança de estado (o menu recolhido, um
   ícone que passa a bastar sozinho), e não porque o campo nunca teve rótulo
   visível. É o que faz o nome acessível do link sobreviver ao recolhimento da
   sidebar sem depender só do `title`. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}
.warning-text { color: var(--color-warning); font-size: var(--text-sm); }

.toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--space-5); }
/* O cabeçalho de tela ocupa a barra sempre que ela existe — a lista com botão
   de cadastrar, a ficha com a tarja de situação ao lado do título. A margem
   inferior dele sai porque ali quem espaça é a própria barra: somadas, as duas
   abriam entre o título e o conteúdo um vão do tamanho de um painel. */
.toolbar h1,
.toolbar .page-header { margin-right: auto; margin-bottom: 0; }
.toolbar .field { margin-bottom: 0; }
.inline-form { display: inline; }

.login-page { max-width: 380px; margin: 80px auto; }
.login-page h1 { text-align: center; margin-top: 0; }
/* O cartão de login tem uma ação só, e centralizada ela acompanha o título. Nas
   demais telas o botão segue alinhado à esquerda, no início dos campos. */
.login-page .form-actions { justify-content: center; }

/* --- Diálogo de confirmação -------------------------------------------------
 *
 * Duas caixas usam este bloco: a que confirma o VALOR antes de a ocupação abrir
 * (stay_form.html) e a que confirma um ESTORNO (partials/_confirm_action.html).
 * Subiu do stay_open.css quando ganhou o segundo uso — a regra do CLAUDE.md é
 * essa: o que se repete em duas telas mora aqui.
 *
 * O navegador centraliza o <dialog> modal sozinho; daqui saem só a largura, a
 * moldura e as cores, que são as mesmas do painel — a confirmação não pode
 * parecer outra aplicação.
 */
.confirm {
  max-width: 480px;
  width: calc(100% - 2 * var(--gap));
  /* O padding e o raio acompanham o `.panel`: o diálogo imita o painel, e nos
     20px de antes ele ficava com o peso visual de outra coisa. */
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
}

/* O fundo escurecido existe para dizer que o resto da tela está suspenso. Preto
   com alfa, e não um cinza fixo, para servir aos dois temas. */
.confirm::backdrop { background: rgba(0, 0, 0, 0.45); }

.confirm__title { margin: 0 0 var(--gap); font-size: var(--text-lg); }

/* O que vai acontecer, em tamanho de leitura: no diálogo de estorno este
   parágrafo é o conteúdo da caixa, não um rodapé dela — por isso não é o
   `.confirm__note`, que é menor e serve de ressalva. */
.confirm__text { margin: 0; line-height: 1.5; }

.confirm__note { margin: 0; font-size: var(--text-sm); line-height: 1.5; }

.confirm__warning { margin: var(--gap) 0 0; font-size: var(--text-sm); line-height: 1.5; }

/* --- 8. Breakpoints ------------------------------------------------------- */

/* Abaixo de 900px a coluna fixa vira gaveta. O valor está repetido em
   sidebar.js (DESKTOP_MIN_WIDTH) — os dois precisam mudar juntos. A lista
   completa dos dois breakpoints do projeto está no bloco de comentário no
   topo deste arquivo. */
@media (max-width: 899px) {

  .mobile-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--mobile-bar-height);
    padding: 0 var(--space-3);
    background: var(--color-sidebar);
    color: var(--color-sidebar-ink-strong);
  }
  .mobile-bar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target);
    height: var(--touch-target);
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-sidebar-ink-strong);
    font-size: var(--text-xl);
    cursor: pointer;
  }
  .mobile-bar__toggle:hover { background: var(--color-sidebar-hover); }
  .mobile-bar__title { flex: 1; font-weight: 700; font-size: var(--text-lg); }

  /* A gaveta fica fora da tela até ser aberta. `transform` em vez de
     `display`, para a transição existir e o conteúdo continuar no DOM. */
  .sidebar {
    width: min(280px, 85vw);
    transform: translateX(-100%);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
  }
  .sidebar-is-open .sidebar { transform: translateX(0); }

  .sidebar__close { display: flex; }
  .sidebar__collapse { display: none; }

  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(0, 0, 0, 0.45);
  }
  /* Quem desliga o fundo escuro é o `[hidden]` global da seção 1; aqui só se
     desenha o que ele mostra quando a gaveta abre. */

  /* Tela estreita não comporta uma coluna de 380px ao lado do conteúdo: o
     toast ocupa a largura inteira, abaixo da barra do menu — ela é sticky,
     então um pop-up em top: 8px cairia por cima dela. */
  .toasts {
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
  }
  .has-sidebar .toasts { top: calc(var(--mobile-bar-height) + 8px); }

  /* No mobile o menu é sobreposto: o conteúdo ocupa a largura toda, e o
     estado "recolhido" do desktop não vale aqui. */
  .has-sidebar .page,
  .sidebar-is-collapsed.has-sidebar .page {
    margin-left: 0;
    margin-top: var(--space-4);
    max-width: 100%;
  }
  .sidebar-is-collapsed .sidebar { width: min(280px, 85vw); }
  /* Desfaz o recorte de `.visually-hidden` que o modo recolhido aplica no
     desktop: no mobile a gaveta sempre mostra o rótulo por extenso, mesmo
     que a preferência "recolhido" tenha sobrevivido no localStorage. */
  .sidebar-is-collapsed .sidebar__brand-text,
  .sidebar-is-collapsed .sidebar__link span,
  .sidebar-is-collapsed .sidebar__logout span,
  .sidebar-is-collapsed .sidebar__user-info {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    border: 0;
  }
  .sidebar-is-collapsed .sidebar__section { display: revert; }
  .sidebar-is-collapsed .sidebar__link,
  .sidebar-is-collapsed .sidebar__logout { justify-content: flex-start; padding: 0 var(--space-4); gap: var(--space-3); }
  .sidebar-is-collapsed .sidebar__header { justify-content: space-between; padding: var(--space-4) var(--space-3) var(--space-4) var(--space-4); }
  .sidebar-is-collapsed .sidebar__brand { display: flex; }

  .page { padding: 0 var(--space-4); }
  .panel { padding: var(--space-4); }
  h1 { font-size: var(--text-xl); }
  /* Um degrau abaixo do desktop: em 26px o título de tela mais longo do
     sistema ("Cadastrar modelo de quarto") ocupava três linhas no telefone. */
  .page-header__title { font-size: var(--text-xl); }

  /* Botão da barra de ferramentas ocupa a linha inteira: alvo confortável e
     sem botões espremidos lado a lado. */
  .toolbar { align-items: stretch; }
  .toolbar h1,
  .toolbar .page-header { margin-right: 0; }
  .toolbar > .btn { width: 100%; }
  .toolbar .field { width: 100%; }
  .form-actions .btn { flex: 1; }
}

/* Telas estreitas: a tabela vira lista de cartões.
 *
 * Rolagem lateral funciona, mas na recepção o quarto é consultado e alterado no
 * telefone, com uma mão — e ali a linha com sete colunas obriga a arrastar para
 * achar o botão. Cada célula passa a mostrar o próprio rótulo, lido do
 * data-label do <td>. */
@media (max-width: 640px) {

  .table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  .table--cards tr {
    display: block;
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-1) var(--space-3);
  }
  .table--cards tr:hover { background: var(--color-surface); }

  .table--cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    text-align: right;
    border-bottom: 1px solid var(--color-surface-alt);
  }
  /* No modo cartão cada <tr> é um cartão e cada <td> é uma linha dele: aqui o
     risco da última LINHA da tabela volta, e quem perde o dele é a última
     célula de cada cartão. */
  .table--cards tr:last-child > td { border-bottom: 1px solid var(--color-surface-alt); }
  .table--cards td:last-child { border-bottom: none; }

  .table--cards td::before {
    content: attr(data-label);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-muted);
    text-align: left;
    flex-shrink: 0;
  }
  /* Célula sem rótulo (ações, colunas vazias) ocupa a linha inteira. */
  .table--cards td:not([data-label])::before { content: none; }
  .table--cards td.cell-actions { flex-direction: column; align-items: stretch; }
  .table--cards td.cell-actions .btn,
  .table--cards td.cell-actions .inline-form { width: 100%; }
  .table--cards td.cell-actions .inline-form .btn { width: 100%; }

  /* "Nenhum registro": não é linha de dados, então não vira cartão. */
  .table--cards td[colspan] { display: block; text-align: center; }
  .table--cards td[colspan]::before { content: none; }

  .card-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); }
  .card { padding: var(--space-3); }
  .card__value { font-size: var(--text-xl); }
}

/* Quem prefere menos animação não recebe as transições do menu. */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .has-sidebar .page,
  a.card { transition: none; }

  /* O toasts.js remove o elemento por tempo, nunca por transitionend, então
     desligar a animação aqui não deixa nenhum toast preso na tela. */
  .toast { animation: none; }
  .toast.is-leaving { transition: none; }
}

/* --- 9. Impressão --------------------------------------------------------- */

/* O papel é branco, sempre. O tema escuro não pode atravessar a impressora:
   tinta clara sobre papel branco não aparece, e o recibo do hóspede ou o
   relatório do turno sairiam em branco sem ninguém entender por quê.
 *
 * Por isso a paleta CLARA é reimposta aqui — e os três seletores do tema
 * precisam estar todos na lista, senão o escolhido no menu (que tem
 * especificidade maior que `:root`) continuaria valendo no papel. */
@media print {
  :root,
  :root[data-theme="dark"],
  :root:not([data-theme="light"]) {
    color-scheme: light;

    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-alt: #ffffff;
    --color-row-hover: #ffffff;
    --color-border: #999999;
    --color-text: #000000;
    --color-muted: #444444;
    --color-primary: #1f4e79;
    --color-primary-ink: #1f4e79;
    --color-success: #1b7f4c;
    --color-danger: #b02a37;
    --color-danger-fill: #b02a37;
    --color-danger-fill-dark: #8f2531;
    --color-warning: #7a5200;
    --color-settled: #1b4f8f;
    --color-reserved: #4c3095;
    --tint-success: #ffffff;
    --tint-danger: #ffffff;
    --tint-warning: #ffffff;
    --tint-reserved: #ffffff;
    --tint-settled: #ffffff;
    --tint-neutral: #ffffff;
    --chart-grid: #cccccc;
    --chart-axis: #444444;
    /* O menu só some no papel nos relatórios (report.css); nas demais telas ele
       ainda é impresso, e sem estes quatro sairia no navy escuro do tema. */
    --color-sidebar: #1f4e79;
    --color-sidebar-ink: #dce6f1;
    --color-sidebar-ink-strong: #ffffff;
    --color-sidebar-ink-muted: #bcd0e6;
  }

  /* A tarja de situação perde o fundo no papel, mas não pode perder a
     identidade: fica com contorno, e o rótulo escrito continua lá. */
  .status { border: 1px solid currentColor; }

  /* A trilha leva de volta pelo MENU, que a folha não tem; a barra de acento é
     adorno que gastaria tinta. O título fica — é ele que diz de que é a
     folha. */
  .breadcrumb { display: none; }
  .page-header__title::before { display: none; }
}