/* Yatai Yoru · Componentes visuais base (27/10/2026)
   Mesmo molde do GIBI: uma classe base por tipo de elemento e variações que só trocam
   o que muda. As cores e medidas vêm de yy-tokens.css.
     Botão ........ .yy-botao + --principal | --perigo | --discreto | --pequeno
     Barra ........ .yy-barra-acoes (a ordem dos botões vem de YY.BarraAcoes)
     Campo ........ .yy-campo = .yy-rotulo + .yy-caixa + .yy-dica
     Menu ......... .yy-menu + .yy-menu-item | .yy-caminho | .yy-abas + .yy-aba
   Os cartões de módulo reaproveitam as classes aprovadas (approved-module e
   internal-module-card), por isso não têm regra aqui. */

/* ---------- Botão base (secundário, creme) ---------- */
.yy-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: var(--yy-botao-altura);
  padding: 0 18px;
  border: 1px solid var(--yy-secundario-borda);
  border-radius: var(--yy-raio);
  background: linear-gradient(var(--yy-secundario-topo), var(--yy-secundario-base));
  color: var(--yy-secundario-texto);
  font: 600 var(--yy-botao-fonte) / 1.2 var(--yy-fonte-ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.yy-botao:hover { filter: brightness(.97); }
.yy-botao:focus-visible { outline: 2px solid var(--yy-foco); outline-offset: 2px; }
.yy-botao:disabled,
.yy-botao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; }
.yy-botao svg { width: 16px; height: 16px; flex-shrink: 0; }
.yy-botao kbd { font: 500 10.5px var(--yy-fonte-mono); opacity: .75; }

/* Herança: principal (Ok, Salvar, Confirmar, Pesquisar, Novo, Incluir) */
.yy-botao--principal {
  border-color: var(--yy-principal-borda);
  background: linear-gradient(var(--yy-principal-topo), var(--yy-principal-base));
  color: var(--yy-principal-texto);
}
.yy-botao--principal:hover { filter: brightness(1.1); }

/* Herança: perigo (Excluir, Remover) */
.yy-botao--perigo {
  border-color: var(--yy-perigo);
  background: transparent;
  color: var(--yy-perigo);
}
.yy-botao--perigo:hover {
  border-color: var(--yy-principal-borda);
  background: var(--yy-principal-base);
  color: var(--yy-principal-texto);
  filter: none;
}

/* Herança: discreto (só ícone ou texto, sem moldura) */
.yy-botao--discreto {
  border-color: transparent;
  background: transparent;
  color: var(--yy-secundario-texto);
}

/* Variação de tamanho */
.yy-botao--pequeno {
  min-height: var(--yy-botao-altura-pequeno);
  padding: 0 11px;
  font-size: var(--yy-botao-fonte-pequeno);
}

/* ---------- Barra de ações ---------- */
.yy-barra-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.yy-barra-acoes .yy-barra-mensagem {
  margin-right: auto;
  font: 13px var(--yy-fonte-ui);
  color: var(--yy-tinta-suave);
}
@media (max-width: 600px) {
  .yy-barra-acoes .yy-botao { flex: 1; }
}

