pre {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !important;
  font-size: 80% !important;
}

/* Clase personalizada para el botón.
  Esto asegura que, independientemente del contenido o tamaño de la imagen, 
  el contenedor del botón tenga un tamaño fijo dentro del col-sm-2.
*/
.btn-producto {
  /* Ocupa todo el ancho de la columna col-sm-2 */
  width: 100%;
  /* Fija un ancho máximo para evitar que se estire demasiado en pantallas grandes */
  max-width: 250px;
  /* Centra el botón dentro del div.col-sm-2 */
  margin: 0 auto !important;
  /* Hace que el botón se comporte como un bloque para que 'margin: 0 auto' funcione */
  display: block;
  /* Asegura un padding mínimo */
  padding: 5px !important;
  padding-top: 1px;
}

.btn-prod2 {
  --bs-btn-color: #000;
  --bs-btn-bg: #dcdcde;
  --bs-btn-border-color: #dcdcde;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f8f9fa;
  --bs-btn-hover-border-color: #f8f9fa;
}

.btn-prod3 {
  --bs-btn-color: #000;
  --bs-btn-bg: #dcdcde;
  --bs-btn-border-color: #262c96 !important;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f8f9fa;
  --bs-btn-hover-border-color: #262c96 !important;
  --bs-btn-border-width: 2px !important;
}

/* Contenedor de la imagen para garantizar la altura uniforme.
  Esto asegura que el texto del producto (SILENCIADOR FSA, etc.) 
  esté siempre a la misma altura en todos los botones.
*/
.image-container {
  /* Fija la altura máxima que ocupará la imagen + padding */
  height: 120px;
  width: 100%;
}

/* Asegura que la imagen se adapte a la altura de su contenedor */
.image-container img {
  /* Altura máxima de la imagen dentro del contenedor (ajusta si es necesario) */
  max-height: 100px;
  /* La imagen es fluid (del HTML), esto es solo para reforzar */
  width: auto;
}

.bg-primary2 td {
  background-color: #262c96 !important;
  color: #ffffff !important;
  font-weight: bold;
}

.texto-boton {
  font-weight: bold;
  font-size: 85%;
}

.seccion-inicial {
  padding: 10px;
  margin-top: -20px;
  padding-bottom: 30px;
}

.logo-2 {
  max-width: 250px !important;
}

.seccion-superior {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: -20px;
  /* Ocupa el ancho completo del viewport */
  width: 99.7vw;
  /* Lo desplaza a la mitad del contenedor */
  margin-left: 50%;
  /* Lo centra, haciendo que se extienda más allá del contenedor */
  transform: translateX(-50%);
  border-bottom: 3px solid #262c96;
  margin-bottom: 6px;
}
.seccion-inferior {
  padding-top: 10px !important;
  padding-bottom: 25px !important;
}

.logo-1 {
  max-width: 190px !important;
}

.img-medida {
  max-height: 350px;
}

.modelo {
    /* Mantiene el contenido centrado horizontalmente */
    display: flex;
    flex-direction: column; /* Apila la tabla y el canvas verticalmente */
    align-items: center;    /* Centra los elementos hijos (tabla y canvas) */
    /* Asegúrate de que el div ocupe el ancho correcto si es necesario */
}
.imagen-producto {
  max-width: 120px !important;
}

.imagen-producto:hover {
  transform: scale(2);
  position: relative;
  z-index: 1 !important;
}

.imagen-productog {
  max-width: 160px !important;
}

.btn-productog {
  /* Ocupa todo el ancho de la columna col-sm-2 */
  width: 100%;
  /* Fija un ancho máximo para evitar que se estire demasiado en pantallas grandes */
  max-width: 250px;
  /* Centra el botón dentro del div.col-sm-2 */
  margin: 0 auto;
  /* Hace que el botón se comporte como un bloque para que 'margin: 0 auto' funcione */
  display: block;
  /* Asegura un padding mínimo */
  padding: 5px;
  padding-top: 1px;
}

.btn-prodg2 {
  --bs-btn-color: #000;
  --bs-btn-bg: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #dcdcde;
  --bs-btn-hover-border-color: #dcdcde;
}

.btn-prodg3 {
  --bs-btn-color: #000;
  --bs-btn-bg: #f8f9fa;
  --bs-btn-border-color: #262c96 !important;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #dcdcde;
  --bs-btn-hover-border-color: #262c96 !important;
  --bs-btn-border-width: 3px !important;
}

.caja-producto {
  width: 20% !important;
  margin: 0 !important;
  padding: 3px !important;
}

.form-label {
  margin-bottom: 0.1rem !important;
  font-size: 80% !important;
}

.texto-exp {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !important;
  font-size: 80% !important;
  line-height: 0.9;
}

.texto-exp2 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !important;
  font-size: 80% !important;
  line-height: 0.9;
  font-weight: bold;
}

.table-datos {
  font-size: 80% !important;
  margin-bottom: 8px !important;
}

.table-datos td {
  padding: 3px !important;
}

.navbar {
  padding: 0rem 1rem !important;
}

.botones {
  padding: 15px 0px;
}

.derecha {
  padding-top: 10px;
}

.datos-exp {
  margin: auto !important;
  padding-left: 9rem !important;
}

.grafica {
  min-height: 300px !important;
}

.form-horiz {
  margin-bottom: 12px !important;
}

.expCa {
  font-size: 80% !important;
}