/* ================== CONFIGURAÇÕES GERAIS ================== */
body {
  font-family: Arial, sans-serif;
  background-color: #f5f7fa;
  margin: 0;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

/* ================== IMAGENS ================== */
.topo-banner {
  position: relative;
  width: 60%;
  max-width: 100%;
  margin: 0 auto 30px auto;
  text-align: center;
}

.imagem-banner {
  display: inline-block;
  max-width: 80%;
  height: auto;
}

.imagem-rodape {
  width: 100%;
  text-align: center;
  margin-top: 0px;
  padding: 2px 0;
}

.imagem-rodape img {
  max-width: 300px;
  height: auto;
}

/* ================== BOX ATENÇÃO  ================== */
.box_atencao {             
  border: 2px solid #06CB3F;
  border-radius: 12px;
  width: 60%;
  text-align: center;
  margin: 1em auto;
  padding: 1em;
}

.box_atencao.justificado {             
  text-align: justify;
}

/* ================== BOTÕES ================== */
.tabela-botoes {
  width: max-content;       /* Ajusta a largura automaticamente ao conteúdo */
  margin: 20px auto;        /* Centraliza horizontalmente */
  border-collapse: separate;
  border-spacing: 40px 0;   /* diminui o espaçamento horizontal se necessário */
  text-align: center;
}

.tabela-botoes td {
  vertical-align: top;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}

.tabela-botoes td:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

.material-symbols-rounded.icone {
  font-size: 50px;
  display: block;
  margin: 0 auto;
  line-height: 1;
}

.icone.verde {
  color: #32CD32;
}

.texto-botao {
  display: block;
  margin-top: 5px;
  font-weight: bold;
  color: black;
  font-size: 14px;
  text-align: center;
}

.tabela-botoes button {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background-color: #4CAF50;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s;
}

.tabela-botoes button:hover {
  background-color: #45a049;
}


/* ================== FILTROS ================== */
.filtro-container {
  text-align: center;
  margin-top: 5px;
}

.filtro-container input, 
.filtro-container select {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  margin-left: 8px;
}

.filtro-container select {
  background-color: #fff;
  cursor: pointer;
}


/* ================== TABELA PADRÃO ================== */
.tabela-padrao {
  width: 70%;
  border-collapse: collapse;
  margin: 20px auto;
  font-size: 12px;
  position: relative;
  background-color: transparent;
  z-index: 1;
}

/* Fundo com grafismos */
.tabela-padrao::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/grafismos.png") no-repeat center center;
  background-size: contain;
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
}

.tabela-padrao th, 
.tabela-padrao td {
  border: 1px solid #035144;
  padding: 6px;
  text-align: center;
  font-size: 12px;
  white-space: nowrap;
  background-color: transparent; /* mantém o fundo sempre visível */
  position: relative;
  z-index: 1;
}

/* Cabeçalho - primeira linha */
.tabela-padrao thead tr th {
  background-color: #e0e0e0;
  color: #163134;
  font-weight: bold;
}

/* Primeira célula (linha 1, coluna 1) = verde */
.tabela-padrao thead tr th:first-child {
  background-color: #32CD32;
  color: #fff;
  font-weight: bold;
}

/* Listrado alternado */
.tabela-padrao tbody tr:nth-child(odd) { background-color: rgba(237,248,235,0.6); }
.tabela-padrao tbody tr:nth-child(even) { background-color: rgba(255,255,255,0.6); }

/* Hover */
.tabela-padrao tbody tr:hover td {
  background-color: #b6f199;
  color: #000;
}

/* ================== TABELA SSD ================== */
.tabela-ssd {
  width: 60%;
  max-width: 800px;
  border-collapse: collapse;
  margin: 20px auto;
  font-size: 12px;
  text-align: center;
  transition: all 0.3s ease;
}

.tabela-ssd th, 
.tabela-ssd td {
  border: 1px solid #035144;
  padding: 10px;
  text-align: center;
}

/* Cabeçalho - primeira linha verde */
.tabela-ssd thead tr th {
  background-color: #32CD32 !important;
  color: #fff !important;
  font-weight: bold;
}

