/**
 * Estilos personalizados para DearFlip Plugin
 * Aplica los estilos del tema a DearFlip para mantener consistencia visual
 */

/* ============================================
   Contenedor principal de DearFlip
   ============================================ */

._df_book {
  z-index: var(--z-index-plugin-dearflip) !important;
  font-family: var(--font-body) !important;
  cursor: grab !important;
}

/* Cursor grab en el área de páginas (para arrastrar) */
._df_book .df-page,
._df_book .df-page-content,
._df_book .df-viewer,
._df_book .df-viewer-wrapper,
._df_book .df-viewer-container {
  cursor: grab !important;
}

/* Cursor grabbing cuando se está arrastrando */
._df_book.df-dragging,
._df_book.df-dragging .df-page,
._df_book.df-dragging .df-page-content,
._df_book.df-dragging .df-viewer,
._df_book.df-dragging .df-viewer-wrapper,
._df_book.df-dragging .df-viewer-container {
  cursor: grabbing !important;
}

/* Cursor pointer solo en elementos interactivos */
._df_book .df-ui-btn,
._df_book .df-ui-nav,
._df_book .df-thumb,
._df_book button,
._df_book a {
  cursor: pointer !important;
}

/* Cursor text en inputs */
._df_book input[type="text"],
._df_book input[type="number"] {
  cursor: text !important;
}

/* Fondo del flipbook - cursor grab */
._df_book .df-bg {
  cursor: grab !important;
}

/* Fondo del flipbook */
.df-bg {
  background-color: var(--bg-color-primary) !important;
}

/* Contenedor del flipbook */
.df-container {
  background-color: var(--bg-color-surface) !important;
  border: 1px solid var(--border-card) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ============================================
   Contenedor del visor
   ============================================ */

.df-viewer-container {
  background-color: var(--bg-color-primary) !important;
}

.df-viewer {
  background-color: var(--bg-color-primary) !important;
}

.df-viewer-wrapper {
  background-color: var(--bg-color-primary) !important;
}

/* Páginas del flipbook */
.df-page {
  background-color: var(--bg-color-surface) !important;
  box-shadow: var(--shadow-md) !important;
}

.df-page-content {
  background-color: var(--bg-color-surface) !important;
}

/* ============================================
   Controles de UI (botones, navegación)
   ============================================ */

.df-ui {
  background-color: var(--bg-color-surface) !important;
  border-top: 1px solid var(--border-divider) !important;
  color: var(--text-color-body) !important;
}

/* Botones de UI */
.df-ui-btn {
  color: var(--text-color-body) !important;
  background-color: transparent !important;
  border: none !important;
  transition: color var(--cta-animation-duration) ease,
    background-color var(--cta-animation-duration) ease !important;
}

.df-ui-btn:hover {
  color: var(--text-color-link-hover) !important;
  background-color: var(--cta-color-outline-background-hover) !important;
}

.df-ui-btn:focus-visible {
  outline: 2px solid var(--state-focus-ring) !important;
  outline-offset: 2px !important;
}

/* Botón de página actual */
.df-ui-page {
  color: var(--text-color-body) !important;
}

.df-ui-page input {
  color: var(--text-color-body) !important;
  background-color: var(--bg-color-surface) !important;
  border: 1px solid var(--border-card) !important;
  font-family: var(--font-body) !important;
}

.df-ui-page label {
  color: var(--text-color-body) !important;
  font-family: var(--font-body) !important;
}

/* Navegación (anterior/siguiente) */
.df-ui-nav {
  background-color: var(--bg-color-surface) !important;
  color: var(--text-color-body) !important;
}

.df-ui-nav:hover {
  background-color: var(--cta-color-outline-background-hover) !important;
  color: var(--text-color-link-hover) !important;
}

/* ============================================
   Menú lateral (thumbnails)
   ============================================ */

.df-sidemenu-wrapper {
  background-color: var(--bg-color-surface) !important;
  border-left: 1px solid var(--border-divider) !important;
  box-shadow: var(--shadow-md) !important;
}

.df-sidemenu-title {
  color: var(--text-color-titles) !important;
  font-family: var(--font-titles) !important;
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-h4) !important;
  border-bottom: 1px solid var(--border-divider) !important;
}

/* Thumbnails */
.df-thumb {
  border: 1px solid var(--border-card) !important;
  background-color: var(--bg-color-surface) !important;
}

.df-thumb:hover {
  border-color: var(--border-hover) !important;
  background-color: var(--cta-color-outline-background-hover) !important;
}

