/* ============================================================
   HSPOT Hotel Suite — Design System (padrão API Sistemas / HSPOT)
   Tokens + shell (sidebar/topbar) + componentes-base.
   Referência: docs/DESIGN_REFERENCIA.md
   ============================================================ */

/* ---------- Tokens: tema claro ---------- */
:root {
  --cor-primaria: #2F7DF6;
  --cor-primaria-hover: #1E5FD0;
  --cor-primaria-suave: #E8F1FE;
  --cor-acento: #38BDF8;

  --cor-fundo: #F4F8FF;
  --cor-superficie: #FFFFFF;
  --cor-borda: #E2E8F0;
  /* linha PAR das listagens (zebrado): um véu escuro sutil sobre a superfície clara */
  --cor-zebra: rgba(15, 23, 42, .045);

  --cor-texto: #1E293B;
  --cor-texto-suave: #64748B;

  --cor-sucesso: #16A34A;
  --cor-alerta: #F59E0B;
  --cor-erro: #EF4444;
  --cor-info: #2F7DF6;

  --fonte-titulo: 'Sora', system-ui, sans-serif;
  --fonte-texto: 'Inter', system-ui, sans-serif;
  --peso-padrao: 300;
  --peso-destaque: 500;

  --raio: 12px;
  --sombra: 0 6px 20px rgba(15, 42, 82, 0.08);

  --largura-sidebar: 268px;
  --altura-topbar: 60px;

  /* Widgets NATIVOS do navegador (barra de rolagem, popup de <select>, botão do type=search)
     acompanham o tema — sem isto ficam claros mesmo no tema escuro. */
  color-scheme: light;
}

/* ---------- Tokens: tema escuro ---------- */
[data-tema="escuro"] {
  --cor-primaria: #5B95F7;
  --cor-primaria-hover: #7CB0FF;
  --cor-primaria-suave: #13346B;
  --cor-acento: #38BDF8;

  --cor-fundo: #0B1B33;
  --cor-superficie: #14233D;
  --cor-borda: #24487E;
  /* linha PAR das listagens (zebrado): no escuro a "mais escura" aproxima do preto */
  --cor-zebra: rgba(0, 0, 0, .2);

  --cor-texto: #E8F1FE;
  --cor-texto-suave: #9FB4D6;

  --cor-sucesso: #4ADE80;
  --cor-alerta: #FBBF24;
  --cor-erro: #F87171;
  --cor-info: #5B95F7;

  --sombra: 0 6px 20px rgba(0, 0, 0, 0.35);

  /* Barra de rolagem, popup de <select> e afins escuros junto com o tema. */
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fonte-texto);
  font-weight: var(--peso-padrao);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  transition: background .25s, color .25s;
  min-height: 100vh;
}
h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: var(--peso-padrao); margin: 0; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   SHELL (área logada)
   ============================================================ */
.shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--largura-sidebar);
  flex-shrink: 0;
  background: var(--cor-superficie);
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease;
  z-index: 50;
}
.sidebar__logo {
  min-height: 104px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar__logo img { height: 64px; width: auto; max-width: 100%; }
.logo--no-claro { display: block; }
.logo--no-escuro { display: none; }
[data-tema="escuro"] .logo--no-claro { display: none; }
[data-tema="escuro"] .logo--no-escuro { display: block; }

.sidebar__scroll { flex: 1; overflow-y: auto; padding: 0 14px 20px; }

/* Seletor de módulo */
.seletor-modulo { position: relative; margin-bottom: 14px; }
.seletor-modulo__botao {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-acento));
  color: #fff;
  border: 0;
  border-radius: var(--raio);
  padding: 12px 14px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-destaque);
  cursor: pointer;
  text-align: left;
}
.seletor-modulo__botao .nome { flex: 1; font-size: .95rem; }
.seletor-modulo__lista {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 6px;
  z-index: 60;
  /* Altura ajustada: alta o bastante para mostrar quase todos os módulos, mas SEM encostar no rodapé —
     um pouco mais baixa evita o "segundo scroll" (o da lista sobrepondo o scroll da própria sidebar). */
  max-height: calc(100vh - 230px);
  overflow-y: auto;
}
.seletor-modulo__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--cor-texto); cursor: pointer; font-size: .9rem;
}
.seletor-modulo__item:hover { background: var(--cor-primaria-suave); }
.seletor-modulo__item.ativo { background: var(--cor-primaria-suave); color: var(--cor-primaria); }

/* Menu do módulo */
.menu-modulo { display: flex; flex-direction: column; gap: 2px; }
.menu-modulo__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  color: var(--cor-texto-suave); font-size: .9rem;
  border-left: 3px solid transparent;
}
.menu-modulo__item:hover { background: var(--cor-primaria-suave); color: var(--cor-texto); }
.menu-modulo__item.ativo {
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  border-left-color: var(--cor-primaria);
}
.menu-modulo__item.indisponivel { opacity: .5; cursor: default; }
.menu-modulo__item .em-breve {
  margin-left: auto; font-size: .65rem; text-transform: uppercase;
  letter-spacing: .04em; background: var(--cor-borda);
  color: var(--cor-texto-suave); padding: 2px 6px; border-radius: 999px;
}
.menu-dica { color: var(--cor-texto-suave); font-size: .82rem; padding: 10px 12px; line-height: 1.5; }

/* Rodapé fixo da sidebar: o botão "Preciso de ajuda" (chat com o suporte HSPOT).
   Fica FORA do .sidebar__scroll — o flex:1 do scroll o empurra para o pé do menu. */
.sidebar__ajuda { padding: 10px 14px 14px; border-top: 1px solid var(--cor-borda); }
.sidebar__ajuda-btn { width: 100%; background: none; border: 0; border-left: 3px solid transparent; cursor: pointer; font-family: inherit; }

