/* Botón "Ver como presentación" (overrides/main.html) */
.md-typeset .boton-diapositivas {
  float: right;
  margin: 0.2em 0 1em 1em;
  padding: 0.4em 1em;
  font-size: 0.75rem;
}

.md-typeset .boton-diapositivas svg {
  height: 1.2em;
  width: 1.2em;
  fill: currentColor;
  vertical-align: -0.25em;
}

/* En las páginas que también son diapositivas, los separadores `---`
   solo marcan el cambio de diapositiva: en la web no se muestran. */
.md-content:has(.boton-diapositivas) .md-typeset hr {
  display: none;
}

/* Contenido que solo se muestra en las diapositivas
   (<div class="solo-diapositivas" markdown>; su contrario, `solo-web`,
   lo oculta slides/tema.css). */
.md-typeset .solo-diapositivas {
  display: none;
}

/* Tablas con la misma letra que el texto (Material las hace más pequeñas)
   y con líneas verticales entre columnas, como en las diapositivas. Cada
   celda lleva su línea a la izquierda (vale también con `rowspan`, donde la
   primera celda de una fila no siempre está en la primera columna), y la
   tabla pierde su borde izquierdo para que no salga doble. */
.md-typeset table:not([class]) {
  font-size: 0.8rem;
  border-left: none;
}

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  border-left: 0.05rem solid var(--md-typeset-table-color);
}

/* Celdas combinadas (`rowspan`) centradas en vertical, como en Marp
   (Material alinea arriba todas las celdas). */
.md-typeset table:not([class]) td[rowspan] {
  vertical-align: middle;
}

/* Recuadro `!!! mision "Título"` para la parte narrativa de los ejercicios,
   con el color principal del módulo y un icono de cohete. */
:root {
  --md-admonition-icon--mision: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.13 22.19 11.5 18.36c1.57-.58 3.04-1.36 4.4-2.27l-2.77 6.1M5.64 12.5l-3.83-1.63 6.1-2.77C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39S16.66.27 11 5.93c-2.19 2.19-3.5 4.6-4.35 6.71-.28.75-.09 1.57.46 2.13l2.13 2.12c.55.56 1.37.74 2.12.46 2.14-.82 4.52-2.16 6.71-4.35 5.66-5.66 3.54-10.61 3.54-10.61m-7.07 7.07c-.78-.78-.78-2.05 0-2.83s2.05-.78 2.83 0c.77.78.78 2.05 0 2.83-.78.78-2.05.78-2.83 0M8.88 16.53l-1.41-1.41 1.41 1.41M6.24 22l3.64-3.64c-.34-.09-.67-.24-.97-.45L4.83 22h1.41M2 22h1.41l4.77-4.76-1.42-1.41L2 20.59V22m0-2.83 4.09-4.08c-.21-.3-.36-.62-.45-.97L2 17.76v1.41Z"/></svg>');
}

.md-typeset .admonition.mision,
.md-typeset details.mision {
  border-color: var(--md-primary-fg-color);
}

.md-typeset .mision > .admonition-title,
.md-typeset .mision > summary {
  background-color: var(--md-primary-fg-color--transparent);
}

.md-typeset .mision > .admonition-title::before,
.md-typeset .mision > summary::before {
  background-color: var(--md-primary-fg-color);
  -webkit-mask-image: var(--md-admonition-icon--mision);
  mask-image: var(--md-admonition-icon--mision);
}

/* Ficha bajo el título de cada ejercicio: conceptos que practica (en código,
   como etiquetas) y dificultad. Se marca con `{ .ficha }` (attr_list). */
.md-typeset .ficha {
  margin-top: -0.6em;
  color: var(--md-default-fg-color--light);
  font-size: 0.75rem;
}

.md-typeset .ficha code {
  margin-right: 0.3em;
  padding: 0.15em 0.8em;
  border-radius: 1em;
  background-color: color-mix(in srgb, var(--md-primary-fg-color) 14%, transparent);
  color: var(--md-primary-fg-color);
  font-family: var(--md-text-font-family);
}

/* Ilustración a todo el ancho bajo el título de una página: `![...](...){ .cabecera }` */
.md-typeset img.cabecera {
  display: block;
  width: 100%;
  border-radius: 0.4rem;
}

/* Recuadros (admonitions y desplegables) con letra casi como la del texto
   (Material los hace bastante más pequeños). */
.md-typeset .admonition,
.md-typeset details {
  font-size: 0.75rem;
}

/* Logos del instituto y de la Generalitat (overrides/partials/logo.html), en
   lugar del logo de Material: sobre un recuadro blanco, porque son oscuros y
   la cabecera es del color del módulo. */
.md-logo .logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  padding: 0.2rem 0.4rem;
  border-radius: 0.2rem;
  background: #fff;
}

.md-header__button.md-logo .logos img {
  height: 1.6rem;
  width: auto;
}

.md-nav__title .md-nav__button.md-logo .logos img {
  height: 1.4rem;
  width: auto;
}

/* En el menú lateral (pantallas medianas y móvil) Material da al enlace del
   logo el ancho de un icono: que abarque todo el recuadro. */
@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title .md-nav__button.md-logo {
    width: auto;
  }
}