/*
 * Painel: só o layout específico. Cores, fontes e componentes vêm de /ds/tokens.css e /ds/components/bundle.css.
 * Regras deste arquivo: tudo com var(--token); nada de cor escrita à mão, nada de @font-face.
 * A cor da empresa chega por script (--empresa-destaque no <html>) e só pinta a faixa do topo.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid transparent; box-shadow: var(--anel-foco); }
button { font: inherit; }
[hidden] { display: none !important; }

#app { min-height: 100vh; display: flex; flex-direction: column; }
.sem-js { padding: var(--espaco-6); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- estrutura ---------- */
.conteudo { flex: 1; width: 100%; max-width: var(--largura-painel); margin: 0 auto; padding: var(--espaco-6); display: flex; flex-direction: column; gap: var(--espaco-6); }
.rodape { padding: var(--espaco-4) var(--espaco-6); text-align: center; color: var(--texto-2); }
.secao { display: flex; flex-direction: column; gap: var(--espaco-4); }
.secao-titulo { margin: 0; font: 600 20px/28px var(--font-texto); }
.pagina-titulo { margin: 0; font: 700 32px/36px var(--font-titulo); letter-spacing: .01em; }
.pagina-titulo:focus { outline: none; }
.cabeca { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; justify-content: space-between; }
.cabeca__esq { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: baseline; }
.cabeca__dir { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; }
.suave { color: var(--texto-2); }
.nota { margin: 0; color: var(--texto-2); font-size: 13px; line-height: 18px; }
.mono { font-family: var(--font-mono); font-size: 13px; line-height: 19px; }
.voltar { display: inline-flex; align-items: center; gap: var(--espaco-2); min-height: var(--alvo-toque); align-self: flex-start; }
.voltar svg { width: 18px; height: 18px; }
.carregando { margin: 0; color: var(--texto-2); }
.dados { display: grid; grid-template-columns: max-content 1fr; gap: var(--espaco-2) var(--espaco-6); margin: 0; }
.dados dt { color: var(--texto-2); }
.dados dd { margin: 0; }
.lista-simples { margin: 0; padding-left: var(--espaco-5); }
.acoes-linha { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; }
.acoes-fim { justify-content: flex-end; }
.rodape-form { display: flex; flex-wrap: wrap; gap: var(--espaco-3); justify-content: flex-end; align-items: center; }
.colunas-estreitas { max-width: 880px; width: 100%; }
.cartao-bloco { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-3); padding: var(--espaco-4); display: flex; flex-direction: column; gap: var(--espaco-4); }

/* ---------- topo e navegação ---------- */
.topo-direita { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; }
.topo-empresa select { min-height: var(--alvo-toque); padding: 0 var(--espaco-3); border-radius: var(--raio-2); border: 1px solid var(--on-cabecalho); background: var(--cabecalho-ativo); color: var(--on-cabecalho); font: inherit; }
.menu-usuario { position: relative; }
.menu-usuario summary { display: flex; align-items: center; gap: var(--espaco-2); min-height: var(--alvo-toque); padding: 0 var(--espaco-3); border-radius: var(--raio-2); cursor: pointer; list-style: none; color: var(--on-cabecalho); max-width: 260px; }
.menu-usuario summary::-webkit-details-marker { display: none; }
.menu-usuario summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-usuario[open] summary { background: var(--cabecalho-ativo); }
.menu-usuario__lista { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 200px; margin-top: var(--espaco-1); padding: var(--espaco-2); display: flex; flex-direction: column; background: var(--superficie); color: var(--texto); border: 1px solid var(--linha); border-radius: var(--raio-3); box-shadow: var(--sombra-flutua); }
.menu-usuario__lista a, .menu-usuario__lista button { display: flex; align-items: center; min-height: var(--alvo-toque); padding: 0 var(--espaco-3); border: 0; background: none; color: var(--texto); text-decoration: none; text-align: left; border-radius: var(--raio-2); cursor: pointer; }
.menu-usuario__lista a:hover, .menu-usuario__lista button:hover { background: var(--superficie-funda); }
.nav-baixo-lugar { display: none; }
.abas { display: flex; flex-wrap: wrap; gap: var(--espaco-1); border-bottom: 1px solid var(--linha); }
.abas a { display: flex; align-items: center; min-height: var(--alvo-toque); padding: 0 var(--espaco-4); color: var(--texto-2); text-decoration: none; border-bottom: 3px solid transparent; font-weight: 500; }
.abas a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--acao); font-weight: 700; }
.abas a:hover { color: var(--texto); }

@media (max-width: 719.98px) {
  .topo-nav { display: none; }
  .menu-usuario { display: none; }
  .conteudo { padding: var(--espaco-4); padding-bottom: calc(var(--espaco-12) + var(--espaco-12)); gap: var(--espaco-5); }
  .rodape { padding-bottom: calc(var(--espaco-12) + var(--espaco-8)); }
  .nav-baixo-lugar { display: block; }
  .nav-baixo-lugar .ui-nav-baixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .pagina-titulo { font-size: 28px; line-height: 32px; }
  .dados { grid-template-columns: 1fr; gap: 0; }
  .dados dd { margin-bottom: var(--espaco-3); }
  .cabeca__dir, .cabeca__dir > * { width: 100%; }
}