/* ---------- Topbar ---------- */
.conteudo-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--altura-topbar);
  background: var(--cor-superficie);
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
}
.topbar__logo-mobile { display: none; }
.topbar__logo-mobile img { height: 26px; width: auto; }
.espacador { flex: 1; }

.icone-botao {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; color: var(--cor-texto-suave);
  padding: 8px; border-radius: 10px; cursor: pointer;
}
.icone-botao:hover { background: var(--cor-primaria-suave); color: var(--cor-texto); }
.icone-botao--contorno { border: 1px solid var(--cor-borda); }
.icone-botao .rotulo { font-size: .85rem; }

/* Alerta de mensagem nova (Central de Atendimento): o chip do usuário no topo pisca em vermelho
   enquanto houver conversa não lida. Com movimento reduzido, fica vermelho fixo (sem piscar). */
@keyframes pisca-alerta-msg {
  0%, 100% { background: var(--cor-erro); border-color: var(--cor-erro); color: #fff; }
  50% { background: transparent; border-color: var(--cor-borda); color: var(--cor-texto-suave); }
}
.icone-botao.alerta-mensagem { animation: pisca-alerta-msg 1s infinite; }
@media (prefers-reduced-motion: reduce) {
  .icone-botao.alerta-mensagem { animation: none; background: var(--cor-erro); border-color: var(--cor-erro); color: #fff; }
}

/* Seletor de empresa/hotel */
.seletor-empresa {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--cor-borda); border-radius: 999px;
  padding: 6px 12px; color: var(--cor-texto); background: transparent; cursor: pointer;
  max-width: 240px;
}
.seletor-empresa .empresa {
  font-size: .85rem; font-weight: var(--peso-destaque);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seletor-empresa > i { flex-shrink: 0; }
/* O menu do seletor abre alinhado à esquerda do botão (o padrão .dropdown__menu abre à direita,
   que aqui jogaria a lista para fora da tela). No celular a regra do bloco responsivo o transforma
   numa folha fixa de borda a borda. */
.dropdown--empresa .dropdown__menu { left: 0; right: auto; }

/* Dropdown padrão */
.dropdown { position: relative; }
.dropdown__menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px; background: var(--cor-superficie);
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 8px; z-index: 60;
}
.dropdown__titulo {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--cor-texto-suave); padding: 6px 8px;
}
.dropdown__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: 8px; color: var(--cor-texto);
  font-size: .88rem; cursor: pointer; width: 100%; background: transparent;
  border: 0; text-align: left;
}
.dropdown__item:hover { background: var(--cor-primaria-suave); }

/* Lista de hotéis do seletor do topo: ~10 itens visíveis e o resto na rolagem.
   Sem o teto, uma rede com 200 hotéis abriria um menu do tamanho da tela inteira. */
.dropdown__lista { max-height: 372px; overflow-y: auto; overscroll-behavior: contain; }
.dropdown__lista .dropdown__item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Destaca o item que o teclado vai escolher no Enter. */
.dropdown__lista .dropdown__item.is-alvo { background: var(--cor-primaria-suave); }
.dropdown__busca {
  width: 100%; margin: 2px 0 6px; padding: 8px 10px;
  border: 1px solid var(--cor-borda); border-radius: 8px;
  background: var(--cor-fundo); color: var(--cor-texto);
  font-family: inherit; font-size: .86rem;
}
.dropdown__busca:focus { outline: none; border-color: var(--cor-primaria); }
.dropdown__vazio { padding: 10px 8px; font-size: .84rem; color: var(--cor-texto-suave); }

/* ---------- Conteúdo ---------- */
.conteudo { padding: 28px 20px 60px; }
.conteudo__interno { max-width: 1040px; margin: 0 auto; }

/* Cabeçalho de módulo */
.modulo-cabecalho { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.modulo-cabecalho__icone {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.modulo-cabecalho h1 { font-size: 1.5rem; }
.modulo-cabecalho p { color: var(--cor-texto-suave); margin: 4px 0 0; font-size: .9rem; }

/* ============================================================
   COMPONENTES-BASE
   ============================================================ */
.card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-info);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px 24px;
}
.card--sucesso { border-left-color: var(--cor-sucesso); }
.card--alerta { border-left-color: var(--cor-alerta); }
.card--erro { border-left-color: var(--cor-erro); }
.card--info { border-left-color: var(--cor-info); }
.card__titulo { font-family: var(--fonte-titulo); margin: 0 0 6px; }
.card__texto { color: var(--cor-texto-suave); margin: 0; }

/* Launchpad */
.lancador {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.lancador__card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-info);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .15s, box-shadow .15s;
}
.lancador__card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15,42,82,.14); }
.lancador__icone {
  width: 44px; height: 44px; border-radius: 12px; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.lancador__nome { font-family: var(--fonte-titulo); font-weight: var(--peso-destaque); font-size: 1rem; }
.lancador__desc { color: var(--cor-texto-suave); font-size: .82rem; line-height: 1.5; }

/* Botão com loading */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--cor-primaria); color: #fff; border: 0;
  border-radius: var(--raio); padding: 10px 18px;
  font-family: var(--fonte-texto); font-weight: var(--peso-destaque);
  cursor: pointer; transition: background .2s; font-size: .92rem;
}
.btn:hover:not(:disabled) { background: var(--cor-primaria-hover); }
.btn:disabled { opacity: .7; cursor: not-allowed; }
.btn--largo { width: 100%; }
.btn--fantasma {
  background: transparent; color: var(--cor-texto);
  border: 1px solid var(--cor-borda);
}
.btn--fantasma:hover:not(:disabled) { background: var(--cor-primaria-suave); }
.btn__spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff;
  animation: girar .7s linear infinite;
}
/* ⚠️ O rótulo do botão com spinner (`data-loading`) PRECISA ser flex: o ícone do Lucide entra como
   <svg display:block> e, dentro de um <span> comum, ocupa a linha inteira — o texto caía embaixo e o
   botão ficava com o dobro da altura (58px em vez de 44px). Vale para os 16 botões do sistema que usam
   este padrão; sem isto, cada tela precisaria do próprio remendo. */
