/* ==========================================================================
   Tabela de Dimensões — padrão visual Dapco
   Substitui a antiga imagem estática da tabela de medidas.

   Cores da marca (já usadas em site.css):
     azul   #293a7c   |   amarelo  #F0CB16
     cinza  #69696E   |   claros   #f6f6f6 / #fafafa / #dee2e6

   Tudo é escopado em .tabela-dimensoes para não afetar as outras
   tabelas do site (ex: a lista de códigos #tabela).
   ========================================================================== */

.dimensoes-bloco {
   margin-bottom: 1rem;
}

/* --- Título "Dimensões" com acento amarelo da marca --- */
.dimensoes-bloco .dimensoes-titulo {
   font-family: 'Droid Sans Bold', sans-serif;
   color: #293a7c;
   font-size: 1.25rem;
   margin-bottom: .85rem;
   padding-bottom: .5rem;
   position: relative;
}

.dimensoes-bloco .dimensoes-titulo::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 48px;
   height: 3px;
   background: #F0CB16;
   border-radius: 2px;
}

/* --- Card em volta da tabela + área de rolagem horizontal --- */
.dimensoes-wrap {
   background: #fff;
   border: 1px solid #dee2e6;
   border-radius: 6px;
   box-shadow: 0 0 10px rgba(0, 0, 0, .08);
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
}

/* Barra de rolagem discreta nas cores da marca */
.dimensoes-wrap::-webkit-scrollbar {
   height: 8px;
}

.dimensoes-wrap::-webkit-scrollbar-track {
   background: #f6f6f6;
   border-radius: 0 0 6px 6px;
}

.dimensoes-wrap::-webkit-scrollbar-thumb {
   background: #c3c8d8;
   border-radius: 4px;
}

.dimensoes-wrap::-webkit-scrollbar-thumb:hover {
   background: #293a7c;
}

/* --- A tabela --- */
table.tabela-dimensoes {
   width: 100%;
   margin: 0;
   border-collapse: separate; /* necessário para o sticky não "vazar" as bordas */
   border-spacing: 0;
   font-family: 'Nunito-Regular', Arial, sans-serif;
   font-size: .875rem;
   white-space: nowrap;
}

table.tabela-dimensoes th,
table.tabela-dimensoes td {
   padding: .55rem .85rem;
   text-align: center;
   vertical-align: middle;
   border-bottom: 1px solid #e9ecef;
   border-right: 1px solid #e9ecef;
}

table.tabela-dimensoes tr > *:last-child {
   border-right: 0;
}

table.tabela-dimensoes tbody tr:last-child > * {
   border-bottom: 0;
}

/* --- Cabeçalho (as medidas: M3, M4, 1/4"...) --- */
table.tabela-dimensoes thead th {
   background: #293a7c;
   color: #fff !important;
   font-family: 'Droid Sans Bold', sans-serif;
   font-weight: 700;
   font-size: .8125rem;
   letter-spacing: .3px;
   border-bottom: 2px solid #F0CB16;
   border-right-color: rgba(255, 255, 255, .15);
   position: sticky;
   top: 0;
   /*
    * IMPORTANTE: manter estes z-index em 0/1/2.
    *
    * O menu mobile (.menu-mob em site.css) usa `z-index: 3`. Valores 3 ou mais
    * aqui fazem a coluna fixa da tabela aparecer POR CIMA do menu aberto no
    * celular — e como a tabela vem depois do menu no HTML, no empate ela vence.
    * Para o sticky funcionar basta ficar acima das células normais, que não têm
    * z-index; não é preciso passar de 2.
    */
   z-index: 1;
}

/* Célula do canto: rótulo do eixo das colunas (destaque em amarelo) */
table.tabela-dimensoes thead th.dimensoes-canto {
   color: #F0CB16 !important;
   text-transform: uppercase;
   font-size: .75rem;
   text-align: left;
   left: 0;
   z-index: 2; /* acima do resto do cabeçalho e da coluna fixa, e abaixo do menu */
}

