/* 
 * DearFlip Dark Theme Override
 * Forzar tema oscuro y corregir visibilidad de botones
 * Última actualización: Diciembre 2025
 */

/* === FONDO GRIS OSCURO === */
.df-lightbox-wrapper,
.df-container,
.df-book-wrapper {
  background-color: #2a2a2a !important;
  background: #2a2a2a !important;
}

/* === BARRA DE CONTROLES INFERIOR (CORREGIDA) === */
.df-ui-wrapper.df-ui-controls {
  background-color: rgba(30, 30, 30, 0.95) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* === BOTONES EN LA BARRA INFERIOR === */
.df-ui-controls .df-ui-btn {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 6px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  margin: 0 3px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  color: #ffffff !important;
  font-size: 16px !important;
  position: relative !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

.df-ui-controls .df-ui-btn:hover {
  background-color: rgba(0, 56, 118, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: scale(1.05) !important;
}

/* === ICONOS THEMIFY EN LOS BOTONES === */
.df-ui-controls .df-ui-btn::before {
  font-family: "themify" !important;
  speak: none !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  color: #ffffff !important;
  font-size: 16px !important;
  display: inline-block !important;
  position: relative !important;
  filter: none !important;
}

/* === BOTÓN DE PÁGINA EN LA BARRA === */
.df-ui-controls .df-ui-page {
  width: auto !important;
  min-width: 70px !important;
  padding: 0 10px !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
}

.df-ui-controls .df-ui-page label {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  position: static !important;
  padding: 0 !important;
  line-height: 38px !important;
}

/* === BOTONES DE NAVEGACIÓN ALTERNOS EN BARRA (PREV/NEXT) === */
.df-ui-controls .df-ui-alt.df-ui-prev,
.df-ui-controls .df-ui-alt.df-ui-next {
  background-color: rgba(0, 56, 118, 0.9) !important;
  border: 2px solid #ffffff !important;
  width: 38px !important;
  height: 38px !important;
}

/* === BOTONES DE NAVEGACIÓN LATERALES (FLECHAS GRANDES A LOS LADOS) === */
.df-container > .df-ui-btn.df-ui-next,
.df-container > .df-ui-btn.df-ui-prev {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-color: rgba(0, 56, 118, 0.9) !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  width: 50px !important;
  height: 50px !important;
  filter: none !important;
  opacity: 1 !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

/* Flecha SIGUIENTE - A LA DERECHA */
.df-container > .df-ui-btn.df-ui-next {
  right: 10px !important;
  left: auto !important;
}

/* Flecha ANTERIOR - A LA IZQUIERDA */
.df-container > .df-ui-btn.df-ui-prev {
  left: 10px !important;
  right: auto !important;
}

.df-container > .df-ui-btn.df-ui-next:hover,
.df-container > .df-ui-btn.df-ui-prev:hover {
  background-color: rgba(0, 56, 118, 1) !important;
  transform: translateY(-50%) scale(1.1) !important;
  box-shadow: 0 4px 15px rgba(0, 56, 118, 0.5) !important;
}

/* Ocultar contenido original del botón y crear flechas CSS */
.df-container > .df-ui-btn.df-ui-next::before,
.df-container > .df-ui-btn.df-ui-prev::before {
  display: none !important;
}

.df-container > .df-ui-btn.df-ui-next::after,
.df-container > .df-ui-btn.df-ui-prev::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  width: 12px !important;
  height: 12px !important;
  border: solid #ffffff !important;
  border-width: 0 3px 3px 0 !important;
}

/* Flecha derecha para NEXT */
.df-container > .df-ui-btn.df-ui-next::after {
  transform: rotate(-45deg) !important;
  margin-left: -4px !important;
}

/* Flecha izquierda para PREV */
.df-container > .df-ui-btn.df-ui-prev::after {
  transform: rotate(135deg) !important;
  margin-left: 4px !important;
}

/* === BOTÓN CERRAR (X) EN LIGHTBOX === */
.df-lightbox-controls {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 1000 !important;
}

.df-lightbox-close {
  background-color: rgba(220, 38, 38, 0.9) !important;
  color: transparent !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  filter: none !important;
  position: relative !important;
  overflow: hidden !important;
  border: 2px solid #ffffff !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.df-lightbox-close:hover {
  background-color: rgba(220, 38, 38, 1) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.5) !important;
}

/* Ocultar icono original */
.df-lightbox-close::before {
  display: none !important;
}

/* Crear X con pseudo-elemento */
.df-lightbox-close::after {
  content: "✕" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 24px !important;
  color: #ffffff !important;
  font-weight: bold !important;
}

/* === CONTADOR DE PÁGINAS === */
.df-ui-page-number,
.df-ui-page label {
  color: #ffffff !important;
  background-color: transparent !important;
  filter: none !important;
  font-weight: 600 !important;
}

/* === PANEL LATERAL (SIDEMENU) === */
.df-sidemenu {
  background-color: rgba(42, 42, 42, 0.98) !important;
  color: #ffffff !important;
}

.df-ui-sidemenu-close {
  filter: brightness(0) invert(1) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 6px 6px 0 !important;
}

.df-ui-sidemenu-close:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* === THUMBNAILS === */
.df-thumb-container {
  background-color: #1a1a1a !important;
}

.df-thumb-wrapper {
  border: 2px solid transparent !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.df-thumb-wrapper:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.df-thumb-wrapper.df-active,
.df-vrow.df-selected {
  border-color: rgba(0, 56, 118, 1) !important;
  background-color: rgba(0, 56, 118, 0.2) !important;
}

/* === OUTLINE/TOC === */
.df-outline-wrapper {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
}

.df-outline-item {
  color: #ffffff !important;
}

.df-outline-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.df-outline-item a {
  color: #ffffff !important;
}

/* === SEARCH === */
.df-search-wrapper,
.search-container {
  background-color: #2a2a2a !important;
}

.df-search-input {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* === MORE MENU (SOLO ICONOS) === */
/* Ocultar por defecto */
.more-container {
  display: none !important;
}

/* Mostrar solo cuando el botón MORE está activo */
.df-ui-more.df-active .more-container {
  background-color: rgba(30, 30, 30, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  width: auto !important;
  min-width: 120px !important;
  max-width: 160px !important;
  gap: 6px !important;
  justify-content: center !important;
}

/* Botones del menú MORE - solo iconos */
.more-container .df-ui-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: #ffffff !important;
  transition: all 0.2s ease !important;
}

.more-container .df-ui-btn:hover {
  background-color: rgba(0, 56, 118, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: scale(1.05) !important;
}

/* Ocultar los textos (spans) */
.more-container .df-ui-btn span {
  display: none !important;
}

/* Asegurar que los iconos se muestren correctamente */
.more-container .df-ui-btn::before {
  font-family: "themify" !important;
  color: #ffffff !important;
  font-size: 16px !important;
  display: inline-block !important;
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* === TOOLTIP === */
.df-ui-tooltip {
  background-color: rgba(0, 0, 0, 0.9) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  padding: 5px 10px !important;
}

/* === SHARE BOX === */
.df-share-wrapper {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

.df-share-box {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.df-share-title {
  color: #ffffff !important;
}

.df-share-url {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* === LOADING SPINNER === */
.df-container.df-loading::before {
  background-color: rgba(42, 42, 42, 0.9) !important;
}

/* === ASEGURAR ICONOS VISIBLES EN BARRA === */
.df-ui-controls .df-ui-btn[class*="df-ui-"]::before {
  filter: brightness(0) invert(1) !important;
}

/* === RESPONSIVE PARA PANTALLAS PEQUEÑAS === */
@media screen and (max-width: 768px) {
  .df-container > .df-ui-btn.df-ui-next,
  .df-container > .df-ui-btn.df-ui-prev {
    width: 40px !important;
    height: 40px !important;
  }

  .df-container > .df-ui-btn.df-ui-next {
    right: 5px !important;
  }

  .df-container > .df-ui-btn.df-ui-prev {
    left: 5px !important;
  }

  .df-ui-controls .df-ui-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 2px !important;
  }

  .df-lightbox-close {
    width: 40px !important;
    height: 40px !important;
  }
}