/* docs/stylesheets/extra.css */

/* 1. Mejora la nitidez de las imágenes (Capturas de pantalla) */

img {
  /* Eliminamos 'pixelated' que causa el parpadeo */
  image-rendering: -webkit-optimize-contrast; /* Mejor contraste en Chrome/Edge */
  image-rendering: crisp-edges;               /* Nitidez limpia en Firefox */
  
  /* Añadimos esto para estabilizar la imagen al escalar */
  transform: translateZ(0); 
  backface-visibility: hidden;
  
  border-radius: 4px;
  display: block;
  margin: 0 auto 1.5em auto;
}

#img {
  #image-rendering: -webkit-optimize-contrast; /* Chrome, Safari, Edge */
  #image-rendering: crisp-edges;               /* Firefox */
  #image-rendering: pixelated;                 /* Chrome/Edge moderno */
  #border-radius: 4px;
#}

/* 2. Estilo para los botones en el texto (como `+ Add subject`) */
code {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 2px 4px;
  color: #009688; /* Color teal a juego con tu tema */
  font-family: var(--md-code-font-family);
}

/* 3. Centrar imágenes con subtítulos */
figure {
  text-align: center;
  margin: 1.5em auto;
}

figcaption {
  font-style: italic;
  font-size: 0.85em;
  color: #666;
}

.mermaid {
  margin-top: 0.5em;
  margin-bottom: 0.0em !important;
  display: block;
}

/* Forzar el contenedor de la tabla al 100% */
.md-typeset__table {
    display: block;
    width: 100% !important;
    overflow: auto;
}

/* Forzar la tabla interna al 100% */
.md-typeset__table table {
    display: table !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Opcional: ajustar las columnas para que no se amontonen */
.md-typeset__table table th, 
.md-typeset__table table td {
    word-break: normal;
}