/* ============================================================
   DUCANTU VIDEOKÊ — ESTILOS
   Só consome variáveis de variables.css (nada de cor/fonte solta).
   Mobile-first: estilos partem do celular e crescem com min-width.

   Princípios de acessibilidade (público com muitos idosos):
   - texto nunca abaixo de 16px; texto comum 18px;
   - toda área clicável com no mínimo --touch-min de altura;
   - ícone sempre acompanhado de texto;
   - estado nunca indicado só por cor (fundo, borda ou texto juntos);
   - foco do teclado sempre visível.
   ============================================================ */

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Âncoras (#fila, #cat-...) não ficam escondidas atrás do cabeçalho */
  scroll-padding-top: calc(var(--header-height) + var(--space-md));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  min-height: 100dvh;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

ul {
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: var(--lh-tight);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---- Ícones SVG (traço na cor do texto — trocar cor = trocar color) ---- */
.icon {
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container--wide {
  max-width: var(--max-width-wide);
}

/* Espaço embaixo pra o conteúdo não ficar atrás do menu fixo */
main {
  padding-bottom: calc(var(--bottom-nav-height) + var(--space-lg) + env(safe-area-inset-bottom));
}

.section {
  padding-block: var(--space-xl);
}

.section + .section {
  padding-top: 0;
}

.section__title {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-xs);
}

.section__subtitle {
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

/* ---- Cabeçalho (só a logo — navegação mora no menu de baixo) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-inline: var(--space-md);
}

.site-header__logo {
  height: 38px;
  width: auto;
}

/* Botão "Avisos" (notificação da fila). Estado pelo ícone (sino /
   sino cortado) E pela cor/borda — nunca só cor. */
.avisos-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 42px;
  padding: 0 var(--space-sm);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.avisos-btn .icon {
  width: 24px;
  height: 24px;
}

.avisos-btn:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

.avisos-btn__on { display: none; }
.avisos-btn.is-on .avisos-btn__on { display: block; }
.avisos-btn.is-on .avisos-btn__off { display: none; }

.avisos-btn.is-on {
  border-color: var(--color-success);
  color: var(--color-success-text);
}

/* Janela de liga/desliga dos avisos */
.avisos-dialog {
  width: calc(100% - 2 * var(--space-md));
  max-width: 440px;
  margin: auto;
  padding: var(--space-lg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text);
}

.avisos-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.avisos-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.75);
}

.avisos-dialog__title {
  font-size: var(--fs-xl);
}

.avisos-status {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-strong);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.avisos-status::before {
  content: '';
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
}

.avisos-status.is-on {
  background-color: var(--color-success-soft);
  color: var(--color-success-text);
}

.avisos-status.is-on::before {
  background-color: currentColor;
}

/* ---- Menu fixo embaixo ----
   Sempre visível, ao alcance do polegar. Cada item tem ícone + texto.
   Página atual: aria-current="page" no HTML — o CSS destaca com fundo
   E com cor (quem não distingue bem cor ainda vê o bloco destacado). */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border-strong);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: var(--max-width);
  margin-inline: auto;
  height: var(--bottom-nav-height);
  padding: var(--space-xs) var(--space-2xs);
  gap: var(--space-2xs);
}

.bottom-nav__link {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--fs-nav);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.bottom-nav__link .icon {
  width: 24px;
  height: 24px;
}

.bottom-nav__link:hover {
  color: var(--color-text);
}

.bottom-nav__link[aria-current="page"] {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-text);
}

/* Todos os itens são iguais de propósito: um item com destaque fixo
   (já tivemos "Cantar" sempre vermelho) confundia qual página estava
   aberta. A ação principal fica destacada dentro das páginas. */

/* ---- Botões ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--touch-min);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--primary:hover {
  background-color: var(--color-primary-hover);
}

.btn--outline {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn--outline:hover {
  border-color: var(--color-text);
}

.btn--success {
  background-color: var(--color-success);
  color: #0b1f14;
}

.btn--danger,
.btn--outline.btn--danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background-color: transparent;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* Botão da ação principal da tela — um só por tela */
.btn--big {
  min-height: var(--touch-big);
  font-size: var(--fs-lg);
  border-radius: var(--radius-lg);
}