/* ---------- entrada (login, convite, 2FA) ---------- */
.entrar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--espaco-5); padding: var(--espaco-6) var(--espaco-4); }
.entrar__cartao { width: 100%; max-width: 440px; }
.entrar__marca { font: 700 26px/28px var(--font-titulo); letter-spacing: .02em; text-transform: uppercase; }
.entrar__titulo { margin: 0; font: 700 32px/36px var(--font-titulo); }
.entrar__titulo:focus { outline: none; }
.qr-2fa { align-self: center; width: 200px; height: 200px; border-radius: var(--raio-2); border: 1px solid var(--linha); background: var(--superficie); }
.chave-2fa { display: block; padding: var(--espaco-3); border-radius: var(--raio-2); background: var(--superficie-funda); word-break: break-all; }
.codigos { margin: 0; padding: var(--espaco-4); list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-2); border-radius: var(--raio-2); background: var(--superficie-funda); }

/* ---------- formulários ---------- */
.grade-campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espaco-4); }
.grade-campos--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campo--2 { grid-column: span 2; }
.campo--cheio { grid-column: 1 / -1; }
.ui-campo input.mono-campo { font-family: var(--font-mono); }
.ui-campo--erro .ui-campo__prefixo { border-color: var(--erro); border-width: 2px; }
.ui-campo__prefixo .sufixo { padding: 0 var(--espaco-3) 0 0; }
.ui-campo__prefixo:focus-within { border-color: var(--foco); box-shadow: var(--anel-foco); }
.ui-campo__prefixo input:focus-visible { box-shadow: none; }
fieldset.grupo { margin: 0; padding: var(--espaco-4); border: 1px solid var(--linha); border-radius: var(--raio-3); display: flex; flex-direction: column; gap: var(--espaco-4); min-width: 0; }
fieldset.grupo legend { padding: 0 var(--espaco-2); font: 600 15px/20px var(--font-texto); }
fieldset.so-leitura { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--espaco-6); }
.seletor-linha { min-height: var(--alvo-toque); padding: 0 var(--espaco-2); border-radius: var(--raio-2); border: 1px solid var(--borda-campo); background: var(--superficie); color: var(--texto); font: inherit; max-width: 100%; }
.link-mapa { display: inline-flex; align-items: center; gap: var(--espaco-2); min-height: var(--alvo-toque); align-self: end; }
.link-mapa svg { width: 18px; height: 18px; }
.link-mapa[aria-disabled="true"] { color: var(--texto-2); text-decoration: none; pointer-events: none; }
.coord-acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; }
.cor-linha { display: flex; gap: var(--espaco-3); align-items: center; }
.cor-linha input[type="color"] { flex: none; width: var(--alvo-toque); min-height: var(--alvo-toque); padding: 2px; border-radius: var(--raio-2); border: 1px solid var(--borda-campo); background: var(--superficie); cursor: pointer; }
.cor-linha .ui-campo { flex: 1; }
.busca { position: relative; display: flex; align-items: center; min-width: 240px; }
.busca svg { position: absolute; left: var(--espaco-3); width: 18px; height: 18px; color: var(--texto-2); pointer-events: none; }
.busca input { width: 100%; min-height: var(--botao-painel); padding: 0 var(--espaco-3) 0 40px; border-radius: var(--raio-2); border: 1px solid var(--borda-campo); background: var(--superficie); color: var(--texto); font: inherit; }
.busca input:focus-visible { outline: 2px solid transparent; border-color: var(--foco); box-shadow: var(--anel-foco); }

/* ---------- pré-visualização da marca ---------- */
.previas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-4); align-items: start; }
.previa { display: flex; flex-direction: column; gap: var(--espaco-2); min-width: 0; }
.previa__moldura { border: 1px solid var(--linha); border-radius: var(--raio-3); overflow: hidden; }
.previa__topo { background: var(--cabecalho); color: var(--on-cabecalho); padding: var(--espaco-3) var(--espaco-4); }
.previa__topo .ui-marca__nome { font-size: 22px; }
.previa__faixa { height: 4px; background: var(--empresa-destaque); }
.previa__mesa { background: var(--fundo); color: var(--texto); padding: var(--espaco-4); display: flex; flex-direction: column; gap: var(--espaco-3); }
.previa__mesa .previa__topo { border-radius: var(--raio-2); }

/* ---------- listas e tabelas ---------- */
.lista-empresas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--espaco-3); }
.celula-sub { display: block; font-size: 13px; line-height: 18px; color: var(--texto-2); }
.celula-selos { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; }
.vazio-linha { padding: var(--espaco-6); text-align: center; color: var(--texto-2); margin: 0; }
.avisos { display: flex; flex-direction: column; gap: var(--espaco-3); }

