:root {
  /* Dark Mode Palette - Deep Navy/Black */
  --bg-dark: #02040a;
  --bg-nav: rgba(2, 4, 10, 0.7);
  --bg-glass: rgba(10, 20, 40, 0.45);

  /* Holographic / Neon Accents */
  --accent-cyan: #00ffff;
  --accent-blue: #0055ff;
  --accent-violet: #8a2be2;
  --accent-gold: #ffcf00;

  /* Typography Colors */
  --text-main: #f0f4ff;
  --text-muted: #8a9bb8;

  /* Fonts */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Glow Effects */
  --glow-cyan: 0 0 20px rgba(0, 255, 255, 0.4), 0 0 40px rgba(0, 255, 255, 0.1);
  --glow-cyan-hover: 0 0 30px rgba(0, 255, 255, 0.8), 0 0 60px rgba(0, 255, 255, 0.4);

  /* CH-164 — Fluid Scale Tokens (Zoom Adaptativo).
     Why: el Director pidió que la web "encoja y crezca" suavemente entre
     monitores grandes y móvil, manteniendo armonía Dark Luxury.
     How to apply: usar via var() en clases/IDs SCOPED (#detalles-container,
     .immersive-text p, hero del catálogo, input del chat). Nunca aplicar
     globalmente a h1/h2/p para no romper checkout, plans, profile. */
  --fluid-h1:      clamp(1.85rem, 6vw,   4.5rem);
  --fluid-h2:      clamp(1.4rem,  4.5vw, 2.5rem);
  --fluid-h3:      clamp(1.1rem,  3vw,   1.5rem);
  --fluid-body:    clamp(0.85rem, 2.4vw, 1rem);
  --fluid-body-lg: clamp(1rem,    2.6vw, 1.25rem);
  --fluid-caption: clamp(0.65rem, 1.5vw, 0.85rem);
  --fluid-gap:     clamp(1rem,    4vw,   4rem);
  --fluid-py:      clamp(1.25rem, 4vh,   4rem);
}

/* ======================================================
   FIX: FONDO INFINITO - Elimina el corte del canvas al final de la página
   ====================================================== */

/* El body siempre será negro absoluto debajo de todo */
#main-body {
  background-color: #010102 !important;
}

/* Después de todo el contenido, extender el fondo sólido */
html, body {
  background-color: #010102;
}

/* El canvas fijo (estrellas) tiene z-0, pero su parent div también es fixed.
   Hacemos que el canvas desvanezca al final forzando que el contenedor sólido
   siempre tape al canvas desde el primer pixel de las secciones inferiores. */
#cosmic-canvas {
  /* Asegurar que no haya artefactos de transparencia */
  background-color: transparent;
}



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  transition: background-color 0.5s ease, color 0.5s ease;
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

.fondo-mesh {
  background:
    radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 255, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at calc(100% - var(--mouse-x, 50%)) calc(100% - var(--mouse-y, 50%)), rgba(176, 38, 255, 0.08) 0%, transparent 50%),
    linear-gradient(-45deg, var(--bg-dark), #030612, var(--bg-dark), #050a1c) !important;
  background-size: 100% 100%, 100% 100%, 400% 400%;
  animation: gradientMesh 25s ease infinite;
  color: #ffffff !important;
  min-height: 100vh;
}

@keyframes gradientMesh {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

h1,
h2,
h3,
h4,
.brand-logo {
  font-family: var(--font-display);
}

.brand-signature,
h1.brand-signature,
h2.brand-signature,
h3.brand-signature,
h4.brand-signature {
  font-family: 'Cinzel', serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  font-weight: 400 !important;
}

/* NAVBAR */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  background-color: var(--bg-nav);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 6%;
  z-index: 1000;
  border-bottom: 1px solid rgba(0, 255, 255, 0.15);
}

.brand-logo {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-main);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: text-shadow 0.3s ease;
}

.brand-logo:hover {
  text-shadow: var(--glow-cyan);
}

.brand-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
}

.nav-links {
  display: flex;
  gap: 30px;
}

.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--accent-cyan);
  transition: width 0.3s ease;
  box-shadow: var(--glow-cyan);
}

.nav-link:hover {
  color: var(--text-main);
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link.creator-link {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
}

.nav-link.creator-link::after {
  display: none;
}

.nav-link.creator-link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* LECTOR ESTÉTICA EDITORIAL (CH-099) - Movido al final del archivo */

/* HERO SECTION */
.hero {
  margin-top: 80px;
  height: 45vh;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 5%;
  position: relative;
}

.hero-content {
  max-width: 800px;
  z-index: 2;
}

.hero-title {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.5) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -1px;
}

.hero-desc {
  font-size: 1.2rem;
  color: var(--text-muted);
  margin-bottom: 30px;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* CATALOG SECTION */
.catalog-container {
  padding: 20px 6% 80px 6%;
  z-index: 2;
  position: relative;
}

.category-section {
  margin-bottom: 60px;
}

.category-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 25px;
  color: var(--text-main);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.category-title::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: var(--glow-cyan);
}

.carousel-wrapper {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  padding: 20px 0 40px 0;
  /* Space for hover effects */
}

.carousel-wrapper::-webkit-scrollbar {
  display: none;
}

.carousel {
  display: flex;
  gap: 40px;
  justify-content: center;
  /* Center the 3 items */
}

/* GLASSMORPHISM BOOK CARD */
.book-card {
  width: 280px;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;

  /* Glassmorphism Styles */
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 255, 255, 0.15);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.book-card:hover {
  transform: translateY(-12px);
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), var(--glow-cyan-hover);
  background: rgba(10, 30, 60, 0.6);
}

.book-cover-container {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.book-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.book-card:hover .book-cover {
  transform: scale(1.08);
  /* Zoom out effect on image */
}

/* CH-020: Desactivar zooms extremos en táctil */
@media (hover: none) {
  .book-card:hover {
    transform: none !important;
  }
  .book-card:hover .book-cover {
    transform: none !important;
  }
  .glass-card.card-hover:hover {
    transform: none !important;
  }
}

.book-rating {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 20px;
  color: var(--accent-gold);
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid rgba(255, 207, 0, 0.3);
}

.book-info {
  text-align: center;
}

.book-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
  line-height: 1.3;
}

.book-author {
  font-size: 0.95rem;
  color: var(--accent-cyan);
  font-weight: 500;
}

/* BUTTONS FUTURISTIC */
.btn {
  padding: 16px 36px;
  font-size: 1.05rem;
  font-weight: 600;
  font-family: var(--font-body);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
}

.btn-primary {
  background: transparent;
  color: var(--accent-cyan);
  border: 1px solid var(--accent-cyan);
  box-shadow: var(--glow-cyan);
}

.btn-primary:hover {
  background: var(--accent-cyan);
  color: var(--bg-dark);
  box-shadow: var(--glow-cyan-hover);
  transform: translateY(-2px);
}

.btn-secondary {
  background: var(--bg-glass);
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}


/* DETALLES VISTA STYLES */
.details-main {
  padding: 130px 6% 80px 6%;
}

