/* === GASES (tarjetas) === */
.bloque-gases { margin: 30px auto; max-width: 980px; }
.titulo-bloque {
  background: #4583c5; color: #fff; padding: 6px 12px;
  border-radius: 6px 6px 0 0; font-weight: bold;
}
.gases-grid {
  display: flex; flex-wrap: wrap; gap: 16px;
  background: #fff; border: 1px solid #4274b3;
  border-top: none; border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 6px rgba(26,115,232,0.06);
  padding: 12px;
}
.gas-card {
  flex: 1 1 180px; max-width: 180px;
  background: #fff; border: 1px solid #4274b3;
  border-radius: 6px; text-align: center;
  padding: 8px; box-shadow: 0 1px 4px rgba(26,115,232,0.04);
  transition: box-shadow .2s;
  font-family: Arial, sans-serif;
}
.gas-card:hover { box-shadow: 0 4px 12px rgba(26,115,232,0.12); }
.gas-card img {
  width: 88px; height: 120px; object-fit: contain;
  margin: 6px 0; border-radius: 4px;
  border: 1px solid #e0e5ec; background: #f5f7f9;
}
.gas-codigo {
  display: block; color: #2466c2; font-weight: bold;
  text-decoration: underline; margin-bottom: 4px;
}
.gas-nombre { font-size: 0.95em; color: #333; margin: 4px 0; min-height: 40px; }
.gas-precio { color: #214a88; font-weight: bold; margin-bottom: 2px; }
.gas-unidad { color: #666; font-size: 0.9em; }

/* === BLOQUE DE PANELES === */
.panel-bloque {
  display: flex; align-items: flex-start; gap: 24px;
  margin: 40px auto; max-width: 980px;
  background: #fff; padding: 16px; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(26,115,232,0.06);
  overflow-x: auto;
}
.panel-img-col {
  flex: 0 0 140px; text-align: center;
}
.panel-img-col img {
  width: 120px; border-radius: 6px;
  border: 1px solid #b7cff7; background: #f9fafd;
}
.panel-img-col span {
  display: block; margin-top: 6px; font-weight: bold; color: #333;
}
.paneles-tbl-area {
  display: flex; flex: 1; gap: 0;
}
.panel-espesor-col, .panel-col {
  border: 1px solid #b7cff7; border-radius: 6px;
  margin-left: -1px; background: #fff; min-width: 70px;
}
.panel-espesor-col th, .panel-espesor-col td,
.panel-col th, .panel-col td {
  padding: 6px 8px; text-align: center; font-size: 0.94em;
}
.panel-espesor-col th { background: #f4f7f8; border-bottom: 1px solid #b7cff7; }
.panel-espesor-col td { font-weight: bold; }
.panel-col th { background: #f4f7f8; border-bottom: 1px solid #b7cff7; }
.panel-col td { border-bottom: 1px solid #f2f2f2; }
.panel-col tr:nth-child(even) td { background: #f6f8fb; }
.panel-col.metecno th, .panel-col.metecno td { color: #852d8f; }
.panel-col.ternium th, .panel-col.ternium td { color: #bc6309; }
.panel-col.isolpack th, .panel-col.isolpack td { color: #258a22; }
.panel-codigo {
  color: #1a73e8; text-decoration: underline; font-weight: bold;
  font-size: 0.95em; display: inline-block;
}
@media (max-width:800px) {
  .bloque-gases, .panel-bloque { flex-direction: column; align-items: stretch; }
  .panel-espesor-col, .panel-col { min-width: 60px; }
  .gas-card { flex: 1 1 45%; max-width: 45%; }
}