.btn--big .icon {
  width: 32px;
  height: 32px;
}

.btn--sm {
  min-height: 44px;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--fs-sm);
}

/* ---- Cartões ---- */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

/* Linha de informação clicável: ícone + texto + seta (Home, Sobre) */
.info-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--touch-min);
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.info-row + .info-row {
  margin-top: var(--space-sm);
}

.info-row > .icon {
  width: 32px;
  height: 32px;
  color: var(--color-primary-text);
}

.info-row__text {
  flex: 1;
  min-width: 0;
}

.info-row__label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.info-row__value {
  display: block;
  font-weight: 700;
}

.info-row__arrow {
  width: 24px;
  height: 24px;
  color: var(--color-text-muted);
}

a.info-row:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface-alt);
}

.info-row--highlight {
  background-color: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-on-soft);
}

.info-row--highlight > .icon {
  color: var(--color-on-soft);
}

/* ---- Topo com foto (Home e páginas internas) ---- */
.photo-hero {
  position: relative;
  min-height: 190px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-color: var(--color-surface);
}

/* Escurece a foto de baixo pra cima pra o texto ficar sempre legível */
.photo-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20, 18, 18, 0.25) 0%, rgba(20, 18, 18, 0.75) 55%, var(--color-bg) 100%);
}

.photo-hero__content {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-lg) var(--space-md) var(--space-md);
}

.photo-hero__title {
  font-size: var(--fs-2xl);
}

.photo-hero__text {
  font-size: var(--fs-lg);
  color: var(--color-text);
  margin-top: var(--space-xs);
}

/* Início: a foto da fachada cobre boa parte da primeira tela (pedido
   do Paulo em 09/10/2026 — o resto do site ficou compacto, a capa não). */
.photo-hero--home {
  min-height: 70vh;
  min-height: 70svh;
}

.photo-hero--home .photo-hero__title {
  font-size: clamp(2.25rem, 9vw, 3.25rem);
}

.tagline {
  display: inline-block;
  margin-top: var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-primary-text);
}

/* ---- Home ---- */
.home-cta {
  margin-top: var(--space-lg);
}

.home-cta__hint {
  text-align: center;
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

.today-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-full);
  background-color: var(--color-success-soft);
  color: var(--color-success-text);
  font-weight: 700;
}

.today-status::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: currentColor;
}

/* ---- Passo a passo (como funciona a fila) ---- */
.steps {
  display: grid;
  gap: var(--space-sm);
  counter-reset: passo;
}

.steps__item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding: var(--space-md);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
}

.steps__item::before {
  counter-increment: passo;
  content: counter(passo);
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-lg);
}

.steps__title {
  display: block;
  font-weight: 700;
  font-size: var(--fs-lg);
}

.steps__text {
  color: var(--color-text-muted);
}

/* ---- Formulários ---- */
.form-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

.form-card__title {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-md);
}

.field {
  margin-bottom: var(--space-lg);
  text-align: left;
}

.field label {
  display: block;
  font-weight: 700;
  font-size: var(--fs-md);
  margin-bottom: var(--space-xs);
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="password"] {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-md); /* 16px: menos que isso o iPhone dá zoom ao tocar */
  background-color: var(--color-bg);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.field input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.75;
}

.field input:focus {
  outline: none;
  border-color: var(--color-warning);
}

