/* ==============================================
   PLANTILLAS VISUALES — Perfil Público Premium
   Solo afectan a profile.php mediante data-profile-theme.
   No interfieren con el sistema light/dark del resto del sitio.
   ============================================== */

/* ============================================
   FOREST — Verde profundo, botones pill
   ============================================ */
html[data-profile-theme="forest"] {
    --bg-primary:     #1e2a1e;
    --bg-secondary:   #162216;
    --bg-accent:      #243024;
    --bg-tertiary:    rgba(255,255,255,0.06);
    --bg-hover:       rgba(74,124,89,0.2);
    --text-primary:   #f0f5f0;
    --text-secondary: #a0c4a0;
    --text-muted:     #6b926b;
    --border-subtle:  rgba(255,255,255,0.08);
    --border-primary: rgba(255,255,255,0.12);
    --brand-primary:  #4a7c59;
    --brand-secondary:#2d5a3d;
    --shadow-xs:      0 1px 2px rgba(0,0,0,0.4);
    --shadow-sm:      0 2px 8px rgba(0,0,0,0.4);
    --shadow-md:      0 4px 16px rgba(0,0,0,0.5);
    --shadow-lg:      0 8px 32px rgba(0,0,0,0.5);
}

html[data-profile-theme="forest"] body {
    background: #162216;
}

