/* ==========================================================================
   PALETA DE COLORES - RADIO MULTIMEDIOS INFORMATIVOS
   Powered by: DESISTEMCOMPU
   ========================================================================== */
:root {
    --color-azul-nocturno: #0D265A;  /* Fondo del logo */
    --color-fondo-bloques: #081B44;  /* Variante oscura */
    --color-blanco-radio: #F6F4EB;   /* Crema de la palabra 'RADIO' */
    --color-aqua-electra: #00D1FF;   /* Cyan del prisma */
    --color-oro-solar: #F9A100;      /* Naranja/Oro del prisma */
    --color-esmeralda: #00C853;      /* Verde del prisma */
    --color-purpura: #8C29E3;        /* Morado del prisma */
}

body {
    background-color: var(--color-azul-nocturno);
    color: var(--color-blanco-radio);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* --- Navbar --- */
.navbar-custom {
    background-color: var(--color-fondo-bloques) !important;
    border-bottom: 2px solid var(--color-aqua-electra);
}

/* --- Botones --- */
.btn-aqua {
    background-color: var(--color-aqua-electra);
    color: var(--color-azul-nocturno);
    border: none;
    font-weight: bold;
}
.btn-aqua:hover {
    background-color: #00b8e6;
    color: var(--color-azul-nocturno);
}
.btn-outline-oro {
    color: var(--color-oro-solar);
    border-color: var(--color-oro-solar);
}
.btn-outline-oro:hover {
    background-color: var(--color-oro-solar);
    color: var(--color-azul-nocturno);
}

/* --- Reproductor --- */
.player-container {
    background-color: var(--color-fondo-bloques) !important;
    border-left: 5px solid var(--color-aqua-electra);
}
.text-primary-custom { color: var(--color-aqua-electra) !important; }
.text-success-custom { color: var(--color-esmeralda) !important; }

/* Marquesina del reproductor */
.marquee {
    background: rgba(0, 209, 255, 0.1);
    color: var(--color-aqua-electra);
    white-space: nowrap;
    overflow: hidden;
    padding: 5px;
    border-radius: 4px;
}
.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* --- Cards --- */
.card-custom {
    background-color: var(--color-fondo-bloques);
    border: 1px solid rgba(246, 244, 235, 0.1);
    color: var(--color-blanco-radio);
}
.card-header-custom {
    border-bottom: 1px solid rgba(246, 244, 235, 0.1);
    color: rgba(246, 244, 235, 0.7);
}

/* --- Footer --- */
.footer-custom {
    background-color: var(--color-fondo-bloques);
    border-top: 2px solid var(--color-purpura);
}
.developer-brand {
    color: var(--color-aqua-electra);
    font-weight: bold;
    text-decoration: none;
}
.developer-brand:hover { color: var(--color-oro-solar); }