.field__hint {
  margin-top: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.field__input-wrap {
  position: relative;
}

.field__icon {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.field--search .field__input-wrap input {
  padding-left: calc(var(--space-md) + 26px + var(--space-sm));
}

/* Lista de músicas encontradas na busca */
.song-results {
  margin-top: var(--space-xs);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-height: 340px;
  overflow-y: auto;
}

.song-results li {
  min-height: var(--touch-min);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.song-results li:last-child {
  border-bottom: none;
}

.song-results li:hover {
  background-color: var(--color-surface-alt);
}

.device-notice {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.checkbox {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin-bottom: var(--space-lg);
  cursor: pointer;
}

.checkbox input {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

/* Avisos — escondidos até o JS ligar .is-visible */
.alert {
  display: none;
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border-strong);
  font-weight: 700;
  text-align: left;
}

.alert.is-visible {
  display: block;
}

.alert--error {
  background-color: var(--color-danger-soft);
  border-color: var(--color-danger);
  color: var(--color-on-soft);
}

.alert--success {
  background-color: var(--color-success-soft);
  border-color: var(--color-success);
  color: var(--color-success-text);
}

.alert--center {
  text-align: center;
}

/* ---- Fila do karaokê (status ao vivo) ---- */
.queue-status {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
  background-color: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.queue-status__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.queue-status__label {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.queue-status__position {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.75rem, 16vw, 4.5rem);
  color: var(--color-primary-text);
  line-height: 1;
  margin-block: var(--space-xs);
}

.queue-status__mic {
  width: 2em;
  height: 2em;
  color: var(--color-primary-text);
}

.position-progress {
  height: 12px;
  max-width: 320px;
  margin-inline: auto;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-strong);
  overflow: hidden;
}

.position-progress__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  transition: width 1s ease;
}

.queue-status__estimate {
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

.queue-status__song {
  font-size: var(--fs-lg);
  margin-block: var(--space-sm);
}

/* Número da música no equipamento — linha discreta abaixo do nome
   da música (pedido do usuário no projeto base: não chamar atenção).
   Mesmo estilo na tela da pessoa e nos cartões do admin. */
.queue-status__code,
.stage-card__code {
  margin-top: calc(-1 * var(--space-xs));
  margin-bottom: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.queue-status__code strong,
.stage-card__code strong {
  color: var(--color-text);
}

.queue-status__code.is-missing,
.stage-card__code.is-missing {
  color: var(--color-warning);
}

/* Chamado(a): borda e fundo mudam (não só a cor) + pulso suave */
.queue-status.is-called {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
  animation: pulso-borda 1.4s infinite;
}

@keyframes pulso-borda {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 0, 36, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(224, 0, 36, 0); }
}

.queue-status__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.queue-status__actions .btn {
  min-height: var(--touch-big);
  font-size: var(--fs-lg);
}

.countdown {
  margin-block: var(--space-md);
}

.countdown__track {
  height: 14px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-strong);
  overflow: hidden;
}

.countdown__fill {
  height: 100%;
  width: 100%;
  border-radius: var(--radius-full);
  background-color: var(--color-success);
  transition: width 1s linear, background-color var(--transition-fast);
}

.countdown__text {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-2xl);
  margin-top: var(--space-xs);
}

.countdown--danger .countdown__fill {
  background-color: var(--color-danger);
}

.countdown--danger .countdown__text {
  color: var(--color-danger);
}

.queue-list {
  max-width: 560px;
  margin: var(--space-md) auto 0;
}

.queue-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.queue-list__item.is-me {
  background-color: var(--color-primary-soft);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.queue-list__pos {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-xl);
  color: var(--color-primary-text);
  min-width: 2ch;
  text-align: center;
}

.queue-list__info {
  flex: 1;
  min-width: 0;
}

.queue-list__name {
  font-weight: 700;
}

.queue-list__song {
  color: var(--color-text-muted);
}

/* Selo de status (fila e admin) — sempre com texto, não só cor */
.status-pill {
  display: inline-block;
  padding: 0.2em 0.8em;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.status-pill--waiting { background: var(--color-surface-strong); color: var(--color-text); }
.status-pill--called { background: var(--color-warning-soft); color: var(--color-warning); }
.status-pill--singing { background: var(--color-primary-soft); color: var(--color-primary-text); }
.status-pill--done { background: var(--color-success-soft); color: var(--color-success-text); }

/* ---- Fila de mesas (fila.html) ---- */

/* Sem QR lido ainda */
.sem-mesa {
  text-align: center;
}

.sem-mesa__icone {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-md);
  color: var(--color-primary-text);
}

/* "Você está na Mesa 7" — grande, é a primeira coisa que a pessoa confere */
.mesa-info {
  max-width: 560px;
  margin: 0 auto var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
}

.mesa-info__rotulo {
  color: var(--color-text-muted);
}

.mesa-info__numero {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: 1;
  padding: var(--space-xs) var(--space-lg);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  background-color: var(--color-primary-soft);
  color: var(--color-on-soft);
}

/* Uma música do formulário (busca + quem canta) */
.musica-slot {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: 0 0 var(--space-md);
  min-width: 0;
}

.musica-slot__titulo {
  padding: 0 var(--space-xs);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--color-primary-text);
}

.musica-slot .field:last-of-type {
  margin-bottom: var(--space-sm);
}

.musica-slot__escolhida {
  margin-top: var(--space-xs);
  color: var(--color-success-text);
  font-weight: 700;
}

.musica-slot__livre {
  margin-top: var(--space-xs);
  color: var(--color-warning);
  font-weight: 700;
}

/* Resultado da busca: cada música é um botão (dá pra usar no teclado) */
.song-results li:has(.song-results__btn) {
  padding: 0;
}

.song-results__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
}