.details-wrapper {
  display: grid;
  grid-template-columns: minmax(300px, 400px) 1fr;
  gap: 60px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;

  /* Glassmorphism Container */
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 255, 255, 0.1);
  border-radius: 24px;
  padding: 50px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
}

.details-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 255, 255, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.details-cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 16px;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
  object-fit: cover;
  transition: transform 0.5s ease;
}

.details-cover:hover {
  transform: scale(1.02);
  box-shadow: var(--glow-cyan-hover);
}

.details-info {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.details-rating {
  display: inline-block;
  color: var(--accent-gold);
  font-size: 1.1rem;
  font-weight: 700;
  background: rgba(255, 207, 0, 0.1);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 207, 0, 0.2);
  width: max-content;
}

.details-title {
  font-size: 3.5rem;
  font-weight: 800;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--accent-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  letter-spacing: -1px;
}

.details-author {
  font-size: 1.4rem;
  color: var(--text-muted);
  font-weight: 500;
}

.details-synopsis {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text-main);
  opacity: 0.9;
  margin-bottom: 10px;
}

.details-actions {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

/* Responsividad General */
@media (max-width: 992px) {
  .details-wrapper {
    grid-template-columns: 1fr;
    padding: 30px;
  }

  .details-cover {
    max-width: 350px;
    margin: 0 auto;
  }

  .carousel {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 3rem;
  }

  .book-card {
    width: 220px;
  }

  .nav-links {
    gap: 15px;
  }

  .nav-link {
    font-size: 0.85rem;
  }

  .details-title {
    font-size: 2.5rem;
  }

  .details-actions {
    flex-direction: column;
  }
}

/* LIGHT MODE TEMA ZONA LECTOR */
html:not(.dark) body {
  background-color: #f9f9fa !important;
  color: #222222 !important;
}

html:not(.dark) body p,
html:not(.dark) body h1,
html:not(.dark) body h2,
html:not(.dark) body h3,
html:not(.dark) body span,
html:not(.dark) body a {
  color: #222222 !important;
  text-shadow: none !important;
}

/* Mantener navbar superior siempre con texto claro */
html:not(.dark) body header span,
html:not(.dark) body header a {
    color: #f8fafc !important; /* Blanco suave (slate-50) */
}
html:not(.dark) body header a:hover {
    color: #00ffff !important; /* Cyan primary en hover */
}

html:not(.dark) body .glass-player {
  background: rgba(249, 249, 250, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) body .eq-bar {
  background-color: #222222 !important;
  box-shadow: none !important;
}

/* LECTOR HIGHLIGHT COLORS */
.highlight {
  background-color: rgba(0, 240, 255, 0.2);
  border-radius: 3px;
  padding: 0 0.1em;
}

html:not(.dark) body .highlight {
  background-color: rgba(176, 38, 255, 0.3) !important;
  color: #000 !important;
}

/* FIX CONTRASTE CH-093: Resaltados, Negritas y Decoradores en Modo Claro */
html:not(.dark) body #contenido-libro h1,
html:not(.dark) body #contenido-libro h2,
html:not(.dark) body #contenido-libro h3,
html:not(.dark) body #contenido-libro h4 {
    color: #6b21a8 !important; /* Púrpura Profundo */
    text-shadow: none !important;
}

html:not(.dark) body #contenido-libro strong, 
html:not(.dark) body #contenido-libro b,
html:not(.dark) body #contenido-libro li strong, 
html:not(.dark) body #contenido-libro li b {
    color: #6b21a8 !important;
    text-shadow: none !important;
}

html:not(.dark) body #contenido-libro em, 
html:not(.dark) body #contenido-libro i,
html:not(.dark) body #contenido-libro li em, 
html:not(.dark) body #contenido-libro li i {
    color: #1f2937 !important; /* Gris Oscuro */
    font-weight: 500;
}

html:not(.dark) body #contenido-libro a {
    color: #6b21a8 !important;
    border-bottom-color: rgba(107, 33, 168, 0.4) !important;
    text-shadow: none !important;
}

html:not(.dark) body #contenido-libro a:hover {
    border-bottom-color: #6b21a8 !important;
    text-shadow: 0 0 8px rgba(107, 33, 168, 0.3) !important;
}

html:not(.dark) body #contenido-libro blockquote {
    border-left: 3px solid #7e22ce !important; /* Púrpura Vibrante */
    color: #1f2937 !important; /* Gris Oscuro */
    background: #f5f3ff !important; /* Púrpura claro muy sutil */
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}

html:not(.dark) body #contenido-libro hr {
    background: linear-gradient(90deg, transparent, rgba(126, 34, 206, 0.4), transparent) !important;
}

html:not(.dark) body #book-end-separator div {
    background-color: rgba(126, 34, 206, 0.4) !important;
    box-shadow: none !important;
}

html:not(.dark) body #book-end-separator p {
    color: #6b21a8 !important;
    text-shadow: none !important;
}

/* CH-093: Toolbar icons color in light mode - Gris unificado */
html:not(.dark) body #toolbar button,
html:not(.dark) body #toolbar button svg,
html:not(.dark) body #toolbar button .material-symbols-outlined {
    color: #64748b !important; /* Gris claro (slate-500) */
    text-shadow: none !important;
    filter: none !important;
}

html:not(.dark) body #toolbar button:hover {
    color: #9333ea !important; /* Morado fuerte y vibrante en hover */
    background-color: #f3e8ff !important; /* Círculo morado muy sutil de fondo */
}

html:not(.dark) body #toolbar button:hover svg,
html:not(.dark) body #toolbar button:hover .material-symbols-outlined {
    color: #9333ea !important;
    background-color: transparent !important; 
}

/* Herramienta activa en la barra principal (tiene text-purple-600 asignado por JS) */
html:not(.dark) body #toolbar button.text-purple-600,
html:not(.dark) body #toolbar button.text-purple-600 svg,
html:not(.dark) body #toolbar button.text-purple-600 .material-symbols-outlined {
    color: #9333ea !important; /* Morado vibrante para indicar que está activa */
}

/* Excepción: Mantener texto e icono blanco para botones activos (con fondo morado) en submenús */
html:not(.dark) body #toolbar button.text-white,
html:not(.dark) body #toolbar button.text-white svg,
html:not(.dark) body #toolbar button.text-white .material-symbols-outlined,
html:not(.dark) body #toolbar button.text-white:hover,
html:not(.dark) body #toolbar button.text-white:hover svg,
html:not(.dark) body #toolbar button.text-white:hover .material-symbols-outlined {
    color: #ffffff !important;
}

html:not(.dark) body #toolbar button.text-white:hover {
    background-color: rgba(147, 51, 234, 0.5) !important; /* Mantener y/o intensificar un poco el fondo morado sin aclararlo, es ~ purple-600/50 */
}

