html, body {
	margin: 0;
	padding: 0;
	background-attachment: fixed;
	background-position: 50% 50%;
	background-size: cover;
}
a {
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
.bg-red {
	background-image: url(../img/bg-red.jpg);
}
.bg-orange {
	background-image: url(../img/bg-orange.jpg);
}
.bg-yellow {
	background-image: url(../img/bg-yellow.jpg);
}
.bg-green {
	background-image: url(../img/bg-green.jpg);
}
.bg-cyan {
	background-image: url(../img/bg-cyan.jpg);
}
.bg-blue {
	background-image: url(../img/bg-blue.jpg);
}
.bg-purple {
	background-image: url(../img/bg-purple.jpg);
}
.bg-pink {
	background-image: url(../img/bg-pink.jpg);
}
.bg-black {
	background-image: url(../img/bg-black.jpg);
}

.bg-grey {
	background-image: url(../img/bg-grey.jpg);
}

.footer-fixed {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1030;
}

.body {
  padding-bottom: 50px; /* altura del footer */
}

/* ===== ComicRack style ===== */
.comic-card {
  border: none;
  background: transparent;
  position: relative;
}

.comic-cover {
  aspect-ratio: 2 / 3;
  background: #eee;
  border-radius: .5rem;
  overflow: hidden;
  position: relative;
}

.comic-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comic-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.1));
  opacity: 0;
  transition: opacity .2s ease;
  display: flex;
  align-items: flex-end;
  padding: .5rem;
}

.comic-card:hover .comic-overlay {
  opacity: 1;
}

.comic-actions {
  display: flex;
  gap: .25rem;
  width: 100%;
}

.comic-title {
  font-size: .9rem;
  font-weight: 600;
  margin-top: .35rem;
  line-height: 1.1;
}

.comic-meta {
  font-size: .75rem;
  color: #6c757d;
}

.page-img {max-width:100%; height:auto; display:block; margin: 0 auto;}
.thumb-img {width:100%; height: auto; display:block; border-radius:.5rem;}
.thumb-item {cursor:pointer;}
.is-fullscreen body { background:#000; }
.is-fullscreen .container { max-width:100vw; padding-left:0; padding-right:0; }
.is-fullscreen .card { border-radius:0; }
.is-fullscreen #viewer { background:#000; }
.is-fullscreen .page-img { max-height:100vh; }


/* ===== Drawer de miniaturas ===== */
#thumbsDrawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: -45vh;
  height: 45vh;
  background: #111;
  padding: .5rem;
  overflow-y: auto;
  z-index: 1050;
  transition: bottom .25s ease;
}

#thumbsDrawer.show {
  bottom: 0;
}

#thumbsDrawer .thumb-img {
  border: 2px solid transparent;
}

#thumbsDrawer .thumb-img.active {
  border-color: #0d6efd;
}

/* Mantener drawer visible en fullscreen */
.is-fullscreen #thumbsDrawer {
  background: #000;
}