/* ---------- Rótulo e caixa de digitação ---------- */
.yy-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.yy-rotulo {
  font: 600 12.5px / 1.3 var(--yy-fonte-ui);
  color: var(--yy-rotulo-texto);
}
.yy-rotulo .yy-obrigatorio { color: var(--yy-perigo); font-style: normal; }
.yy-caixa {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--yy-caixa-altura);
  min-width: 0;
  border: 1px solid var(--yy-caixa-borda);
  border-radius: var(--yy-raio);
  background: var(--yy-caixa-fundo);
  color: var(--yy-caixa-texto);
}
.yy-caixa:focus-within { outline: 2px solid var(--yy-foco); outline-offset: 2px; }
.yy-caixa input,
.yy-caixa select,
.yy-caixa textarea {
  flex: 1;
  min-width: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: 14px var(--yy-fonte-ui);
  padding: 9px 11px;
  outline: none;
  box-shadow: none;
}
.yy-caixa textarea { min-height: 80px; resize: vertical; }
.yy-caixa--area { align-items: stretch; }
.yy-caixa--numero input { text-align: right; font-variant-numeric: tabular-nums; }
.yy-caixa .yy-prefixo { padding-left: 11px; color: var(--yy-tinta-suave); font: 13px var(--yy-fonte-ui); }
.yy-caixa .yy-sufixo { padding-right: 11px; color: var(--yy-tinta-suave); font: 13px var(--yy-fonte-ui); }
.yy-caixa .yy-icone {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 40px;
  border-right: 1px solid var(--yy-linha);
  color: var(--yy-texto-destaque);
}
.yy-caixa .yy-icone svg { width: 17px; height: 17px; }
.yy-caixa--leitura { background: var(--yy-caixa-leitura); color: var(--yy-tinta-suave); }
.yy-caixa--fixa { border-style: dashed; background: var(--yy-caixa-leitura); color: var(--yy-tinta-suave); cursor: not-allowed; gap: 0; }
.yy-caixa--fixa:focus-within { outline: none; }
.yy-caixa--fixa .yy-icone--fixa { color: var(--yy-tinta-suave); border-right-style: dashed; }
.yy-caixa--fixa .yy-valor-fixo { flex: 1; min-width: 0; padding: 9px 11px; font: 600 14px var(--yy-fonte-ui); color: var(--yy-caixa-texto); overflow-wrap: anywhere; }
.yy-caixa--fixa .yy-selo-fixo { flex: none; margin-right: 10px; padding: 2px 8px; border: 1px dashed var(--yy-caixa-borda); border-radius: 999px; font: 600 10.5px / 1.4 var(--yy-fonte-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--yy-tinta-suave); }
/* Caixa curta: poucos algarismos (Capacidade 1 a 100, tempo mm:ss), com o sufixo dentro da moldura. */
.yy-campo .yy-caixa--curta { width: 100%; max-width: 190px; }
/* Data: dd/mm/aaaa em poucos algarismos; a caixa não precisa da largura do formulário. */
.yy-campo .yy-caixa--data { width: 100%; max-width: 170px; }
.yy-caixa--data input { padding-right: 8px; }
/* Lista aberta das seleções: mesma fonte e cores das caixas (antes vinha a fonte do sistema). */
select option, select optgroup { font: 14px var(--yy-fonte-ui); color: var(--yy-caixa-texto); background: var(--yy-caixa-fundo); }
.yy-caixa--tempo input { letter-spacing: .04em; }
/* O controle não tem moldura própria: telas antigas (ex.: .qr-management input) não desenham uma caixa dentro da outra. */
.yy-caixa.yy-caixa.yy-caixa > :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  width: auto; flex: 1; min-width: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 9px 11px;
}
.yy-caixa.yy-caixa.yy-caixa > :is(input, select, textarea):focus { outline: none; box-shadow: none; }
.yy-caixa--marcacao { min-height: 0; border: 0; background: transparent; gap: 8px; }
.yy-caixa--marcacao input { flex: none; width: 17px; height: 17px; padding: 0; accent-color: var(--yy-perigo); }
.yy-dica { font: 12px / 1.4 var(--yy-fonte-ui); color: var(--yy-tinta-suave); }
.yy-campo--erro .yy-caixa { border-color: var(--yy-perigo); }
.yy-campo--erro .yy-dica { color: var(--yy-perigo); }

/* ---------- Menus ---------- */
.yy-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.yy-menu-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--yy-tinta);
  font: 13px var(--yy-fonte-ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.yy-menu-item:hover { background: var(--yy-secundario-base); }
.yy-menu-item[aria-current] { background: var(--yy-menu-atual); color: var(--yy-menu-atual-texto); }
.yy-menu-item--breve { color: var(--yy-tinta-suave); cursor: default; }
.yy-menu-item svg { width: 20px; height: 20px; flex-shrink: 0; }

.yy-caminho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font: 13px var(--yy-fonte-ui);
  color: var(--yy-tinta-suave);
}
.yy-caminho a { color: var(--yy-texto-destaque); text-decoration: none; }
.yy-caminho a:hover { text-decoration: underline; }
.yy-caminho strong { color: var(--yy-tinta); }