.song-results__btn:hover,
.song-results__btn:focus-visible {
  background-color: var(--color-surface-alt);
}

.song-results__titulo {
  font-weight: 700;
}

.song-results__info {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.song-results__vazio {
  color: var(--color-text-muted);
  cursor: default;
}

/* Listas numeradas no HTML (ordem importa pra leitor de tela), mas o
   número já aparece desenhado — sem o marcador padrão. */
ol.status-musicas,
ol.queue-list {
  list-style: none;
}

/* Músicas da vez da mesa, dentro do painel de situação */
.status-musicas {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  text-align: left;
}

.status-musicas__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
}

.status-musicas__item.is-now {
  border-color: var(--color-primary);
}

.status-musicas__item.is-done {
  opacity: 0.7;
}

.status-musicas__titulo {
  font-weight: 700;
  font-size: var(--fs-lg);
}

.status-musicas__codigo {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.status-musicas__codigo.is-missing {
  color: var(--color-warning);
}

.status-musicas__item .status-pill {
  align-self: flex-start;
  margin-top: var(--space-2xs);
}

/* Quem está no palco agora */
.palco-card {
  max-width: 560px;
  margin: var(--space-md) auto 0;
  padding: var(--space-md) var(--space-lg);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.palco-card__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

.palco-card__mesa {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-xl);
}

.palco-card__musica {
  margin-top: var(--space-xs);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.palco-card__vazio {
  color: var(--color-text-muted);
}

.queue-list__vazio {
  padding: var(--space-md);
  color: var(--color-text-muted);
}

/* Promoções no WhatsApp (opcional, fechado por padrão) */
.promo-box {
  max-width: 560px;
  margin-inline: auto;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.promo-box summary {
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-lg);
  font-weight: 700;
  cursor: pointer;
}

.promo-box form {
  padding: 0 var(--space-lg) var(--space-lg);
}

/* ---- Agenda (programação da semana) ---- */
.day-list {
  display: grid;
  gap: var(--space-md);
}

.day-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
}

.day-card__flyer {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  margin-bottom: var(--space-xs);
}

.day-card__flyer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.day-card__day {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-xl);
}

.day-card__hours {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-primary-text);
}

.day-card__desc {
  color: var(--color-text-muted);
}

/* Dia fechado: texto diz "Fechado" + visual apagado */
.day-card--closed {
  background-color: transparent;
  border-style: dashed;
}

.day-card--closed .day-card__hours {
  color: var(--color-text-muted);
}

@media (min-width: 640px) {
  .day-list { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Cardápio ---- */
.estab-info {
  margin-bottom: var(--space-lg);
}

.estab-info__promo {
  font-weight: 700;
  color: var(--color-primary-text);
  margin-bottom: var(--space-xs);
}

.estab-info__row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-muted);
}

.notice-provisorio {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 2px dashed var(--color-warning);
  background-color: var(--color-warning-soft);
  color: var(--color-warning);
  font-weight: 700;
}

.menu-search-field {
  margin-bottom: var(--space-md);
}

.menu-search-field input {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-md); /* 16px: menos que isso o iPhone dá zoom ao tocar */
  background-color: var(--color-bg);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

/* Faixa de categorias: fica presa logo abaixo do cabeçalho ao rolar */
.menu-nav-wrap {
  position: sticky;
  top: var(--header-height);
  z-index: 20;
  margin-inline: calc(-1 * var(--space-md));
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.menu-nav {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  padding: var(--space-sm) var(--space-md);
  scrollbar-width: none;
}

.menu-nav::-webkit-scrollbar {
  display: none;
}

.menu-nav .tab {
  flex-shrink: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-md);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-strong);
  font-weight: 700;
  white-space: nowrap;
}