.btn__texto { display: inline-flex; align-items: center; gap: 8px; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Campos de formulário */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo__rotulo { font-size: .82rem; color: var(--cor-texto-suave); }
.campo__entrada {
  background: var(--cor-fundo); border: 1px solid var(--cor-borda);
  border-radius: 10px; padding: 11px 13px; color: var(--cor-texto);
  font-family: var(--fonte-texto); font-size: .95rem; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.campo__entrada:focus {
  outline: none; border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-suave);
}

/* Sub-navegação (segmented control) */
.subnav {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: 999px; box-shadow: var(--sombra); margin-bottom: 20px; flex-wrap: wrap;
}
.subnav__item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px; font-size: .86rem;
  color: var(--cor-texto-suave); white-space: nowrap;
}
.subnav__item i { width: 16px; height: 16px; }
.subnav__item:hover { background: var(--cor-primaria-suave); color: var(--cor-texto); }
.subnav__item.ativo {
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-acento));
  color: #fff; font-weight: var(--peso-destaque);
}

/* Seletor de ícones */
.icon-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px; max-height: 240px; overflow-y: auto; padding: 4px;
  border: 1px solid var(--cor-borda); border-radius: 10px; background: var(--cor-fundo);
}
.icon-opt {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--cor-borda);
  background: var(--cor-superficie); color: var(--cor-texto-suave); cursor: pointer;
}
.icon-opt:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
/* Cabeçalho de categoria: ocupa a linha inteira da grade (1/-1), senão viraria uma célula de ícone. */
.icon-cat {
  grid-column: 1 / -1; font-size: .72rem; font-weight: var(--peso-destaque);
  color: var(--cor-texto-suave); padding: 6px 2px 2px;
}
.icon-opt.sel {
  border-color: var(--cor-primaria); color: #fff;
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-acento));
}

/* Acordeão de setores (listagem de itens) */
.acordeao { display: flex; flex-direction: column; gap: 14px; }
.painel {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-primaria); border-radius: var(--raio); box-shadow: var(--sombra);
  overflow: hidden;
}
.painel__cabeca {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer;
  user-select: none;
}
.painel__cabeca:hover { background: var(--cor-primaria-suave); }
.painel__titulo { font-family: var(--fonte-titulo); font-weight: var(--peso-destaque); font-size: 1.05rem; }
.painel__contagem {
  font-size: .72rem; color: var(--cor-texto-suave); background: var(--cor-fundo);
  border: 1px solid var(--cor-borda); padding: 2px 10px; border-radius: 999px;
}
.painel__corpo { padding: 0 20px 20px; }

/* Grade de itens (cards com QR) */
.itens-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.item-card {
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
  background: var(--cor-fundo); padding: 14px; text-align: center; position: relative;
  transition: transform .15s, box-shadow .15s;
}
.item-card:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.item-card__qr {
  width: 96px; height: 96px; margin: 0 auto 10px; background: #fff;
  border-radius: 8px; padding: 6px; cursor: pointer;
}
.item-card__qr svg { width: 100%; height: 100%; display: block; }
.item-card__tipo {
  display: inline-flex; align-items: center; gap: 6px; font-size: .74rem;
  color: var(--cor-texto-suave); margin-bottom: 4px;
}
.item-card__codigo { font-family: var(--fonte-titulo); font-weight: var(--peso-destaque); font-size: 1.05rem; }
.item-card__excluir {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 7px;
  border: 0; background: transparent; color: var(--cor-texto-suave); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.item-card__excluir:hover { background: rgba(239,68,68,.14); color: var(--cor-erro); }

/* QR ampliado no modal */
.qr-grande { width: 260px; height: 260px; margin: 0 auto; background: #fff; padding: 14px; border-radius: 12px; }
.qr-grande svg { width: 100%; height: 100%; }

/* Tabela */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  text-align: left; font-family: var(--fonte-texto); font-weight: var(--peso-destaque);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--cor-texto-suave); padding: 10px 12px; border-bottom: 1px solid var(--cor-borda);
}
.tabela td { padding: 11px 12px; border-bottom: 1px solid var(--cor-borda); font-size: .9rem; }
.tabela tr:last-child td { border-bottom: 0; }
/* Zebrado (2026-08-11, pedido do usuário): linhas alternadas — ímpar clara, par mais escura — para o
   olho não se perder em listagens longas. O tom vem do token --cor-zebra (definido nos DOIS temas).
   ⚠️ Fica ANTES do :hover de propósito: mesma especificidade, e o hover precisa vencer na linha par.
   Destaques por linha que pintam o TD (painel de edição inline etc.) cobrem o zebrado sozinhos. */
.tabela tbody tr:nth-child(even) { background: var(--cor-zebra); }
.tabela tbody tr:hover { background: var(--cor-primaria-suave); }
.tabela__acoes { display: flex; gap: 6px; justify-content: flex-end; }
.acao-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--cor-borda);
  background: transparent; color: var(--cor-texto-suave); cursor: pointer;
}
.acao-icone:hover { background: var(--cor-primaria-suave); color: var(--cor-primaria); }
.acao-icone--perigo:hover { background: rgba(239,68,68,.12); color: var(--cor-erro); border-color: var(--cor-erro); }

/* Checkbox com rótulo */
.check-inline { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.check-inline input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--cor-primaria); }

/* Filtro em pílulas (Ativos / Vencidos / Todos) — listas de Acessos */
.filtro-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.filtro-tabs a { border: 1px solid var(--cor-borda); background: var(--cor-superficie); color: var(--cor-texto-suave); font-size: .82rem; font-weight: var(--peso-destaque); padding: 7px 14px; border-radius: 999px; text-decoration: none; transition: all .15s; }
.filtro-tabs a:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.filtro-tabs a.on { background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria); }