/* CSS CH-093 Fix para el panel de Audio (Ondas Binaurales) en modo claro */
html:not(.dark) body #audio-panel h4 {
    color: #7e22ce !important; /* Púrpura elegante */
}
html:not(.dark) body #audio-panel p {
    color: #475569 !important; /* Slate-600 */
}
html:not(.dark) body #audio-panel span#track-name {
    color: #9333ea !important; /* Purple bg-color */
    text-shadow: none !important;
}
html:not(.dark) body #audio-panel button[onclick="prevTrack()"],
html:not(.dark) body #audio-panel button[onclick="nextTrack()"] {
    background-color: transparent !important;
    color: #64748b !important; 
}
html:not(.dark) body #audio-panel button[onclick="prevTrack()"]:hover,
html:not(.dark) body #audio-panel button[onclick="nextTrack()"]:hover {
    color: #9333ea !important; 
}
html:not(.dark) body #audio-panel button[onclick="toggleAudioPlay()"] {
    background-color: #9333ea !important; /* Botón de play morado sólido */
    color: #ffffff !important; /* Flecha de play blanca */
    box-shadow: 0 4px 15px rgba(147, 51, 234, 0.3) !important; 
}
html:not(.dark) body #audio-panel button[onclick="toggleAudioPlay()"] svg {
    color: #ffffff !important;
}
html:not(.dark) body #audio-panel input[type="range"] {
    background-color: rgba(0, 0, 0, 0.1) !important;
    accent-color: #9333ea !important;
    box-shadow: none !important;
}
html:not(.dark) body #audio-panel > div > svg {
    color: #64748b !important; 
}

html:not(.dark) body #toolbar {
    border-color: rgba(126, 34, 206, 0.4) !important; /* Borde morado súper fino */
    box-shadow: none !important; /* Sin sombra ni resplandor */
}

/* =========================================
   CH-093: UNIFICACIÓN AZUL/CIAN EN MODO OSCURO
   ========================================= */
/* Eliminar residuos morados de todos los paneles desplegables del toolbar en Dark Mode */
html.dark body #toolbar .absolute > div.glass-player, /* Contenedor del highlighter */
html.dark body #bookmarks-sidepanel,
html.dark body #audio-panel {
    border-color: rgba(6, 182, 212, 0.4) !important; /* Borde cian aplastando bordes nativos morados */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(6, 182, 212, 0.1) !important;
}

/* El título de cualquier panel (Modo Resaltar, Marcadores, Ondas) en Dark Mode */
html.dark body #toolbar .absolute span.text-purple-600,
html.dark body #toolbar .absolute h4.text-purple-600 {
    color: #22d3ee !important; /* cyan-400 */
}

/* Cualquier botón "activo" (texto blanco y fondo) dentro de los paneles en Dark Mode (ej: botón Resaltar activo) */
html.dark body #toolbar .absolute button.text-white {
    background-color: rgba(6, 182, 212, 0.4) !important; /* bg-cyan-500/40 */
    border-color: rgba(6, 182, 212, 0.3) !important; /* border-cyan-500/30 */
}
html.dark body #toolbar .absolute button.text-white:hover {
    background-color: rgba(6, 182, 212, 0.5) !important;
}

/* Audio Panel Track Name y Botón Play */
html.dark body #audio-panel span#track-name {
    color: #22d3ee !important; /* cyan-400 */
    filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.6)) !important; /* sombra cian */
}

html.dark body #audio-panel button[onclick="toggleAudioPlay()"] {
    background-color: #06b6d4 !important; /* Botón play cian-500 en lugar de morado */
}

html.dark body #audio-panel button[onclick="toggleAudioPlay()"] svg {
    color: #ffffff !important;
}

html.dark body span#audio-dot {
    background-color: #06b6d4 !important;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.8) !important;
}

/* Borrar residuos morados en el mini ecualizador musical del panel de audio en Dark Mode */
html.dark body #audio-panel .eq-bar,
html.dark body #audio-panel .eq-bar.bg-secondary {
    background-color: #06b6d4 !important; 
}

/* Limpiar textos y decoraciones dentro de la lista de marcadores que heredan .text-secondary morado en js */
html.dark body #bookmarks-list .text-secondary {
    color: #22d3ee !important;
}

/* Y opcional: limpiar gráficamente las líneas de marcador inyectadas en la página si resultan moradas */
html.dark body [id^="bm-line-"] .bg-secondary\/10 {
    background-color: rgba(6, 182, 212, 0.1) !important;
    border-color: rgba(6, 182, 212, 0.3) !important;
    color: #22d3ee !important; 
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3) !important;
}
html.dark body [id^="bm-line-"] .from-secondary {
    background-image: linear-gradient(to right, #06b6d4, rgba(0,255,255,0.3), transparent) !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.4) !important;
}

/* =========================================
   CH-093: SCROLLBARS PERSONALIZADAS ELEGANTES
   ========================================= */
.custom-scrollbar::-webkit-scrollbar {
    width: 5px; /* Delgada y elegante */
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent; /* Sin fondo feo */
}

/* Modo Claro: Scrollbar Morada */
html:not(.dark) body .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(147, 51, 234, 0.4); 
    border-radius: 10px;
}
html:not(.dark) body .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(147, 51, 234, 0.8);
}
html:not(.dark) body .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(147, 51, 234, 0.4) transparent;
}

/* Modo Oscuro: Scrollbar Cian/Azul Brillante */
html.dark body .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.4); 
    border-radius: 10px;
}
html.dark body .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(6, 182, 212, 0.9);
}
html.dark body .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(6, 182, 212, 0.4) transparent;
}

/* PAGINATION MODE */
.paginated-mode {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 0 10vw;
  box-sizing: border-box;
  column-width: 80vw;
  column-gap: 20vw;
  max-width: none !important;
  min-width: 100%;
}

.toolbar-bottom {
  top: auto !important;
  right: auto !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  flex-direction: row !important;
}

@media (max-width: 768px) {
  .paginated-mode {
    padding: 0 10vw;
    column-width: 80vw;
    column-gap: 20vw;
  }
}

/* TOOLBAR BOTTOM PANELS */
.toolbar-bottom #bookmarks-sidepanel,
.toolbar-bottom #audio-panel {
  right: auto !important;
  bottom: calc(100% + 16px) !important;
  top: auto !important;
  left: 50% !important;
  transform: translateX(-50%) scale(0.95);
  transform-origin: bottom center;
}

.toolbar-bottom #bookmarks-sidepanel.scale-100,
.toolbar-bottom #audio-panel.scale-100 {
  transform: translateX(-50%) scale(1) !important;
}
/* CH-020: Mobile Tool Panel (Speed Dial) */
@media (max-width: 767px) {
  #toolbar {
    display: flex !important;
    flex-direction: column !important;
    width: 60px !important;
    background: rgba(15, 15, 20, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 255, 255, 0.1) !important;
    padding: 12px 0 !important;
    align-items: center !important;
    gap: 16px !important;
    border-radius: 30px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important;
    position: fixed !important;
    right: 24px !important;
    bottom: 96px !important;
    z-index: 80 !important;
    top: auto !important;
    left: auto !important;
    transform: none; /* Tailwind will handle translate and scale */
  }

  /* Submenus on mobile (Highlighter, Bookmarks) */
  #toolbar .group-hover\:visible,
  #toolbar .group-hover\:opacity-100 {
    right: 70px !important;
    top: 50% !important;
    transform: translateY(-50%) scale(1) !important;
  }
}

