:root {
    --primary: #FFD700;
    --color-principal: #FFD700;

    --bg-main: #0b0f18;
    --bg-main-2: #111827;
    --bg-card: rgba(15, 23, 42, 0.94);
    --bg-card-soft: rgba(17, 24, 39, .45);

    --text-main: #f8fafc;
    --text-muted: #cbd5e1;
    --text-soft: #94a3b8;

    --border-main: rgba(255,255,255,.08);
    --input-bg: rgba(15,23,42,.85);
}

/* MODO OSCURO */
body.theme-dark {
    --bg-main: #0b0f18;
    --bg-main-2: #111827;
    --bg-card: rgba(15, 23, 42, 0.94);
    --bg-card-soft: rgba(17, 24, 39, .45);

    --text-main: #f8fafc;
    --text-muted: #cbd5e1;
    --text-soft: #94a3b8;

    --border-main: rgba(255,255,255,.08);
    --input-bg: rgba(15,23,42,.85);
}

/* MODO CLARO */
body.theme-light {
    --bg-main: #f3f4f6;
    --bg-main-2: #e5e7eb;
    --bg-card: rgba(255,255,255,.96);
    --bg-card-soft: rgba(249,250,251,.95);

    --text-main: #111827;
    --text-muted: #374151;
    --text-soft: #6b7280;

    --border-main: rgba(17,24,39,.12);
    --input-bg: #ffffff;
}

/* FONDO GENERAL */
body.theme-dark,
body.theme-light {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 14%, transparent), transparent 34%),
        linear-gradient(180deg, var(--bg-main) 0%, var(--bg-main-2) 100%) !important;
    color: var(--text-main) !important;
}

/* CAJAS */
body.theme-dark .profile-hero,
body.theme-dark .profile-card,
body.theme-dark .action-box,
body.theme-dark .membership-box,
body.theme-dark .placa-panel,
body.theme-dark .ascenso-box,
body.theme-light .profile-hero,
body.theme-light .profile-card,
body.theme-light .action-box,
body.theme-light .membership-box,
body.theme-light .placa-panel,
body.theme-light .ascenso-box {
    background: var(--bg-card) !important;
    border-color: var(--border-main) !important;
    color: var(--text-main) !important;
}

/* TEXTOS */
body.theme-dark .profile-name,
body.theme-dark .action-title,
body.theme-dark .membership-name,
body.theme-dark .topbar h1,
body.theme-light .profile-name,
body.theme-light .action-title,
body.theme-light .membership-name,
body.theme-light .topbar h1 {
    color: var(--text-main) !important;
}

body.theme-dark .profile-mision,
body.theme-dark .action-desc,
body.theme-dark .profile-card-header p,
body.theme-dark .membership-meta,
body.theme-dark .ascenso-meta,
body.theme-light .profile-mision,
body.theme-light .action-desc,
body.theme-light .profile-card-header p,
body.theme-light .membership-meta,
body.theme-light .ascenso-meta {
    color: var(--text-muted) !important;
}

body.theme-dark .ascenso-label,
body.theme-dark .placa-label,
body.theme-dark .theme-field span,
body.theme-light .ascenso-label,
body.theme-light .placa-label,
body.theme-light .theme-field span {
    color: var(--text-soft) !important;
}

/* COLOR PRINCIPAL */
body.theme-dark .profile-card-header h2,
body.theme-dark .ascenso-timer,
body.theme-light .profile-card-header h2,
body.theme-light .ascenso-timer {
    color: var(--primary) !important;
}

body.theme-dark .action-btn,
body.theme-light .action-btn {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text, #111827) !important;
}

/* FORMULARIO PERSONALIZACIÓN */
body.theme-dark .theme-field select,
body.theme-dark .theme-field input[type="color"],
body.theme-light .theme-field select,
body.theme-light .theme-field input[type="color"] {
    background: var(--input-bg) !important;
    border-color: var(--border-main) !important;
    color: var(--text-main) !important;
}

/* AVATAR */
body.theme-dark .profile-avatar,
body.theme-light .profile-avatar {
    border-color: var(--primary) !important;
}

/* CABECERAS INTERNAS */
body.theme-dark .profile-card-header,
body.theme-light .profile-card-header {
    background: var(--bg-card-soft) !important;
    border-bottom-color: var(--border-main) !important;
}


