/**
 * PATH: static/css/themes-reading-library.css
 * FUNCIONES: Tema Biblioteca de Lectura — dark cyber, neón verde/cyan (portal lectura).
 * CONECTA CON: themes.css variables, layout_futuristic.html, settings.html.
 * LLAMADO POR: layout_futuristic.html (link stylesheet).
 */

body.theme-reading-library {
  --bg-primary:       #0b0e14;
  --bg-secondary:     #0f0a18;
  --bg-tertiary:      #14101f;
  --text-primary:     #f8fafc;
  --text-secondary:   #94a3b8;
  --text-muted:       #64748b;
  --accent:           #00ff9d;
  --accent-secondary: #22d3ee;
  --border:           rgba(52, 211, 153, 0.28);
  --text-on-accent:   #FFFFFF;
  --glow-accent:      rgba(0, 255, 157, 0.35);
}

body.theme-reading-library {
  background-color: #0b0e14 !important;
  background-image:
    radial-gradient(ellipse 70% 45% at 30% -5%, rgba(52, 211, 153, 0.12), transparent 55%),
    radial-gradient(ellipse 50% 35% at 90% 20%, rgba(124, 58, 237, 0.12), transparent 50%),
    radial-gradient(ellipse 40% 30% at 5% 70%, rgba(34, 211, 238, 0.06), transparent 45%) !important;
  color: #f8fafc !important;
}

body.theme-reading-library {
  --primary: #00ff9d;
  --primary-dark: #059669;
  --primary-light: #6ee7b7;
  --secondary: #6366f1;
  --primary-contrast: #FFFFFF;
  --primary-gradient: linear-gradient(135deg, #00ff9d 0%, #34d399 45%, #22d3ee 100%);
  --secondary-gradient: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
  --accent-gradient: linear-gradient(135deg, #00ff9d 0%, #059669 100%);
  --bg-dark: #0b0e14;
  --bg-darker: #05030a;
  --bg-card: rgba(15, 10, 24, 0.88);
  --bg-card-hover: rgba(0, 255, 157, 0.06);
  --glass-bg: rgba(52, 211, 153, 0.05);
  --glass-bg-solid: rgba(15, 10, 24, 0.94);
  --glass-border: rgba(52, 211, 153, 0.22);
  --glass-border-bright: rgba(0, 255, 157, 0.42);
  --glass-shadow: 0 8px 32px rgba(0, 255, 157, 0.1);
  --bg-gradient: linear-gradient(180deg, #0b0e14 0%, #14101f 42%, #0b0e14 100%);
  --bg-mesh:
    radial-gradient(ellipse at 0% 0%, rgba(52, 211, 153, 0.14) 0px, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(99, 102, 241, 0.1) 0px, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(34, 211, 238, 0.08) 0px, transparent 50%);
  --glow-purple: 0 0 24px rgba(0, 255, 157, 0.28);
}

body.theme-reading-library .header {
  background: rgba(11, 14, 20, 0.94) !important;
  border-bottom: 1px solid rgba(52, 211, 153, 0.28) !important;
  box-shadow: 0 4px 24px rgba(0, 255, 157, 0.08) !important;
}

body.theme-reading-library .left-sidebar,
body.theme-reading-library .right-sidebar {
  background-color: rgba(15, 10, 24, 0.82) !important;
  border-color: rgba(52, 211, 153, 0.18) !important;
}

body.theme-reading-library .glass-card,
body.theme-reading-library .post-card,
body.theme-reading-library .create-post-card,
body.theme-reading-library .settings-section,
body.theme-reading-library .modal-content {
  background: rgba(15, 10, 24, 0.9) !important;
  border: 1px solid rgba(52, 211, 153, 0.2) !important;
  color: #f8fafc !important;
  box-shadow: 0 0 15px rgba(0, 255, 157, 0.06);
}

body.theme-reading-library .sidebar-item.active,
body.theme-reading-library .header-nav-link.active {
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.22), rgba(99, 102, 241, 0.08)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid rgba(0, 255, 157, 0.45) !important;
  box-shadow: 0 0 18px rgba(0, 255, 157, 0.22) !important;
}

body.theme-reading-library .sidebar-item:hover,
body.theme-reading-library .header-nav-link:hover {
  background: rgba(52, 211, 153, 0.08) !important;
  border-color: rgba(0, 255, 157, 0.35) !important;
  color: #a7f3d0 !important;
}

body.theme-reading-library .btn-primary,
body.theme-reading-library .btn.btn-primary,
body.theme-reading-library a.btn.primary,
body.theme-reading-library a.btn-primary,
body.theme-reading-library button.btn.primary,
body.theme-reading-library .conf-btn--primary,
body.theme-reading-library a.conf-btn--primary {
  background: linear-gradient(135deg, #00ff9d, #34d399) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: 1px solid rgba(0, 255, 157, 0.55) !important;
  box-shadow: 0 4px 18px rgba(0, 255, 157, 0.28) !important;
}

body.theme-reading-library .btn-primary:hover,
body.theme-reading-library .btn.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 22px rgba(0, 255, 157, 0.38) !important;
}

body.theme-reading-library .settings-page > a.settings-back-link.btn-primary,
body.theme-reading-library .settings-page > a.settings-back-link.btn.btn-primary {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

body.theme-reading-library .btn-secondary,
body.theme-reading-library a.btn-secondary {
  background: transparent !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
  color: #a7f3d0 !important;
  -webkit-text-fill-color: #a7f3d0 !important;
}

body.theme-reading-library .header-search-compact input,
body.theme-reading-library .header-search-input,
body.theme-reading-library .form-input,
body.theme-reading-library input:not([type="checkbox"]):not([type="radio"]),
body.theme-reading-library textarea,
body.theme-reading-library select {
  background: rgba(5, 3, 10, 0.65) !important;
  border-color: rgba(52, 211, 153, 0.22) !important;
  color: #f8fafc !important;
}

body.theme-reading-library input::placeholder,
body.theme-reading-library textarea::placeholder {
  color: #64748b !important;
}

body.theme-reading-library .badge {
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.35), rgba(34, 211, 238, 0.2)) !important;
  color: #ecfdf5 !important;
  border: 1px solid rgba(0, 255, 157, 0.35) !important;
}

body.theme-reading-library .mobile-nav {
  background: rgba(15, 10, 24, 0.98) !important;
  border-top: 1px solid rgba(52, 211, 153, 0.25) !important;
}

body.theme-reading-library .msg-hub {
  --msg-accent: #00ff9d;
  --msg-border: rgba(52, 211, 153, 0.28);
}

body.theme-reading-library .klktoki-brand__text {
  background: linear-gradient(90deg, #00ff9d 0%, #22d3ee 55%, #6366f1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.theme-reading-library .klktoki-brand__mark {
  box-shadow: 0 4px 18px rgba(0, 255, 157, 0.28);
}

body.theme-reading-library .theme-option.selected {
  border-color: #00ff9d !important;
  box-shadow: 0 0 0 2px rgba(0, 255, 157, 0.35) !important;
}

body.theme-reading-library .header-theme-opt.selected {
  border-color: rgba(0, 255, 157, 0.55) !important;
  background: rgba(52, 211, 153, 0.12) !important;
}