/* Janus — componentes sobre o METRA Design System.
   Tudo aqui usa apenas variáveis de tokens/*.css (copiadas do design system oficial),
   então o tema noturno (<html data-tema="noturno">) funciona sem regras extras.
   Regras do DS respeitadas: sem gradiente, sem vidro, sem sombra além de --sombra-card,
   hover por troca de cor (nunca movimento), foco com halo de 3px, caixa-alta só em micro-rótulos. */

html { font-family: var(--font-digital); }
body {
  font-family: var(--font-digital);
  font-size: var(--texto-corpo-sm);
  line-height: var(--lh-corpo);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
::placeholder { color: var(--text-disabled); }
a { color: var(--text-link); transition: color var(--transicao-rapida); }
a:hover { color: var(--text-link-hover); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--action-primary-bg); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Campos (também cobre o markup antigo do check-in) ───────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
select, textarea {
  font-family: var(--font-digital);
  color: var(--text-primary);
  background-color: var(--surface-card) !important;
  border: var(--borda-campo) !important;
  border-radius: var(--raio-sm) !important;
  outline: none;
  transition: border-color var(--transicao-rapida), box-shadow var(--transicao-rapida);
}
input:not([type="checkbox"]):not([type="radio"]):hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--border-field-hover) !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  border-color: var(--border-focus) !important;
  box-shadow: var(--focus-ring) !important;
}
input:disabled, select:disabled, textarea:disabled {
  background-color: var(--action-disabled-bg) !important;
  color: var(--action-disabled-fg);
  cursor: not-allowed;
}

/* ── Rótulos e títulos ───────────────────────────────────────────────────── */
.label-caps {
  font-size: var(--texto-label); font-weight: 700; letter-spacing: var(--ls-rotulo);
  text-transform: uppercase; color: var(--text-muted);
}
.eyebrow {
  font-size: var(--texto-eyebrow); font-weight: 700; letter-spacing: var(--ls-sublabel);
  text-transform: uppercase; color: var(--text-muted);
}
.h-display { font-size: var(--texto-display); font-weight: 800; line-height: 1; letter-spacing: var(--ls-display); color: var(--text-primary); }
.h1 { font-size: var(--texto-h1); font-weight: 700; line-height: var(--lh-titulo); color: var(--text-primary); }
.h2 { font-size: var(--texto-h2); font-weight: 700; line-height: var(--lh-titulo); color: var(--text-primary); }
.rule { border: 0; border-top: var(--borda-hairline); margin: 40px 0; }

