@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,300;0,7..72,400;0,7..72,500;0,7..72,600;0,7..72,700;1,7..72,400;1,7..72,500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&family=Playfair+Display:ital,wght@0,600;0,700;0,900;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==============================================================================
   KINDLE E-READER THEME & DESIGN SYSTEM
   Paleta: 
   - Luz / Kindle Paperwhite (Sepia Cálido / Blanco E-Ink): Fondo #f7f4ed / #faf8f5, Texto #191614
   - Noche / Kindle Dark Mode: Fondo #111111 / #161616, Texto #e6e3dd
   ============================================================================== */

:root {
  --kindle-bg: #f8f6f0;
  --kindle-surface: #ffffff;
  --kindle-border: #e2ded5;
  --kindle-text-main: #191614;
  --kindle-text-muted: #5e5850;
  --kindle-text-subtle: #8a8378;
  --kindle-accent: #7a1d1d;
  --kindle-divider: #e6e2d8;
  --logo-fill: #191614;
}

[data-theme="dark"], body.dark-mode {
  --kindle-bg: #121212;
  --kindle-surface: #1a1a1a;
  --kindle-border: #2c2c2c;
  --kindle-text-main: #e8e4dc;
  --kindle-text-muted: #aba498;
  --kindle-text-subtle: #736d64;
  --kindle-accent: #d9534f;
  --kindle-divider: #262626;
  --logo-fill: #f5f2eb;
}

/* Base Body Styles — Kindle Reader Comfort */
body {
  font-family: 'Literata', 'Newsreader', Georgia, serif;
  background-color: var(--kindle-bg);
  color: var(--kindle-text-main);
  line-height: 1.8;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Typography styles */
.font-masthead {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -0.02em;
  color: var(--kindle-text-main);
}

.font-mono-reader {
  font-family: 'JetBrains Mono', monospace;
}

.font-reading {
  font-family: 'Literata', Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.85;
  color: var(--kindle-text-main);
}

/* SVG Logo Dinámico y Reactivo al Modo */
.kindle-logo-icon {
  fill: var(--logo-fill);
  color: var(--logo-fill);
  transition: fill 0.2s ease, color 0.2s ease;
}

/* Líneas y divisores de libro / Kindle */
.kindle-divider {
  border: 0;
  border-top: 1px solid var(--kindle-divider);
}

.kindle-rule {
  border-top: 1px solid var(--kindle-border);
}

/* Artículo estilo página de libro Kindle */
.kindle-story-entry {
  position: relative;
  padding-bottom: 2.25rem;
  margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--kindle-divider);
  transition: opacity 0.2s ease;
}

.kindle-story-entry:last-child {
  border-bottom: none;
}

.kindle-story-title {
  color: var(--kindle-text-main);
  transition: color 0.15s ease;
}

.kindle-story-title:hover {
  color: var(--kindle-accent);
}

/* Botones mínimos inspirados en Kindle UI */
.btn-kindle {
  background-color: var(--kindle-text-main);
  color: var(--kindle-bg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.5rem 1.1rem;
  border-radius: 3px;
  border: 1px solid var(--kindle-text-main);
  transition: all 0.15s ease;
}

.btn-kindle:hover {
  background-color: var(--kindle-accent);
  border-color: var(--kindle-accent);
  color: #ffffff;
}

.btn-kindle-ghost {
  background: transparent;
  color: var(--kindle-text-muted);
  border: 1px solid var(--kindle-border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  border-radius: 3px;
  padding: 0.35rem 0.75rem;
  transition: all 0.15s ease;
}

.btn-kindle-ghost:hover {
  color: var(--kindle-text-main);
  border-color: var(--kindle-text-main);
}

/* Inputs Kindle */
.input-kindle {
  background-color: transparent !important;
  color: var(--kindle-text-main) !important;
  border: 1px solid var(--kindle-border) !important;
  border-radius: 3px !important;
  font-family: 'Literata', Georgia, serif;
  transition: border-color 0.15s ease;
}

.input-kindle:focus {
  outline: none !important;
  border-color: var(--kindle-text-main) !important;
}

/* Autosuggest Dropdown Kindle */
.suggest-box-kindle {
  background: var(--kindle-surface);
  border: 1px solid var(--kindle-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 380px;
  overflow-y: auto;
  z-index: 50;
  border-radius: 4px;
}

.suggest-item-kindle {
  border-bottom: 1px solid var(--kindle-divider);
  padding: 0.85rem 1.15rem;
  cursor: pointer;
  transition: background 0.1s ease;
}

.suggest-item-kindle:hover {
  background-color: rgba(122, 29, 29, 0.05);
}

[data-theme="dark"] .suggest-item-kindle:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Ocultar barra de scroll en carruseles y pestañas de manera infalible en todos los navegadores */
.no-scrollbar::-webkit-scrollbar,
#categories-carousel::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none !important;
}
.no-scrollbar,
#categories-carousel {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  overflow: -moz-scrollbars-none !important;
}

/* Difuminado en los extremos del carrusel */
.carousel-fade-container {
  position: relative;
}

.carousel-fade-left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2.5rem;
  background: linear-gradient(to right, var(--kindle-bg), transparent);
  pointer-events: none;
  z-index: 10;
}

.carousel-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2.5rem;
  background: linear-gradient(to left, var(--kindle-bg), transparent);
  pointer-events: none;
  z-index: 10;
}

/* Micro-animación de reacción / voto flotante */
@keyframes floatReactionUp {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.6);
  }
  35% {
    opacity: 1;
    transform: translateY(-14px) scale(1.3);
  }
  70% {
    opacity: 0.9;
    transform: translateY(-26px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(-38px) scale(0.85);
  }
}

.anim-reaction-float {
  animation: floatReactionUp 0.85s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
  pointer-events: none;
}

/* Cabecera Sticky elegante tipo Kindle */
.kindle-sticky-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--kindle-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.kindle-sticky-shadow {
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .kindle-sticky-shadow,
body.dark-mode .kindle-sticky-shadow {
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.45);
}

/* ==============================================================================
   BOTÓN FLOTANTE LATERAL DERECHO (+ Escribir / Crear Historia)
   ============================================================================== */
.floating-write-btn {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.75rem 0.85rem;
  background-color: var(--kindle-accent);
  color: #ffffff;
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  box-shadow: -4px 6px 20px rgba(122, 29, 29, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-decoration: none;
  font-family: 'Literata', Georgia, serif;
  user-select: none;
}

.floating-write-btn:hover {
  padding-right: 1.25rem;
  background-color: #922222;
  box-shadow: -6px 8px 24px rgba(122, 29, 29, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-50%) translateX(-4px);
  color: #ffffff;
}

[data-theme="dark"] .floating-write-btn {
  background-color: #b83a37;
  box-shadow: -4px 6px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(217, 83, 79, 0.25);
}

[data-theme="dark"] .floating-write-btn:hover {
  background-color: #d9534f;
  box-shadow: -6px 8px 26px rgba(0, 0, 0, 0.8), 0 0 24px rgba(217, 83, 79, 0.4);
}

@media (max-width: 640px) {
  .floating-write-btn {
    padding: 0.55rem 0.75rem 0.55rem 0.65rem;
    gap: 0.35rem;
  }
}