/* --- Coluna de rótulos das linhas (Passo, k, S, d1...) fixa na horizontal --- */
table.tabela-dimensoes tbody th {
   background: #f6f6f6;
   color: #293a7c !important;
   font-family: 'Droid Sans Bold', sans-serif;
   font-weight: 700;
   text-align: left;
   position: sticky;
   left: 0;
   z-index: 1; /* ver nota sobre o menu mobile no cabeçalho acima */
   box-shadow: 3px 0 6px -2px rgba(0, 0, 0, .10);
}

/* --- Células de dados --- */
table.tabela-dimensoes tbody td {
   color: #69696E;
   font-variant-numeric: tabular-nums; /* números alinham em colunas */
   font-feature-settings: 'tnum';
}

/* Zebra — essencial em tabelas largas (algumas têm 26 colunas) */
table.tabela-dimensoes tbody tr:nth-child(even) td {
   background: #fafafa;
}

table.tabela-dimensoes tbody tr:nth-child(even) th {
   background: #f1f2f5;
}

/* Hover na linha com o amarelo da marca (sobrepõe o .table-hover do site) */
table.tabela-dimensoes tbody tr:hover td,
table.tabela-dimensoes tbody tr:hover th {
   background: #fdf6d9;
   color: #293a7c !important;
}

/* --- Linha de seção: título que atravessa a tabela inteira --- */
table.tabela-dimensoes tbody tr.dimensoes-secao th {
   background: #eef0f6;
   color: #293a7c !important;
   text-align: center;
   font-family: 'Droid Sans Bold', sans-serif;
   font-size: .8125rem;
   letter-spacing: .2px;
   position: static; /* não fixa na horizontal: já ocupa a largura toda */
   box-shadow: none;
   border-top: 1px solid #ccd2e0;
}

table.tabela-dimensoes tbody tr.dimensoes-secao:hover th {
   background: #eef0f6;
}

/* --- Nota de rodapé da tabela (observação técnica que vem na imagem) --- */
.dimensoes-nota {
   margin: .6rem 0 0;
   padding-left: .75rem;
   border-left: 3px solid #F0CB16;
   font-family: 'Nunito-Regular', Arial, sans-serif;
   font-size: .8125rem;
   color: #69696E;
}

/* --- Dica de rolagem (só aparece quando a tabela não cabe na tela) --- */
.dimensoes-hint {
   display: none;
   margin: .5rem 0 0;
   font-family: 'Nunito-Regular', Arial, sans-serif;
   font-size: .75rem;
   color: #A0A0A0;
}

.dimensoes-hint i {
   color: #F0CB16;
   margin-right: .35rem;
}

/* --- Ajustes mobile --- */
@media (max-width: 767.98px) {
   .dimensoes-hint {
      display: block;
   }

   table.tabela-dimensoes {
      font-size: .8125rem;
   }

   table.tabela-dimensoes th,
   table.tabela-dimensoes td {
      padding: .45rem .6rem;
   }

   .dimensoes-bloco .dimensoes-titulo {
      font-size: 1.1rem;
   }
}

/* A regra global `.table-responsive img { height: 130px }` do site.css
   deforma a imagem antiga da tabela; garante que o fallback fique fluido. */
.dimensoes-wrap img,
.dimensoes-fallback img {
   width: auto;
   height: auto;
   max-width: 100%;
}

/* --- Impressão: sem sombra, sem sticky, com bordas nítidas --- */
@media print {
   .dimensoes-wrap {
      box-shadow: none;
      overflow: visible;
      border-color: #999;
   }

   .dimensoes-hint {
      display: none;
   }

   table.tabela-dimensoes {
      white-space: normal;
      font-size: .7rem;
   }

   table.tabela-dimensoes thead th,
   table.tabela-dimensoes tbody th {
      position: static;
      box-shadow: none;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }
}