.yy-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--yy-linha);
}
.yy-aba {
  padding: 10px 14px;
  border: 1px solid var(--yy-aba-borda);
  border-radius: var(--yy-raio);
  background: var(--yy-aba-fundo);
  color: var(--yy-aba-texto);
  font: 14px var(--yy-fonte-ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.yy-aba[aria-selected="true"] {
  border-color: var(--yy-aba-atual-base);
  background: linear-gradient(var(--yy-aba-atual-topo), var(--yy-aba-atual-base));
  color: var(--yy-aba-atual-texto);
}

/* ======================================================================
   Herança das classes antigas (etapa 3, 27/10/2026)
   Os botões que as telas já montam (ft-primary, query-primary, team-primary...)
   passam a herdar a mesma aparência de .yy-botao, sem mexer no JavaScript das telas.
   Ficam de fora: as telas do Atendimento QR (visual próprio aprovado), a barra de
   navegação (Voltar, Temas, Sair: entram com os menus), a paginação e as abas.
   O seletor com #app e body vence as regras antigas, que só usam classes.
   ====================================================================== */

/* Botão principal herdado: Salvar, Novo, Pesquisar, Consultar... */
body:not([data-module-screen^="qr-"]) #app :is(
  .ft-primary, .query-primary, .team-primary, .employee-primary, .red-button, .tools .accent
):not([class*="qr-"] *) {
  box-sizing: border-box;
  min-height: var(--yy-botao-altura);
  padding: 0 18px;
  border: 1px solid var(--yy-principal-borda);
  border-radius: var(--yy-raio);
  background: linear-gradient(var(--yy-principal-topo), var(--yy-principal-base));
  color: var(--yy-principal-texto);
  font: 600 var(--yy-botao-fonte) / 1.2 var(--yy-fonte-ui);
  box-shadow: none;
  filter: none;
}

/* Botão secundário herdado: Tabelas de apoio, Limpar filtros, Editar, Pesquisar dos cadastros... */
body:not([data-module-screen^="qr-"]) #app :is(
  .query-secondary, .ft-button, .employee-secondary,
  :is(.ft-actions, .ft-fields, .team-actions, .schedule-tools, .recipe-search-actions, .cy-actions, .employee-week-actions)
    > button:not(:is(.ft-primary, .query-primary, .team-primary, .employee-primary, .red-button, .selected))
):not([class*="qr-"] *) {
  box-sizing: border-box;
  min-height: var(--yy-botao-altura);
  padding: 0 18px;
  border: 1px solid var(--yy-secundario-borda);
  border-radius: var(--yy-raio);
  background: linear-gradient(var(--yy-secundario-topo), var(--yy-secundario-base));
  color: var(--yy-secundario-texto);
  font: 600 var(--yy-botao-fonte) / 1.2 var(--yy-fonte-ui);
  box-shadow: none;
}

body:not([data-module-screen^="qr-"]) #app :is(
  .ft-primary, .query-primary, .team-primary, .employee-primary, .red-button, .tools .accent
):not([class*="qr-"] *):hover:not(:disabled) { filter: brightness(1.1); }
body:not([data-module-screen^="qr-"]) #app :is(
  .query-secondary, .ft-button, .employee-secondary,
  :is(.ft-actions, .ft-fields, .team-actions, .schedule-tools, .recipe-search-actions, .cy-actions, .employee-week-actions) > button
):not([class*="qr-"] *):hover:not(:disabled) { filter: brightness(.97); }
body:not([data-module-screen^="qr-"]) #app :is(
  .ft-primary, .query-primary, .team-primary, .employee-primary, .red-button, .query-secondary, .ft-button, .employee-secondary,
  :is(.ft-actions, .ft-fields, .team-actions, .schedule-tools, .recipe-search-actions, .cy-actions, .employee-week-actions) > button
):not([class*="qr-"] *):disabled { opacity: .5; cursor: not-allowed; filter: none; }

/* ======================================================================
   Grade de resultado (etapa 3b, 27/10/2026)
   YY.GradeBase / YY.GradeResultado montam a tabela com a classe yy-grade e a
   paginação com yy-paginacao. Modelo visual: Consulta Ficha técnica. Vale também
   para Habilitar mesas e Gerar QR Code, que tinham um visual cinza próprio.
   O prefixo "html body #app" e a classe repetida vencem as regras antigas de cada
   tela (aprovado.css usa body[data-module-screen] #app + três classes).
   Larguras de coluna continuam em cada tela.
   ====================================================================== */
