/**
 * Tema Oscuro (Platform Default)
 * Este es el tema predeterminado de la plataforma
 */

:root {
    /* Colores principales */
    --theme-primary-color: #ffffff;
    --theme-secondary-color: #666666;
    --theme-background-color: #000000;
    --theme-background-secondary-color: #D9D9D933;
    --theme-text-color: #FFFFFF;
    --theme-accent-color: #1ED760;

    --theme--button-background-color:#ffcc00;
    --theme--button-color-color:#000;
    
    /* Tipografía */
    --theme-font-family: 'Montserrat', sans-serif;
    --theme-font-size: 16px;
    --theme-border-radius: 8px;

    /* Botones */
    --theme-button-color: #000000;
    --theme-button-background-color: #FFCC00;

    /* Header y Footer */
    --theme-header-bg: #000000;
    --theme-header-text: #ffffff;
    --theme-footer-bg: #000000;
    --theme-footer-border: #ffffff2e;

    /* Cards y contenedores */
    --theme-card-bg: transparent;
    --theme-card-hover-bg: #3d3d3d3d;
    --theme-card-border: transparent;

    /* Links */
    --theme-link-color: #ffffff;
    --theme-link-hover-color: #1ED760;

    /* Inputs */
    --theme-input-bg: #000000;
    --theme-input-text: #ffffff;
    --theme-input-border: #3b3b3b;
    --theme-input-focus-border: #667eea;

    /* Misc */
    --theme-hr-color: #ffffff33;
    --theme-shadow-color: rgba(0, 0, 0, 0.1);
}

/* === ESTILOS BASE === */
body {
    background-color: var(--theme-background-color);
    color: var(--theme-text-color);
    font-family: var(--theme-font-family);
}

* {
    color: var(--theme-primary-color);
}

a {
    color: var(--theme-link-color);
}

a:hover {
    color: var(--theme-link-hover-color);
}

/* === HEADER === */
.header {
    background: var(--theme-header-bg);
    color: var(--theme-header-text);
}

.nav-links a, .nav2 a {
    color: var(--theme-primary-color);
}

.nav-links a:hover {
    background: rgba(255, 255, 255, 0.2);
}

.hr_header {
    border-color: var(--theme-hr-color);
}

/* === BOTONES === */
.btn-primary {
    background: var(--theme-button-background-color);
    color: var(--theme-button-color);
}

.btn_inicio_session {
    background: rgba(217, 217, 217, 0.3);
    color: #fff !important;
}

a.Btn_inicio {
    color: #fff;
    background: #d9d9d954;
}

/* === CARDS === */
.music-card {
    background: var(--theme-card-bg);
}

.music-card:hover {
    background: var(--theme-card-hover-bg);
}

/* === INPUTS === */
input, .form-control {
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
}

.form-control:focus {
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
    border-color: var(--theme-input-focus-border);
}

.filters select {
    background: var(--theme-background-color);
    color: var(--theme-text-color);
    border-color: var(--theme-input-border);
}

/* === FOOTER === */
.site-footer {
    border-top-color: var(--theme-footer-border);
    color: var(--theme-text-color);
}

.footer-menu a {
    color: var(--theme-text-color);
}

/* === PAGINACIÓN === */
.pagination .current {
    background: var(--theme-button-background-color);
    color: var(--theme-button-color);
}

/* === REPRODUCTOR === */
audio::-webkit-media-controls,
audio::-webkit-media-controls-enclosure,
audio::-webkit-media-controls-panel {
    background: #efefef !important;
    border-radius: 10px;
}

.site-footer {
    border-top: 1px solid #ffffff2e;
    color: #fff;
}

.playlist-card{
    background: #00000033;
}
 
.backgroundblurfondo {
    background-image: radial-gradient(circle at center, #e7e7e7 0%, #959595 100%) !important;
}