.menu-nav .tab:hover {
  border-color: var(--color-text);
}

/* Degradê nas bordas avisando que a faixa rola pro lado */
.menu-nav__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--space-xl);
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.menu-nav__fade--left {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}

.menu-nav__fade--right {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
}

.menu-nav-wrap.is-at-start .menu-nav__fade--left,
.menu-nav-wrap.is-at-end .menu-nav__fade--right {
  opacity: 0;
}

.menu-category {
  padding-top: var(--space-xl);
  scroll-margin-top: calc(var(--header-height) + 72px);
}

.menu-category__title {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-md);
}

.menu-category__note {
  margin: calc(-1 * var(--space-xs)) 0 var(--space-md);
  color: var(--color-text-muted);
}

.menu-subcategory {
  font-size: var(--fs-lg);
  color: var(--color-primary-text);
  margin: var(--space-lg) 0 var(--space-sm);
}

.menu-item-list {
  display: grid;
  gap: var(--space-sm);
}

.menu-item {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
}

.menu-item__image {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
}

.menu-item__content {
  flex: 1;
  min-width: 0;
}

.menu-item__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
}

.menu-item__name {
  font-weight: 700;
}

.menu-item__price {
  flex-shrink: 0;
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--color-primary-text);
  white-space: nowrap;
}

.menu-item__desc,
.menu-item__composicao {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.menu-item__porcoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-2xs);
  color: var(--color-text-muted);
}

.menu-item__porcoes b {
  color: var(--color-primary-text);
  font-size: var(--fs-lg);
}

/* ---- Sobre ---- */
.about-story p + p {
  margin-top: var(--space-md);
}

.about-story__lead {
  font-size: var(--fs-lg);
  font-weight: 700;
}

/* Espaços da casa: cartões em grade (2 colunas no celular, 4 no PC) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.feature-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
}

.feature-grid__item .icon {
  width: 32px;
  height: 32px;
  color: var(--color-primary-text);
  margin-bottom: var(--space-2xs);
}

.feature-grid__title {
  font-weight: 700;
  line-height: 1.3;
}

.feature-grid__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

@media (min-width: 760px) {
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Galeria em mosaico. Cada foto ocupa 1, 2 ou 4 "células" conforme o
   modificador; grid-auto-flow: dense preenche os buracos sozinho.
   Fotos novas: escolher o modificador pela orientação da foto
   (deitada → --wide, em pé → --tall, destaque → --big). */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
  gap: var(--space-xs);
}

.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  cursor: zoom-in;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery__item:hover img {
  transform: scale(1.05);
}

/* Ícone de "ampliar" no canto: avisa que a foto é clicável */
.gallery__item::after {
  content: '';
  position: absolute;
  right: var(--space-xs);
  bottom: var(--space-xs);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(20, 18, 18, 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.gallery__item--wide { grid-column: span 2; }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--big { grid-column: span 2; grid-row: span 2; }

@media (min-width: 760px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 190px;
    gap: var(--space-sm);
  }
}

/* Foto em tela cheia (<dialog> nativo: Esc fecha, foco fica preso
   dentro). Botões grandes com texto — nada de só "×" ou setinha. */
.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--space-md);
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
  border: none;
  background-color: rgba(10, 9, 9, 0.97);
  color: var(--color-text);
}

.lightbox[open] {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.lightbox::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

.lightbox__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.lightbox__counter {
  font-weight: 700;
  color: var(--color-text-muted);
}

.lightbox__figure {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.lightbox__img {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
}

.lightbox__caption {
  text-align: center;
  font-size: var(--fs-lg);
}

.lightbox__nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-sm);
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
}

.lightbox__nav .btn {
  min-height: var(--touch-big);
  padding-inline: var(--space-sm);
  font-size: var(--fs-lg);
}

.map-frame {
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 760px) {
  .map-frame { aspect-ratio: 16 / 9; }
}

.hours-list {
  display: grid;
  gap: 2px;
}