.df-thumb.df-selected {
  border-color: var(--brand-color-primary) !important;
  background-color: var(--cta-color-outline-background-hover) !important;
}

.df-thumb-number {
  color: var(--text-color-body) !important;
  font-family: var(--font-body) !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Botón de cerrar menú lateral */
.df-ui-close {
  color: var(--text-color-body) !important;
}

.df-ui-close:hover {
  color: var(--text-color-link-hover) !important;
  background-color: var(--cta-color-outline-background-hover) !important;
}

/* ============================================
   Información de carga
   ============================================ */

.df-loading-info {
  color: var(--text-color-body) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-body-base) !important;
}

.df-loading-icon {
  border-color: var(--border-card) !important;
}

/* ============================================
   Compartir (Share) - Ocultado
   ============================================ */

.df-share-wrapper,
.df-ui-share,
.df-share-box {
  display: none !important;
}

/* ============================================
   Scrollbar personalizado
   ============================================ */

.df-reader-scrollbar {
  background-color: var(--border-card) !important;
}

.df-reader-scroll-page-number {
  color: var(--text-color-body) !important;
  font-family: var(--font-body) !important;
  background-color: var(--bg-color-surface) !important;
  border: 1px solid var(--border-card) !important;
}

/* ============================================
   Menú desplegable (More Menu)
   ============================================ */

.df-more-container {
  background-color: var(--bg-color-surface) !important;
  border: 1px solid var(--border-card) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: 4px !important;
  padding: 0.5rem 0 !important;
  min-width: 200px !important;
}

.df-more-container .df-ui-btn {
  color: var(--text-color-body) !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0.75rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  text-align: left !important;
  transition: color var(--cta-animation-duration) ease,
    background-color var(--cta-animation-duration) ease !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-body-base) !important;
  line-height: var(--lh-body-base) !important;
}

.df-more-container .df-ui-btn:hover {
  color: var(--text-color-link-hover) !important;
  background-color: var(--cta-color-outline-background-hover) !important;
}

.df-more-container .df-ui-btn:focus-visible {
  outline: 2px solid var(--state-focus-ring) !important;
  outline-offset: -2px !important;
}

.df-more-container .df-ui-btn span {
  color: inherit !important;
}

/* Iconos dentro del menú desplegable */
.df-more-container .df-ui-btn::before,
.df-more-container .df-icon-download::before,
.df-more-container .df-icon-first-page::before,
.df-more-container .df-icon-last-page::before {
  color: var(--text-color-body) !important;
  opacity: 0.8 !important;
}

.df-more-container .df-ui-btn:hover::before,
.df-more-container .df-ui-btn:hover .df-icon-download::before,
.df-more-container .df-ui-btn:hover .df-icon-first-page::before,
.df-more-container .df-ui-btn:hover .df-icon-last-page::before {
  color: var(--text-color-link-hover) !important;
  opacity: 1 !important;
}

/* Enlaces dentro del menú desplegable */
.df-more-container a.df-ui-btn {
  text-decoration: none !important;
  color: var(--text-color-body) !important;
}

.df-more-container a.df-ui-btn:hover {
  color: var(--text-color-link-hover) !important;
}

/* ============================================
   Dark Mode Support
   ============================================ */

.dark-mode .df-bg {
  background-color: var(--bg-color-primary) !important;
}

.dark-mode .df-container {
  background-color: var(--bg-color-surface) !important;
  border-color: var(--border-card) !important;
}

.dark-mode .df-viewer-container,
.dark-mode .df-viewer,
.dark-mode .df-viewer-wrapper {
  background-color: var(--bg-color-primary) !important;
}

.dark-mode .df-page {
  background-color: var(--bg-color-surface) !important;
}

.dark-mode .df-ui {
  background-color: var(--bg-color-surface) !important;
  border-top-color: var(--border-divider) !important;
  color: var(--text-color-body) !important;
}

.dark-mode .df-sidemenu-wrapper {
  background-color: var(--bg-color-surface) !important;
  border-left-color: var(--border-divider) !important;
}

.dark-mode .df-more-container {
  background-color: var(--bg-color-surface) !important;
  border-color: var(--border-card) !important;
}

.dark-mode .df-more-container .df-ui-btn {
  color: var(--text-color-body) !important;
}

.dark-mode .df-more-container .df-ui-btn:hover {
  color: var(--text-color-link-hover) !important;
  background-color: var(--cta-color-outline-background-hover) !important;
}