/* Stat tiles (KPIs) */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-info); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 16px 18px;
}
.stat__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.stat__rotulo { color: var(--cor-texto-suave); font-size: .78rem; }
.stat__icone {
  width: 34px; height: 34px; border-radius: 10px; color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.stat__valor { font-family: var(--fonte-titulo); font-weight: var(--peso-destaque); font-size: 1.6rem; line-height: 1; }
.stat__extra { color: var(--cor-texto-suave); font-size: .74rem; margin-top: 6px; }

/* Barra de ferramentas (busca + filtro) */
.toolbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 14px 16px; margin-bottom: 18px;
}
.toolbar .campo { margin-bottom: 0; }
.toolbar__busca { flex: 1 1 260px; }
.toolbar__filtro { flex: 0 0 200px; }
.toolbar__acoes { display: flex; gap: 8px; }
@media (max-width: 640px) {
  .toolbar__busca, .toolbar__filtro { flex: 1 1 100%; }
  .toolbar__acoes { width: 100%; }
  .toolbar__acoes .btn { flex: 1; }
}

/* Pílula de status */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: var(--peso-destaque);
  padding: 3px 10px; border-radius: 999px;
  background: var(--cor-borda); color: var(--cor-texto-suave); white-space: nowrap;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--ok { background: rgba(22,163,74,.14); color: var(--cor-sucesso); }
.pill--erro { background: rgba(239,68,68,.14); color: var(--cor-erro); }
.pill--alerta { background: rgba(245,158,11,.16); color: var(--cor-alerta); }
.pill--info { background: var(--cor-primaria-suave); color: var(--cor-primaria); display: inline-flex; align-items: center; gap: 3px; }
.pill--neutro { background: var(--cor-borda); color: var(--cor-texto-suave); }

/* Formulário: seções e grade */
.form-secao {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-primaria);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 20px 24px; margin-bottom: 18px;
}
.form-secao__titulo {
  font-family: var(--fonte-titulo); font-weight: var(--peso-destaque);
  font-size: 1rem; margin: 0 0 4px; display: flex; align-items: center; gap: 8px;
}
.form-secao__sub { color: var(--cor-texto-suave); font-size: .8rem; margin: 0 0 16px; }
/* Subseção dentro de um bloco de provedor (ex.: template/webhook do WhatsApp Oficial) */
.form-subsecao { margin-top: 8px; padding-top: 16px; border-top: 1px dashed var(--cor-borda); }
/* Texto de ajuda curto abaixo de um campo */
.campo__ajuda { color: var(--cor-texto-suave); font-size: .74rem; margin: 4px 0 0; }
.grade { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 16px; }
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
.col-2 { grid-column: span 2; }
@media (max-width: 640px) {
  .col-8, .col-6, .col-4, .col-3, .col-2 { grid-column: span 12; }
}
.form-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.campo__entrada[readonly] { opacity: .8; }

/* Lista de seleção com checkbox (empresas do grupo) */
.lista-check {
  border: 1px solid var(--cor-borda); border-radius: 10px;
  max-height: 320px; overflow-y: auto; background: var(--cor-fundo);
}
.item-check {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--cor-borda); cursor: pointer;
}
.item-check:last-child { border-bottom: 0; }
.item-check:hover { background: var(--cor-primaria-suave); }
.item-check input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--cor-primaria); flex-shrink: 0; }
.item-check__nome { font-weight: var(--peso-destaque); font-size: .9rem; }
.item-check__sub { color: var(--cor-texto-suave); font-size: .76rem; }
.lista-vazia { padding: 14px; color: var(--cor-texto-suave); font-size: .84rem; }

/* Quadro de cadastro em FAIXA HORIZONTAL no topo da tela, com a lista embaixo (padrão do PDV).
   Num formulário de muitos campos, a coluna estreita ao lado da lista obrigava a rolar o quadro inteiro
   para achar o botão de salvar. Em faixa, os campos ficam lado a lado e cabem numa olhada. As colunas se
   acomodam sozinhas: no celular vira uma coluna só. */
.cad-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 16px; }
.cad-grade__largo { grid-column: span 2; }             /* campo que precisa de mais largura (descrição) */
@media (max-width: 640px) { .cad-grade__largo { grid-column: span 1; } }

/* Lista em LINHAS — a alternativa à tabela quando a tela tem o quadro de cadastro fixo ao lado (o que
   deixa a lista com metade da largura) e o conteúdo traz texto longo. Numa tabela, nessa largura, as
   colunas se espremem: o nome do prato sai uma palavra por linha e a coluna de ações vai para fora da
   tela. Aqui cada registro é uma linha flexível que quebra sozinha. Usada no cadastro do PDV. */