#toolbar {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   ESTILOS BASE PARA RENDERIZADO MARKDOWN (LECTOR INMERSIVO)
   ========================================================= */
#contenido-libro {
    color: #e2e8f0; /* text-slate-200 */
}

/* Párrafos base */
#contenido-libro p {
    margin-bottom: 2em;
    line-height: 2;
    font-weight: 300;
    letter-spacing: 0.025em;
}

/* Negritas (Resaltados de importancia) */
#contenido-libro strong, 
#contenido-libro b {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.3); /* Glow Cyan sutil */
}

/* Cursivas (Pensamientos o énfasis suave) */
#contenido-libro em, 
#contenido-libro i {
    color: #cbd5e1; /* text-slate-300 */
    font-style: italic;
    letter-spacing: 0.05em;
}

/* Títulos y Subtítulos (Jerarquía) */
#contenido-libro h1, 
#contenido-libro h2, 
#contenido-libro h3 {
    font-family: 'Cormorant Garamond', serif;
    color: var(--accent-cyan, #00ffff);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

#contenido-libro h1 {
    font-size: 2.8em;
    margin-top: 3em;
    margin-bottom: 1.5em;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

#contenido-libro h2 {
    font-size: 2em;
    margin-top: 2.5em;
    margin-bottom: 1.2em;
    color: #f1f5f9; /* Más blanco para los subtítulos */
}

#contenido-libro h3 {
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 1em;
    color: #a5f3fc; /* Cyan pálido */
}

#contenido-libro h4 {
    font-size: 1.2em;
    margin-top: 2em;
    margin-bottom: 1em;
    color: #cbd5e1;
}

/* =========================================================
   AMPLIACIÓN MARKDOWN: LISTAS, ENLACES Y CÓDIGO
   ========================================================= */

/* Viñetas (Listas desordenadas) */
#contenido-libro ul {
    list-style-type: disc;
    padding-left: 2.5em;
    margin-bottom: 2.5em;
    color: #cbd5e1; /* text-slate-300 */
}

/* Listas Numeradas */
#contenido-libro ol {
    list-style-type: decimal;
    padding-left: 2.5em;
    margin-bottom: 2.5em;
    color: #cbd5e1;
}

/* Elementos de lista (renglones) */
#contenido-libro li {
    margin-bottom: 0.8em;
    line-height: 1.8;
    padding-left: 0.5em;
    font-weight: 300;
}

/* Listas anidadas (Sub-viñetas) */
#contenido-libro ul ul, 
#contenido-libro ol ul, 
#contenido-libro ul ol {
    margin-top: 0.8em;
    margin-bottom: 0;
    list-style-type: circle;
}

/* Enlaces (Por si hay referencias cruzadas) */
#contenido-libro a {
    color: var(--accent-cyan, #00ffff);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 255, 255, 0.3);
    transition: all 0.3s ease;
}

#contenido-libro a:hover {
    border-bottom-color: var(--accent-cyan, #00ffff);
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

/* Asegurar que las negritas y cursivas anidadas en listas también brillen */
#contenido-libro li strong, 
#contenido-libro li b {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.3);
}

#contenido-libro li em, 
#contenido-libro li i {
    color: #cbd5e1;
    font-style: italic;
}

/* Citas (Blockquotes) */
#contenido-libro blockquote {
    border-left: 3px solid var(--accent-cyan, #00ffff);
    padding-left: 1.5em;
    margin: 2.5em 0;
    font-style: italic;
    color: #94a3b8; /* text-slate-400 */
    background: linear-gradient(90deg, rgba(0,255,255,0.05) 0%, rgba(0,0,0,0) 100%);
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

/* Separadores temáticos (***) */
#contenido-libro hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,255,255,0.3), transparent);
    margin: 4em 0;
}

/* =========================================================
   ESTILOS BASE PARA MARKDOWN (LECTOR INMERSIVO)
   Garantiza que el texto rico no sea aplanado por Tailwind
   ========================================================= */

/* Listas (Viñetas y Numeradas) */
#contenido-libro ul {
    list-style-type: disc;
    padding-left: 2em;
    margin-top: 1em;
    margin-bottom: 2em;
    color: #cbd5e1; /* slate-300 */
}

#contenido-libro ol {
    list-style-type: decimal;
    padding-left: 2em;
    margin-top: 1em;
    margin-bottom: 2em;
    color: #cbd5e1;
}

#contenido-libro li {
    margin-bottom: 0.8em;
    line-height: 1.8;
    padding-left: 0.5em;
}

#contenido-libro li::marker {
    color: var(--accent-cyan, #00ffff);
}

/* CH-123: Desbloqueo de selección de texto en todos los elementos del lector.
   El body tiene user-select: none por defecto para proteger la UI;
   esta regla habilita explícitamente la selección solo dentro del contenido del libro. */
#contenido-libro,
#contenido-libro p,
#contenido-libro ul,
#contenido-libro ol,
#contenido-libro li,
#contenido-libro h1,
#contenido-libro h2,
#contenido-libro h3,
#contenido-libro h4,
#contenido-libro blockquote,
#contenido-libro strong,
#contenido-libro b,
#contenido-libro em,
#contenido-libro i,
#contenido-libro span {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* CH-123: El marcador de viñeta (bullet/number) NO debe ser seleccionable */
#contenido-libro li::marker {
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Negritas y Cursivas */
#contenido-libro strong, 
#contenido-libro b {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

#contenido-libro em, 
#contenido-libro i {
    color: #94a3b8; /* slate-400 */
    font-style: italic;
    letter-spacing: 0.02em;
}

/* Citas (Blockquotes) */
#contenido-libro blockquote {
    border-left: 3px solid var(--accent-cyan, #00ffff);
    padding: 1em 1.5em;
    margin: 2em 0;
    font-style: italic;
    color: #94a3b8;
    background: linear-gradient(90deg, rgba(0,255,255,0.03) 0%, rgba(0,0,0,0) 100%);
    border-radius: 0 8px 8px 0;
}

/* Títulos y Separadores */
#contenido-libro h2, #contenido-libro h3 {
    font-family: 'Cormorant Garamond', serif;
    color: #f8fafc;
    margin-top: 2.5em;
    margin-bottom: 1em;
}

#contenido-libro h2 { font-size: 2em; color: var(--accent-cyan, #00ffff); text-transform: uppercase; letter-spacing: 0.05em; }
#contenido-libro h3 { font-size: 1.5em; color: #e2e8f0; }

#contenido-libro hr {
    border-color: rgba(0, 255, 255, 0.15);
    margin: 3em 0;
}

/* =========================================================
   CH-073: QUANTUM SHROUD — Velo Cuántico de Revelado Atómico
   ========================================================= */

