.diente {
  cursor: pointer;
  transition: fill 0.2s ease;
}
.diente.seleccionado {
  fill: #4caf50 !important;
  stroke: #222 !important;
}
.mapa-dental-detalle svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
  }

  .mapa-dental-detalle .diente {
    pointer-events: none;
  }

  .mapa-dental-detalle .diente.seleccionado {
    fill: #4caf50 !important;
    stroke: black;
    stroke-width: 2px;
  }
  .mapa-dental {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
.svg-responsive {
   width: 100%;
   height: auto;
   aspect-ratio: 3.53;
   max-width: 100%;
   display: block;
}

.svg-responsive svg {
  width: 100%;
  height: auto;
  display: block;
}


@media (max-width: 768px) {
  .svg-responsive {
    max-width: 100%; /* En móviles, que se adapte al ancho del contenedor */
  }

  .svg-responsive svg {
    max-height: 300px; /* Limita la altura si es muy alto */
  }
}