.lista-linhas__item {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid var(--cor-borda);
}
.lista-linhas__item:first-of-type { border-top: 0; }
/* Zebrado das listas em linhas (mesmo pedido de 2026-08-11 das tabelas): item par ganha o véu. */
.lista-linhas__item:nth-child(even) { background: var(--cor-zebra); }
.lista-linhas__item--off { opacity: .55; }             /* registro desativado: visível, mas fora do ar */
.lista-linhas__info { flex: 1 1 220px; min-width: 0; }
.lista-linhas__tit { font-weight: var(--peso-destaque); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lista-linhas__sub { font-size: .78rem; color: var(--cor-texto-suave); margin-top: 3px; }
.lista-linhas__acoes { flex: none; display: flex; align-items: center; gap: 3px; margin-left: auto; }
.lista-linhas__acoes form { margin: 0; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; z-index: 80; padding: 20px;
}
.modal-caixa {
  width: 100%; max-width: 420px; background: var(--cor-superficie);
  border: 1px solid var(--cor-borda); border-left: 4px solid var(--cor-erro);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 24px;
}
.modal-caixa h3 { font-family: var(--fonte-titulo); font-weight: var(--peso-destaque); margin: 0 0 6px; }
.btn--perigo { background: var(--cor-erro); }
.btn--perigo:hover:not(:disabled) { background: #dc2626; }

/* Mensagens */
.aviso { border-radius: 10px; padding: 11px 14px; font-size: .86rem; margin-bottom: 16px; }
.aviso--erro { background: rgba(239,68,68,.12); color: var(--cor-erro); }
.aviso--info { background: var(--cor-primaria-suave); color: var(--cor-primaria); }
.aviso--ok { background: rgba(22,163,74,.12); color: var(--cor-sucesso); }
.aviso--alerta { background: rgba(245,158,11,.14); color: var(--cor-alerta); }

/* ============================================================
   TELA ANÔNIMA (login / definir senha)
   ============================================================ */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth__caixa {
  width: 100%; max-width: 400px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-primaria);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 32px 30px;
}
.auth__logo { display: flex; justify-content: center; margin-bottom: 22px; }
.auth__logo img { height: 54px; width: auto; }
.auth__titulo { text-align: center; font-size: 1.15rem; margin-bottom: 4px; }
.auth__sub { text-align: center; color: var(--cor-texto-suave); font-size: .84rem; margin-bottom: 24px; }
.auth__rodape { text-align: center; margin-top: 20px; font-size: .74rem; color: var(--cor-texto-suave); }

/* ============================================================
   RESPONSIVO — gaveta ≤ 900px
   ============================================================ */
.overlay { display: none; }
/* ⚠️ Estas duas regras base ficam ANTES do bloco @media de propósito: media query não soma
   especificidade, então uma regra igual escrita DEPOIS do bloco venceria a do bloco e o botão
   de recolher (que é do desktop) ficaria visível no celular — foi exatamente o bug que havia. */
.btn-menu-mobile { display: none; }
.btn-recolher { display: inline-flex; }
@media (max-width: 900px) {
  .sidebar {
    position: fixed; top: 0; left: 0;
    transform: translateX(-100%);
    box-shadow: var(--sombra);
  }
  .sidebar.aberta { transform: translateX(0); }
  .overlay.ativo {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,.4); z-index: 45;
  }
  .topbar__logo-mobile { display: flex; align-items: center; }
  /* O seletor de hotel FICA no celular (2026-08-14, pedido do usuário — antes era display:none e
     não havia COMO trocar de hotel pelo telefone). Ele ganha uma LINHA PRÓPRIA abaixo dos ícones:
     a primeira linha da topbar (menu + logo + 7 ícones de ação do SuperAdmin) já ocupa a largura
     inteira de um celular — espremido ali no meio, o seletor era esmagado a 0px de largura. */
  .topbar { flex-wrap: wrap; height: auto; min-height: var(--altura-topbar); padding-top: 6px; padding-bottom: 8px; }
  .dropdown--empresa { order: 99; flex: 1 1 100%; min-width: 0; }
  .seletor-empresa { width: 100%; max-width: none; }
  .seletor-empresa .empresa { flex: 1 1 auto; }   /* nome à esquerda, seta encostada à direita */
  /* O menu abre na largura da linha do seletor (o min-width de 220px estouraria a tela num
     celular estreito se o menu nascesse deslocado). */
  .dropdown--empresa .dropdown__menu { left: 0; right: 0; min-width: 0; }
  .icone-botao .rotulo { display: none; }
  .btn-menu-mobile { display: inline-flex !important; }
  .btn-recolher { display: none; }
}
/* Celular estreito: compacta a 1ª linha da topbar (gaps e padding menores) e cede a vez da logo
   aos botões — com os 7 ícones do SuperAdmin, logo + ícones não cabem em 390px e a página inteira
   passava a rolar na horizontal (a marca segue visível no menu lateral/gaveta). */
@media (max-width: 480px) {
  .topbar { gap: 4px; padding-left: 10px; padding-right: 10px; }
  .topbar .icone-botao { padding: 6px; }
  .topbar__logo-mobile { display: none !important; }
}

/* Estado recolhido (desktop) */
.shell.sidebar-recolhida .sidebar { display: none; }

/* ---- MODO TV (tela cheia dos painéis de cozinha e de entregas) ----
   O painel fica pendurado num monitor grande da cozinha ou da copa: ali não existe operador navegando, e
   cada pixel gasto com menu é um pedido a menos visível do outro lado do salão. Some tudo — menu, topo e
   cabeçalho da página — e ficam só os cards. */
body.modo-tv .sidebar,
body.modo-tv .topbar,
body.modo-tv .modulo-cabecalho__icone { display: none !important; }
body.modo-tv .conteudo { padding: 12px 16px; }
/* O sistema centra o conteúdo em 1040px — ótimo para ler um formulário, péssimo para uma TV: metade do
   monitor ficaria vazia. No painel, a largura é toda. */
body.modo-tv .conteudo__interno { max-width: none; }
body.modo-tv .modulo-cabecalho { margin-bottom: 10px; }
body.modo-tv .modulo-cabecalho h1 { font-size: 1.35rem; }
body.modo-tv .modulo-cabecalho p { display: none; }   /* a explicação é para quem configura, não para a cozinha */
body.modo-tv .modulo-cabecalho .btn { white-space: nowrap; }   /* sem o menu, sobra largura: nada de botão em 3 linhas */
/* O TAMANHO dos cards e o NÚMERO DE COLUNAS não são fixados aqui de propósito: quem manda é o "Ajuste do
   monitor", no topo do painel. Uma regra fixa aqui ganharia do operador — e cada cozinha tem um monitor e
   uma distância diferentes. */

/* Alpine.js: esconde elementos com x-cloak até o Alpine inicializar (evita "piscar" de conteúdo) */
[x-cloak] { display: none !important; }