html body #app .yy-grade.yy-grade.yy-grade {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font: 13px var(--yy-fonte-ui);
  color: var(--yy-grade-texto);
}
html body #app .yy-grade.yy-grade.yy-grade > thead th {
  padding: 13px 11px;
  border-bottom: 1px solid var(--yy-grade-borda);
  background: var(--yy-grade-cabecalho);
  color: var(--yy-grade-cabecalho-texto);
  font: 600 12px var(--yy-fonte-ui);
  text-align: left;
  white-space: nowrap;
  width: auto;
}
html body #app .yy-grade.yy-grade.yy-grade > colgroup > .yy-grade-marcacao { width: 44px; }
html body #app .yy-grade.yy-grade.yy-grade > tbody td {
  padding: 11px 11px;
  border: 0;
  border-bottom: 1px solid var(--yy-grade-borda);
  color: var(--yy-grade-texto);
  font: 13px var(--yy-fonte-ui);
  vertical-align: middle;
  overflow-wrap: anywhere;
}
/* Só o título da coluna fica em negrito; a coluna principal usa peso normal, para não confundir com o título. */
html body #app .yy-grade.yy-grade.yy-grade > tbody td.yy-grade-principal { font-weight: 400; color: var(--yy-tinta); }
html body #app .yy-grade.yy-grade.yy-grade > tbody > tr:nth-child(odd) { background: var(--yy-grade-linha-impar); }
html body #app .yy-grade.yy-grade.yy-grade > tbody > tr:nth-child(even) { background: var(--yy-grade-linha-par); }
html body #app .yy-grade.yy-grade.yy-grade > tbody > tr.recipe-result-row { cursor: pointer; box-shadow: none; transition: background-color .12s ease; }
html body #app .yy-grade.yy-grade.yy-grade > tbody > tr.recipe-result-row:hover,
html body #app .yy-grade.yy-grade.yy-grade > tbody > tr.recipe-result-row:focus-visible {
  background: var(--yy-grade-linha-foco);
  outline: 2px solid var(--yy-foco);
  outline-offset: -2px;
}
html body #app .yy-grade.yy-grade.yy-grade > tbody > tr.is-selected { background: var(--yy-grade-linha-selecionada); }
html body #app .yy-grade.yy-grade.yy-grade .recipe-check-cell { width: auto; min-width: 0; padding-left: 10px; padding-right: 10px; text-align: center; }
html body #app .yy-grade.yy-grade.yy-grade .recipe-check-cell input { width: 18px; height: 18px; margin: 0; accent-color: var(--yy-perigo); cursor: pointer; }
html body #app .yy-grade.yy-grade.yy-grade .yy-grade-vazia td { padding: 22px 11px; color: var(--yy-tinta-suave); text-align: center; cursor: default; }
/* Título ordenável: parece texto do cabeçalho, com a seta da ordem atual */
html body #app .yy-grade.yy-grade.yy-grade .yy-grade-ordem {
  all: unset;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
/* Sinal de ordenação (28/10/2026): ⇅ em toda coluna ordenável, ▲/▼ em destaque na coluna atual */
html body #app .yy-grade.yy-grade.yy-grade .yy-grade-seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  border: 1px solid var(--yy-secundario-borda);
  border-radius: 5px;
  background: var(--yy-secundario-topo);
  color: var(--yy-texto-destaque);
  font: 11px/1 var(--yy-fonte-ui);
  vertical-align: middle;
}
html body #app .yy-grade.yy-grade.yy-grade .yy-grade-ordem--ativa .yy-grade-seta {
  border-color: var(--yy-principal-base);
  background: var(--yy-principal-base);
  color: var(--yy-c-f-fff,#fff);
}
html body #app .yy-grade.yy-grade.yy-grade .yy-grade-ordem:hover .yy-grade-seta { border-color: var(--yy-principal-base); }
html body #app .yy-grade.yy-grade.yy-grade .yy-grade-ordem:hover { text-decoration: underline; }
html body #app .yy-grade.yy-grade.yy-grade .yy-grade-ordem:focus-visible { outline: 2px solid var(--yy-foco); outline-offset: 2px; }