/* Velo sutil: píldora flotante top-center con glassmorphism */
.quantum-shroud {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 8px 14px;
  border-radius: 999px;
  background: rgba(2, 4, 10, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 255, 255, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
              0 0 15px rgba(0, 255, 255, 0.06);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Pulso de luz cyan — punto pequeño que late */
.quantum-shroud__pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 255, 255, 0.7);
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.5),
              0 0 16px rgba(0, 255, 255, 0.2);
  animation: shroudBreathe 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

/* Texto sutil */
.quantum-shroud__text {
  color: rgba(0, 255, 255, 0.6);
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Animación de respiración del punto */
@keyframes shroudBreathe {
  0%, 100% {
    transform: scale(1);
    background: rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 6px rgba(0, 255, 255, 0.3), 0 0 12px rgba(0, 255, 255, 0.08);
  }
  50% {
    transform: scale(1.3);
    background: rgba(0, 255, 255, 0.9);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.6), 0 0 24px rgba(0, 255, 255, 0.2);
  }
}

/* Estado de salida: desvanecer y subir la píldora (details) */
.shroud-vanish {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(-20px) !important;
  pointer-events: none !important;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Variante Reader: overlay fullscreen con píldora centrada */
.quantum-shroud--reader {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  padding: 0;
  background: #010102;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  box-shadow: none;
}

.quantum-shroud--reader.shroud-vanish {
  transform: none !important;
  opacity: 0 !important;
  transition: opacity 0.8s ease;
}

/* Contenido oculto antes del revelado */
.content-hidden {
  opacity: 0;
  transform: translateY(10px);
}

/* Contenido revelado — aparición sólida */
.content-ready {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* =========================================================
   LIGHT MODE OVERRIDES PARA LECTOR INMERSIVO (MARKDOWN)
   ========================================================= */
/* Elementos muy claros llevados a oscuro/legible */
html:not(.dark) #contenido-libro p,
html:not(.dark) #contenido-libro li,
html:not(.dark) #contenido-libro ul,
html:not(.dark) #contenido-libro ol,
html:not(.dark) #contenido-libro blockquote,
html:not(.dark) #contenido-libro em,
html:not(.dark) #contenido-libro i {
  color: #1e293b !important;
  text-shadow: none !important;
}

/* Elementos Cyan llevados a Morado (#b026ff) */
html:not(.dark) #book-title,
html:not(.dark) #contenido-libro h1,
html:not(.dark) #contenido-libro h2,
html:not(.dark) #contenido-libro h3,
html:not(.dark) #contenido-libro h4,
html:not(.dark) #contenido-libro strong,
html:not(.dark) #contenido-libro b,
html:not(.dark) #contenido-libro ol li::marker,
html:not(.dark) #contenido-libro ul li::marker {
  color: #b026ff !important;
  text-shadow: none !important;
}

/* TICKET JORNADA: CH-101 - Freedom Absolute Notes */
.select-none {
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* TICKET JORNADA: CH-097 - Animación Autónoma Obra Destacada */
@keyframes autoCrossfade {
    0%, 15% { opacity: 0; }
    35%, 65% { opacity: 1; }
    85%, 100% { opacity: 0; }
}

.animate-auto-crossfade {
    animation: autoCrossfade 10s infinite ease-in-out;
}

/* CH-099 & CH-100: Prose Luxury & Codex Temporary Border */
.prose-luxury {
  text-align: justify;
  text-justify: inter-word;
  text-align-last: left;
  hyphens: none;
}

/* Centrar específicamente los títulos dentro del texto de lectura */
.prose-luxury h1,
.prose-luxury h2,
.prose-luxury h3,
.prose-luxury h4,
.prose-luxury h5,
.prose-luxury h6 {
  text-align: center !important;
  text-align-last: center !important;
}

#quantum-codex {
  /* Eliminated forced cyan border for Dark Luxury minimal aesthetic */
}

/* CH-118: Igualar color de h3 con h2 en modo oscuro (Dark Luxury Cuántica) */
html.dark #contenido-libro h3 {
  color: var(--accent-cyan, #00ffff) !important;
}

/* CH-119: Estilos para Tablas en Markdown */
#contenido-libro table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

#contenido-libro th,
#contenido-libro td {
  padding: 0.75em 1em;
  border: 1px solid #d1d5db; /* Gris neutro para modo claro */
  color: #02040a; /* Texto explícitamente oscuro en modo claro */
}

#contenido-libro th {
  background-color: rgba(0, 0, 0, 0.03);
  font-weight: 600;
  text-align: left;
}

/* Ajustes para Modo Oscuro (Dark Luxury Cuántica) */
html.dark #contenido-libro th,
html.dark #contenido-libro td {
  border-color: #374151; /* Gris oscuro para modo dark */
  color: #e2e8f0; /* Texto claro en dark mode */
}

html.dark #contenido-libro th {
  background-color: rgba(255, 255, 255, 0.05);
}

/* ======================================================
   [CH-160] Selection Oracle — "Card-in-Dock" (Móvil)
   Activo cuando JS añade .oracle-mobile-docked al #selection-oracle.
   Forma: tarjeta al 80% del ancho, anclada exactamente en bottom:40px
   (altura del peek del Codex), border-bottom eliminado para fundirse
   con el panel. Layout en grid 3×1fr: alineación perfecta de acciones.
   El desktop (burbuja flotante por rect) permanece 100% intacto.
   ====================================================== */

#selection-oracle.oracle-mobile-docked {
    /* Anclaje exacto: bottom = altura del peek del Codex (40px) — sin aire */
    position: fixed !important;
    top: auto !important;
    bottom: 40px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    /* Dimensiones: tarjeta amplia centrada */
    width: 80% !important;
    max-width: 350px !important;

    /* Forma: tarjeta redondeada arriba y plana abajo (extensión del Codex) */
    border-radius: 24px 24px 0 0 !important;

    /* Layout grid 3×1fr — los 3 botones ocupan exactamente el mismo ancho */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0.65rem 0.5rem !important;
    padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px)) !important;

    /* Glassmorphism — fondo alineado con el Codex (bg-black/80) */
    background: rgba(0, 0, 0, 0.88) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: none !important;  /* se funde con el Codex */

    /* Sombra solo superior — la tarjeta nace del Codex */
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Botones: cada uno ocupa una celda del grid, perfectamente centrado.
   Reseteamos hover Tailwind base (bg-white/10 + cyan/amber/purple text)
   para sustituirlo por feedback táctil unificado. */
#selection-oracle.oracle-mobile-docked .oracle-action {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 4px;
    min-height: 44px;
    border-radius: 8px;
    background: transparent !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    white-space: nowrap;
}

/* Iconos y labels: escala armoniosa */
#selection-oracle.oracle-mobile-docked .oracle-action .material-symbols-outlined {
    font-size: 18px !important;
}
#selection-oracle.oracle-mobile-docked .oracle-action span:not(.material-symbols-outlined) {
    font-size: 10.5px !important;
    letter-spacing: 0.08em;
}

/* Divisores: ocultos en grid (los 3 botones ocupan toda la fila) */
#selection-oracle.oracle-mobile-docked > div.w-\[1px\] {
    display: none !important;
}