/* ── Botões ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-digital); font-size: 13px; font-weight: 600; letter-spacing: var(--ls-acao);
  line-height: 1.2; padding: var(--botao-padding); border-radius: var(--raio-sm);
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--transicao-rapida), color var(--transicao-rapida), border-color var(--transicao-rapida);
}
.btn-sm { padding: 7px 14px; font-size: 12px; }
.btn-primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }
.btn-primary:hover { background: var(--action-primary-hover); }
.btn-secondary { background: var(--action-secondary-bg); color: var(--action-secondary-fg); }
.btn-secondary:hover { background: var(--action-secondary-hover); }
.btn-outline { background: transparent; color: var(--action-outline-fg); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--surface-subtle); }
.btn-ghost { background: transparent; color: var(--action-ghost-fg); padding-left: 10px; padding-right: 10px; }
.btn-ghost:hover { color: var(--action-ghost-hover); }
/* ação destrutiva (confirmações): usa o tom de erro do DS, que existe só para estado */
.btn-danger { background: var(--metra-erro-fg); color: #fff; }
.btn-danger:hover { filter: brightness(1.15); }
.btn:disabled, .btn[disabled] {
  background: var(--action-disabled-bg); color: var(--action-disabled-fg); border-color: transparent; cursor: not-allowed;
}

/* Coluna Ações: botão principal centralizado, "Mais" à direita. */
.act-cell { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.act-more { justify-self: end; }

.name-link { color: inherit; text-decoration: none; }
.name-link:hover, .name-link:focus-visible { text-decoration: underline; }

/* ── Menu "Mais ações" (details) ─────────────────────────────────────────── */
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu-list {
  position: fixed; z-index: 50; min-width: 11rem; padding: 6px; display: flex; flex-direction: column;
  background: var(--surface-card); border: var(--borda-hairline); border-radius: var(--raio-md); box-shadow: var(--sombra-card);
}
.menu-item {
  text-align: left; padding: 8px 12px; font-size: 13px; border-radius: var(--raio-md);
  background: transparent; color: var(--text-primary); border: 0; cursor: pointer;
}
.menu-item:hover { background: var(--surface-subtle); }

/* ── Pílulas de status (Badge / StatusCell do DS) ────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 14px; border-radius: var(--raio-pill); border: 1px solid;
  font-size: var(--texto-label); font-weight: 700; letter-spacing: var(--ls-badge); text-transform: uppercase;
}
.pill-ok      { background: var(--metra-sucesso-bg); color: var(--metra-sucesso-fg); border-color: var(--metra-sucesso-borda); }
.pill-warn    { background: var(--metra-alerta-bg);  color: var(--metra-alerta-fg);  border-color: var(--metra-alerta-borda); }
.pill-err     { background: var(--metra-erro-bg);    color: var(--metra-erro-fg);    border-color: var(--metra-erro-borda); }
.pill-info    { background: rgba(56, 189, 248, .14); color: #0369a1; border-color: rgba(56, 189, 248, .45); }
@media (prefers-color-scheme: dark) { .pill-info { color: #7dd3fc; } }
.pill-neutral { background: var(--surface-subtle);   color: var(--text-primary);     border-color: var(--border-default); }

/* ── Cartões ─────────────────────────────────────────────────────────────── */
.card { padding: var(--card-padding); border: var(--borda-hairline); border-radius: var(--raio-md); background: var(--surface-card); }
.card-inverse { padding: 24px 26px; border-radius: var(--raio-md); background: var(--surface-inverse); color: var(--text-inverse); }
.card-feature { padding: 22px 20px; border-radius: var(--raio-md); background: var(--surface-subtle); border-top: var(--borda-topo-destaque); }
.callout {
  font-size: var(--texto-small); font-style: italic; color: var(--text-muted); padding: 14px 18px;
  background: var(--metra-alerta-bg); border-left: 3px solid var(--metra-alerta-traco); border-radius: 0 var(--raio-xs) var(--raio-xs) 0;
}
.callout-err { background: var(--metra-erro-bg); border-left-color: var(--metra-erro-fg); color: var(--metra-erro-fg); font-style: normal; }

/* ── Tabela: régua no cabeçalho, linhas com fio, sem zebra nem fundo de linha ── */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; white-space: nowrap; padding: 0 16px 14px 0; background: var(--surface-page);
  font-size: var(--tabela-cabecalho-tamanho); font-weight: var(--tabela-cabecalho-peso); color: var(--text-primary);
}
.tbl thead tr { border-bottom: var(--tabela-regua); }
.tbl td { padding: var(--tabela-celula-padding-confortavel); font-size: var(--tabela-celula-tamanho); color: var(--text-body); vertical-align: middle; }
.tbl tbody tr { border-bottom: var(--tabela-linha-borda); transition: background var(--transicao-rapida); }
.tbl tbody tr:hover { background: var(--tabela-linha-hover); }
.tbl tbody tr.mine td { box-shadow: inset 0 2px 0 var(--action-primary-bg), inset 0 -2px 0 var(--action-primary-bg); background: var(--surface-subtle); }
.tbl tbody tr.mine td:first-child { box-shadow: inset 2px 2px 0 var(--action-primary-bg), inset 0 -2px 0 var(--action-primary-bg); }
.tbl tbody tr.mine td:last-child { box-shadow: inset -2px 2px 0 var(--action-primary-bg), inset 0 -2px 0 var(--action-primary-bg); }
.tbl td:first-child, .tbl .strong { color: var(--text-primary); font-weight: 600; }
.tbl th.r, .tbl td.r { text-align: right; padding-right: 0; }
.tbl.compact td { padding: var(--tabela-celula-padding-compacta); }
.tbl.tbl th:first-child, .tbl.tbl td:first-child { padding-left: 14px; }   /* folga para a borda da linha destacada */
.tbl.tbl th:last-child, .tbl.tbl td:last-child { padding-right: 14px; }
.tbl-empty { padding: 56px 24px; text-align: center; }
.tbl-empty p:first-child { margin: 0; font-size: var(--texto-corpo); font-weight: 600; color: var(--text-primary); }
.tbl-empty p:last-child { margin: 6px 0 0; font-size: var(--texto-small); color: var(--text-muted); }

/* ── Navegação por abas (texto + régua de 2px) ───────────────────────────── */
.tabs { display: flex; align-items: stretch; gap: 24px; }
.tab {
  text-decoration: none;
  display: inline-flex; align-items: center; white-space: nowrap;
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 14px 0;
  font-family: var(--font-digital); font-size: 13px; font-weight: 600; letter-spacing: var(--ls-acao);
  color: var(--text-muted); cursor: pointer; transition: color var(--transicao-rapida), border-color var(--transicao-rapida);
}
.tab:hover { color: var(--text-primary); }
.tab[aria-current="true"] { color: var(--text-primary); border-bottom-color: var(--border-strong); }
/* em linha única (lg+) a aba ocupa a altura do cabeçalho e o traço fica na borda inferior */
@media (min-width: 1024px) { .tab { padding: 0; } }

/* ── Modal e sobreposições ───────────────────────────────────────────────── */
.modal-backdrop { background: rgba(13, 21, 64, 0.55); }
.modal { background: var(--surface-card); border: var(--borda-hairline); border-radius: var(--raio-md); box-shadow: var(--sombra-card); }

/* ── Linha preferencial: só a pílula; urgência nunca pinta a linha (regra do DS) ── */
.skeleton { display: block; height: 10px; border-radius: 3px; background: var(--tabela-esqueleto); }

/* ── Logo: azul no tema claro, branco no noturno (regra do DS) ───────────── */
.logo-branco { display: none; }
[data-tema="noturno"] .logo-azul { display: none; }
[data-tema="noturno"] .logo-branco { display: block; }

/* ── Tradução para estrangeiros: texto que alterna de idioma com fade ───────── */
.i18n { transition: opacity 300ms ease; }
.i18n.i18n-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .i18n { transition: none; } }