.hours-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-surface);
}

.hours-list__row:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.hours-list__row:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }

.hours-list__row dd {
  font-weight: 700;
}

.hours-list__row.is-today {
  background-color: var(--color-primary-soft);
  color: var(--color-on-soft);
}

/* ---- Rodapé ---- */
.footer {
  padding-block: var(--space-xl) var(--space-md);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.footer__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}

.footer__links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.credit-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
  padding: 0.4em 1em;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
}

.credit-badge .icon {
  width: 1em;
  height: 1em;
}

/* ---- Páginas simples (login admin / descadastro) ---- */
.center-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  text-align: center;
}

.simple-logo {
  height: 64px;
  width: auto;
  margin: 0 auto var(--space-md);
}

/* ---- Abas (Admin) ---- */
.tab-group {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.tab-group .tab {
  flex-shrink: 0;
  min-height: 48px;
  padding: 0 var(--space-md);
  font-weight: 700;
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
}

.tab-group .tab.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
}

/* ---- Painel admin ---- */
.admin-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

.admin-topbar {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.admin-topbar .site-header__logo {
  height: 40px;
}

.admin-topbar__controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.admin-main {
  max-width: var(--max-width-wide);
  margin-inline: auto;
  padding: var(--space-lg) var(--space-md);
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.stat-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  text-align: center;
}

.stat-card__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-xl);
  color: var(--color-primary-text);
}

.stat-card__label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.stage-panel {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (min-width: 760px) {
  .stage-panel { grid-template-columns: repeat(2, 1fr); }
}

.stage-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.stage-card__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.stage-card__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-xl);
}

.stage-card__song {
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.stage-card__empty {
  color: var(--color-text-muted);
  padding-block: var(--space-sm);
}

.stage-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.song-code {
  color: var(--color-text-muted);
  font-weight: 700;
  white-space: nowrap;
}

.admin-table-wrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.admin-table-wrap__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--space-lg);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: 1;
}

.admin-table-wrap__fade--left {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}

.admin-table-wrap__fade--right {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
}