body.theme-dark th {
    color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

body.theme-dark .filters button,
body.theme-dark .page-link.active,
body.theme-dark .profile-btn {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text, #111827) !important;
}

body.theme-dark .card-title,
body.theme-dark .modal-header h3 {
    color: var(--primary) !important;
}

body.theme-dark .filters input:focus,
body.theme-dark .filters select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}

body.theme-dark .page-link:hover,
body.theme-dark .motivo-toggle:hover {
    border-color: var(--primary) !important;
}

body.theme-dark .clones-hero,
body.theme-dark .clone-card,
body.theme-dark .clone-stat-card {
    border-color: rgba(255,255,255,.08) !important;
}

body.theme-dark .clones-hero {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), rgba(11,17,32,0.75)),
        linear-gradient(180deg, rgba(22,27,38,0.95), rgba(12,16,24,0.95)) !important;
}

body.theme-dark .clone-stat-card::before {
    background: linear-gradient(90deg, var(--primary), rgba(112,188,255,0.55)) !important;
}

body.theme-dark .clone-btn,
body.theme-dark .mini-btn,
body.theme-dark .perfil-btn {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text, #111827) !important;
}

body.theme-dark .clone-table thead th {
    color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

body.theme-dark .clone-field input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}

body.theme-dark .detail-highlight {
    background: color-mix(in srgb, var(--primary) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--primary) 24%, transparent) !important;
    color: #f8fafc !important;
}


body.theme-dark .perfil-btn,
body.theme-dark .card-badge,
body.theme-dark .news-read-btn {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text, #111827) !important;
}

body.theme-dark .card-admin-slider-header {
    background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

body.theme-dark .card-admin-slider-header h2,
body.theme-dark .admin-member-rango,
body.theme-dark .card-chart .card-badge {
    color: var(--primary) !important;
}

body.theme-dark .rank-chart-bar-fill {
    background: linear-gradient(90deg, #2563eb, var(--primary)) !important;
}

body.theme-dark .submit-btn,
body.theme-dark .perfil-btn {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text, #111827) !important;
}

body.theme-dark .submit-btn:hover,
body.theme-dark .perfil-btn:hover {
    filter: brightness(1.06) !important;
}

body.theme-dark .search-input:focus,
body.theme-dark .form-select:focus,
body.theme-dark .form-textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent) !important;
}

body.theme-dark .autocomplete-item:hover,
body.theme-dark .autocomplete-item.active {
    background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

body.theme-dark .card-title {
    color: var(--primary) !important;
}

body.theme-dark .search-btn,
body.theme-dark .action-link,
body.theme-dark .perfil-btn {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text, #111827) !important;
}

body.theme-dark th {
    color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

body.theme-dark .search-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}

body.theme-dark .card-title {
    color: var(--primary) !important;
}

body.theme-dark .top-btn:hover,
body.theme-dark .module-btn.primary,
body.theme-dark .admin-hero h1 {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text, #111827) !important;
}

body.theme-dark .module-btn.primary:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    filter: brightness(1.06) !important;
}

body.theme-dark .admin-hero h1 {
    background: none !important;
    color: var(--primary) !important;
}

body.theme-dark .module-icon {
    background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--primary) 25%, transparent) !important;
}

body.theme-dark .customize-btn,
body.theme-dark .action-btn,
body.theme-dark .profile-btn,
body.theme-dark .perfil-btn,
body.theme-dark .top-btn:hover,
body.theme-dark .module-btn.primary,
body.theme-dark .search-btn,
body.theme-dark .submit-btn,
body.theme-dark .clone-btn,
body.theme-dark .mini-btn,
body.theme-dark .action-link,
body.theme-dark .news-read-btn,
body.theme-dark .filters button,
body.theme-dark .page-link.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text, #111827) !important;
}

body.theme-dark .customize-modal-header h2,
body.theme-dark .profile-card-header h2,
body.theme-dark .card-title,
body.theme-dark .ascenso-timer,
body.theme-dark .admin-hero h1,
body.theme-dark th,
body.theme-dark .clone-table thead th,
body.theme-dark .card-admin-slider-header h2,
body.theme-dark .admin-member-rango {
    color: var(--primary) !important;
}