/* Paginação */
html body #app .yy-paginacao.yy-paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 12px 0;
  color: var(--yy-tinta-suave);
  font: 13px var(--yy-fonte-ui);
}
html body #app .yy-paginacao.yy-paginacao .recipe-page-buttons button {
  min-width: var(--yy-botao-altura-pequeno);
  min-height: var(--yy-botao-altura-pequeno);
  padding: 0 10px;
  border: 1px solid var(--yy-secundario-borda);
  border-radius: var(--yy-raio);
  background: var(--yy-secundario-topo);
  color: var(--yy-secundario-texto);
  font: 600 var(--yy-botao-fonte-pequeno) var(--yy-fonte-ui);
  cursor: pointer;
}
html body #app .yy-paginacao.yy-paginacao .recipe-page-buttons button[aria-current="page"] {
  border-color: var(--yy-grade-pagina-atual);
  background: var(--yy-grade-pagina-atual);
  color: var(--yy-c-f-fff,#fff);
}
html body #app .yy-paginacao.yy-paginacao .recipe-page-buttons button:disabled { opacity: .45; cursor: default; }
/* Total recuperado à esquerda; o restante encostado à direita */
html body #app .yy-paginacao.yy-paginacao .recipe-page-range { margin-right: auto; }
html body #app .yy-paginacao.yy-paginacao .recipe-page-buttons button.yy-pagina-extremo { min-width: var(--yy-botao-altura-pequeno); padding: 0 8px; font-size: 13px; line-height: 1; }
/* Registros por página: ícone discreto e a quantidade */
html body #app .yy-paginacao.yy-paginacao .yy-grade-tamanho {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--yy-tinta-suave);
  font: 12px var(--yy-fonte-ui);
  cursor: pointer;
}
html body #app .yy-paginacao.yy-paginacao .yy-grade-tamanho svg { width: 16px; height: 16px; flex: none; }
html body #app .yy-paginacao.yy-paginacao .yy-grade-tamanho select {
  width: auto;
  min-height: 30px;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--yy-tinta-suave);
  font: 12px var(--yy-fonte-ui);
  cursor: pointer;
}
html body #app .yy-paginacao.yy-paginacao .yy-grade-tamanho select:hover,
html body #app .yy-paginacao.yy-paginacao .yy-grade-tamanho select:focus-visible { border-color: var(--yy-secundario-borda); background: var(--yy-c-b-fffdf8,#fffdf8); }
/* "Ir para [n]" */
html body #app .yy-paginacao.yy-paginacao .yy-grade-ir {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--yy-tinta-suave);
  font: 12px var(--yy-fonte-ui);
  white-space: nowrap;
}
html body #app .yy-paginacao.yy-paginacao .yy-grade-ir input {
  width: 58px;
  min-height: var(--yy-botao-altura-pequeno);
  padding: 4px 6px;
  border: 1px solid var(--yy-secundario-borda);
  border-radius: var(--yy-raio);
  background: var(--yy-c-b-fffdf8,#fffdf8);
  color: var(--yy-tinta);
  font: var(--yy-botao-fonte-pequeno) var(--yy-fonte-ui);
  text-align: center;
}
html body #app .yy-paginacao.yy-paginacao .yy-grade-ir input:disabled { opacity: .45; }

/* ======================================================================
   Herança de rótulos, caixas, abas e caminho (etapa 4, 27/10/2026)
   As telas continuam montando os campos como sempre; aqui eles passam a usar
   as mesmas medidas de .yy-rotulo e .yy-caixa (caixa de 40 px, borda e raio
   únicos, texto de 14 px) e as abas passam a ter o desenho de .yy-aba.
   Ficam de fora: telas do Atendimento QR, campos dentro de tabelas (quantidades
   nas linhas), caixas de marcar, arquivos e a tela de entrada.
   ====================================================================== */

