/* PSA Tubos — tokens do sistema visual (DESIGN.md) e camada de padronização.
   Os estilos das páginas ainda são inline; esta folha é a fonte dos valores canônicos e corrige
   o que as páginas não podem garantir sozinhas (altura dos botões, foco, rótulos de tabela). */
:root {
  /* cores */
  --roxo-marca: #28078E;
  --roxo-hover: #3A1BA8;
  --roxo-profundo: #1F0671;
  --roxo-noite: #180453;
  --roxo-claro-texto: #E3DEFA;
  --roxo-claro-rotulo: #C9C0F0;
  --ambar-conversao: #F2A516;
  --ambar-hover: #F8B838;
  --grafite: #1F2430;
  --grafite-linha: #343B4C;
  --gelo-tecnico: #EEF1F6;
  --listra-tabela: #F7F8FB;
  --borda: #E2E6EE;
  --borda-forte: #D5DAE4;
  --texto-apoio: #4A5262;
  --texto-suave: #5A6475;
  --texto-sobre-escuro: #AAB3C2;
  --whatsapp: #127A3C;
  --whatsapp-hover: #0F6B33;
  --erro: #9A2020;
  --erro-fundo: #FDEAEA;
  /* forma */
  --raio-sm: 6px;
  --raio-md: 12px;
  --raio-lg: 14px;
  /* espaço */
  --gutter: clamp(20px, 5vw, 32px);
  --secao: clamp(64px, 9vw, 104px);
  --secao-compacta: clamp(48px, 7vw, 80px);
  --container: 1200px;
  /* profundidade e movimento */
  --sombra-cartao: 0 10px 28px -16px rgba(31, 36, 48, .14);
  --sombra-painel: 0 16px 40px rgba(31, 36, 48, .15);
  --foco-campo: 0 0 0 3px rgba(40, 7, 142, .14);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

/* A altura mínima de 48 px dos botões do conteúdo agora vem das classes geradas em psa-estilos.css (scripts/migrar-estilos.js). */

/* Números de tabela alinhados */
main table td, main table th { font-variant-numeric: tabular-nums; }

/* Tabela de medidas com seleção múltipla (tabelas.js). Especificidade alta para vencer as classes de psa-estilos.css. */
/* Valor de agrupamento repetido: tabelas.js grava em data-fill só nas células vazias (e tira quando a célula ganha texto) */
html body main table td[data-fill]::after { content: attr(data-fill); }
@media (min-width: 601px) { html body main table td[data-fill]::after { color: var(--texto-suave); font-weight: 500; } }
html body table.psa-sel tbody tr { cursor: pointer; }
html body table.psa-sel td.psa-acao button { display: none; }
/* desktop: fundo alternado por grupo de diâmetro (tabelas.js marca .psa-grupo-par); vence o zebrado inline de algumas tabelas */
@media (min-width: 601px) {
  html body table.psa-sel tbody td { background: #FFFFFF; }
  html body table.psa-sel tbody tr.psa-grupo-par td { background: var(--listra-tabela); }
  @media (hover: hover) and (pointer: fine) { html body table.psa-sel tbody tr:hover td { background: var(--gelo-tecnico); } }
}
html body table.psa-sel tbody tr.psa-on td { background: #EFECF7; } /* selecionada: lilás sólido sobre qualquer fundo de grupo */
.psa-sel-check { width: 20px; height: 20px; margin: 0; accent-color: var(--roxo-marca); cursor: pointer; }
/* Barra de seleção: barra de ação escura presa ao rodapé do bloco, para não se confundir com o conteúdo */
.psa-sel-barra { position: sticky; bottom: 0; z-index: 5; padding: 12px var(--gutter); background: var(--grafite); box-shadow: 0 -10px 24px -14px rgba(31, 36, 48, .45); font-size: 14px; font-weight: 700; color: #FFFFFF; }
.psa-sel-barra[hidden] { display: none; }
.psa-sel-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.psa-sel-linha > span { flex: 1 1 auto; }
/* Revisão do pedido (<dialog>): janela central no desktop, painel que sobe do rodapé no celular */
.psa-sel-dialogo { box-sizing: border-box; width: min(460px, calc(100vw - 32px)); max-height: min(80vh, 640px); margin: auto; padding: 18px 20px 20px; border: 0; border-radius: var(--raio-lg); background: #FFFFFF; color: var(--grafite); font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 400; box-shadow: var(--sombra-painel); overscroll-behavior: contain; }
.psa-sel-dialogo::backdrop { background: rgba(31, 36, 48, .5); }
.psa-sel-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.psa-sel-tit { margin: 0; font-size: 18px; font-weight: 700; color: var(--grafite); }
.psa-sel-fechar { width: 44px; height: 44px; margin: -10px -12px -10px 0; border: 0; background: none; font: inherit; font-size: 26px; line-height: 1; color: var(--texto-apoio); cursor: pointer; }
.psa-sel-dica { margin: 4px 0 12px; font-size: 14px; line-height: 1.5; color: var(--texto-apoio); }
.psa-sel-itens { margin: 0 0 16px; padding: 0; list-style: none; }
.psa-sel-itens li { display: grid; grid-template-columns: minmax(0, 1fr) 76px 168px; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borda); }
.psa-sel-desc { font-size: 14px; font-weight: 700; }
.psa-sel-qtd, .psa-sel-un { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); background: #FFFFFF; font: inherit; font-size: 16px; font-weight: 500; color: var(--grafite); }
.psa-sel-qtd:focus-visible, .psa-sel-un:focus-visible { outline: none; border-color: var(--roxo-marca); box-shadow: var(--foco-campo); }
.psa-sel-fechar:focus-visible, .psa-sel-voltar:focus-visible, .psa-sel-dialogo .psa-sel-cotar:focus-visible { outline: 2px solid var(--roxo-marca); outline-offset: 2px; }
.psa-sel-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--borda); }
.psa-sel-voltar { min-height: 44px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--grafite); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 600px) {
  .psa-sel-dialogo { width: 100%; max-width: 100%; max-height: 85dvh; margin: auto 0 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: var(--raio-lg) var(--raio-lg) 0 0; }
  .psa-sel-dialogo::before { content: ''; display: block; width: 36px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: var(--borda-forte); }
  .psa-sel-itens li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .psa-sel-desc { grid-column: 1 / -1; }
  .psa-sel-acoes .psa-sel-cotar { flex: 1 1 auto; }
}
.psa-sel-limpar { min-height: 44px; padding: 0 8px; border: 0; background: none; font: inherit; font-weight: 600; color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.psa-sel-cotar { min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--raio-sm); background: var(--ambar-conversao); color: var(--grafite); font: inherit; font-weight: 700; cursor: pointer; transition: background-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .psa-sel-cotar:hover { background: var(--ambar-hover); } }
.psa-sel-cotar:focus-visible, .psa-sel-limpar:focus-visible, .psa-sel-ver:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.psa-sel-ver { min-height: 44px; padding: 0 8px; border: 0; background: none; font: inherit; font-weight: 600; color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.psa-sel-ver[hidden] { display: none; }
/* Filtro da tabela: "Limpar filtros" em roxo sobre o branco; foco dos campos com o anel roxo do sistema */
.psa-filtro-limpar { min-height: 44px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--roxo-marca); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.psa-filtro-limpar[hidden] { display: none; }
.psa-filtro-limpar:focus-visible { outline: 2px solid var(--roxo-marca); outline-offset: 2px; }
html body [data-psa-filtro] select:focus-visible, html body [data-psa-filtro] input:focus-visible { outline: none; border-color: var(--roxo-marca); box-shadow: var(--foco-campo); }
/* Texto só para leitor de tela */
.psa-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* celular: cada medida vira uma linha da lista (título com schedule + dados em 3 colunas, caixa de seleção no canto),
   separada por divisória dentro do card da tabela; a barra de seleção fica no rodapé da tela e o WhatsApp sai enquanto há seleção */
@media (max-width: 600px) {
  html body div.psa-sel-rolagem { max-height: none; overflow: visible; border: 0; }
  html body table.psa-sel, html body table.psa-sel tbody { display: block; width: 100% !important; min-width: 0 !important; } /* algumas tabelas (chapas, perfis) trazem largura e estilo das células inline */
  html body table.psa-sel thead { display: none; }
  html body table.psa-sel tr { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin: 0; padding: 14px 16px; border: 0; border-top: 1px solid var(--borda); background: #FFFFFF !important; } /* algumas tabelas (NBR 5580/5590) trazem fundo alternado inline na linha */
  html body table.psa-sel tbody:first-of-type tr:first-child { border-top: 0; } /* cada diâmetro é um tbody: só a primeira linha da tabela fica sem divisória */
  html body table.psa-sel tr.psa-on { background: rgba(40, 7, 142, .06) !important; }
  html body table.psa-sel tr.psa-on td, html body table.psa-sel td { padding: 0 !important; border: 0 !important; background: none !important; white-space: normal !important; text-align: left !important; font-size: 15px !important; font-weight: 600 !important; color: var(--grafite) !important; }
  html body table.psa-sel td::before { content: attr(data-rotulo); display: block; font-size: 12px; font-weight: 500; color: var(--texto-suave); }
  html body table.psa-sel tr td.psa-titulo, html body table.psa-sel tr.psa-on td.psa-titulo { order: -1; grid-column: 1 / -1; padding-right: 44px !important; font-size: 17px !important; font-weight: 700 !important; color: var(--roxo-marca) !important; }
  html body table.psa-sel td.psa-titulo::before, html body table.psa-sel td.psa-acao::before { content: none; }
  html body table.psa-sel td.psa-acao { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  html body table.psa-sel td.psa-titulo[data-sub]::after { content: ' · ' attr(data-sub); font-size: 15px; color: var(--grafite); }
  html body table.psa-sel td.psa-titulo[data-fill]::after { content: attr(data-fill); font-size: 17px; color: var(--roxo-marca); }
  html body table.psa-sel td.psa-titulo[data-fill][data-sub]::before { content: attr(data-fill); display: inline; font-size: 17px; font-weight: 700; color: var(--roxo-marca); }
  html body table.psa-sel td.psa-titulo[data-fill][data-sub]::after { content: ' · ' attr(data-sub); font-size: 15px; color: var(--grafite); }
  html body table.psa-sel td.psa-vazio { visibility: hidden; } /* guarda o lugar: as colunas não mudam de posição entre itens */
  .psa-sel-barra { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); font-size: 13px; }
  .psa-sel-linha { gap: 4px 8px; }
  .psa-sel-linha > span { flex: 1 1 90px; min-width: 0; line-height: 1.3; }
  .psa-sel-cotar { flex: none; margin-left: auto; padding: 0 14px; white-space: nowrap; }
  .psa-sel-limpar, .psa-sel-ver { padding: 0 4px; white-space: nowrap; }
  html.psa-sel-ativa .psa-wa { display: none !important; }
  /* seletores de tabela (norma, classe): opções lado a lado em colunas iguais, sem a última sozinha na linha de baixo */
  html body main [role="tablist"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 6px; box-sizing: border-box; width: 100%; } /* largura total: o contêiner encolhe ao conteúdo e o auto-fit cairia para 1 coluna */
  html body main [role="tablist"] > [role="tab"] { min-width: 0; padding: 8px 6px !important; white-space: normal !important; text-align: center; line-height: 1.25; } /* os botões trazem padding e nowrap no style inline */
}

/* Campo com erro (formularios.js marca aria-invalid); especificidade acima das classes de psa-estilos.css */
html body input[aria-invalid="true"], html body select[aria-invalid="true"], html body textarea[aria-invalid="true"] { border-color: var(--erro); }

/* Tabelas de comparação e de requisitos (tabelas.js marca .psa-pilha): no celular, blocos empilhados sem rolagem lateral */
@media (max-width: 600px) {
  html body div.psa-pilha-rolagem { max-height: none; overflow: visible; }
  html body table.psa-pilha, html body table.psa-pilha tbody, html body table.psa-pilha tr { display: block; width: 100% !important; min-width: 0 !important; }
  html body table.psa-pilha thead { display: none; }
  html body table.psa-pilha tr { box-sizing: border-box; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 14px 16px; border-top: 1px solid var(--borda); background: #FFFFFF !important; }
  html body table.psa-pilha.psa-pilha-texto tr { grid-template-columns: minmax(0, 1fr); }
  html body table.psa-pilha tbody:first-of-type tr:first-child { border-top: 0; }
  html body table.psa-pilha th, html body table.psa-pilha td { display: block; padding: 0 !important; border: 0 !important; background: none !important; text-align: left !important; white-space: normal !important; }
  html body table.psa-pilha .psa-pilha-tit { grid-column: 1 / -1; font-size: 16px !important; font-weight: 700 !important; color: var(--roxo-marca) !important; }
  html body table.psa-pilha td, html body table.psa-pilha th:not(.psa-pilha-tit) { font-size: 15px !important; font-weight: 500 !important; line-height: 1.55; color: var(--grafite) !important; }
  html body table.psa-pilha [data-rotulo]::before { content: attr(data-rotulo); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--texto-suave); }
}

/* Celular: blocos que não cabiam em telas estreitas (320 px) */
@media (max-width: 600px) {
  /* seletores com a tag na frente: psa-estilos.css carrega depois e empata em especificidade com "html body .classe" */
  html body div.psa-d-14308 { grid-template-columns: minmax(0, 1fr); gap: 2px; } /* ficha "Especificações de fornecimento": rótulo em cima, valor embaixo */
  html body div.psa-d-ci30d { grid-template-columns: minmax(0, 1fr); } /* cartão de norma */
  html body a.psa-b-1j7q8, html body a.psa-b-1rpyt { white-space: normal; } /* "Consultar a norma…", "Prefere enviar a lista pelo WhatsApp" */
  html body div.psa-d-1adie { min-height: 0; } /* cartões de diferenciais da home: sem altura mínima de desktop */
  html body h3.psa-t3-fv1d2 { margin-top: 0; } /* sobra do ícone removido em 24/10 */
  html body p.psa-p-hdmgc { white-space: normal; } /* rótulo "Normas de fornecimento" sobre a foto do produto: quebra em vez de invadir o selo ao lado */
  html body footer li a, html body footer nav a { display: inline-block; padding-block: 6px; } /* links do rodapé com área de toque maior */
  html body footer::after { content: ''; display: block; height: 72px; } /* o fim do rodapé não fica atrás do botão flutuante do WhatsApp */
}

/* Seleção de texto e barra de rolagem da região técnica seguem a marca */
::selection { background: var(--roxo-claro-texto); color: var(--grafite); }
main [role="region"][tabindex="0"] { scrollbar-color: var(--borda-forte) var(--gelo-tecnico); }
main [role="region"][tabindex="0"]:focus-visible { outline: 2px solid var(--roxo-marca); outline-offset: 2px; }