/**
 * PATH: static/css/themes-klktoki.css
 * FUNCIONES: Theme oficial KLKTOKI — paleta vista previa mensajes (morado oscuro + rosa/magenta).
 * CONECTA CON: themes.css variables, layout_futuristic.html, settings.html, messages_futuristic.css.
 * LLAMADO POR: layout_futuristic.html (link stylesheet).
 */

/* ── Variables (themes.css contract) ── */
body.theme-klktoki {
  --bg-primary:       #0d0214;
  --bg-secondary:     #1a0a2e;
  --bg-tertiary:      #2d0a3a;
  --text-primary:     #f1f5f9;
  --text-secondary:   #94a3b8;
  --text-muted:       #64748b;
  --accent:           #ff2d78;
  --accent-secondary: #6366f1;
  --border:           rgba(255, 45, 120, 0.28);
  --text-on-accent:   #ffffff;
  --glow-accent:      rgba(255, 45, 120, 0.35);
}

body.theme-klktoki {
  background-color: #0d0214 !important;
  background-image:
    radial-gradient(ellipse at 20% 15%, rgba(255, 45, 120, 0.09) 0%, transparent 48%),
    radial-gradient(ellipse at 85% 80%, rgba(99, 102, 241, 0.07) 0%, transparent 45%) !important;
  color: #f1f5f9 !important;
}

/* ── Layout futurista (futuristic.css tokens) ── */
body.theme-klktoki {
  --primary: #ff2d78;
  --primary-dark: #db2777;
  --primary-light: #f472b6;
  --secondary: #6366f1;
  --primary-contrast: #ffffff;
  --primary-gradient: linear-gradient(135deg, #ff2d78 0%, #ec4899 50%, #6366f1 100%);
  --secondary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  --accent-gradient: linear-gradient(135deg, #ff2d78 0%, #be185d 100%);
  --bg-dark: #0d0214;
  --bg-darker: #08010f;
  --bg-card: rgba(12, 8, 22, 0.82);
  --bg-card-hover: rgba(255, 45, 120, 0.08);
  --glass-bg: rgba(255, 45, 120, 0.06);
  --glass-bg-solid: rgba(26, 10, 46, 0.92);
  --glass-border: rgba(255, 45, 120, 0.22);
  --glass-border-bright: rgba(255, 45, 120, 0.4);
  --glass-shadow: 0 8px 32px rgba(255, 45, 120, 0.12);
  --bg-gradient: linear-gradient(180deg, #0d0214 0%, #1a0a2e 40%, #0d0214 100%);
  --bg-mesh:
    radial-gradient(ellipse at 0% 0%, rgba(255, 45, 120, 0.14) 0px, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(99, 102, 241, 0.12) 0px, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(236, 72, 153, 0.08) 0px, transparent 50%);
  --glow-purple: 0 0 24px rgba(255, 45, 120, 0.35);
}

/* ── Header / sidebar / cards ── */
body.theme-klktoki .header {
  background: rgba(10, 10, 30, 0.92) !important;
  border-bottom: 1px solid rgba(255, 45, 120, 0.25) !important;
  box-shadow: 0 4px 30px rgba(255, 45, 120, 0.08) !important;
}

body.theme-klktoki .left-sidebar,
body.theme-klktoki .right-sidebar {
  background-color: rgba(26, 10, 46, 0.75) !important;
}

body.theme-klktoki .glass-card,
body.theme-klktoki .post-card,
body.theme-klktoki .create-post-card,
body.theme-klktoki .settings-section,
body.theme-klktoki .modal-content {
  background: rgba(12, 8, 22, 0.85) !important;
  border-color: rgba(255, 45, 120, 0.2) !important;
  color: #f1f5f9 !important;
}

body.theme-klktoki .sidebar-item.active,
body.theme-klktoki .header-nav-link.active {
  background: linear-gradient(135deg, #ff2d78 0%, #6366f1 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 0 20px rgba(255, 45, 120, 0.3) !important;
}

body.theme-klktoki .sidebar-item:hover {
  background: rgba(255, 45, 120, 0.1) !important;
  border-color: rgba(255, 45, 120, 0.35) !important;
}

body.theme-klktoki .btn-primary,
body.theme-klktoki .btn.btn-primary,
body.theme-klktoki a.btn.primary,
body.theme-klktoki button.btn.primary {
  background: linear-gradient(135deg, #ff2d78, #ec4899) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(255, 45, 120, 0.35) !important;
}

body.theme-klktoki .header-search-compact input,
body.theme-klktoki .header-search-input,
body.theme-klktoki .form-input,
body.theme-klktoki input:not([type="checkbox"]):not([type="radio"]),
body.theme-klktoki textarea,
body.theme-klktoki select {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 45, 120, 0.2) !important;
  color: #f1f5f9 !important;
}

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

body.theme-klktoki .badge {
  background: linear-gradient(90deg, #ff2d78, #ec4899) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.theme-klktoki .mobile-nav {
  background: rgba(26, 10, 46, 0.98) !important;
  border-top: 1px solid rgba(255, 45, 120, 0.25) !important;
}

/* Mensajes hub: acento alineado */
body.theme-klktoki .msg-hub {
  --msg-accent: #ff2d78;
  --msg-border: rgba(255, 45, 120, 0.28);
}

body.theme-klktoki.page-messages-hub .msg-hub {
  box-shadow: 0 0 40px rgba(255, 45, 120, 0.15);
}

/* Marca: gradiente texto según theme KLKTOKI */
body.theme-klktoki .klktoki-brand__text {
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 55%, #ff2d78 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.theme-klktoki .klktoki-brand__mark {
  box-shadow: 0 4px 18px rgba(255, 45, 120, 0.35);
}

/* Settings: tarjeta del theme picker */
body.theme-klktoki .theme-option.selected {
  border-color: #ff2d78 !important;
  box-shadow: 0 0 0 2px rgba(255, 45, 120, 0.35) !important;
}