.admin-table-wrap:not(.is-at-start) .admin-table-wrap__fade--left,
.admin-table-wrap:not(.is-at-end) .admin-table-wrap__fade--right {
  opacity: 1;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.admin-table th,
.admin-table td {
  padding: var(--space-sm);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.admin-table th {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.row-actions {
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}

.icon-btn {
  min-height: 40px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.icon-btn--danger:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.icon-btn--success:hover {
  border-color: var(--color-success);
  color: var(--color-success-text);
}

.icon-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  font-weight: 700;
}

.toggle-switch__track {
  width: 52px;
  height: 30px;
  background-color: var(--color-surface-strong);
  border-radius: var(--radius-full);
  position: relative;
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.toggle-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-text);
  transition: transform var(--transition-fast);
}

.toggle-switch.is-on .toggle-switch__track {
  background-color: var(--color-success);
}

.toggle-switch.is-on .toggle-switch__track::after {
  transform: translateX(22px);
}

.file-drop {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-text-muted);
}

.flyer-preview:empty {
  display: none;
}

.flyer-preview {
  max-width: 220px;
  margin: var(--space-sm) auto;
}

.flyer-preview img {
  width: 100%;
  border-radius: var(--radius-sm);
}

/* Input de arquivo: o nativo fica escondido (mas acessível) e um
   <label> com cara de botão assume a aparência. */
.file-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.file-input__native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.file-input__name {
  font-size: var(--fs-sm);
}

.qr-box {
  max-width: 320px;
  margin-inline: auto;
  text-align: center;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.qr-box__code {
  width: 220px;
  height: 220px;
  margin: 0 auto var(--space-sm);
  background-color: #ffffff;
  color: #141212;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xs);
}

/* ---- Blocos de layout (celular: um embaixo do outro) ---- */
.shortcut-grid {
  display: grid;
  gap: var(--space-sm);
}

.shortcut-grid .info-row + .info-row {
  margin-top: 0;
}

.split {
  display: grid;
  gap: var(--space-xl);
}

.karaoke-layout {
  display: grid;
  gap: var(--space-xl);
}

/* ============================================================
   COMPUTADOR (≥ 960px)
   - O menu de baixo sobe pro cabeçalho (mesmo HTML, só CSS):
     logo à esquerda, itens com ícone + texto lado a lado à direita.
   - Conteúdo usa a largura maior e se divide em colunas.
   ============================================================ */
@media (min-width: 960px) {
  .container {
    max-width: var(--max-width-wide);
    padding-inline: var(--space-lg);
  }

  main {
    padding-bottom: 0;
  }

  .section {
    padding-block: var(--space-2xl);
  }

  /* Cabeçalho: logo à esquerda */
  .site-header__inner {
    max-width: var(--max-width-wide);
    margin-inline: auto;
    padding-inline: var(--space-lg);
  }

  /* Largura fixa no PC pra o menu (fixo, ao lado) saber onde parar */
  .avisos-btn {
    width: var(--avisos-btn-width);
    justify-content: center;
  }

  .site-header__logo {
    height: 48px;
  }

  /* Menu: sai do rodapé da tela e fica dentro da faixa do cabeçalho,
     alinhado à direita do mesmo container de 1100px */
  .bottom-nav {
    top: 0;
    bottom: auto;
    left: auto;
    /* 100% aqui = largura da janela sem a barra de rolagem (100vw
       incluiria a barra e desalinharia o menu do conteúdo) */
    right: calc(max(var(--space-lg), (100% - var(--max-width-wide)) / 2 + var(--space-lg)) + var(--avisos-btn-width) + var(--space-sm));
    height: var(--header-height);
    display: flex;
    align-items: center;
    background-color: transparent;
    border-top: none;
    padding-bottom: 0;
  }

  .bottom-nav__list {
    display: flex;
    height: auto;
    max-width: none;
    padding: 0;
    gap: var(--space-2xs);
  }

  .bottom-nav__link {
    flex-direction: row;
    gap: var(--space-xs);
    min-height: 44px;
    padding: 0 var(--space-md);
    font-size: var(--fs-sm);
    color: var(--color-text);
  }

  .bottom-nav__link .icon {
    width: 20px;
    height: 20px;
    color: var(--color-text-muted);
  }

  .bottom-nav__link:hover {
    background-color: var(--color-surface-alt);
  }

  .bottom-nav__link[aria-current="page"] .icon {
    color: inherit;
  }

  /* Topo com foto: mais alto, texto alinhado ao container largo */
  .photo-hero {
    min-height: 260px;
  }

  .photo-hero__content {
    max-width: var(--max-width-wide);
    padding: var(--space-2xl) var(--space-lg) var(--space-xl);
  }

  .photo-hero__title {
    font-size: var(--fs-3xl);
  }

  .photo-hero--home {
    min-height: max(500px, 70vh);
  }

  .photo-hero--home .photo-hero__title {
    font-size: 3.5rem;
  }

  .photo-hero__text {
    font-size: var(--fs-lg);
  }

  .home-cta {
    max-width: 400px;
  }

  /* Fotos e ícones em px não encolhem com o rem — ajuste à mão */
  .gallery {
    grid-auto-rows: 150px;
  }

  .menu-item__image {
    width: 56px;
    height: 56px;
  }

  /* Início */
  .shortcut-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .split .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 0;
  }

  /* Mapa estica até a altura da coluna de informações ao lado */
  .split--map {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: stretch;
  }

  .split--map .map-frame {
    aspect-ratio: auto;
    min-height: 380px;
    margin-bottom: 0;
  }

  .about-story {
    max-width: 60ch;
  }

  /* Cantar: fila à esquerda, passo a passo fixo à direita */
  .karaoke-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
  }

  .karaoke-layout__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
  }

  .karaoke-layout .form-card,
  .karaoke-layout .queue-status,
  .karaoke-layout .queue-list {
    max-width: none;
  }

  /* Cardápio e Agenda: mais itens por linha */
  .menu-item-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .day-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .menu-nav-wrap {
    margin-inline: 0;
  }

  .menu-nav {
    padding-inline: 0;
  }
}

/* ---- Utilitários ---- */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-md { margin-bottom: var(--space-md); }
.hidden { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid var(--color-border-strong);
  border-top-color: var(--color-primary-text);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}