/* Área de Comunicação — bloco de teste dentro de cada aba (SMTP/WhatsApp/Telegram) */
.teste-bloco {
  margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--cor-borda);
}
.teste-bloco__titulo {
  display: flex; align-items: center; gap: 8px;
  font-size: .92rem; font-weight: var(--peso-destaque); margin: 0 0 4px;
}
/* Linha do teste: campo de destino + botão, lado a lado (empilha no mobile) */
.teste-linha { display: flex; gap: 10px; align-items: stretch; margin-bottom: 10px; }
.teste-linha .campo__entrada { flex: 1; }
.teste-linha .btn { white-space: nowrap; }
@media (max-width: 640px) {
  .teste-linha { flex-direction: column; }
}
/* Espaçamento entre o seletor de provedor e os campos específicos (WhatsApp) */
.provedor-bloco { margin-top: 4px; }

/* Métodos de autenticação (aba Autenticação): cada método é um bloco com faixa à esquerda */
.metodo-auth {
  border: 1px solid var(--cor-borda); border-left: 3px solid var(--cor-primaria);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--cor-fundo);
}
/* Sub-opções do método (exige validação / dados adicionais), recuadas sob o título */
.metodo-auth__flags {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin: 8px 0 0 26px; transition: opacity .15s;
}
@media (max-width: 640px) {
  .metodo-auth__flags { margin-left: 12px; }
}

/* ============ Dashboard: mapa de itens (QR codes) por setor ============ */
.dash-setor { margin-top: 26px; }
.dash-setor__cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--cor-borda);
}
.dash-setor__nome {
  display: flex; align-items: center; gap: 9px;
  margin: 0; font-size: 1.05rem; font-weight: 500;
}
.dash-setor__cont { font-size: .82rem; color: var(--cor-texto-suave); }
.dash-setor__vazio { color: var(--cor-texto-suave); font-size: .84rem; margin: 4px 0 0; }

.dash-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
/* Chip do item: livre (padrão, apagado) */
.dash-item {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 16px 10px 13px; border-radius: 14px;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave); text-align: center;
  transition: transform .15s, box-shadow .2s, border-color .2s;
}
.dash-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px -10px rgba(0,0,0,.4); }

/* ---- Comandas do PDV no card do apartamento ----
   Vermelho = tem consumo servido e AINDA NÃO lançado na conta do hóspede (o pior estado: some no check-out
   e ninguém mais lembra). Verde = tudo já conferido e lançado no PMS. Sem comanda, não aparece nada. */
.dash-comanda {
  position: absolute; top: 6px; left: 6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: .68rem; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px -1px rgba(0,0,0,.3);
}
.dash-comanda--pend { background: var(--cor-erro); }
.dash-comanda--ok { background: var(--cor-sucesso); }
.dash-comanda:hover { filter: brightness(1.1); transform: scale(1.1); }

/* Uma comanda dentro do modal */
.cmd-linha { border-left: 3px solid var(--cor-sucesso); background: var(--cor-fundo); border-radius: 10px;
             padding: 10px 12px; margin-bottom: 10px; }
.cmd-linha--pend { border-left-color: var(--cor-erro); }
.cmd-linha__topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cmd-pdv { font-size: .8rem; color: var(--cor-texto-suave); }
.cmd-quando { font-size: .78rem; color: var(--cor-texto-suave); }
.cmd-valor { margin-left: auto; font-weight: 700; white-space: nowrap; }
.cmd-itens { font-size: .84rem; color: var(--cor-texto-suave); margin: 5px 0 7px; }
.cmd-linha__pe { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-item__icone {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 3px;
  background: var(--cor-primaria-suave); color: var(--cor-primaria);
}
.dash-item__codigo { font-weight: 600; font-size: .98rem; color: var(--cor-texto); letter-spacing: .02em; }
.dash-item__tipo {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--cor-texto-suave); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Chip OCUPADO: aceso em verde */
.dash-item--on {
  border-color: var(--cor-sucesso);
  background: linear-gradient(160deg, rgba(22,163,74,.12), rgba(22,163,74,.03));
  box-shadow: 0 0 0 1px rgba(22,163,74,.25), 0 8px 22px -12px rgba(22,163,74,.6);
}
.dash-item--on .dash-item__icone { background: rgba(22,163,74,.16); color: var(--cor-sucesso); }
.dash-item--on .dash-item__codigo { color: var(--cor-texto); }
/* Ponto pulsante no canto do chip ocupado */
.dash-item__dot {
  position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cor-sucesso); box-shadow: 0 0 0 0 rgba(22,163,74,.55);
  animation: dash-pulse 1.8s infinite;
}
@keyframes dash-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
/* Contador de dispositivos (quando > 1 no mesmo item) */
.dash-item__qtd {
  position: absolute; top: 7px; left: 9px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--cor-sucesso); color: #fff;
  font-size: .7rem; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
@media (prefers-reduced-motion: reduce) { .dash-item__dot { animation: none; } }

/* ---- NÃO PERTURBE no card do apartamento (Dashboard da recepção) ----
   Mesma cor e mesmo ícone (sino cortado) do selo da Governança: quem trabalha nas duas telas reconhece o
   aviso sem ler. Canto INFERIOR direito — os de cima já são das comandas (esquerda) e do online (direita).
   Só ícone, sem texto: o card é pequeno e o motivo já está no title. */
.dash-dnd {
  position: absolute; right: 6px; bottom: 6px;
  width: 20px; height: 20px; border-radius: 999px;
  background: #7C3AED; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px -1px rgba(0,0,0,.3);
}

/* Item ocupado é clicável (abre o modal de conexões) */
/* Apto OCUPADO sem ninguém conectado: âmbar. Cor diferente do online de propósito — quem lê o mapa
   precisa distinguir "tem hóspede" de "tem hóspede usando a internet". Não é clicável (não há conexão
   a mostrar no modal). */