.tabela-ssd tbody tr:nth-child(odd) { background-color: #edf8eb; }
.tabela-ssd tbody tr:nth-child(even) { background-color: #ffffff; }

/* ================== TABELA ARMAZENAMENTO ================== */
.tabela-armazenamento-wrapper {
  width: 100%;
  overflow-x: auto;
  margin: 0 auto 20px auto;
}

.tabela-armazenamento {
  width: 80%;
  min-width: 800px;
  border-collapse: collapse;
  margin: 0 auto;
  font-size: 12px;
}

.tabela-armazenamento th,
.tabela-armazenamento td {
  border: 1px solid #035144;
  padding: 6px;
  text-align: center;
  font-size: 12px;
  white-space: nowrap;
}

/* Segunda célula do cabeçalho em roxo - promovendo os HD purple */
.tabela-armazenamento thead tr th:nth-child(2) {
  background-color: purple !important;
  color: #fff !important;
  font-weight: bold;
}

/* Cabeçalho da tabela-armazenamento - primeira linha verde */
.tabela-armazenamento thead tr th {
  background-color: #32CD32 !important; /* força o verde */
  color: #fff !important; /* texto branco */
  font-weight: bold;
}


/* Listrado alternado */
.tabela-armazenamento tbody tr:nth-child(odd) { background-color: #edf8eb; }
.tabela-armazenamento tbody tr:nth-child(even) { background-color: #ffffff; }

/* ================== Hover na linha inteira ================== */
/* Destaca todas as células da linha, incluindo rowspan e segunda coluna */
.tabela-armazenamento tbody tr:hover > td {
  background-color: #b6f199 !important;
  color: #000 !important;
}


/* Highlight para busca */
td.highlight {
  background-color: #0cf12b !important; /*  */
  color: #000 !important;
}

/* Listrado tabela-armazenamento */
.tabela-armazenamento tbody tr:nth-child(odd) td:not([rowspan]) { background-color: #edf8eb; }
.tabela-armazenamento tbody tr:nth-child(even) td:not([rowspan]) { background-color: #ffffff; }

/* Primeira coluna sempre cinza */
.tabela-armazenamento td[rowspan] { background-color: #EFEFED; }





/* ================== TABELAS EXTRA ================== */
/* se trata das tabelas que ficam junto dos produtos informando para mais informações
 consultar o manual, porem a ultima tabela fica sempre visive enquanto as 
 outras ficam ocultadas durante o filtro */

.tabela-extra, .tabela-extra-visivel {
  width: 50%;
  margin: 20px auto;
  background: #85FFC5;
  font-size: 14px;
  text-align: center;
  border: 1px solid #035144;
  border-radius: 4px;
}

.tabela-extra td td, .tabela-extra-visivel td td {
  padding: 8px 12px;
  font-weight: bold;
}




/* ================== RESPONSIVO ================== */
@media (max-width: 768px) {
  /* Mantém padding e fontes reduzidas */
  body { padding: 10px; }
  h1 { font-size: 14px; }

  .topo-banner { width: 100%; margin: 0 auto 20px auto; }
  .imagem-banner { max-width: 100%; height: auto; }

  /* Tabelas gerais, exceto tabela-botoes */
  .tabela-padrao,
  .tabela-extra,
  .tabela-extra-visivel,
  .tabela-armazenamento,
  .box_atencao {
    width: 100% !important;
    margin: 5px auto !important;
    font-size: 10px !important;
    box-sizing: border-box;
  }
  .tabela-ssd {
    width: 95% !important;      /* ocupa quase toda a tela */
    font-size: 11px !important; /* texto um pouco menor */
    margin: 10px auto !important;
  }

  .tabela-ssd th, 
  .tabela-ssd td {
    padding: 6px !important;     /* reduz padding */
    font-size: 10px !important;  /* texto menor */
    white-space: normal !important; /* permite quebra de linha */
    word-wrap: break-word;
  }

  /* Torna a tabela rolável se ultrapassar a tela */
  .tabela-ssd-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tabela botoes: largura automática para centralizar */
  .tabela-botoes {
    width: max-content !important;
    margin: 10px auto !important;
    border-spacing: 10px 5px !important; /* reduz espaçamento horizontal e vertical */
  }

  .tabela-botoes td .material-symbols-rounded {
    font-size: 28px !important;
    display: block;
    margin: 0 auto;
  }

  .tabela-botoes td span {
    font-size: 8px !important;
    margin-top: 2px;
    display: block;
    text-align: center;
  }

  .box_atencao { max-width: 100% !important; padding: 6px !important; }

  /* Ajustes gerais de tabelas com rolagem e células */
  .tabela-armazenamento-wrapper { overflow-x: auto; }
  .tabela-armazenamento { min-width: 100% !important; font-size: 10px !important; }

  th, td {
    padding: 4px !important;
    font-size: 10px !important;
    text-align: center !important;
    white-space: normal !important;
    word-wrap: break-word;
  }

  .tabela-padrao td:nth-child(2),
  .tabela-padrao th:nth-child(2),
  .tabela-padrao td:nth-child(6),
  .tabela-padrao th:nth-child(6) { width: auto !important; }
}

















/* ================== IMPRESSÃO ================== */
@media print {
  @page { size: A4 portrait; margin: 5mm; }

  body, table, th, td { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; font-size: 10pt !important; }
  h1 { font-size: 18pt !important; color: #000 !important; text-align: center; margin-bottom: 10px; }

  .tabela-container,
  .tabela-padrao,
  .tabela-ssd,
  .tabela-extra,
  .tabela-extra_1,
  .tabela-armazenamento { width: 95% !important; table-layout: fixed !important; word-wrap: break-word; box-shadow: none !important; border-radius: 0 !important; margin: 0 auto !important; background: #fff !important; page-break-inside: avoid !important; }

  .box_atencao, .box_atencao.justificado { width: 80% !important; margin: 0 auto !important; padding: 6px !important; background: #fff !important; border: 2px solid #06CB3F !important; box-shadow: none !important; border-radius: 0 !important; color: #000 !important; font-size: 9pt !important; }

  th, td { border: 1px solid #035144 !important; padding: 4px !important; text-align: center !important; }
  tr:hover td { background-color: unset !important; }
}