/* texto sob o checkbox "Sou estrangeiro(a)": parágrafo simples (não parece campo), sempre visível */
.i18n-note { margin: 2px 0 0; min-height: 1.5em; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--text-muted); }
/* linha de tradução sob cada rótulo: só aparece com o checkbox marcado (body.foreign-on) */
.i18n-line {
  display: none; margin: -4px 0 8px; min-height: 1.3em;
  font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--text-muted);
}
.foreign-on .i18n-line { display: block; }

/* selo "Opcional" do bloco de endereço: a tradução entra ao lado, só com o checkbox de estrangeiro */
.i18n-inline { display: none; text-transform: none; letter-spacing: 0; font-weight: 600; }
.i18n-inline::before { content: " · "; }
.foreign-on .i18n-inline { display: inline; }

/* linha traduzida sempre visível (ex.: confirmação de um estrangeiro, onde não há checkbox) */
.i18n-line.show { display: block; margin: 2px 0 8px; font-size: 13px; line-height: 1.4; }

/* Textos longos sem espaço (nome, empresa, rótulo de guichê, e-mail) quebram em vez de alargar tabela/página. */
.tbl td, .tbl th, .card, .pill { overflow-wrap: anywhere; word-break: normal; }
.tbl td.strong { min-width: 0; }

/* ══ Responsivo: telas pequenas operam sem rolagem horizontal ═══════════════
   Tabelas viram cartões (rótulos vêm de data-label, preenchido por _head.blade.php),
   cabeçalho e abas quebram linha, formulários empilham, alvos de toque ≥ 40px. */
body { overflow-x: clip; }
img, svg, video { max-width: 100%; }
.card-inverse { overflow-wrap: anywhere; }

/* tablet e abaixo: abas quebram em vez de rolar */
@media (max-width: 1023px) {
  #tabs { flex-wrap: wrap; overflow: visible; gap: 0 20px; }
  header > div.flex { flex-wrap: wrap; row-gap: 4px; }
}

@media (max-width: 767px) {
  /* ── Tabela → lista de cartões ─────────────────────────────────────────── */
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl tbody tr {
    margin-bottom: 12px; padding: 8px 0; background: var(--surface-card);
    border: var(--borda-hairline); border-radius: var(--raio-md);
  }
  .tbl td, .tbl.tbl td:first-child, .tbl.tbl td:last-child, .tbl th.r, .tbl td.r {
    padding: 5px 14px; text-align: left; border: 0;
  }
  .tbl td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 1px;
    font-size: var(--texto-label); font-weight: 700; letter-spacing: var(--ls-rotulo);
    text-transform: uppercase; color: var(--text-muted);
  }
  .tbl td[data-label="#"]::before, .tbl td[data-label="Ações"]::before { display: none; }
  .tbl td[colspan] { padding: 0; }
  .tbl tbody tr.mine, .tbl tbody tr.mine:hover { box-shadow: inset 0 0 0 2px var(--action-primary-bg); background: var(--surface-subtle); }
  .tbl tbody tr.mine td, .tbl tbody tr.mine td:first-child, .tbl tbody tr.mine td:last-child { box-shadow: none; background: none; }
  .tbl-empty { padding: 32px 16px; }

  /* ações da linha: botões lado a lado, com alvo de toque */
  .act-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .act-cell > span:empty { display: none; }
  .act-more { justify-self: auto; margin-left: auto; }
  .tbl .btn-sm, .tbl .menu-item { min-height: 40px; }
  .tbl td .flex.justify-end { justify-content: flex-start; }
}