.dash-item--ocupado {
    border-color: rgba(245,158,11,.45);
    background: rgba(245,158,11,.07);
}
.dash-item--ocupado .dash-item__icone { background: rgba(245,158,11,.18); color: var(--cor-alerta); }
.dash-item--ocupado .dash-item__codigo { color: var(--cor-texto); }
.dash-item--ocupado .dash-item__dot { background: var(--cor-alerta); }

.dash-item--on { cursor: pointer; }
.dash-item--on:focus-visible { outline: 2px solid var(--cor-sucesso); outline-offset: 2px; }

/* ====== Modal "conexões do item" (Dashboard) — flutuante, não cobre a tela toda ====== */
.mcx-back {
  position: fixed; inset: 0; z-index: 90; padding: 24px;
  background: rgba(15,42,82,.5); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.mcx-back.aberto { opacity: 1; pointer-events: auto; }
.mcx {
  width: 100%; max-width: 840px; max-height: 86vh; display: flex; flex-direction: column;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-left: 5px solid var(--cor-sucesso);
  border-radius: var(--raio); box-shadow: 0 24px 60px -20px rgba(0,0,0,.55);
  transform: translateY(14px) scale(.98); transition: transform .24s cubic-bezier(.22,1,.36,1);
}
.mcx-back.aberto .mcx { transform: none; }
/* Nível 1 (dispositivos online): quadro 25% mais estreito que o Nível 2 (que tem a tabela larga). */
.mcx-back.mcx-n1 .mcx { max-width: 630px; }
/* Cabeçalho */
.mcx__head { display: flex; align-items: center; gap: 13px; padding: 18px 20px; border-bottom: 1px solid var(--cor-borda); }
.mcx__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(22,163,74,.16); color: var(--cor-sucesso); display: flex; align-items: center; justify-content: center; }
.mcx__tt { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.18rem; color: var(--cor-texto); line-height: 1.1; }
.mcx__sub { font-size: .78rem; color: var(--cor-texto-suave); margin-top: 3px; display: flex; align-items: center; gap: 7px; }
.mcx__on { display: inline-flex; align-items: center; gap: 5px; color: var(--cor-sucesso); font-weight: var(--peso-destaque); }
.mcx__on .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cor-sucesso); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.mcx__x { margin-left: auto; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--cor-borda); background: var(--cor-fundo); color: var(--cor-texto-suave); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; }
.mcx__x:hover { border-color: var(--cor-erro); color: var(--cor-erro); }
/* Resumo (totais) */
.mcx__resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; padding: 16px 20px; }
.mcx-kpi { background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 12px 14px; }
.mcx-kpi--t { border-left: 3px solid #2F7DF6; }
.mcx-kpi--d { border-left: 3px solid #16A34A; }
.mcx-kpi--u { border-left: 3px solid #8B5CF6; }
.mcx-kpi__rot { display: flex; align-items: center; gap: 6px; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-suave); }
.mcx-kpi__rot svg { width: 14px; height: 14px; }
.mcx-kpi__val { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.32rem; color: var(--cor-texto); margin-top: 5px; }
.mcx-kpi__val small { font-size: .72rem; font-weight: var(--peso-texto); color: var(--cor-texto-suave); }
/* Corpo (tabela rolável) */
.mcx__body { padding: 14px 20px 6px; overflow-y: auto; }
/* Nível 1: cartões de dispositivo online agora */
.mcx-disp { border: 1px solid var(--cor-borda); border-left: 3px solid var(--cor-sucesso); border-radius: 12px; padding: 13px 15px; margin-bottom: 11px; background: var(--cor-fundo); }
.mcx-disp__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mcx-disp__id { display: flex; flex-direction: column; min-width: 0; }
.mcx-disp__nome { font-weight: var(--peso-destaque); color: var(--cor-texto); font-size: .96rem; }
.mcx-disp__login { font-size: .76rem; color: var(--cor-texto-suave); font-family: var(--fonte-mono, ui-monospace, monospace); }
.mcx-disp__met { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--cor-texto-suave); margin-bottom: 12px; }
.mcx-disp__met span { display: inline-flex; align-items: center; gap: 6px; }
.mcx-disp__met svg { width: 14px; height: 14px; opacity: .8; }
.mcx-disp__met b { color: var(--cor-texto); font-weight: var(--peso-destaque); }
.mcx-disp__met .mcx-mac { color: var(--cor-texto); }
/* Botão "Histórico" (Nível 1 → 2): pílula compacta e colorida (fica claro que é clicável). */
.mcx-disp__hist { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 6px 14px; font-family: inherit; font-size: .8rem; font-weight: var(--peso-destaque); line-height: 1; border-radius: 999px; border: 1px solid var(--cor-primaria); background: var(--cor-primaria-suave); color: var(--cor-primaria); cursor: pointer; transition: all .15s; }
.mcx-disp__hist:hover { background: var(--cor-primaria); color: #fff; }
.mcx-disp__hist svg { width: 14px; height: 14px; }
/* Nível 2: abas de período + grade de KPIs dentro do corpo */
.mcx-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mcx-tabs button { border: 1px solid var(--cor-borda); background: var(--cor-superficie); color: var(--cor-texto-suave); font-family: inherit; font-size: .8rem; font-weight: var(--peso-destaque); padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: all .15s; }
.mcx-tabs button:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.mcx-tabs button.on { background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria); }
.mcx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin-bottom: 14px; }
.mcx__body .tabela td { font-size: .84rem; }
.mcx-mac { font-family: var(--fonte-mono, ui-monospace, monospace); font-size: .82rem; }
.mcx-liveflag { display: inline-flex; align-items: center; gap: 5px; color: var(--cor-sucesso); font-weight: var(--peso-destaque); }
.mcx-liveflag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cor-sucesso); animation: dash-pulse 1.8s infinite; }
.mcx-vazio { padding: 26px 4px; text-align: center; color: var(--cor-texto-suave); font-size: .88rem; }
.mcx-carregando { padding: 30px 4px; text-align: center; color: var(--cor-texto-suave); font-size: .88rem; }
/* Rodapé (ações) */
.mcx__foot { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-top: 1px solid var(--cor-borda); }
.mcx__foot .obs { font-size: .76rem; color: var(--cor-texto-suave); margin-right: auto; }
@media (max-width: 560px) {
  .mcx-back { padding: 0; align-items: flex-end; }
  .mcx { max-width: none; max-height: 92vh; border-radius: 20px 20px 0 0; border-left: 0; border-top: 4px solid var(--cor-sucesso); }
}

