/* Padronização visual do painel (revisão de 30/09/2026).
   Carregado depois dos demais estilos para unificar tamanhos, botões e campos. */

/* Textos de explicação: mesmo tamanho e cor em todas as telas e diálogos. */
body .texto-ajuda,
#painel .nota-custo-item,
#painel #nfse-foz-status {
  margin: 0;
  color: var(--pal-736c80, #736c80);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
}
#painel .dashboard-list .texto-ajuda { padding: 4px 0; }

/* Campos de busca: sempre dentro de um cartão, com a mesma largura. */
#painel .busca-card { margin: 0 0 18px; padding: 18px 22px; }
#painel .busca-card .busca-painel { display: grid; gap: 7px; max-width: 520px; margin: 0; color: var(--pal-514963, #514963); font-size: 12px; font-weight: 600; }
#painel .busca-card .busca-painel input { box-sizing: border-box; width: 100%; min-height: 46px; margin: 0; padding: 11px 14px; border: 1px solid var(--pal-e4e1ea, #e4e1ea); border-radius: 13px; background: var(--pal-fcfbfd, #fcfbfd); font: inherit; font-size: 13px; font-weight: 400; }
#painel .busca-card .busca-painel input:focus { outline: none; border-color: var(--pal-8460d4, #8460d4); box-shadow: 0 0 0 3px rgba(var(--pal-rgb-8460d4, 132, 96, 212), .14); }
#painel #equipamentos-cadastrados > .secao-cabecalho { margin-bottom: 18px; }

/* Catálogo de itens em formato de tabela. */
#painel .itens-catalogo-contagem { color: var(--pal-81798d, #81798d); font-size: 12px; font-weight: 500; }
#painel #itens-catalogo-lista { display: grid; gap: 8px; }
#painel .itens-catalogo-cabecalho,
#painel #itens-catalogo-lista .item-os-linha:not(:has(input)) {
  grid-template-columns: minmax(200px, 3fr) minmax(76px, .7fr) minmax(96px, .8fr) minmax(110px, 1fr) minmax(110px, 1fr) 92px;
}
#painel .itens-catalogo-cabecalho { display: grid; gap: 10px; margin-top: 4px; padding: 0 15px 6px; color: var(--pal-81798d, #81798d); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
#painel .itens-catalogo-cabecalho[hidden] { display: none; }
#painel #itens-catalogo-lista .item-os-linha:not(:has(input)) > span { color: var(--pal-554d63, #554d63); font-size: 13px; }
#painel #itens-catalogo-lista .item-os-linha > strong { font-size: 13px; }
#painel .item-mao-de-obra { justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--pal-f3effa, #f3effa); color: var(--pal-5b3f97, #5b3f97) !important; font-size: 11px !important; font-weight: 600; }

/* Cartões de status: nome e cor lado a lado, botões pequenos e iguais. */
#painel form.chamado-status-card { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 18px; border-radius: 16px; box-shadow: 0 8px 24px #2e1b4b0a; }
#painel .chamado-status-card > strong { color: var(--pal-2b2541, #2b2541); font-size: 15px; line-height: 1.35; }
#painel .status-card-campos { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
#painel .status-card-campos input { margin: 0 !important; }
#painel .status-card-campos label { margin: 0; }
#painel .chamado-status-card input[type="text"] { min-height: 40px; border-radius: 10px; }
#painel .chamado-status-card input[type="color"] { width: 56px; height: 40px; border-radius: 10px; }
#painel .status-card-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
#painel .status-card-acoes .botao-padrao { min-height: 38px !important; margin: 0 !important; padding: 8px 14px !important; border-radius: 10px !important; font-size: 12px; }
#painel .chamado-status-card > small { color: var(--pal-81798d, #81798d); font-size: 11px; line-height: 1.5; }
#painel #form-cadastrar-status { align-items: end; }
#painel #form-cadastrar-status input[type="color"] { width: 100%; min-height: 46px; padding: 3px; border-radius: 13px; }
#painel #form-cadastrar-status button { margin: 0; min-height: 46px; }

/* Botões de envio de arquivo no mesmo visual dos demais botões. */
#painel input[type="file"] { box-sizing: border-box; width: 100%; max-width: 520px; padding: 7px; border: 1px dashed var(--pal-d9d0ea, #d9d0ea); border-radius: 13px; background: var(--pal-fbfaff, #fbfaff); color: var(--pal-554d63, #554d63); font: inherit; font-size: 12px; cursor: pointer; }
#painel input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 1px solid var(--pal-e0d8ef, #e0d8ef); border-radius: 10px; background: #fff; color: var(--pal-6947ae, #6947ae); font: 600 12px Poppins, Arial, sans-serif; cursor: pointer; }
#painel input[type="file"]::file-selector-button:hover { background: var(--pal-f5f0fb, #f5f0fb); }

/* Configurações de impressão: listas longas ocupam a linha inteira. */
#painel .configuracao-impressao-grupo .impressao-campo-largo { grid-column: 1 / -1; }

/* Banco de dados: cartão sem espaço vazio e links com aparência de botão. */
/* Cartão de backup com a mesma altura do "Carregar banco de dados"; o backup completo fica no pé do cartão. */
#painel .banco-dados-cards > #banco-dados-backup-card { height: 100%; align-self: stretch; }
#painel #banco-dados-backup-card .banco-dados-completo { display: grid; gap: 9px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--pal-e8e2f0, #e8e2f0); color: var(--pal-514963, #514963); font-size: 13px; }
#painel #banco-dados-backup-card .banco-dados-completo p { margin: 0; }
#painel .banco-dados-cards > #banco-dados-backup-card .form-acoes { margin: 0; }
#painel a:is(.botao-padrao, .botao-secundario) { text-decoration: none; }
#painel #form-banco-dados-reset label > span { display: block; line-height: 1.6; }