html[data-profile-theme="forest"] .profile-hero {
    background: linear-gradient(160deg, #2d3b2b 0%, #1a2818 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

html[data-profile-theme="forest"] .profile-name {
    color: #f0f5f0;
}

html[data-profile-theme="forest"] .profile-description {
    color: #a0c4a0;
}

html[data-profile-theme="forest"] .profile-avatar-large {
    border-color: rgba(74,124,89,0.6);
}

html[data-profile-theme="forest"] .social-accounts,
html[data-profile-theme="forest"] .personal-links,
html[data-profile-theme="forest"] .profile-actions {
    background: #162216;
}

html[data-profile-theme="forest"] .account-item {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 9999px;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

html[data-profile-theme="forest"] .account-item:hover {
    background: rgba(74,124,89,0.25);
    border-color: rgba(74,124,89,0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

html[data-profile-theme="forest"] .account-icon {
    border-radius: 9999px;
}

html[data-profile-theme="forest"] .account-username {
    color: #f0f5f0;
}

html[data-profile-theme="forest"] .platform-name,
html[data-profile-theme="forest"] .followers-count {
    color: #6b926b;
}

html[data-profile-theme="forest"] .interest-pill {
    background: rgba(74,124,89,0.2);
    border-color: rgba(74,124,89,0.3);
    color: #a0c4a0;
}

html[data-profile-theme="forest"] .claim-card {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
}

/* ============================================
   SAND — Arena cálida, tonos tierra
   ============================================ */
html[data-profile-theme="sand"] {
    --bg-primary:     #fdf6ec;
    --bg-secondary:   #f5ead8;
    --bg-accent:      #ede0cc;
    --bg-tertiary:    rgba(196,149,106,0.1);
    --bg-hover:       rgba(196,149,106,0.15);
    --text-primary:   #2c1a0e;
    --text-secondary: #7a4f2e;
    --text-muted:     #a87850;
    --border-subtle:  rgba(196,149,106,0.25);
    --border-primary: rgba(196,149,106,0.4);
    --brand-primary:  #c4956a;
    --brand-secondary:#a87850;
    --shadow-xs:      0 1px 3px rgba(100,60,20,0.12);
    --shadow-sm:      0 2px 8px rgba(100,60,20,0.15);
    --shadow-md:      0 4px 16px rgba(100,60,20,0.18);
    --shadow-lg:      0 8px 32px rgba(100,60,20,0.2);
}

html[data-profile-theme="sand"] body {
    background: #f0e3cc;
}

html[data-profile-theme="sand"] .profile-hero {
    background: linear-gradient(160deg, #f5ead8 0%, #e8d5b8 100%);
    border-bottom: 1px solid rgba(196,149,106,0.3);
}

html[data-profile-theme="sand"] .profile-name {
    color: #2c1a0e;
}

html[data-profile-theme="sand"] .profile-description {
    color: #7a4f2e;
}

html[data-profile-theme="sand"] .profile-avatar-large {
    border-color: rgba(196,149,106,0.5);
}

html[data-profile-theme="sand"] .social-accounts,
html[data-profile-theme="sand"] .personal-links,
html[data-profile-theme="sand"] .profile-actions {
    background: #fdf6ec;
}

html[data-profile-theme="sand"] .account-item {
    background: #fff8f0;
    border: 1px solid rgba(196,149,106,0.3);
    border-radius: var(--radius-xl);
    box-shadow: 0 2px 6px rgba(100,60,20,0.08);
}

html[data-profile-theme="sand"] .account-item:hover {
    background: #fff3e5;
    border-color: #c4956a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(100,60,20,0.15);
}

html[data-profile-theme="sand"] .account-username {
    color: #2c1a0e;
}

html[data-profile-theme="sand"] .platform-name,
html[data-profile-theme="sand"] .followers-count {
    color: #a87850;
}

html[data-profile-theme="sand"] .interest-pill {
    background: rgba(196,149,106,0.12);
    border-color: rgba(196,149,106,0.25);
    color: #7a4f2e;
}

html[data-profile-theme="sand"] .claim-card {
    background: #fff8f0;
    border-color: rgba(196,149,106,0.3);
}

/* ============================================
   MIDNIGHT — Azul marino, glass morphism
   ============================================ */
html[data-profile-theme="midnight"] {
    --bg-primary:     #0d1526;
    --bg-secondary:   #091020;
    --bg-accent:      #111e38;
    --bg-tertiary:    rgba(30,58,95,0.4);
    --bg-hover:       rgba(56,100,162,0.25);
    --text-primary:   #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted:     #5a7a9e;
    --border-subtle:  rgba(255,255,255,0.07);
    --border-primary: rgba(255,255,255,0.12);
    --brand-primary:  #3b82f6;
    --brand-secondary:#2563eb;
    --shadow-xs:      0 1px 2px rgba(0,0,0,0.5);
    --shadow-sm:      0 2px 8px rgba(0,0,0,0.5);
    --shadow-md:      0 4px 16px rgba(0,0,0,0.6);
    --shadow-lg:      0 8px 32px rgba(0,0,0,0.6);
}

html[data-profile-theme="midnight"] body {
    background: #060c18;
}

html[data-profile-theme="midnight"] .profile-hero {
    background: linear-gradient(160deg, #0f1e3a 0%, #060c18 100%);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

html[data-profile-theme="midnight"] .profile-name {
    color: #e2e8f0;
}

html[data-profile-theme="midnight"] .profile-description {
    color: #94a3b8;
}

html[data-profile-theme="midnight"] .profile-avatar-large {
    border-color: rgba(59,130,246,0.5);
}

html[data-profile-theme="midnight"] .social-accounts,
html[data-profile-theme="midnight"] .personal-links,
html[data-profile-theme="midnight"] .profile-actions {
    background: #091020;
}

html[data-profile-theme="midnight"] .account-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 16px rgba(0,0,0,0.4);
}

html[data-profile-theme="midnight"] .account-item:hover {
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.35);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.5);
}

html[data-profile-theme="midnight"] .account-username {
    color: #e2e8f0;
}

html[data-profile-theme="midnight"] .platform-name,
html[data-profile-theme="midnight"] .followers-count {
    color: #5a7a9e;
}

html[data-profile-theme="midnight"] .interest-pill {
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.2);
    color: #94a3b8;
}

html[data-profile-theme="midnight"] .claim-card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}

/* ============================================
   AURORA — Oscuro con gradiente púrpura
   ============================================ */
html[data-profile-theme="aurora"] {
    --bg-primary:     #140b26;
    --bg-secondary:   #0f0820;
    --bg-accent:      #1e1038;
    --bg-tertiary:    rgba(124,58,237,0.1);
    --bg-hover:       rgba(124,58,237,0.2);
    --text-primary:   #f3e8ff;
    --text-secondary: #c4b5d4;
    --text-muted:     #8b6aaa;
    --border-subtle:  rgba(255,255,255,0.07);
    --border-primary: rgba(196,117,255,0.2);
    --brand-primary:  #a855f7;
    --brand-secondary:#7c3aed;
    --shadow-xs:      0 1px 2px rgba(0,0,0,0.5);
    --shadow-sm:      0 2px 8px rgba(0,0,0,0.5);
    --shadow-md:      0 4px 16px rgba(80,0,120,0.4);
    --shadow-lg:      0 8px 32px rgba(80,0,120,0.5);
}

html[data-profile-theme="aurora"] body {
    background: #0a0518;
}

html[data-profile-theme="aurora"] .profile-hero {
    background: linear-gradient(160deg, #2a0a4e 0%, #1a0b38 40%, #0a0518 100%);
    border-bottom: 1px solid rgba(168,85,247,0.15);
}

html[data-profile-theme="aurora"] .profile-name {
    color: #f3e8ff;
}

html[data-profile-theme="aurora"] .profile-description {
    color: #c4b5d4;
}

html[data-profile-theme="aurora"] .profile-avatar-large {
    border-color: rgba(168,85,247,0.5);
    box-shadow: 0 0 20px rgba(168,85,247,0.3), var(--shadow-lg);
}

html[data-profile-theme="aurora"] .social-accounts,
html[data-profile-theme="aurora"] .personal-links,
html[data-profile-theme="aurora"] .profile-actions {
    background: #0f0820;
}

html[data-profile-theme="aurora"] .account-item {
    background: rgba(168,85,247,0.06);
    border: 1px solid rgba(168,85,247,0.15);
    border-radius: 9999px;
    backdrop-filter: blur(8px);
}

html[data-profile-theme="aurora"] .account-item:hover {
    background: rgba(168,85,247,0.18);
    border-color: rgba(168,85,247,0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124,58,237,0.3);
}

html[data-profile-theme="aurora"] .account-icon {
    border-radius: 9999px;
}

html[data-profile-theme="aurora"] .account-username {
    color: #f3e8ff;
}

html[data-profile-theme="aurora"] .platform-name,
html[data-profile-theme="aurora"] .followers-count {
    color: #8b6aaa;
}

html[data-profile-theme="aurora"] .interest-pill {
    background: rgba(168,85,247,0.1);
    border-color: rgba(168,85,247,0.2);
    color: #c4b5d4;
}

html[data-profile-theme="aurora"] .claim-card {
    background: rgba(168,85,247,0.04);
    border-color: rgba(168,85,247,0.12);
}

/* ============================================
   NEON — Negro puro, acentos brillantes
   ============================================ */
html[data-profile-theme="neon"] {
    --bg-primary:     #080808;
    --bg-secondary:   #050505;
    --bg-accent:      #0d0d0d;
    --bg-tertiary:    rgba(0,229,255,0.05);
    --bg-hover:       rgba(0,255,159,0.08);
    --text-primary:   #f0fffe;
    --text-secondary: #7eccc8;
    --text-muted:     #3a7a78;
    --border-subtle:  rgba(0,229,255,0.1);
    --border-primary: rgba(0,229,255,0.2);
    --brand-primary:  #00ff9f;
    --brand-secondary:#00e5ff;
    --shadow-xs:      0 1px 3px rgba(0,0,0,0.8);
    --shadow-sm:      0 2px 8px rgba(0,0,0,0.8);
    --shadow-md:      0 4px 16px rgba(0,0,0,0.9);
    --shadow-lg:      0 8px 32px rgba(0,0,0,0.9);
}

html[data-profile-theme="neon"] body {
    background: #030303;
}

html[data-profile-theme="neon"] .profile-hero {
    background: linear-gradient(160deg, #0a1a18 0%, #050f0d 100%);
    border-bottom: 1px solid rgba(0,229,255,0.1);
}

html[data-profile-theme="neon"] .profile-name {
    color: #f0fffe;
    text-shadow: 0 0 20px rgba(0,255,159,0.3);
}

html[data-profile-theme="neon"] .profile-description {
    color: #7eccc8;
}

html[data-profile-theme="neon"] .profile-avatar-large {
    border-color: rgba(0,255,159,0.5);
    box-shadow: 0 0 16px rgba(0,255,159,0.25), var(--shadow-lg);
}

html[data-profile-theme="neon"] .social-accounts,
html[data-profile-theme="neon"] .personal-links,
html[data-profile-theme="neon"] .profile-actions {
    background: #050505;
}

html[data-profile-theme="neon"] .account-item {
    background: rgba(0,229,255,0.03);
    border: 1px solid rgba(0,229,255,0.12);
    border-radius: var(--radius-xl);
}

html[data-profile-theme="neon"] .account-item:hover {
    background: rgba(0,255,159,0.07);
    border-color: rgba(0,255,159,0.35);
    transform: translateY(-2px);
    box-shadow: 0 0 16px rgba(0,255,159,0.15), 0 8px 24px rgba(0,0,0,0.8);
}

html[data-profile-theme="neon"] .account-username {
    color: #f0fffe;
}

html[data-profile-theme="neon"] .platform-name,
html[data-profile-theme="neon"] .followers-count {
    color: #3a7a78;
}

html[data-profile-theme="neon"] .interest-pill {
    background: rgba(0,229,255,0.05);
    border-color: rgba(0,229,255,0.15);
    color: #7eccc8;
}

html[data-profile-theme="neon"] .claim-card {
    background: rgba(0,229,255,0.02);
    border-color: rgba(0,229,255,0.1);
}