/* CH-161: Modo oscuro — glow cyan en iconos y texto para que la cápsula
   destaque sobre el Codex. El color base es cyan-300 (#67e8f9) para
   legibilidad; al hover/active se intensifica a cyan puro con halo. */
html.dark #selection-oracle.oracle-mobile-docked .oracle-action {
    color: #67e8f9 !important;
}
html.dark #selection-oracle.oracle-mobile-docked .oracle-action .material-symbols-outlined,
html.dark #selection-oracle.oracle-mobile-docked .oracle-action span:not(.material-symbols-outlined) {
    text-shadow: 0 0 6px rgba(0, 255, 255, 0.55),
                 0 0 14px rgba(0, 255, 255, 0.25);
}
html.dark #selection-oracle.oracle-mobile-docked .oracle-action:hover,
html.dark #selection-oracle.oracle-mobile-docked .oracle-action:active,
html.dark #selection-oracle.oracle-mobile-docked .oracle-action:focus {
    color: #00ffff !important;
    background-color: rgba(0, 255, 255, 0.08) !important;
}
html.dark #selection-oracle.oracle-mobile-docked .oracle-action:hover .material-symbols-outlined,
html.dark #selection-oracle.oracle-mobile-docked .oracle-action:active .material-symbols-outlined,
html.dark #selection-oracle.oracle-mobile-docked .oracle-action:hover span:not(.material-symbols-outlined),
html.dark #selection-oracle.oracle-mobile-docked .oracle-action:active span:not(.material-symbols-outlined) {
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.85),
                 0 0 18px rgba(0, 255, 255, 0.45);
}

/* Modo claro: texto oscuro sin glow */
html:not(.dark) #selection-oracle.oracle-mobile-docked {
    background: rgba(248, 248, 252, 0.92) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.10),
                inset 0 1px 0 rgba(0, 0, 0, 0.04) !important;
}
/* CH-163: paleta light = gris (default) + morado (hover/active),
   alineada con la del toolbar lateral y el resto del modo claro. */
html:not(.dark) #selection-oracle.oracle-mobile-docked .oracle-action {
    color: #64748b !important; /* slate-500 — gris neutro */
}
html:not(.dark) #selection-oracle.oracle-mobile-docked .oracle-action .material-symbols-outlined,
html:not(.dark) #selection-oracle.oracle-mobile-docked .oracle-action span:not(.material-symbols-outlined) {
    text-shadow: none !important;
}
html:not(.dark) #selection-oracle.oracle-mobile-docked .oracle-action:hover,
html:not(.dark) #selection-oracle.oracle-mobile-docked .oracle-action:active,
html:not(.dark) #selection-oracle.oracle-mobile-docked .oracle-action:focus {
    background-color: #f3e8ff !important; /* purple-100 sutil */
    color: #9333ea !important;            /* purple-600 vibrante */
}

/* CH-161 / CH-162: posicionamiento dinámico del FAB en móvil.
   - Default: bottom 56px → 16px de aire sobre el peek del Codex (40px).
   - Codex abierto: oculto con opacidad + pointer-events.
   - Oráculo activo: subido a 110px para no solaparse con la cápsula.
   La `transition-all` del Tailwind base anima cualquier cambio de bottom. */
@media (max-width: 767px) {
    #fab-toolbar {
        bottom: 56px !important;
    }
    body.oracle-active #fab-toolbar {
        bottom: 110px !important;
    }
    body.codex-open #fab-toolbar {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: scale(0.85) translateY(12px) !important;
    }

    /* CH-162b: el toolbar vertical (que se despliega al pulsar el FAB) sube
       junto con el FAB — mantenemos 16px de aire entre el borde superior
       del FAB (56 + 56 = 112px desde abajo) y el borde inferior del toolbar. */
    #toolbar {
        bottom: 128px !important;
    }
}

/* =========================================================
   [CH-133b] AUDIO PLAYHEAD — Micrófono arrastrable, anclado al párrafo
   El usuario lo coloca, queda anclado al párrafo y avanza con la lectura.
   ========================================================= */
#audio-playhead {
    position: fixed;
    /* top y left gestionados desde JS */
    width: 24px;
    height: 30px;
    /* [CH-133c] z-index 30 < header (40) → el mic queda por debajo del
       encabezado cuando hace scroll. No flota encima de la barra. */
    z-index: 30;
    opacity: 0;
    transform: translateY(-50%);
    cursor: grab;
    touch-action: none;             /* Necesario para pointer events en móvil */
    pointer-events: auto;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* Transición suave: scroll/avance/resize */
    transition: top 0.32s cubic-bezier(.2, .7, .2, 1),
                left 0.25s ease,
                opacity 0.35s ease,
                transform 0.18s ease;
}
#audio-playhead.visible { opacity: 1; }

#audio-playhead:hover {
    transform: translateY(-50%) scale(1.08);
}

#audio-playhead:active,
#audio-playhead.dragging {
    cursor: grabbing;
    transform: translateY(-50%) scale(1.18);
    /* Sin transición de top para seguir el cursor 1:1 */
    transition: opacity 0.2s ease, transform 0.12s ease;
}

/* ── [CH-133d] Equalizer animado (ondas de frecuencia) ──────── */
#audio-playhead .ph-icon {
    width: 100%;
    height: 100%;
    color: #00ffff;
    filter:
        drop-shadow(0 0 3px rgba(0, 255, 255, 0.70))
        drop-shadow(0 0 9px rgba(0, 255, 255, 0.35));
    overflow: visible;
    pointer-events: none;
}

/* Tres capas de onda sinusoidal — planas en reposo, animadas solo al reproducir. */
#audio-playhead .ph-icon .wave {
    transform-origin: 50% 50%;
    transform-box: fill-box;
    transform: scaleY(0.18);          /* casi planas cuando no suena */
    will-change: transform;
}

/* Reproduciendo: animación activa + glow intenso */
#audio-playhead.active .ph-icon {
    filter:
        drop-shadow(0 0 5px rgba(0, 255, 255, 0.90))
        drop-shadow(0 0 14px rgba(0, 255, 255, 0.50))
        drop-shadow(0 0 26px rgba(0, 255, 255, 0.22));
}
#audio-playhead.active .ph-icon .wave {
    animation: phWaveBreath 1.2s ease-in-out infinite;
}
#audio-playhead.active .ph-icon .w1 { animation-delay:  0s;    animation-duration: 1.2s; }
#audio-playhead.active .ph-icon .w2 { animation-delay: -0.4s;  animation-duration: 0.9s; }
#audio-playhead.active .ph-icon .w3 { animation-delay: -0.8s;  animation-duration: 1.5s; }

/* Drag: ondas congeladas (estado "esperando soltar") */
#audio-playhead.dragging .ph-icon {
    filter:
        drop-shadow(0 0 6px rgba(0, 255, 255, 1))
        drop-shadow(0 0 18px rgba(0, 255, 255, 0.55));
}
#audio-playhead.dragging .ph-icon .wave { animation: none; transform: scaleY(0.3); }