/* ============================================================
   Diálogo padrão (confirmar / avisar)
   Substitui a caixinha do navegador (confirm/alert), que ignora
   o nosso visual. Ver wwwroot/js/dialogo.js — ele também adota
   automaticamente os confirm() antigos escritos no HTML.
   ============================================================ */
.dlg-fundo {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;                       /* acima dos modais das telas */
  animation: dlg-surge .12s ease-out;
}

.dlg {
  width: 100%;
  max-width: 440px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-primaria);   /* faixa colorida à esquerda, como os cards */
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .25);
  padding: 22px 24px;
  animation: dlg-sobe .16s ease-out;
}

.dlg__titulo {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-destaque);
  font-size: 1.1rem;
  color: var(--cor-texto);
  margin: 0 0 8px;
}

.dlg__texto {
  color: var(--cor-texto-suave);
  line-height: 1.55;
  margin: 0;
  white-space: pre-line;              /* respeita as quebras de linha da mensagem */
}

.dlg__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

@keyframes dlg-surge { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlg-sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .dlg-fundo, .dlg { animation: none; }
}

@media (max-width: 480px) {
  .dlg__acoes { flex-direction: column-reverse; }
  .dlg__acoes .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Botão flutuante VOLTAR
   Nasceu do uso real: em telas de detalhe (editor de routerboard,
   ficha do GED, editar pedido) não havia caminho de volta — só
   refazer o percurso inteiro pelo menu.

   Fica no canto inferior DIREITO, encostado à direita mas com
   folga suficiente para não cobrir a barra de rolagem da página
   (uma barra clássica tem ~15px; por isso o afastamento é maior
   que isso). Em repouso é discreto e ganha contraste no hover:
   ele acompanha o operador a tela toda, então não pode competir
   com o conteúdo.
   ============================================================ */
.fab-voltar {
  position: fixed;
  right: 22px;
  bottom: 22px;
  /* ⚠️ Camada BAIXA de propósito. Os modais do sistema ficam em 50/60 (os das telas: KDS, editar
     pedido, automações, fluxo do robô), 80 (overlay do site.css) e 90; o diálogo padrão, em 200.
     Num z-index alto o botão flutuaria POR CIMA do fundo escurecido do modal — ficaria clicável com
     um modal aberto e mandaria o operador para outra tela no meio de uma confirmação. Em 35 ele
     desaparece sob qualquer modal, que é o comportamento certo. */
  z-index: 35;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;

  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: .9rem;
  font-weight: var(--peso-destaque);
  cursor: pointer;

  box-shadow: var(--sombra);
  opacity: .92;
  transition: opacity .15s ease, transform .15s ease, background .15s ease, color .15s ease;
}

.fab-voltar:hover {
  opacity: 1;
  transform: translateY(-1px);
  background: var(--cor-primaria);
  color: #fff;
  border-color: var(--cor-primaria);
}

.fab-voltar:active { transform: translateY(0); }

.fab-voltar:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

.fab-voltar i { width: 18px; height: 18px; flex: none; }

/* Modo TV (cozinha, entregas, painéis): tela de leitura, sem navegação — o mesmo
   critério que já esconde menu e topbar. */
body.modo-tv .fab-voltar { display: none !important; }

/* Telas estreitas: só o ícone. O rótulo ocuparia largura que falta ao conteúdo, e
   no celular o próprio sistema já oferece o gesto de voltar. */
@media (max-width: 640px) {
  .fab-voltar {
    right: 14px;
    bottom: 14px;
    height: 42px;
    width: 42px;
    padding: 0;
    justify-content: center;
  }
  .fab-voltar span { display: none; }
}

/* Respeita quem pediu menos animação no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
  .fab-voltar { transition: none; }
  .fab-voltar:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Faixa "módulo não contratado" — só o SuperAdmin a vê, ao abrir um módulo que
   o hotel ativo não comprou. Existe para ele não diagnosticar suporte por uma
   tela que o cliente não enxerga. Âmbar de ATENÇÃO, não vermelho de erro: não
   há nada errado acontecendo, é só um contexto que ele precisa saber.
--------------------------------------------------------------------------- */
.aviso-plano {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 16px; padding: 10px 14px; border-radius: 8px;
  background: rgba(245, 158, 11, .12); border-left: 3px solid var(--cor-alerta, #F59E0B);
  font-size: .88rem; line-height: 1.4; color: var(--cor-texto);
}
.aviso-plano i { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--cor-alerta, #F59E0B); }
.aviso-plano a { margin-left: 6px; color: var(--cor-primaria); text-decoration: underline; }

/* Pager das listagens longas (wwwroot/js/paginacao-tabelas.js): aparece SOZINHO sob toda tabela do
   design system com mais de 100 linhas — nenhuma tela precisa declará-lo. Tokens dos dois temas. */
.pagtab { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0 2px; }
.pagtab__btn {
  border: 1px solid var(--cor-borda); background: var(--cor-superficie); color: var(--cor-texto);
  border-radius: 8px; padding: 7px 14px; font-size: .82rem; cursor: pointer;
}
.pagtab__btn:hover:not(:disabled) { background: var(--cor-primaria-suave); color: var(--cor-primaria); }
.pagtab__btn:disabled { opacity: .45; cursor: default; }
.pagtab__info { font-size: .8rem; color: var(--cor-texto-suave); }