/* Rótulo herdado: o texto que fica acima da caixa */
body:not([data-module-screen^="qr-"]) #app :is(.ft-fields, .ft-panel, .recipe-search-fields, .cy-search-fields, .cost-filter, .schedule-tools, .recipe-search-panel, form) > :is(label, legend):not(.ft-check):not([class*="qr-"] *),
body:not([data-module-screen^="qr-"]) #app label.cy-field {
  font: 600 12.5px / 1.3 var(--yy-fonte-ui);
  color: var(--yy-rotulo-texto);
}

/* Caixa herdada: texto, número, data, seleção e área de texto */
body:not([data-module-screen^="qr-"]) #app :is(
  input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"], [type="submit"], [type="button"]),
  select, textarea
):not(td *, .query-input *, .yy-caixa *, .login *, .navstrip *, [class*="qr-"] *) {
  box-sizing: border-box;
  min-height: var(--yy-caixa-altura);
  padding: 9px 11px;
  border: 1px solid var(--yy-caixa-borda);
  border-radius: var(--yy-raio);
  background: var(--yy-caixa-fundo);
  color: var(--yy-caixa-texto);
  font: 14px var(--yy-fonte-ui);
  box-shadow: none;
}
body:not([data-module-screen^="qr-"]) #app textarea:not(td *, [class*="qr-"] *) { min-height: 80px; }
body:not([data-module-screen^="qr-"]) #app :is(input, select, textarea):not(td *, .query-input *, [class*="qr-"] *):focus {
  outline: 2px solid var(--yy-foco);
  outline-offset: 2px;
}
body:not([data-module-screen^="qr-"]) #app :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea):not(td *, [class*="qr-"] *):is([readonly], :disabled) {
  background: var(--yy-caixa-leitura);
  color: var(--yy-tinta-suave);
}

/* Caixa com ícone das pesquisas (query-input): a moldura é a caixa */
body:not([data-module-screen^="qr-"]) #app .query-input:not([class*="qr-"] *) {
  min-height: var(--yy-caixa-altura);
  border: 1px solid var(--yy-caixa-borda);
  border-radius: var(--yy-raio);
  background: var(--yy-caixa-fundo);
}
body:not([data-module-screen^="qr-"]) #app .query-input:not([class*="qr-"] *) :is(input, select) {
  color: var(--yy-caixa-texto);
  font: 14px var(--yy-fonte-ui);
}

/* Abas herdadas (ficha técnica, escalas e as barras stk-nav dos módulos): o desenho de .yy-aba */
body:not([data-module-screen^="qr-"]) #app :is(.ft-tabs, .team-tabs, .stk-nav) {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--yy-linha);
  border-radius: 0;
  background: transparent;
}
body:not([data-module-screen^="qr-"]) #app :is(.ft-tabs, .team-tabs, .stk-nav) > :is(button, a) {
  min-height: 0;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--yy-aba-borda);
  border-radius: var(--yy-raio);
  background: var(--yy-aba-fundo);
  color: var(--yy-aba-texto);
  font: 14px var(--yy-fonte-ui);
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
  filter: none;
  cursor: pointer;
}
body:not([data-module-screen^="qr-"]) #app :is(.ft-tabs > .selected, .team-tabs > .active, .stk-nav > .selected) {
  border-color: var(--yy-aba-atual-base);
  background: linear-gradient(var(--yy-aba-atual-topo), var(--yy-aba-atual-base));
  color: var(--yy-aba-atual-texto);
  font-weight: 400;
}

/* Caminho de navegação e Voltar: cores de .yy-caminho e do botão secundário */
body #app .navstrip nav a { color: var(--yy-texto-destaque); }
body #app .navstrip > button:first-child {
  border: 1px solid var(--yy-secundario-borda);
  background: linear-gradient(var(--yy-secundario-topo), var(--yy-secundario-base));
  color: var(--yy-secundario-texto);
  font: 600 12px var(--yy-fonte-ui);
  min-height: var(--yy-botao-altura-pequeno);
}

/* ======================================================================
   Cabeçalho das telas alinhado aos campos (28/10/2026)
   O título (e o rótulo acima e o subtítulo) começa na mesma linha dos campos
   dos quadros de baixo: o recuo é o mesmo do recheio do quadro (borda + padding).
   O Monitor QR Code fica de fora (cabeçalho centralizado de propósito).
   ====================================================================== */