@keyframes phWaveBreath {
    0%, 100% { transform: scaleY(0.18); }
    50%      { transform: scaleY(1.00); }
}

/* Modo Claro: micrófono púrpura premium */
html:not(.dark) #audio-playhead .ph-icon {
    color: #7c3aed;
    filter:
        drop-shadow(0 0 3px rgba(124, 58, 237, 0.55))
        drop-shadow(0 0 8px rgba(124, 58, 237, 0.25));
}
html:not(.dark) #audio-playhead.active .ph-icon {
    filter:
        drop-shadow(0 0 5px rgba(124, 58, 237, 0.85))
        drop-shadow(0 0 14px rgba(124, 58, 237, 0.45));
}
html:not(.dark) #audio-playhead.dragging .ph-icon {
    filter:
        drop-shadow(0 0 6px rgba(124, 58, 237, 1))
        drop-shadow(0 0 18px rgba(124, 58, 237, 0.55));
}

/* ── Snap target: el párrafo donde caerá el micro al soltarlo ── */
#contenido-libro .playhead-snap-target {
    position: relative;
    transition: background 0.18s ease, box-shadow 0.18s ease;
    background: linear-gradient(90deg,
        rgba(0, 255, 255, 0.10) 0%,
        rgba(0, 255, 255, 0.04) 60%,
        transparent 100%);
    box-shadow: -3px 0 0 0 rgba(0, 255, 255, 0.65);
    border-radius: 4px;
}
html:not(.dark) #contenido-libro .playhead-snap-target {
    background: linear-gradient(90deg,
        rgba(124, 58, 237, 0.10) 0%,
        rgba(124, 58, 237, 0.04) 60%,
        transparent 100%);
    box-shadow: -3px 0 0 0 rgba(124, 58, 237, 0.65);
}

/* ── Pulso al click del micro (confirma el ancla) ─────────── */
#contenido-libro .playhead-pulse {
    animation: playheadConfirm 0.9s ease-out;
}
@keyframes playheadConfirm {
    0%   { box-shadow: -3px 0 0 0 rgba(0, 255, 255, 0); }
    25%  { box-shadow: -3px 0 0 0 rgba(0, 255, 255, 0.85); }
    100% { box-shadow: -3px 0 0 0 rgba(0, 255, 255, 0); }
}
html:not(.dark) #contenido-libro .playhead-pulse {
    animation-name: playheadConfirmLight;
}
@keyframes playheadConfirmLight {
    0%   { box-shadow: -3px 0 0 0 rgba(124, 58, 237, 0); }
    25%  { box-shadow: -3px 0 0 0 rgba(124, 58, 237, 0.85); }
    100% { box-shadow: -3px 0 0 0 rgba(124, 58, 237, 0); }
}

/* Móvil: más grande y rotado 90° → ondas verticales para no solaparse */
@media (max-width: 640px) {
    #audio-playhead { width: 28px; height: 34px; }
    #audio-playhead .ph-icon {
        transform: rotate(90deg);
        transform-origin: 50% 50%;
        transform-box: fill-box;
    }
}

@media (prefers-reduced-motion: reduce) {
    #audio-playhead {
        transition: opacity 0.2s ease;
    }
    #audio-playhead .ph-icon .wave { animation: none !important; transform: scaleY(0.18) !important; }
    #contenido-libro .playhead-snap-target,
    #contenido-libro .playhead-pulse { transition: none; animation: none; }
}

/* =========================================================
   [CH-133] WORD-LEVEL HIGHLIGHTING — Audiolibro Sincronizado
   ========================================================= */

/* Token base: inline para no romper el flujo tipográfico del párrafo */
#contenido-libro .word-token {
    display: inline;
    transition: color 0.18s ease, text-shadow 0.18s ease;
}

/* ── [CH-134c] Tail degradado de 3 palabras simultáneas ───────────────────
   La voz "barre" el texto: la palabra activa al 100%, la siguiente ~60%,
   la posterior ~30%. Crea sensación de estela luminosa que va pasando.
   ----------------------------------------------------------------------- */

/* Palabra activa (100%) — Modo Oscuro: Glow Cyan intenso */
#contenido-libro .word-token.highlight-word {
    color: #00ffff;
    text-shadow:
        0 0 6px rgba(0, 255, 255, 0.55),
        0 0 14px rgba(0, 255, 255, 0.30),
        0 0 24px rgba(0, 255, 255, 0.15);
}

/* Tail intermedio (~60%) — Cyan más suave */
#contenido-libro .word-token.highlight-word-next {
    color: #7ce6e6;
    text-shadow:
        0 0 4px rgba(0, 255, 255, 0.35),
        0 0 10px rgba(0, 255, 255, 0.18);
}

/* Tail lejano (~30%) — apenas un susurro luminoso */
#contenido-libro .word-token.highlight-word-next2 {
    color: #b5e7e7;
    text-shadow:
        0 0 3px rgba(0, 255, 255, 0.20),
        0 0 8px rgba(0, 255, 255, 0.10);
}

/* Palabra activa (100%) — Modo Claro: Púrpura profundo con glow sutil */
html:not(.dark) #contenido-libro .word-token.highlight-word {
    color: #6b21a8 !important;
    text-shadow:
        0 0 6px rgba(126, 34, 206, 0.45),
        0 0 12px rgba(126, 34, 206, 0.20) !important;
}

/* Tail intermedio modo claro (~60%) */
html:not(.dark) #contenido-libro .word-token.highlight-word-next {
    color: #8b3fc4 !important;
    text-shadow:
        0 0 4px rgba(126, 34, 206, 0.30),
        0 0 9px rgba(126, 34, 206, 0.14) !important;
}

/* Tail lejano modo claro (~30%) */
html:not(.dark) #contenido-libro .word-token.highlight-word-next2 {
    color: #a96bd1 !important;
    text-shadow:
        0 0 3px rgba(126, 34, 206, 0.18),
        0 0 7px rgba(126, 34, 206, 0.08) !important;
}

/* Respeta usuarios con prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    #contenido-libro .word-token { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   CH-136 — Public Catalog + Auth-Gated Premium Interactions
   Dark Luxury auth buttons (anon navbar) + Glassmorphism prompt panel
   ════════════════════════════════════════════════════════════════════════ */

/* Utility helpers ──────────────────────────────────────────────────────── */
.ch136-hidden { display: none !important; }
html.ch136-prompt-open, html.ch136-prompt-open body { overflow: hidden !important; }

/* Dark Luxury auth buttons (used in navbar AND inside the prompt panel) */
.ch136-anon-nav-buttons {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
@media (min-width: 768px) {
    .ch136-anon-nav-buttons { gap: 0.75rem; }
}

.ch136-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 9999px;
    font-family: 'Outfit', 'Inter', 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease;
    user-select: none;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .ch136-btn {
        padding: 0.55rem 1.25rem;
        font-size: 11px;
        gap: 0.55rem;
    }
}

.ch136-btn .ch136-btn-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .ch136-btn .ch136-btn-icon { width: 15px; height: 15px; }
}