@media (max-width: 899.98px) {
  .grade-campos, .grade-campos--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .previas { grid-template-columns: 1fr; }
}

@media (max-width: 719.98px) {
  .grade-campos, .grade-campos--tres { grid-template-columns: 1fr; }
  .campo--2, .campo--cheio { grid-column: auto; }
  .busca { min-width: 0; width: 100%; }
  .codigos { grid-template-columns: 1fr; }
  .rodape-form > * { flex: 1 1 100%; }
  .ui-dialogo__acoes > * { flex: 1 1 100%; }

  /* Tabela com mais de 4 colunas vira uma lista de cartões. */
  .tabela-cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; width: 100%; }
  .tabela-cartoes tr { padding: var(--espaco-3) var(--espaco-4); border-bottom: 1px solid var(--linha); }
  .tabela-cartoes tr:last-child { border-bottom: 0; }
  .tabela-cartoes td { border: 0; padding: var(--espaco-1) 0; display: flex; gap: var(--espaco-3); justify-content: space-between; align-items: center; text-align: right; }
  .tabela-cartoes td::before { content: attr(data-rotulo); flex: none; color: var(--texto-2); font-size: 13px; text-align: left; }
  .tabela-cartoes td:not([data-rotulo])::before { content: none; }
  .tabela-cartoes td.ui-tabela__num { text-align: right; }
  .tabela-cartoes td > * { text-align: left; }
}

/* ---------- confirmação ---------- */
.veu-tela { position: fixed; inset: 0; z-index: 60; }

/* ---------- movimento ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: var(--espaco-4); align-items: flex-end; }
.filtros .ui-campo { min-width: 180px; }
.filtros__datas { display: flex; flex-wrap: wrap; gap: var(--espaco-4); align-items: flex-end; }
@media (max-width: 719.98px) {
  .filtros, .filtros__datas { flex-direction: column; align-items: stretch; width: 100%; }
  .filtros .ui-campo { min-width: 0; }
}

/* ---------- ocorrências e linha do tempo da mesa ---------- */
.ocorrencia { display: flex; flex-direction: column; gap: var(--espaco-2); }
.ocorrencia__quando { margin: 0; font-weight: 600; }
.ocorrencia__dados { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--espaco-1) var(--espaco-4); }
.ocorrencia__dados dt { color: var(--texto-2); }
.ocorrencia__dados dd { margin: 0; }
.tempo-dia { display: flex; flex-direction: column; gap: var(--espaco-2); }
.tempo-dia__titulo { margin: 0; font: 600 15px/20px var(--font-texto); color: var(--texto-2); }
@media (max-width: 719.98px) {
  .ocorrencia__dados { grid-template-columns: 1fr; }
  .ocorrencia__dados dd { margin-bottom: var(--espaco-2); }
}

/* ---------- adesivo do QR ---------- */
.adesivo-tela { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--espaco-6); align-items: start; }
.adesivo-tela__previa { display: flex; flex-direction: column; gap: var(--espaco-2); align-items: flex-start; }
.ui-adesivo__mesa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 899.98px) {
  .adesivo-tela { grid-template-columns: 1fr; }
  .adesivo-tela__previa { align-items: center; }
}

/* ---------- primeiros passos ---------- */
.passo-explicacao { display: block; margin-top: var(--espaco-1); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--texto-2); }
.ui-checklist li > .ui-btn { flex: none; }
@media (max-width: 719.98px) {
  .ui-checklist li { flex-wrap: wrap; }
  .ui-checklist li > .ui-btn { width: 100%; }
}

/* T1: aceite dos termos */
.termos__cartao { max-width: 720px; margin: 0 auto; width: 100%; gap: var(--espaco-4); }
.termos__rolagem { max-height: 360px; overflow: auto; border: 1px solid var(--linha); border-radius: var(--raio-2); padding: var(--espaco-4); background: var(--superficie-funda); display: flex; flex-direction: column; gap: var(--espaco-4); }
.termos__doc-titulo { margin: 0 0 var(--espaco-2); font: 700 18px/24px var(--font-titulo); }
.termos__texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.termos__esqueleto { max-width: 720px; margin: 0 auto; width: 100%; }
.termos__esqueleto .ui-esqueleto:nth-child(3n+2) { width: 85%; }
.termos__esqueleto .ui-esqueleto:nth-child(3n) { width: 70%; }

/* P15: título do cartão com o selo ao lado */
.linha-titulo { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; justify-content: space-between; }
.linha-titulo h2 { margin: 0; font: 700 22px/28px var(--font-titulo); }

/* DV1 e DV2 */
.pilha { display: flex; flex-direction: column; gap: var(--espaco-5); }
.dupla { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--espaco-4); align-items: start; }

/* títulos dentro de cartões: o espaço vem do gap do cartão, não da margem do h2 */
.ui-cartao > h2 { margin: 0; }