/* Finanças tem uma única opção: o submenu não é necessário. */
#painel .chamados-antigos-card { display: grid; gap: 14px; }
#painel .chamados-antigos-lista { display: grid; gap: 9px; }
#painel .chamado-antigo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--pal-e8e2f0, #e8e2f0); border-radius: 13px; background: #fff; }
#painel .chamado-antigo-linha > div, #painel .chamados-antigos-campos > div { display: grid; gap: 3px; }
#painel .chamado-antigo-linha span, #painel .chamados-antigos-campos span { color: var(--pal-554d63, #554d63); font-size: 13px; }
#painel .chamado-antigo-linha small { color: var(--pal-554d63, #554d63); }
#painel .chamado-antigo-valor { justify-self: start; padding: 6px 10px; border: 1px solid #86efac; border-radius: 10px; background: #f0fdf4; color: #166534; font-size: 13px; font-weight: 700; }
#painel .chamado-antigo-pendente { color: #92400e !important; font-weight: 600; }
#painel .chamados-antigos-faturamento { display: grid; justify-items: start; gap: 10px; max-width: 440px; margin: 14px 0; padding: 14px; border: 1px solid var(--pal-e8e2f0, #e8e2f0); border-radius: 13px; background: var(--pal-fcfbfd, #fcfbfd); }
#painel .chamados-antigos-faturamento label { display: grid; gap: 7px; width: min(100%, 320px); color: var(--pal-514963, #514963); font-size: 12px; font-weight: 600; }
#painel .chamados-antigos-faturamento input { box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 10px 13px; border: 1px solid var(--pal-e4e1ea, #e4e1ea); border-radius: 11px; background: #fff; font: inherit; font-size: 14px; font-weight: 400; }
#painel .chamados-antigos-faturamento button { margin: 0; }
#painel .chamados-antigos-faturamento small { color: var(--pal-736c80, #736c80); font-size: 11px; }
#painel .chamados-antigos-faturamento p { margin: 0; color: var(--pal-b91c1c, #b91c1c); font-size: 12px; }
#painel .chamados-antigos-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 14px 0; }
#painel .chamados-antigos-campos strong { overflow-wrap: anywhere; white-space: normal; }
#painel #chamados-antigos-detalhe h3 { margin: 18px 0 10px; }
#painel #chamados-antigos-detalhe h4 { margin: 18px 0 8px; }
#painel #chamados-antigos-detalhe table { width: 100%; border-collapse: collapse; }
#painel #chamados-antigos-detalhe th, #painel #chamados-antigos-detalhe td { padding: 9px; border-bottom: 1px solid var(--pal-e8e2f0, #e8e2f0); text-align: left; }
@media (max-width: 600px) { #painel .chamado-antigo-linha { align-items: flex-start; } #painel #chamados-antigos-detalhe th, #painel #chamados-antigos-detalhe td { padding: 7px 5px; font-size: 12px; } }

#painel #secao-financas > nav.submenu-usuarios { display: none; }
#painel #secao-financas > nav.submenu-usuarios { display: none; }

/* Celular: cabeçalho compacto e menus quebrando em linhas, sem cortar texto. */
@media (max-width: 600px) {
  .painel-cabecalho { gap: 12px; padding: 16px 18px; border-radius: 18px; }
  .painel-marca { flex-direction: row !important; align-items: center; gap: 12px; text-align: left; }
  .painel-marca .painel-logo-branca { width: 84px !important; }
  .painel-cabecalho h1 { font-size: 17px; }
  #saudacao-painel { display: none; }
  .painel-marca { flex-wrap: wrap; }
  .painel-marca .logo-nome { overflow-wrap: normal; word-break: normal; font-size: 19px !important; max-width: 100% !important; }
  .painel-cabecalho-acoes { position: static !important; width: 100%; justify-content: flex-start; gap: 8px; }
  .painel-cabecalho-acoes > * { flex: 1 1 auto; min-height: 36px !important; padding: 6px 10px !important; }
  #painel .menu { flex-wrap: wrap; overflow-x: visible; }
  #painel .menu button { flex: 1 1 auto; }
  #painel .submenu-usuarios { flex-wrap: wrap; overflow-x: visible; }
  #painel .itens-catalogo-cabecalho { display: none; }
  #painel #itens-catalogo-lista .item-os-linha:not(:has(input)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
  #painel #itens-catalogo-lista .item-os-linha:not(:has(input)) > strong,
  #painel #itens-catalogo-lista .item-os-linha:not(:has(input)) > button { grid-column: 1 / -1; }
  #painel #itens-catalogo-lista .item-os-linha:not(:has(input)) > span::before { content: attr(data-rotulo); display: block; color: var(--pal-8a8295, #8a8295); font-size: 10px; font-weight: 500; }
  #painel .status-card-campos { grid-template-columns: minmax(0, 1fr) auto; }
  #painel .item-mao-de-obra { padding: 0; border-radius: 0; background: none; }
}

/* Categorias de acesso: explicação do que cada permissão já inclui. */
#painel .permissoes-usuario label:has(.permissao-inclui) { flex-wrap: wrap; }
#painel .permissao-inclui { flex-basis: 100%; margin: -2px 0 2px 22px; color: var(--pal-81798d, #81798d); font-size: 10px; line-height: 1.45; }
#painel .permissoes-usuario label .permissao-texto { flex: 1 1 0; min-width: 0; }

/* Endereço público do painel (Informações da empresa). */
#painel .endereco-publico-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin: 12px 0 0; padding: 0; border: 0; box-shadow: none; background: none; }
#painel .endereco-publico-form label { display: grid; gap: 7px; font-size: 12px; font-weight: 600; }
#painel .endereco-publico-form input { box-sizing: border-box; width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--pal-e4e1ea, #e4e1ea); border-radius: 13px; font: inherit; font-size: 13px; }
#painel .endereco-publico-form button { margin: 0; min-height: 46px; }
#painel .endereco-publico-form p { grid-column: 1 / -1; }
@media (max-width: 600px) { #painel .endereco-publico-form { grid-template-columns: 1fr; } }
/* Configurações › País: país e moeda vêm da criação do painel (somente leitura); só o idioma é editável. */
#painel .pais-painel-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px; margin: 12px 0 0; padding: 0; border: 0; box-shadow: none; background: none; }
#painel .pais-painel-form label, #painel .pais-painel-campo { display: grid; gap: 7px; font-size: 12px; font-weight: 600; }
#painel .pais-painel-campo strong { box-sizing: border-box; display: flex; align-items: center; min-height: 46px; padding: 11px 14px; border: 1px solid var(--pal-e4e1ea, #e4e1ea); border-radius: 13px; background: var(--pal-f7f4fb, #f7f4fb); font-size: 13px; font-weight: 600; }
#painel .pais-painel-form select { box-sizing: border-box; width: 100%; min-height: 46px; margin: 0; }
#painel .pais-painel-form label, #painel .pais-painel-campo { margin: 0; }
#painel .pais-painel-form button { margin: 0; min-height: 46px; }
#painel .pais-painel-form p { grid-column: 1 / -1; margin: 0; }
@media (max-width: 900px) { #painel .pais-painel-form { grid-template-columns: 1fr; } }

/* Configuração de notas fiscais. */
#painel #form-fiscal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
#painel #form-fiscal .largo { grid-column: 1 / -1; }
#painel #form-fiscal article { display: grid; align-content: start; gap: 12px; }
#painel #form-fiscal article h3 { margin: 0; }
#painel #form-fiscal label { display: grid; gap: 6px; margin: 0; color: var(--pal-514963, #514963); font-size: 12px; font-weight: 600; }
#painel #form-fiscal label small { color: var(--pal-81798d, #81798d); font-size: 11px; font-weight: 400; }
#painel #form-fiscal :is(input:not([type="checkbox"]), select) { box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid var(--pal-e4e1ea, #e4e1ea); border-radius: 12px; background: var(--pal-fcfbfd, #fcfbfd); font: inherit; font-size: 13px; font-weight: 400; }
#painel .fiscal-opcoes { display: grid; gap: 10px; }
#painel #form-fiscal label.opcao-fiscal { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; }
#painel #form-fiscal .fiscal-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: start; }
#painel #form-fiscal .fiscal-grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
#painel #form-fiscal :is(.fiscal-grade, .fiscal-grade-2) label { align-content: start; }
#painel #form-fiscal :is(.fiscal-grade, .fiscal-grade-2) :is(input:not([type="checkbox"]), select) { height: 44px; }
#painel #form-fiscal input[type="file"] { padding: 6px 8px; }
#painel #form-fiscal .fiscal-subgrupo { display: grid; gap: 12px; }
#painel #form-fiscal .fiscal-subgrupo[hidden] { display: none; }
#painel #form-fiscal .fiscal-detalhes { display: grid; gap: 10px; padding: 10px 12px; border: 1px solid var(--pal-e4e1ea, #e4e1ea); border-radius: 12px; }
#painel #form-fiscal .fiscal-detalhes > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--pal-514963, #514963); }
#painel #form-fiscal .fiscal-detalhes:not([open]) { gap: 0; }
#painel #form-fiscal .fiscal-ativacao-situacao { margin: 0; padding: 10px 12px; border-radius: 10px; background: #f4f0fc; color: #3d3552; font-size: 13px; }
#painel #form-fiscal .fiscal-ativacao-situacao.ativo { background: #e7f6ee; color: #16794a; }
#painel #form-fiscal .fiscal-ativacao-situacao.erro { background: #fff4e0; color: #8a5a07; }
#painel #form-fiscal .fiscal-ativacao-situacao:empty { display: none; }
@media (max-width: 760px) { #painel #form-fiscal { grid-template-columns: 1fr; } #painel #form-fiscal .fiscal-grade-2 { grid-template-columns: 1fr; } }
#painel .opcao-fiscal input { width: 17px; height: 17px; margin: 0; accent-color: var(--pal-7954bd, #7954bd); }
#painel .fiscal-cnaes, .notas-fiscais-avisos { margin: 0; padding: 10px 14px 10px 28px; border-radius: 12px; background: var(--pal-fbfaff, #fbfaff); color: var(--pal-554d63, #554d63); font-size: 12px; line-height: 1.6; }
#painel .fiscal-cnaes li.principal { font-weight: 600; }
@media (max-width: 760px) { #painel #form-fiscal { grid-template-columns: 1fr; } }
/* Janela de notas fiscais da OS. */
.notas-fiscais-avisos:empty { display: none; }
.notas-fiscais-lista { display: grid; gap: 10px; margin: 12px 0; }
.nota-fiscal-item { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--pal-e8e2f0, #e8e2f0); border-radius: 12px; font-size: 13px; }
.nota-fiscal-item strong { color: var(--pal-2b2541, #2b2541); }
.nota-fiscal-item small { color: var(--pal-736c80, #736c80); }
.nota-fiscal-item a { margin-right: 12px; color: var(--pal-6947ae, #6947ae); font-weight: 600; }
.nota-fiscal-status { justify-self: start; padding: 2px 9px; border-radius: 999px; background: #f3effa; color: #5b3f97; font-size: 11px; font-weight: 600; }
.nota-fiscal-status.autorizado { background: #e4f6ec; color: #1d6b47; }
.nota-fiscal-status.erro, .nota-fiscal-status.erro_autorizacao { background: #fbe7ee; color: #8e2c4b; }

/* Formato de impressão de cada documento. */
#painel .impressao-formato { display: grid; gap: 6px; margin: 4px 0 6px; }
#painel .impressao-formato label { display: grid; gap: 7px; color: var(--pal-514963, #514963); font-size: 12px; font-weight: 600; }
#painel .impressao-formato select { box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--pal-e4e1ea, #e4e1ea); border-radius: 11px; background: var(--pal-fcfbfd, #fcfbfd); font: inherit; font-size: 13px; font-weight: 400; }
#painel [data-configuracao-impressao] [hidden] { display: none !important; }

/* Mensalidade do painel. */
#painel #form-mensalidade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
#painel #form-mensalidade .largo { grid-column: 1 / -1; }
#painel #form-mensalidade article { display: grid; align-content: start; gap: 12px; }
#painel #form-mensalidade article h3 { margin: 0; }
#painel #form-mensalidade label { display: grid; gap: 6px; margin: 0; color: var(--pal-514963, #514963); font-size: 12px; font-weight: 600; }
#painel #form-mensalidade label.opcao-fiscal { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; }
#painel #form-mensalidade label small { color: var(--pal-81798d, #81798d); font-size: 11px; font-weight: 400; }
#painel #form-mensalidade input:not([type="checkbox"]) { box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid var(--pal-e4e1ea, #e4e1ea); border-radius: 12px; background: var(--pal-fcfbfd, #fcfbfd); font: inherit; font-size: 13px; font-weight: 400; }
@media (max-width: 760px) { #painel #form-mensalidade { grid-template-columns: 1fr; } }
.mensalidade-atual { display: grid; gap: 12px; justify-items: center; margin: 8px 0; text-align: center; }
.mensalidade-atual .mensalidade-valor { color: var(--pal-2b2541, #2b2541); font-size: 26px; font-weight: 700; }
.mensalidade-atual .mensalidade-status { padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.mensalidade-status.aberta { background: #f3effa; color: #5b3f97; } .mensalidade-status.atrasada { background: #fbe7ee; color: #8e2c4b; } .mensalidade-status.paga { background: #e4f6ec; color: #1d6b47; }
.mensalidade-atual img { width: 190px; height: 190px; border: 1px solid #e8e2f0; border-radius: 12px; }
.mensalidade-atual .mensalidade-codigo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: 100%; }
.mensalidade-atual .mensalidade-codigo input { min-width: 0; padding: 9px 10px; border: 1px solid #e4e1ea; border-radius: 10px; font: 11px monospace; }
.mensalidade-atual small { color: #81798d; font-size: 11px; }
.mensalidade-atual a.botao-padrao { text-decoration: none; }
.mensalidade-historico { margin: 6px 0 10px; font-size: 12px; color: #554d63; }
.mensalidade-historico table { width: 100%; border-collapse: collapse; }
.mensalidade-historico td, .mensalidade-historico th { padding: 6px 4px; border-bottom: 1px solid #f0edf4; text-align: left; }

/* Recado do dono da Central na mensalidade */
.mensalidade-recado { justify-self: stretch; margin: 0; padding: 10px 14px; border-left: 4px solid #7054d4; border-radius: 10px; background: #f4f0fc; color: #3d3552; font-size: 13px; line-height: 1.5; white-space: pre-line; text-align: left; }
#abrir-mensalidade.com-recado { position: relative; }
#abrir-mensalidade.com-recado::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #f5a623; box-shadow: 0 0 0 2px #fff; }

/* Botão Menu do cabeçalho do painel: só em telas pequenas; os botões do cabeçalho ficam dentro dele. */
#painel .painel-menu-botao { display: none; }
@media (max-width: 600px) {
  #painel .painel-cabecalho { position: relative; }
  #painel .painel-marca { padding-right: 110px; box-sizing: border-box; width: 100%; }
  /* Título longo ("Panel del Hospedaje", "Painel de Cuidados Pessoais"): quebra em linhas em vez de passar por baixo do Menu. */
  #painel .painel-marca > div:has(> h1) { flex: 1 1 0; min-width: 0; max-width: 100%; }
  #painel .painel-marca h1 { white-space: normal; overflow-wrap: anywhere; }
  #painel .painel-menu-botao {
    position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; margin: 0; padding: 8px 12px; border: 1px solid rgba(255,255,255,.55); border-radius: 11px;
    background: rgba(255,255,255,.1); color: white; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  #painel .painel-menu-botao:hover, #painel .painel-cabecalho.menu-aberto .painel-menu-botao { background: rgba(255,255,255,.22); }
  #painel .painel-menu-botao:focus-visible { outline: 2px solid white; outline-offset: 3px; }
  /* Ícone de três linhas que vira um X quando o menu está aberto. */
  #painel .painel-menu-botao span, #painel .painel-menu-botao span::before, #painel .painel-menu-botao span::after {
    display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s ease, background-color .18s ease;
  }
  #painel .painel-menu-botao span { position: relative; }
  #painel .painel-menu-botao span::before, #painel .painel-menu-botao span::after { content: ""; position: absolute; left: 0; }
  #painel .painel-menu-botao span::before { top: -5px; }
  #painel .painel-menu-botao span::after { top: 5px; }
  #painel .painel-cabecalho.menu-aberto .painel-menu-botao span { background: transparent; }
  #painel .painel-cabecalho.menu-aberto .painel-menu-botao span::before { transform: translateY(5px) rotate(45deg); }
  #painel .painel-cabecalho.menu-aberto .painel-menu-botao span::after { transform: translateY(-5px) rotate(-45deg); }
  #painel .painel-cabecalho:not(.menu-aberto) .painel-cabecalho-acoes { display: none; }
  #painel .painel-cabecalho.menu-aberto .painel-cabecalho-acoes { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; }
  #painel .painel-cabecalho.menu-aberto .painel-cabecalho-acoes > :not([hidden]) { flex: none; justify-content: flex-start; min-height: 44px !important; padding: 8px 14px !important; font-size: 14px; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  #painel .painel-menu-botao span, #painel .painel-menu-botao span::before, #painel .painel-menu-botao span::after { transition: none; }
}

/* Ordens de serviço: escolha entre Cards e Lista (tabela compacta). */
#painel .chamados-visualizacao { display: inline-flex; margin-left: auto; padding: 3px; border: 1px solid var(--pal-e4ddef, #e4ddef); border-radius: 12px; background: var(--pal-f7f4fb, #f7f4fb); }
#painel .chamados-visualizacao button { min-height: 36px; margin: 0; padding: 6px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--pal-514963, #514963); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: none; }
#painel .chamados-visualizacao button[aria-pressed="true"] { background: var(--pal-6b56d6, #6b56d6); color: #fff; }
#painel .chamados-visualizacao button { display: inline-flex; align-items: center; justify-content: center; width: 42px; padding: 0; }
#painel .chamados-visualizacao svg { display: block; fill: currentColor; }
#painel .chamados-visualizacao button:focus-visible { outline: 3px solid var(--pal-bca5e8, #bca5e8); outline-offset: 2px; }
#painel .chamados-lista.modo-lista { display: block; }
#painel .chamados-tabela-rolagem { overflow-x: auto; }
#painel .chamados-tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
#painel .chamados-tabela th { padding: 8px 10px; border-bottom: 1px solid var(--pal-e8e2f0, #e8e2f0); color: var(--pal-8a8295, #8a8295); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
#painel .chamados-tabela td { padding: 8px 10px; border-bottom: 1px solid var(--pal-eeeaf4, #eeeaf4); vertical-align: middle; overflow-wrap: break-word; }
#painel .chamados-tabela td[data-rotulo="Aberta em"] { white-space: nowrap; }
#painel .chamados-tabela tbody tr td:first-child { border-left: 4px solid var(--cor-status-chamado, var(--pal-d8d0e6, #d8d0e6)); }
#painel .chamados-tabela tbody tr:hover td { background: var(--pal-faf8fe, #faf8fe); }
#painel .chamados-tabela-numero { white-space: nowrap; }
#painel .chamados-tabela-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }
#painel .chamados-tabela-status, #painel .chamados-tabela-extra { display: inline-flex; padding: 3px 9px; border-radius: 999px; background: var(--pal-eeeaf4, #eeeaf4); color: #272333; font-size: 11px; font-weight: 700; white-space: nowrap; }
#painel .chamados-tabela-extra { background: var(--pal-f1edf8, #f1edf8); color: var(--pal-514963, #514963); }
#painel .chamados-tabela-acoes { text-align: right; }
#painel .chamados-tabela-acoes .chamado-card-acoes { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
#painel .chamados-tabela-acoes .botao-padrao { min-height: 34px; margin: 0; padding: 6px 12px; font-size: 12px; white-space: nowrap; }
#painel .chamados-tabela .visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#chamados-lista-secao:fullscreen #chamados-lista.modo-lista { display: block; }
/* Celular: cada OS vira um bloco com os rótulos ao lado dos valores. */
@media (max-width: 700px) {
  #painel .chamados-tabela thead { display: none; }
  #painel .chamados-tabela, #painel .chamados-tabela tbody, #painel .chamados-tabela tr, #painel .chamados-tabela td { display: block; width: 100%; box-sizing: border-box; }
  #painel .chamados-tabela tr { margin-bottom: 10px; border: 1px solid var(--pal-e8e2f0, #e8e2f0); border-left: 5px solid var(--cor-status-chamado, var(--pal-d8d0e6, #d8d0e6)); border-radius: 12px; overflow: hidden; }
  #painel .chamados-tabela tbody tr td:first-child { border-left: 0; }
  #painel .chamados-tabela td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 6px 12px; border-bottom: 0; }
  #painel .chamados-tabela td::before { content: attr(data-rotulo); color: var(--pal-8a8295, #8a8295); font-size: 12px; }
  #painel .chamados-tabela td.chamados-tabela-acoes { display: block; padding: 8px 12px 10px; }
  #painel .chamados-tabela td.chamados-tabela-acoes::before { content: none; }
  #painel .chamados-tabela-acoes .chamado-card-acoes { justify-content: stretch; }
  #painel .chamados-tabela-acoes .botao-padrao { flex: 1 1 auto; }
}
#painel .financas-separacao { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--pal-eef6ff, #eef6ff); color: var(--pal-1d4f8a, #1d4f8a); font-size: 13px; font-weight: 600; }

/* Garantia do fabricante na OS (assistência autorizada). */
#painel .formulario-chamado > .chamado-garantia-fabricante { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 14px 16px 16px; border: 1px solid var(--pal-ded4ef, #ded4ef); border-radius: 14px; }
#painel .chamado-garantia-fabricante legend { padding: 0 6px; color: var(--pal-2b2541, #2b2541); font-size: 14px; font-weight: 700; }
#painel .chamado-garantia-fabricante-marcar { display: flex; align-items: center; gap: 10px; color: var(--pal-2b2541, #2b2541); font-size: 14px; font-weight: 500; cursor: pointer; }
#painel .chamado-garantia-fabricante-marcar input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--pal-6b56d6, #6b56d6); }
#painel .chamado-garantia-fabricante-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; margin-top: 12px; }
#painel .chamado-garantia-fabricante-campos > label { display: grid; gap: 6px; min-width: 0; color: var(--pal-514963, #514963); font-size: 12px; font-weight: 600; }
#painel .chamado-garantia-fabricante-campos > label input { margin: 0; }
#painel .chamado-garantia-fabricante-nota { grid-column: 1 / -1; margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--pal-eef6ff, #eef6ff); color: var(--pal-1d4f8a, #1d4f8a); font-size: 12px; }
#painel .chamado-card .chamado-garantia-fabricante-etiqueta { background: #fff !important; color: #1d4f8a !important; }
/* Mesmo padrão das caixas de status (#painel .chamado-status-filtros); vence a regra do campo de pesquisa (.chamados-filtros > label input). */
#painel .chamados-filtros > label.chamados-filtro-garantia { display: flex; align-items: center; gap: 6px; margin: 0; color: inherit; font-size: 12px; font-weight: 400; cursor: pointer; }
#painel .chamados-filtros > label.chamados-filtro-garantia input[type="checkbox"] { display: inline-block; width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; accent-color: #7954bd; }
#painel .faturar-os-garantia-fabricante { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #eef6ff; color: #1d4f8a; font-size: 13px; font-weight: 600; }

/* Ordens de serviço › Fabricantes e a escolha do fabricante na OS. */
#painel .fabricantes-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 14px; }
#painel .fabricante-card { display: grid; align-content: start; gap: 6px; padding: 14px 16px; border: 1px solid var(--pal-e8e2f0, #e8e2f0); border-left: 5px solid var(--pal-6b56d6, #6b56d6); border-radius: 14px; background: #fff; }
#painel .fabricante-card.inativo { border-left-color: #b8b2c4; opacity: .75; }
#painel .fabricante-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#painel .fabricante-card h4 { margin: 0; font-size: 16px; }
#painel .fabricante-card p { margin: 0; color: var(--pal-514963, #514963); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#painel .fabricante-card .form-acoes { margin: 6px 0 0; }
#painel .fabricante-inativo { padding: 2px 8px; border-radius: 999px; background: #eeeaf4; color: #6b6478; font-size: 11px; font-weight: 700; }
#painel .fabricante-portal, .fabricante-dialogo .fabricante-portal { font-weight: 700; }
#painel .fabricante-contatos-resumo { margin: 0; padding-left: 18px; color: var(--pal-514963, #514963); font-size: 13px; }
#painel .fabricante-observacoes { white-space: pre-wrap; padding: 8px 10px !important; border-radius: 10px; background: #f7f5fb; }
:is(#painel, .fabricante-dialogo) .fabricante-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
#painel #form-fabricante, #painel #form-fabricante > * { grid-column: 1 / -1; }
:is(#painel, .fabricante-dialogo) .fabricante-form h3 { margin: 0; }
:is(#painel, .fabricante-dialogo) .fabricante-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
:is(#painel, .fabricante-dialogo) .fabricante-campos > label, :is(#painel, .fabricante-dialogo) .fabricante-contato > label { display: grid; gap: 6px; min-width: 0; color: #514963; font-size: 12px; font-weight: 600; }
:is(#painel, .fabricante-dialogo) .fabricante-campos :is(input, textarea), :is(#painel, .fabricante-dialogo) .fabricante-contato input { box-sizing: border-box; width: 100%; margin: 0; padding: 10px 12px; border: 1px solid #ded4ef; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 400; }
:is(#painel, .fabricante-dialogo) .fabricante-largo { grid-column: 1 / -1; }
:is(#painel, .fabricante-dialogo) .fabricante-contatos { display: grid; gap: 10px; margin: 0; padding: 12px 14px 14px; border: 1px solid #ded4ef; border-radius: 12px; }
:is(#painel, .fabricante-dialogo) .fabricante-contatos legend { padding: 0 6px; font-weight: 700; }
:is(#painel, .fabricante-dialogo) .fabricante-contatos-lista { display: grid; gap: 10px; }
:is(#painel, .fabricante-dialogo) .fabricante-contato { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 8px; }
:is(#painel, .fabricante-dialogo) .fabricante-contato-remover { min-height: 42px; margin: 0; padding: 0 12px; font-size: 18px; }
:is(#painel, .fabricante-dialogo) .fabricante-contatos > .botao-secundario { justify-self: start; margin: 0; }
:is(#painel, .fabricante-dialogo) .fabricante-ativo { display: flex; align-items: center; gap: 8px; font-size: 14px; }
:is(#painel, .fabricante-dialogo) .fabricante-form .form-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.fabricante-dialogo { box-sizing: border-box; width: min(860px, calc(100vw - 24px)); max-height: 92vh; overflow: auto; padding: 0; border: 0; border-radius: 20px; color: #30233e; }
.fabricante-dialogo::backdrop { background: rgba(24, 17, 38, .5); }
.fabricante-dialogo .fabricante-form { margin: 0; padding: 22px; border: 0; box-shadow: none; }
@media (max-width: 700px) {
  :is(#painel, .fabricante-dialogo) .fabricante-campos { grid-template-columns: minmax(0, 1fr); }
  :is(#painel, .fabricante-dialogo) .fabricante-contato { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 10px; border-bottom: 1px solid #eeeaf4; }
}
#painel .chamado-garantia-fabricante-campos > label > select { margin: 0; }
#painel .chamado-gf-info { grid-column: 1 / -1; display: grid; gap: 4px; padding: 10px 12px; border: 1px solid #d7e6f7; border-radius: 10px; background: #f6faff; color: #1d4f8a; font-size: 13px; }
#painel .chamado-gf-info a { font-weight: 700; }
#painel .chamado-gf-info small { color: #4a6585; white-space: pre-wrap; }

/* Ordens de serviço › Quadrados: grade de cartões compactos na cor do status. */
#painel .chamados-lista.modo-quadrados { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
#chamados-lista-secao:fullscreen #chamados-lista.modo-quadrados { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
#painel .chamado-quadrado { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 210px; padding: 12px 14px; border-radius: 16px; background: var(--cor-status-chamado, var(--pal-f7f4fb, #f7f4fb)); color: var(--cor-texto-status-chamado, #272333); box-shadow: 0 6px 16px rgba(39, 35, 51, .08); }
#painel .chamado-quadrado header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#painel .chamado-quadrado-numero { font-size: 20px; line-height: 1.1; }
#painel .chamado-quadrado-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }
#painel .chamado-quadrado-etiquetas span { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: #272333; font-size: 10px; font-weight: 700; }
#painel .chamado-quadrado p { margin: 0; color: inherit; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
#painel .chamado-quadrado .chamado-quadrado-cliente { font-size: 14px; font-weight: 700; }
#painel .chamado-quadrado .chamado-quadrado-relato { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: .9; }
#painel .chamado-quadrado .chamado-quadrado-rodape { font-size: 11px; opacity: .85; }
#painel .chamado-quadrado .chamado-card-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
#painel .chamado-quadrado .chamado-card-acoes .botao-padrao { flex: 1 1 auto; min-height: 34px; margin: 0; padding: 6px 10px; font-size: 12px; }
@media (max-width: 520px) { #painel .chamados-lista.modo-quadrados { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #painel .chamado-quadrado { min-height: 180px; padding: 10px; } }
/* Aviso das 20 OS mais recentes: na linha do "Ativar alerta sonoro", encostado à direita (no celular quebra para baixo). */
#painel .chamados-alerta-sonoro p.chamados-lista-nota { margin: 0 0 0 auto; color: var(--pal-736c80, #736c80); font-size: 12px; text-align: right; }
@media (max-width: 700px) { #painel .chamados-alerta-sonoro p.chamados-lista-nota { margin-left: 0; text-align: left; } }
#chamados-lista-secao:fullscreen .chamados-lista-nota { display: none; }

/* Foto opcional da garantia do fabricante (ao lado do protocolo). */
#painel .chamado-gf-foto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#painel .chamado-gf-foto[hidden] { display: none; }
#painel .chamado-gf-foto-rotulo { color: var(--pal-514963, #514963); font-size: 12px; font-weight: 600; }
#painel .chamado-gf-foto-rotulo small { font-weight: 400; }
#painel .chamado-gf-foto-escolher { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 46px; margin: 0; padding: 0 12px; border: 1px dashed var(--pal-b9a8e0, #b9a8e0); border-radius: 11px; background: var(--pal-faf8fe, #faf8fe); color: var(--pal-6b56d6, #6b56d6); font-size: 13px; font-weight: 700; text-align: center; cursor: pointer; }
#painel .chamado-gf-foto-escolher[hidden] { display: none; }
#painel .chamado-gf-foto-escolher:hover { background: #f3effd; }
#painel .chamado-gf-foto-escolher:focus-within { outline: 3px solid var(--pal-bca5e8, #bca5e8); outline-offset: 2px; }
#painel .chamado-gf-foto-escolher input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
#painel .chamado-gf-foto-atual { display: flex; align-items: center; gap: 10px; height: 46px; }
#painel .chamado-gf-foto-atual[hidden] { display: none; }
#painel .chamado-gf-foto-atual img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; border: 1px solid #ded4ef; }
#painel .chamado-gf-foto-atual a, #painel .chamado-gf-foto-atual button { min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--pal-6b56d6, #6b56d6); font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; box-shadow: none; }
#painel .chamado-gf-foto-atual a[hidden], #painel .chamado-gf-foto-atual button[hidden] { display: none; }
/* Computador: fabricante, nota, data, protocolo e foto na mesma linha. */
@media (min-width: 1000px) { #painel .chamado-garantia-fabricante-campos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Caixas da garantia sempre com 46 px e alinhadas no topo (a coluna da foto pode crescer com a miniatura). */
#painel .chamado-garantia-fabricante-campos { align-items: start; }
#painel .chamado-garantia-fabricante-campos > label { align-content: start; }
#painel .chamado-garantia-fabricante-campos > label > :is(input, select) { box-sizing: border-box; height: 46px; min-height: 46px; }
#painel .chamado-gf-foto-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#painel .chamado-garantia-fabricante-marcar[hidden] { display: none; }

/* Janela "Orçamento gerado" (enviar ao cliente). */
#dialogo-orcamento-enviar .orcamento-enviar-pergunta { margin: 4px 0 14px; font-size: 14px; line-height: 1.5; }
#dialogo-orcamento-enviar .orcamento-enviar-resultado { display: grid; gap: 8px; margin: 4px 0 14px; padding: 0; list-style: none; font-size: 13px; }
#dialogo-orcamento-enviar .orcamento-enviar-resultado li { padding: 9px 12px; border-radius: 10px; overflow-wrap: anywhere; }
#dialogo-orcamento-enviar .orcamento-enviar-resultado li.ok { background: #e8f6ee; color: #14532d; }
#dialogo-orcamento-enviar .orcamento-enviar-resultado li.aviso { background: #fff6e5; color: #7a4a00; }
#dialogo-orcamento-enviar .orcamento-enviar-resultado li.info { background: #f4f0fc; color: #3d3552; font-size: 12px; }
#dialogo-orcamento-enviar { box-sizing: border-box; width: min(560px, calc(100vw - 32px)); max-width: 560px; max-height: min(92vh, 760px); overflow: auto; padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--pal-30233e, #30233e); }
#dialogo-orcamento-enviar::backdrop { background: rgba(24, 17, 38, .48); backdrop-filter: blur(5px); }
#dialogo-orcamento-enviar .botao-secundario { padding: 10px 16px; border: 1px solid var(--pal-ded4ef, #ded4ef); border-radius: 12px; background: var(--pal-f8f5fc, #f8f5fc); color: var(--pal-6c49ad, #6c49ad); font-weight: 700; cursor: pointer; }
#dialogo-orcamento-enviar .botao-secundario:hover { background: var(--pal-efe7f9, #efe7f9); }
#dialogo-orcamento-enviar .dialogo-cliente-os-acoes button[hidden] { display: none; }
#dialogo-orcamento-enviar .botao-padrao { padding: 10px 18px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--pal-6b56d6, #6b56d6), var(--pal-a03dbb, #a03dbb)); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 8px 18px rgba(107, 86, 214, .25); }
#dialogo-orcamento-enviar .botao-padrao:hover { filter: brightness(1.05); }
#dialogo-orcamento-enviar button:disabled { opacity: .6; cursor: wait; }
#dialogo-orcamento-enviar :is(button):focus-visible { outline: 3px solid var(--pal-bca5e8, #bca5e8); outline-offset: 2px; }

/* Painel bilíngue (Paraguai): botões ES / PT no cabeçalho, juntos num grupo. */
#painel .idioma-painel[hidden] { display: none !important; }
#painel .idioma-painel { display: inline-flex; align-items: stretch; padding: 0 !important; border: 1px solid rgba(255, 255, 255, .55); border-radius: 12px; overflow: hidden; }
#painel .idioma-painel button { min-width: 44px; margin: 0; padding: 0 10px; border: 0; border-radius: 0; background: transparent; color: #fff; font: inherit; font-size: 13px; font-weight: 600; box-shadow: none; cursor: pointer; }
#painel .idioma-painel button[aria-pressed="true"] { background: #fff; color: var(--pal-5b3f97, #5b3f97); }
#painel .painel-cabecalho.menu-aberto .idioma-painel { justify-content: stretch; }
#painel .painel-cabecalho.menu-aberto .idioma-painel button { flex: 1 1 50%; min-height: 44px; }
#painel .sifen-form { display: block; }
#painel .sifen-aviso { margin: 0 0 16px; padding: 12px 14px; border: 1px solid #f3d29b; border-radius: 12px; background: #fdf6e9; color: #6b4307; font-size: 13px; line-height: 1.6; }

/* WhatsApp do cliente e leve destaque do cliente e do tipo do aparelho nas OS (sem mudar o tamanho dos cards). */
#painel .os-whatsapp { display: inline-flex; align-items: center; gap: 4px; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
#painel .os-whatsapp svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
#painel .chamado-card-cliente > span { font-size: 14px; font-weight: 700; }
#painel .chamado-card p[data-campo-chamado="aparelho"] > .chamado-card-tipo { font-size: 14px; }
#painel .chamado-quadrado .chamado-quadrado-cliente { font-size: 15px; }
#painel .chamados-tabela-cliente, #painel .chamados-tabela-aparelho { display: grid; gap: 2px; justify-items: start; }
/* Logo abaixo do Cliente: tira o espaço vazio da linha "Cadastrar cliente" (grid-row 3) para ficar na mesma distância dos outros campos da ficha. */
#painel #chamado-solicitante-whatsapp-campo { grid-column: -2 / -1; margin-top: -17px; }
#painel #chamado-solicitante-whatsapp-campo[hidden] { display: none; }
#painel #chamado-solicitante-whatsapp { margin: 0; background: #fff; border-color: rgb(222, 212, 239); color: rgb(48, 43, 66); opacity: 1; }
/* Primeiro cartão de cada menu (título da seção): mesma altura com descrição de 1 ou 2 linhas (pedido do dono, 2026-10-03). */
#painel .secao-cabecalho p { min-height: calc(2 * 1.7em); }
/* Assinatura da LiLá sempre no pé da tela, mesmo quando a página tem pouco conteúdo (pedido do dono, 2026-10-03). */
#painel:not([hidden]) { display: flex; flex-direction: column; min-height: calc(100vh - 48px); box-sizing: border-box; }
#painel:not([hidden]) > * { flex-shrink: 0; }
#painel > footer.assinatura-lila { align-self: stretch; margin-top: auto; margin-left: 0; margin-right: 0; }
/* Com a página cheia, o "auto" acima zerava a distância e a linha do rodapé encostava nos cards: a seção aberta guarda os 36 px
   padrão da assinatura (2026-10-11, pedido do dono). */
#painel > section:not([hidden]) { margin-bottom: 36px; }

/* ---------- Painel no estilo da tela de entrada e da Central (2026-10-03): cabeçalho neutro, incorporado à página, com separação suave;
   cartões com contorno fino (#e9e4f0), sem fundo branco nem sombra. ---------- */
#painel .painel-cabecalho { padding: 8px 4px 22px; border: 0; border-bottom: 1px solid #e9e4f0; border-radius: 0; background: none; box-shadow: none; color: var(--pal-2b2541, #2b2541); }
#painel .painel-cabecalho h1 { color: var(--pal-2b2541, #2b2541); }
#painel .painel-cabecalho p { color: var(--pal-736c80, #736c80); }
#painel :is(#abrir-suporte, #abrir-app, #abrir-mensalidade, #sair, .painel-cabecalho .link-loja) { border: 1px solid #e9e4f0; background: transparent; color: var(--pal-4a3f63, #4a3f63); }
#painel :is(#abrir-suporte, #abrir-app, #abrir-mensalidade, #sair, .painel-cabecalho .link-loja):hover { border-color: #ded4ef; background: #fff; color: var(--pal-6b46c1, #6b46c1); }
#painel .painel-menu-botao { border-color: #e9e4f0; background: transparent; color: var(--pal-4a3f63, #4a3f63); }
/* logo do Inqubo no cabeçalho; a da empresa fica só nos impressos e relatórios dela (o elemento continua na página, escondido) */
#painel .painel-marca :is(.painel-logo-branca, .logo-nome) { display: none !important; }
#painel .painel-marca .painel-logo-inqubo { display: block; flex: none; width: auto; height: 64px; }
/* cartões e menu */
#painel :is(.dashboard-card, .dashboard-kpi, .secao-cabecalho, .configuracoes-impressao-form) { border-color: #e9e4f0 !important; background: transparent !important; box-shadow: none !important; }
#painel :is(.dashboard-card, .secao-cabecalho) { border-radius: 22px; }
/* Dashboards da assistência e dos segmentos comerciais usam o mesmo card da ótica. */
#painel #inicio-painel { padding: 0; }
#painel :is(#inicio-painel, #secao-varejo-inicio) > .secao-cabecalho { margin-bottom: 18px; }
#painel section > form:not(.dashboard-card), #painel .varejo-secao > div > form:not(.dashboard-card) { border-color: #e9e4f0; background: transparent; box-shadow: none; }
#painel .menu { border-color: #e9e4f0; background: color-mix(in srgb, var(--pal-f5f3f9, #f5f3f9) 88%, transparent); box-shadow: none; backdrop-filter: blur(8px); }
@media (max-width: 760px) { #painel .painel-marca .painel-logo-inqubo { height: 48px; } }

/* cartões que ainda tinham fundo branco (achados pela varredura de todas as abas da loja e da assistência) */
#painel :is(#inicio-painel, .cliente-form-grupo, .permissoes-grupo, .configuracao-impressao-grupo, .chamado-status-filtros, .tipos-aparelho-cadastrados,
  #formulario-usuario, #formulario-perfil-usuario, .acesso-operador-form, #form-banco-dados-upload, #form-banco-dados-reset, #formulario-dados-loja, #formulario-informacoes,
  #formulario-email, #formulario-tema, #logos-loja-card, #form-cadastrar-status, .chamado-status-card, .filtros-auditoria, .usuario-card, .auditoria-linha,
  .varejo-fila-item, .varejo-categoria-item, .item-os-linha, .nota-entrada-linha, .tinta-card, .tinta-sistema, .funcionario-card) {
  border-color: #e9e4f0 !important; background: transparent !important; box-shadow: none !important;
}
#painel fieldset:not([class]) { border-color: #e9e4f0; background: transparent; }
#painel .usuario-card form { background: transparent !important; border-color: #e9e4f0 !important; }
#painel #formulario-usuario.produto, #painel article.produto { background: transparent !important; }

/* ---------- botões no layout novo: principal em cor sólida (sem degradê nem sombra), secundário só com contorno ---------- */
:is(#painel, dialog) :is(.botao-padrao, .botao-principal, form button[type="submit"]):not(.botao-secundario):not(.botao-perigo):not(.mostrar-senha) {
  border: 1px solid transparent; border-radius: 12px; background: var(--pal-6b56d6, #6b56d6) !important; box-shadow: none !important; color: #fff; font-weight: 600;
}
:is(#painel, dialog) :is(.botao-padrao, .botao-principal, form button[type="submit"]):not(.botao-secundario):not(.botao-perigo):not(.mostrar-senha):hover { filter: brightness(.93); }
:is(#painel, dialog) :is(.botao-secundario, .varejo-acao-linha) {
  border: 1px solid #e2dcec !important; border-radius: 12px; background: transparent !important; box-shadow: none !important; color: var(--pal-4a3f63, #4a3f63) !important; font-weight: 600;
}
:is(#painel, dialog) :is(.botao-secundario, .varejo-acao-linha):hover { border-color: #ded4ef !important; background: #fff !important; color: var(--pal-6b46c1, #6b46c1) !important; filter: none; }
/* Botão principal em linha de lista ("Atender", "Pagar"...): fundo roxo do principal, texto branco (antes saía escuro sobre roxo). */
:is(#painel, dialog) .botao-padrao.varejo-acao-linha, :is(#painel, dialog) .botao-padrao.varejo-acao-linha:hover { border-color: transparent !important; color: #fff !important; }
:is(#painel, dialog) :is(.botao-perigo, .acao-destrutiva) { border: 1px solid #f1cfd9 !important; background: transparent !important; box-shadow: none !important; color: #b54668 !important; }
:is(#painel, dialog) :is(.botao-perigo, .acao-destrutiva):hover { background: #fff5f8 !important; }
/* menu principal e abas das seções */
#painel .menu button { box-shadow: none !important; }
#painel .menu button[aria-pressed="true"] { background: var(--pal-6b56d6, #6b56d6) !important; box-shadow: none !important; }
#painel section nav:not(#submenu) button:not([aria-pressed="true"]), #painel .varejo-secao nav button:not([aria-pressed="true"]) { border: 1px solid #e9e4f0 !important; background: transparent !important; box-shadow: none !important; }
#painel #inicio-painel #atualizar-dashboard, #painel #secao-varejo-inicio #varejo-atualizar-inicio, #painel section nav:not(#submenu) button[aria-pressed="true"], #painel .varejo-secao nav button[aria-pressed="true"] { border-color: transparent !important; background: var(--pal-6b56d6, #6b56d6) !important; box-shadow: none !important; color: #fff !important; }

/* ---------- janelas que abrem por cima da página (fundo fosco atrás) no padrão novo: fundo claro, contorno fino, sombra suave ---------- */
:is(dialog .dialogo-cliente-os-card, dialog.varejo-dialogo, dialog.aviso-site, #dialogo-app > section, #dialogo-manuais > section, dialog .relatorio-montador) {
  border: 1px solid #e9e4f0 !important; border-radius: 22px; background: #faf9fc !important; box-shadow: 0 24px 60px rgba(43, 37, 65, .16) !important;
}
dialog .dialogo-cliente-os-cabecalho { border-bottom: 1px solid #e9e4f0; background: none !important; }
dialog .dialogo-cliente-os-cabecalho :is(h2, h3) { color: var(--pal-2b2541, #2b2541); }
dialog :is(fieldset, .dialogo-cliente-os-grupo) { border-color: #e9e4f0; background: transparent; }
.aviso-site .aviso-site-confirmar { background: var(--pal-6b56d6, #6b56d6) !important; box-shadow: none !important; }
.aviso-site .aviso-site-cancelar { border: 1px solid #e2dcec !important; background: transparent !important; color: var(--pal-4a3f63, #4a3f63) !important; }
.aviso-site .aviso-site-cancelar:hover { background: #fff !important; }
dialog#relatorio-montador { border: 1px solid #e9e4f0; background: #faf9fc; box-shadow: 0 24px 60px rgba(43, 37, 65, .16); }
#relatorio-montador :is(.relatorio-topo, .relatorio-bloco, .relatorio-acoes, .relatorio-vistas) { border-color: #e9e4f0 !important; background: transparent !important; box-shadow: none !important; }
/* Aviso "caixa aberto em outro computador" no padrão novo: contorno suave, sem fundo creme nem letra laranja. */
#painel .varejo-caixa-bloqueado { border: 1px solid #e9e4f0 !important; background: transparent !important; box-shadow: none !important; color: var(--pal-2b2541, #2b2541) !important; }
#painel .varejo-caixa-bloqueado p { color: var(--pal-4a3f63, #4a3f63); font-weight: 500; }
/* Relatório personalizado: a faixa fixa dos botões (Salvar como modelo / Baixar Excel / Gerar PDF) precisa de fundo próprio,
   senão a lista de colunas aparece por trás; e os botões do seletor PDF/Excel sem a margem herdada (contorno do tamanho dos botões). */
#relatorio-montador .relatorio-acoes { background: #faf9fc !important; border-top: 1px solid #e9e4f0 !important; box-shadow: 0 -10px 16px -6px #faf9fc !important; z-index: 2; }
#relatorio-montador .relatorio-acoes button { margin: 0 !important; }
#painel .relatorio-vistas { align-items: center; gap: 2px; border-color: #e9e4f0; background: transparent; }
#painel .relatorio-vistas button { margin: 0 !important; }
/* Avisos dos caixas em destaque com as cores do site (pedido de 2026-10-04):
   caixa aberto = lilás com faixa roxa; caixa aberto em outro computador = lilás rosado com faixa magenta (pede atenção). */
body #painel .varejo-caixa-barra { position: relative; overflow: hidden; padding-left: 24px; border: 1px solid #ddd3f4 !important; background: linear-gradient(100deg, #efe9fc, #f7f3fd 60%, #faf9fc) !important; box-shadow: none !important; }
body #painel .varejo-caixa-barra::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, #7054d4, #9348c3); }
body #painel .varejo-caixa-barra strong { display: flex; align-items: center; gap: 8px; color: #4b3aa8; font-size: 15px; }
body #painel .varejo-caixa-barra strong::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #6b56d6; box-shadow: 0 0 0 4px #6b56d633; }
body #painel .varejo-caixa-barra span { color: #5b5672; }
body #painel .varejo-caixa-bloqueado { position: relative; overflow: hidden; padding-left: 24px; border: 1px solid #f0d3e6 !important; background: linear-gradient(100deg, #fbeef6, #fbf5fa 60%, #faf9fc) !important; }
body #painel .varejo-caixa-bloqueado::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, #b8327a, #9348c3); }
body #painel .varejo-caixa-bloqueado p { color: #6e2452; font-weight: 600; }
/* Troca de aba do menu principal: entrada rápida e suave (0,22 s). As abas são as seções logo abaixo de #painel;
   os submenus ficam dentro delas e trocam na hora (sem animação). "backwards": depois da animação não sobra transform
   (um transform fixo mudaria a referência dos elementos com position: fixed dentro da aba). */
#painel > section:not([hidden]) { animation: aba-entrar .22s cubic-bezier(.2, .7, .3, 1) backwards; }
@keyframes aba-entrar { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { #painel > section:not([hidden]) { animation: none; } }
/* Submenus: troca instantânea (o botão escolhido muda de cor na hora, sem a transição de 0,18 s). */
#painel section nav:not(#submenu) button, #painel .varejo-secao nav button { transition: none !important; }

/* ---------- Todas as janelas por cima (OS, vendas, ótica, autorizações, agenda, relatórios, avisos…): abrir e fechar
   rápidos e suaves (dono, 2026-10-06). Só transparência e posição — o navegador anima sem redesenhar a página — e o fundo
   escurece sem desfoque: desfocar a página inteira (pior ainda animando o desfoque) era o que fazia a transição travar.
   A saída usa "allow-discrete": a janela continua visível os 0,12 s depois do close(), sem mudar o código de cada uma. */
dialog:not(.aviso-site) { opacity: 0; transform: translateY(8px) scale(.985);
  transition: opacity .12s ease-in, transform .12s ease-in, overlay .12s ease-in allow-discrete, display .12s ease-in allow-discrete; }
dialog:not(.aviso-site)[open] { opacity: 1; transform: none;
  transition: opacity .16s ease-out, transform .16s cubic-bezier(.2, .8, .2, 1), overlay .16s allow-discrete, display .16s allow-discrete; }
@starting-style { dialog:not(.aviso-site)[open] { opacity: 0; transform: translateY(10px) scale(.985); } }
dialog::backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 0;
  transition: opacity .12s ease-in, overlay .12s allow-discrete, display .12s allow-discrete; }
dialog[open]::backdrop { opacity: 1; transition: opacity .16s ease-out, overlay .16s allow-discrete, display .16s allow-discrete; }
@starting-style { dialog[open]::backdrop { opacity: 0; } }
#painel dialog.relatorio-dialogo[open] { animation: none; }  /* tinha animação própria; agora vale a de todas */
/* Avisos e confirmações (assets/avisos.js) têm animação própria: só mais curta e com o fundo sem desfoque. */
dialog.aviso-site[open] { animation: janela-entrar .16s cubic-bezier(.2, .8, .2, 1) both !important; }
dialog.aviso-site::backdrop { animation: janela-fundo-entrar .16s ease-out both !important; }
dialog.aviso-site.aviso-site-fechando { animation: janela-sair .12s ease-in both !important; pointer-events: none; }
dialog.aviso-site.aviso-site-fechando::backdrop { animation: janela-fundo-sair .12s ease-in both !important; }
@keyframes janela-entrar { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes janela-sair { to { opacity: 0; transform: translateY(6px) scale(.99); } }
@keyframes janela-fundo-entrar { from { opacity: 0; } }
@keyframes janela-fundo-sair { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  dialog, dialog[open], dialog::backdrop, dialog[open]::backdrop { transition: none !important; }
  dialog.aviso-site[open], dialog.aviso-site::backdrop, dialog.aviso-site.aviso-site-fechando, dialog.aviso-site.aviso-site-fechando::backdrop { animation: none !important; }
}
/* Caixas de marcar e botões de opção sem regra própria (ex.: Operadores › Horário e local de acesso) seguem o roxo do painel, não o azul do navegador. */
#painel :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--pal-7054d4, #7054d4); }

/* Botões do submenu (2026-10-11, pedido do dono): a mesma distância do card de abas aos botões dele (5 px), acima e abaixo.
   Vale quando a seção aberta começa pelo submenu (antes dele pode vir a barra do botão Relatórios, escondida, ou só ela). */
#painel > .menu:has(~ section:not([hidden]) > :is(.submenu-usuarios:first-child, .relatorio-barra:first-child)) { margin-bottom: 5px !important; }
#painel > section > :is(.submenu-usuarios:first-child, .relatorio-barra:first-child, .relatorio-barra:first-child + .submenu-usuarios) { margin-top: 0; }
#painel > section > :is(.submenu-usuarios:first-child, .relatorio-barra:first-child + .submenu-usuarios) { margin-bottom: 5px; padding-bottom: 0; }
#painel > section > .relatorio-barra:not([hidden]):first-child { margin-bottom: 5px; }