/* Mobile hides the long label, leaves the icon only — keeps the navbar tight */
@media (max-width: 767px) {
    .ch136-btn .ch136-btn-label { display: none; }
    .ch136-btn { padding: 0.5rem; aspect-ratio: 1 / 1; width: 2rem; height: 2rem; }
}

/* "Iniciar Sesión" — discreto, outlined glassmorphism cyan */
.ch136-btn-login {
    background: rgba(0, 255, 255, 0.04);
    color: #a5f3fc;
    border: 1px solid rgba(0, 255, 255, 0.30);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ch136-btn-login:hover {
    background: rgba(0, 255, 255, 0.10);
    color: #ffffff;
    border-color: rgba(0, 255, 255, 0.55);
    transform: translateY(-1px);
}

/* "Registrarse" — CTA primario sólido (cyan flat, alto contraste, sin gradiente) */
.ch136-btn-register {
    background: #00ffff;
    color: #050508;
    border: 1px solid #00ffff;
    box-shadow: 0 4px 16px -4px rgba(0, 255, 255, 0.35);
}
.ch136-btn-register:hover {
    background: #5eead4;
    border-color: #5eead4;
    color: #050508;
    transform: translateY(-1px);
    box-shadow: 0 6px 22px -4px rgba(0, 255, 255, 0.55);
}

/* Light-mode adjustments for navbars that flip palette */
html:not(.dark) .ch136-btn-login {
    color: #4c1d95;
    background: rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.40);
}
html:not(.dark) .ch136-btn-login:hover {
    color: #2e1065;
    background: rgba(124, 58, 237, 0.14);
    border-color: rgba(124, 58, 237, 0.65);
}
html:not(.dark) .ch136-btn-register {
    background: #7c3aed;
    color: #ffffff;
    border-color: #7c3aed;
    box-shadow: 0 4px 16px -4px rgba(124, 58, 237, 0.40);
}
html:not(.dark) .ch136-btn-register:hover {
    background: #6d28d9;
    border-color: #6d28d9;
}

/* Disabled state used on the chat send button when !user */
.ch136-btn-disabled {
    opacity: 0.45;
    filter: saturate(0.6);
}

/* ── Glassmorphism Auth Prompt Panel ─────────────────────────────────── */
.ch136-auth-prompt-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(2, 2, 6, 0.72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ch136-auth-prompt-overlay.ch136-visible { opacity: 1; }

.ch136-auth-prompt-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    padding: 2.25rem 1.75rem 1.75rem;
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 20% 0%, rgba(0, 255, 255, 0.08) 0%, transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(138, 43, 226, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, rgba(8, 8, 18, 0.85) 0%, rgba(2, 2, 8, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 30px 80px -20px rgba(0, 0, 0, 0.85),
        0 0 60px -10px rgba(138, 43, 226, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    text-align: center;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}
.ch136-auth-prompt-overlay.ch136-visible .ch136-auth-prompt-card {
    transform: translateY(0) scale(1);
}

@media (min-width: 768px) {
    .ch136-auth-prompt-card { padding: 2.75rem 2.25rem 2rem; }
}

.ch136-auth-prompt-close {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 9999px;
    transition: color 0.25s ease, background 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ch136-auth-prompt-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}
.ch136-auth-prompt-close svg { width: 18px; height: 18px; }

.ch136-auth-prompt-orb {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(0, 255, 255, 0.85) 0%, rgba(138, 43, 226, 0.55) 50%, transparent 75%);
    box-shadow:
        0 0 24px rgba(0, 255, 255, 0.45),
        0 0 48px rgba(138, 43, 226, 0.35),
        inset 0 0 12px rgba(255, 255, 255, 0.20);
    animation: ch136OrbPulse 2.8s ease-in-out infinite;
}
@keyframes ch136OrbPulse {
    0%, 100% { transform: scale(1);   filter: brightness(1); }
    50%      { transform: scale(1.05); filter: brightness(1.15); }
}

.ch136-auth-prompt-title {
    font-family: 'Outfit', 'Inter', 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #ffffff;
    margin: 0 0 0.6rem;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.10);
}
@media (min-width: 768px) {
    .ch136-auth-prompt-title { font-size: 1.55rem; }
}

.ch136-auth-prompt-message {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 1.5rem;
    letter-spacing: 0.02em;
}

.ch136-auth-prompt-actions {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 1rem;
}
@media (min-width: 480px) {
    .ch136-auth-prompt-actions { flex-direction: row; justify-content: center; }
}
.ch136-auth-prompt-actions .ch136-btn {
    flex: 1;
    padding: 0.85rem 1.4rem;
    font-size: 11px;
    aspect-ratio: auto;
    width: auto;
    height: auto;
}
.ch136-auth-prompt-actions .ch136-btn .ch136-btn-label { display: inline; }
.ch136-auth-prompt-actions .ch136-btn .ch136-btn-icon  { width: 16px; height: 16px; }

.ch136-auth-prompt-footnote {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.08em;
    margin: 0.5rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .ch136-auth-prompt-overlay,
    .ch136-auth-prompt-card { transition: none; }
    .ch136-auth-prompt-orb  { animation: none; }
}

/* =========================================================================
   CH-155 — Mobile UX hardening (iPhone 12 mini y similares)
   ========================================================================= */

/* CH-155 Subtarea 1: anti-zoom en inputs.
   Why: Safari/iOS hace zoom forzado cuando un input tiene font-size < 16px
   y el zoom no se revierte solo. Forzamos 16px por debajo de 768px y dejamos
   que el diseño visual lo "achique" con transform: scale() cuando aplique. */
@media screen and (max-width: 768px) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
  /* Excepción: el input de búsqueda del switcher debe verse compacto.
     Mantenemos 16px reales y reducimos visualmente con scale para no
     romper la regla anti-zoom. */
  #switcher-search-input {
    transform-origin: left center;
    transform: scale(0.75);
    width: 133.34% !important; /* compensa el scale para mantener ancho efectivo */
  }
}

/* CH-155 Subtarea 3: sidebar de conciencias en pantallas muy estrechas (< 380px).
   Why: el iPhone 12 mini (375px) muestra el panel apretado con p-4 y gap-3.
   Reducimos paddings y separación sin afectar md:p-6 (desktop intacto). */
@media (max-width: 380px) {
  #switcher-panel {
    width: 92vw;
  }
  #switcher-panel > div:first-child { /* header */
    padding-left: 0.75rem;  /* 12px */
    padding-right: 0.75rem;
    padding-top: 1.25rem;
    padding-bottom: 1rem;
    gap: 0.25rem;
  }
  #book-switcher-list {
    padding: 0.5rem !important; /* 8px — sustituye p-4 sólo en xs */
    gap: 0.5rem !important;     /* 8px — sustituye gap-3 sólo en xs */
  }
  #switcher-panel .book-switcher-item,
  #book-switcher-list > * {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  #switcher-panel > div:last-child { /* footer */
    padding: 1rem 0.75rem;
  }
}