/**
 * PATH: static/css/themes-movil.css
 * FUNCIONES: Tema «Móvil» — paridad visual con App_Mobile/feed (feedColors.ts).
 * CONECTA CON: themes.css contract, futuristic.css tokens, settings.html, layout_futuristic.html.
 * LLAMADO POR: layout_futuristic.html (link stylesheet).
 * TOKENS: navy #060A1A, glass cards, acentos cyan #22E8FF / purple #C084FC / yellow #FBBF24.
 */

/* ── Variables (themes.css contract) ── */
body.theme-movil {
  --bg-primary:       #060A1A;
  --bg-secondary:     #0C1433;
  --bg-tertiary:      #151B3D;
  --text-primary:     #FFFFFF;
  --text-secondary:   #D4DCFF;
  --text-muted:       #9BA8D9;
  --accent:           #22E8FF;
  --accent-secondary: #C084FC;
  --border:           rgba(192, 132, 252, 0.58);
  --text-on-accent:   #060A1A;
  --glow-accent:      rgba(192, 132, 252, 0.38);
}

body.theme-movil {
  background-color: #060A1A !important;
  background-image:
    radial-gradient(ellipse at 18% 12%, rgba(192, 132, 252, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 82% 78%, rgba(34, 232, 255, 0.1) 0%, transparent 48%),
    radial-gradient(ellipse at 50% 100%, rgba(56, 189, 248, 0.06) 0%, transparent 55%) !important;
  color: #FFFFFF !important;
}

/* ── Layout futurista (futuristic.css tokens) ── */
body.theme-movil {
  --primary: #22E8FF;
  --primary-dark: #06b6d4;
  --primary-light: #67e8f9;
  --secondary: #C084FC;
  --primary-contrast: #060A1A;
  --primary-gradient: linear-gradient(135deg, #C084FC 0%, #38BDF8 100%);
  --secondary-gradient: linear-gradient(135deg, #C084FC 0%, #22E8FF 100%);
  --accent-gradient: linear-gradient(135deg, #C084FC 0%, #38BDF8 100%);
  --bg-dark: #060A1A;
  --bg-darker: #030712;
  --bg-card: rgba(20, 28, 62, 0.88);
  --bg-card-hover: rgba(34, 232, 255, 0.08);
  --glass-bg: rgba(20, 28, 62, 0.72);
  --glass-bg-solid: rgba(14, 20, 48, 0.94);
  --glass-border: rgba(192, 132, 252, 0.38);
  --glass-border-bright: rgba(34, 232, 255, 0.45);
  --glass-shadow: 0 8px 20px rgba(192, 132, 252, 0.38);
  --bg-gradient: linear-gradient(180deg, #060A1A 0%, #0C1433 45%, #060A1A 100%);
  --bg-mesh:
    radial-gradient(ellipse at 0% 0%, rgba(192, 132, 252, 0.16) 0px, transparent 52%),
    radial-gradient(ellipse at 100% 0%, rgba(34, 232, 255, 0.12) 0px, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(56, 189, 248, 0.08) 0px, transparent 55%);
  --glow-purple: 0 0 24px rgba(192, 132, 252, 0.38);
  --accent-cyan: #22E8FF;
  --accent-purple: #C084FC;
  --accent-pink: #FB7185;
  --accent-yellow: #FBBF24;
}

/* ── Header / sidebar / cards ── */
body.theme-movil .header {
  background: rgba(6, 10, 26, 0.92) !important;
  border-bottom: 1px solid rgba(96, 165, 250, 0.35) !important;
  box-shadow: 0 4px 24px rgba(192, 132, 252, 0.12) !important;
}

body.theme-movil .left-sidebar,
body.theme-movil .right-sidebar {
  background-color: rgba(12, 20, 51, 0.82) !important;
  border-color: rgba(192, 132, 252, 0.28) !important;
}

body.theme-movil .glass-card,
body.theme-movil .post-card,
body.theme-movil .create-post-card,
body.theme-movil .settings-section,
body.theme-movil .modal-content {
  background: rgba(20, 28, 62, 0.88) !important;
  border-color: rgba(192, 132, 252, 0.38) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(192, 132, 252, 0.18) !important;
}

body.theme-movil .sidebar-item.active,
body.theme-movil .header-nav-link.active {
  background: linear-gradient(135deg, #C084FC 0%, #38BDF8 100%) !important;
  color: #060A1A !important;
  -webkit-text-fill-color: #060A1A !important;
  box-shadow: 0 0 20px rgba(34, 232, 255, 0.28) !important;
}

body.theme-movil .sidebar-item:hover {
  background: rgba(34, 232, 255, 0.1) !important;
  border-color: rgba(34, 232, 255, 0.35) !important;
}

body.theme-movil .btn-primary,
body.theme-movil .btn.btn-primary,
body.theme-movil a.btn.primary,
body.theme-movil button.btn.primary {
  background: linear-gradient(135deg, #C084FC 0%, #38BDF8 100%) !important;
  color: #060A1A !important;
  -webkit-text-fill-color: #060A1A !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(192, 132, 252, 0.38) !important;
}

body.theme-movil .header-search-compact input,
body.theme-movil .header-search-input,
body.theme-movil .form-input,
body.theme-movil input:not([type="checkbox"]):not([type="radio"]),
body.theme-movil textarea,
body.theme-movil select {
  background: rgba(14, 20, 48, 0.75) !important;
  border-color: rgba(96, 165, 250, 0.38) !important;
  color: #FFFFFF !important;
}

body.theme-movil input::placeholder,
body.theme-movil textarea::placeholder {
  color: #9BA8D9 !important;
}

body.theme-movil .badge {
  background: rgba(192, 132, 252, 0.22) !important;
  color: #C084FC !important;
  border: 1px solid rgba(192, 132, 252, 0.45) !important;
}

body.theme-movil .klktoki-brand__name,
body.theme-movil .header-logo-text {
  color: #C084FC !important;
  -webkit-text-fill-color: #C084FC !important;
}

body.theme-movil a {
  color: #22E8FF;
}

body.theme-movil a:hover {
  color: #67e8f9;
}

/* Feed: trending badge alineado con chip amarillo móvil */
body.theme-movil .post-trending-badge {
  border-color: rgba(251, 191, 36, 0.55) !important;
  color: #FBBF24 !important;
  background: rgba(251, 191, 36, 0.12) !important;
}

/* Settings: tarjeta de tema seleccionada */
body.theme-movil .theme-option.selected {
  border-color: #22E8FF !important;
  box-shadow: 0 0 0 2px rgba(34, 232, 255, 0.35), 0 8px 20px rgba(192, 132, 252, 0.25) !important;
}