html body #app main.query-redesign:not(.qr-approved-monitor) .recipe-search-heading.recipe-search-heading {
  padding-left: 27px;
  padding-right: 27px;
}
html body #app main.qr-approved-search.qr-approved-search .recipe-search-heading.recipe-search-heading {
  padding-left: 21px;
  padding-right: 21px;
}
html body #app main.ft-work > .ft-title.ft-title {
  padding-left: 21px;
  padding-right: 21px;
}
@media (max-width: 700px) {
  html body #app main.query-redesign:not(.qr-approved-monitor) .recipe-search-heading.recipe-search-heading,
  html body #app main.qr-approved-search.qr-approved-search .recipe-search-heading.recipe-search-heading {
    padding-left: 17px;
    padding-right: 17px;
  }
}

/* ======================================================================
   Diálogo padrão (YY.DialogoConfirmacao, DialogoAviso, DialogoErro)
   Substitui o confirm/alert do navegador: mesma fonte, cores e botões do sistema.
   ====================================================================== */
.yy-dialogo-fundo {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: var(--yy-c-b-20161073,rgba(32, 22, 16, .45));
  animation: yy-dialogo-fundo .15s ease-out;
}
.yy-dialogo {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
  width: min(460px, 100%); padding: 22px 24px 20px;
  border: 1px solid var(--yy-c-l-e3d5c4,#e3d5c4); border-top: 4px solid var(--yy-principal-base, var(--yy-c-l-a51d20,#a51d20)); border-radius: 12px;
  background: var(--yy-c-b-fffdf8,#fffdf8); color: var(--yy-tinta, var(--yy-c-f-2a211c,#2a211c));
  box-shadow: 0 18px 50px rgba(32, 22, 16, .28);
  font-family: var(--yy-fonte-ui, Arial, sans-serif);
  animation: yy-dialogo-caixa .18s ease-out;
}
.yy-dialogo--aviso { border-top-color: var(--yy-c-l-c98a1b,#c98a1b); }
.yy-dialogo--informacao { border-top-color: var(--yy-c-l-4d6f8f,#4d6f8f); }
.yy-dialogo-icone { width: 34px; height: 34px; color: var(--yy-principal-base, var(--yy-c-f-a51d20,#a51d20)); }
.yy-dialogo--aviso .yy-dialogo-icone { color: var(--yy-c-f-c98a1b,#c98a1b); }
.yy-dialogo--informacao .yy-dialogo-icone { color: var(--yy-c-f-4d6f8f,#4d6f8f); }
.yy-dialogo-icone svg { width: 100%; height: 100%; }
.yy-dialogo-corpo h2 { margin: 4px 0 8px; font: 700 18px var(--yy-fonte-ui, Arial, sans-serif); color: var(--yy-tinta, var(--yy-c-f-2a211c,#2a211c)); }
.yy-dialogo-corpo p { margin: 0; font-size: 14px; line-height: 1.45; }
.yy-dialogo-corpo .yy-dialogo-detalhe { margin-top: 6px; font-size: 13px; color: var(--yy-tinta-suave, var(--yy-c-f-6b5c4c,#6b5c4c)); }
.yy-dialogo-motivo { grid-column: 1 / -1; margin-top: 14px; }
.yy-dialogo-botoes { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--yy-c-l-eadfce,#eadfce); }
@media (max-width: 480px) {
  .yy-dialogo-botoes { flex-direction: column-reverse; }
  .yy-dialogo-botoes .yy-botao { width: 100%; }
}
@keyframes yy-dialogo-fundo { from { opacity: 0; } }
@keyframes yy-dialogo-caixa { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* Coluna de número (29/10/2026): título e valor centralizados (classe yy-grade-centro); dica do título (hint) */
html body #app .yy-grade.yy-grade.yy-grade > thead th.yy-grade-centro,
html body #app .yy-grade.yy-grade.yy-grade > tbody td.yy-grade-centro { text-align: center; font-variant-numeric: tabular-nums; }
html body #app .yy-grade.yy-grade.yy-grade .yy-grade-dica { cursor: help; }