@media (max-width: 639px) {
  main[class] { padding-top: 1.75rem; padding-bottom: 4rem; }
  header.sticky { position: static; }
  header .logo-azul, header .logo-branco { height: 2.5rem; margin-top: .5rem; margin-bottom: .5rem; }
  .tab { padding: 12px 0; }

  .h1 { font-size: 24px; }
  .h2 { font-size: 19px; }
  .rule { margin: 28px 0; }
  .card { padding: 18px; }
  .card-inverse { padding: 18px; }

  /* campos ≥16px (iOS não dá zoom ao focar) e altura de toque */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select, textarea { font-size: 16px; min-height: 44px; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }

  /* linhas de formulário empilham: campo e botão ocupam a largura toda */
  form.flex { flex-wrap: wrap; }
  form.flex > input, form.flex > select, form.flex > div, form.flex > .btn { flex: 1 1 100%; width: 100%; min-width: 0; }
  form.grid { grid-template-columns: minmax(0, 1fr); }
  #queue-bar { flex-direction: column; align-items: stretch; }
  #queue-bar > .btn, #queue-bar > div { width: 100%; }
  #guiche { flex: 1 1 auto; min-width: 0; width: 100%; }
  #search { min-width: 0; }
  .menu-list { max-width: calc(100vw - 16px); }

  /* modal: botões empilhados, cancelar por último */
  .modal { padding: 20px; }
  .modal .btn { flex: 1 1 100%; }
  #m-cancel { order: 2; }

}

@media (max-width: 639px) {
  header > div.flex { padding-left: 16px; padding-right: 16px; }
  header .logo-azul, header .logo-branco { height: 2rem; }
  header > div.flex { column-gap: 6px; }
  header #tema-toggle { padding-left: 4px; padding-right: 4px; font-size: 11px; }
  header .menu-burger { width: 40px; margin-left: 0; }
}

/* telas muito estreitas: o tema vira só o ícone ◐ (o texto continua no DOM, para leitores de tela) */
@media (max-width: 399px) {
  header #tema-toggle { font-size: 0; padding: 0; width: 40px; }
  header #tema-toggle::before { content: "◐"; font-size: 20px; }
}

/* ── Menu sanduíche (<1024px): só "Fila" e o tema ficam à mostra; o resto abre no botão ── */
.menu-burger { display: none; }
@media (max-width: 1023px) {
  #tabs, header .hdr-tools { display: contents; }
  header > div.flex { column-gap: 10px; }
  header .logo-azul, header .logo-branco { order: 0; }
  #tabs > .tab[data-tab="fila"] { order: 1; padding: 12px 0; }
  header .hdr-tools > #tema-toggle { order: 2; margin-left: auto; }
  .menu-burger {
    order: 3; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    margin-left: 4px; background: transparent; border: 0; border-radius: var(--raio-sm); color: var(--text-primary); cursor: pointer;
  }
  .menu-burger:hover { background: var(--surface-subtle); }
  .menu-burger svg { width: 24px; height: 24px; }
  /* itens do menu: escondidos até abrir; depois, uma coluna de largura total abaixo da barra */
  #tabs > .tab:not([data-tab="fila"]), header .hdr-tools > form, header .hdr-tools > span { display: none; order: 10; }
  header.menu-open #tabs > .tab:not([data-tab="fila"]) {
    display: flex; flex: 1 1 100%; padding: 14px 0; border-bottom: var(--borda-hairline);
  }
  header.menu-open .hdr-tools > form, header.menu-open .hdr-tools > span { display: block; flex: 1 1 100%; margin: 8px 0; }
  header.menu-open .hdr-tools > form select, header.menu-open .hdr-tools > form .btn { width: 100%; }
  header.menu-open .hdr-tools > span.hidden { display: none; }
}

/* nome do tenant (JANUS): à direita, junto do tema, no desktop; ao lado do logo nas telas pequenas */
@media (max-width: 1023px) {
  header .hdr-tools > span.label-caps, header.menu-open .hdr-tools > span.label-caps {
    order: 0; display: block; flex: 0 1 auto; margin: 0; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}