html {
  height: 100%; /* Asegura que el HTML ocupe el 100% */
}

body {
  display: flex; /* Habilita el modo Flexbox */
  flex-direction: column; /* Apila los elementos verticalmente */
  min-height: 100vh; /* Ocupa el 100% de la altura de la ventana (Viewport Height) */
  margin: 0; /* Elimina el margen por defecto del body */
}

/* El elemento que envuelve todo el contenido variable (tu #page) */
#page {
  flex-grow: 1; /* Esto hace que #page ocupe TODO el espacio restante, empujando el footer abajo */
  display: flex; /* Necesario para que su hijo (page-wrapper) se estire */
  flex-direction: column;
}

/* Asegura que la sección de contenido de Tabler (page-wrapper) se estire dentro de #page */
.page-wrapper {
  flex-grow: 1;
}

.sombreado-negro-img {
  filter: drop-shadow(1px 1px 5px #000);
}

.sombreado-blanco-img {
  filter: drop-shadow(1px 1px 5px #fff);
}