/* Bloques de código: esquinas redondeadas y algo de aire.
   Se usa una variable de Bootstrap para que el fondo respete el tema claro y
   el oscuro en lugar de quedarse fijo en gris claro. */
pre {
  border-radius: 5px;
  padding: 10px;
}

pre:not(.sourceCode) {
  background-color: var(--bs-tertiary-bg, #f7f7f7);
}

/* Las tablas de los ejercicios "a mano" son para copiarlas en el cuaderno,
   así que sus celdas vacías necesitan ser visibles. */
table th:empty,
table td:empty {
  min-width: 5rem;
  height: 1.9rem;
}

/* Que las tablas y los bloques anchos hagan scroll dentro de su propio
   contenedor en lugar de forzar scroll horizontal a toda la página. */
.cell-output-display > table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Índice de la izquierda: compacto y ocultable.
   El botón flotante lo crea barra-lateral.html y su preferencia se guarda en
   el navegador.
   -------------------------------------------------------------------------- */

/* Tipografía más chica y renglones apretados para que ocupe poco */
#quarto-sidebar .sidebar-item-text {
  font-size: 0.82rem;
  line-height: 1.25;
}

#quarto-sidebar .sidebar-item {
  margin-bottom: 0.1rem;
}

#quarto-sidebar .sidebar-item-container {
  padding-top: 0.05rem;
  padding-bottom: 0.05rem;
}

/* El capítulo en el que estás, resaltado */
#quarto-sidebar .sidebar-item-text.active,
#quarto-sidebar .sidebar-link.active {
  font-weight: 600;
}

/* Botón para ocultar y mostrar */
#alternar-indice {
  position: fixed;
  left: 0.5rem;
  bottom: 0.75rem;
  z-index: 1050;
  width: 2rem;
  height: 2rem;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--bs-border-color, #ccc);
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #333);
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.15s ease-in-out;
}

#alternar-indice:hover,
#alternar-indice:focus-visible {
  opacity: 1;
}

/* Estado oculto: se esconde el índice y el contenido se recorre */
body.indice-oculto #quarto-sidebar {
  display: none !important;
}

body.indice-oculto #quarto-content,
body.indice-oculto .page-columns {
  margin-left: auto;
  margin-right: auto;
}

/* En pantallas chicas Quarto ya trae su propio menú, así que sobra el botón */
@media (max-width: 991.98px) {
  #alternar-indice {
    display: none;
  }
}