.floating-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    color: white;
    height: 60px;
    z-index: 9999;
    border-radius: 50%;
    background-color: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}
.floating-whatsapp:hover {
    transform: scale(1.1);
}

.floating-whatsapp img {
    width: 30px;
    height: 30px;
    color: white;
    /* Esto aplicará si el SVG usa fill="currentColor" */
}

/* ===== Colores de marca Onsur (rojo + negro + blanco) =====
   Estos valores se usan por defecto. Si el backend (panel-settings
   o radio-app) trae el campo, el script de config los sobreescribe
   al cargar la página. */
:root {
  --player-primary: #F20D18; /* rojo principal: botones, enlaces, indicadores, activos */
  --player-primary-hover: #C90812; /* rojo oscuro: hover / estados activos */
  --player-secondary: #111111; /* negro principal: títulos, footer, fondos oscuros */
  --player-headings-bg: #111111;
  --player-footer-bg: #111111;
  --player-footer-color: #ffffff;
  --player-social-bg: rgba(255, 255, 255, 0.2);
  --player-social-color: #ffffff;
  --program-accent: #F20D18;
  --color-title: #111111; /* títulos de la web */
  --color-text: #1C1C1C; /* texto general */
  --main-body-bg: #ffffff; /* fondo principal / tarjetas */
  --history-bg-item: #F5F5F5; /* tarjetas alternas */
  --ytlist-bg-item: #F5F5F5;
  --ytlist-bg-item-active: #ffffff;
  --ytlist-bg-number: #111111;
  --player-channel-bg: #F5F5F5;
  --player-border: #D9D9D9; /* bordes / separadores */
  --scrollbar-color: #F20D18;
  --btn-color: #111111;
  --btn-color-hover: #ffffff;
}

/* 📱 Ajuste solo para pantallas pequeñas (móviles) */
@media (max-width: 991.98px) {
.floating-whatsapp {
        bottom: 195px;
        /* más arriba en móviles */
        width: 50px;
        /* un poco más pequeño */
        height: 50px;
    }

    .floating-whatsapp svg {
        width: 24px;
        /* tamaño proporcional al botón */
        height: 24px;
    }
}





.team-item {
    aspect-ratio: 5 / 6;
    position: relative;
    overflow: hidden;
    border-radius: 0rem;
}


.footer {
    background-color: var(--player-footer-bg);
    color: var(--player-footer-color);
}

.app-item svg {
    height: 35px;
}

.schedule-item {
    aspect-ratio: 16 / 9;
    position: relative;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border-radius: 4px;
    border-bottom: 6px solid var(--program-accent, var(--player-primary));
    background-color: #000;
}



.social-item {
    transition: color var(--player-duration);
    padding: 0.3rem;
    background-color: var(--player-social-bg, rgba(255, 255, 255, 0.2));
    border-radius: 999px;
    color: var(--player-social-color, #fff);
}


.social-item {
    transition: transform 0.3s ease, color 0.3s ease;
    background-color: rgb(255 255 255);
        color: black;
}

.social-item:hover {
    color: var(--player-primary);
    transform: scale(1.1);
    /* Aumenta un 10% al hacer hover */
}


.schedule-item.is-current .schedule-item-content::before {
    content: "Al aire";
    background-color: var(--program-accent);
    font-size: 10px;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    border-radius: 25rem;
    margin-bottom: 0.5rem;
    display: inline-flex;
    font-weight: 800;
    font-family: Montserrat, sans-serif;
    line-height: 1.5;
}


.btn {
    background-color: var(--btn-bg);
    color: var(--btn-color);
    padding: var(--btn-padding, 0.5rem);
    font-size: var(--btn-fs, 0.875rem);
    transition-property: background-color, color;
    transition-duration: var(--player-duration);
    display: inline-flex;
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    align-items: center;
    column-gap: var(--icon-gap, 0.5rem);
    line-height: 1.5;
    border-radius: 999px;
    white-space: nowrap;
}

.header-wrapper {
    align-items: center;
    justify-content: space-between;
    display: flex;
    gap: 1rem;
}



.section-name {
    background-color: var(--main-body-bg);
    padding-right: 1.25rem;
    color: var(--color-title);
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
}

.program-button {
    padding: 1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    color: var(--color-title);
    flex: 1 0 auto;
}

.videoTops-item::before {
    content: counter(ytlist-item);
    width: 2rem;
    text-align: center;
    background-color: var(--ytlist-bg-number);
    transition: background-color 0.3s ease;
    color: white;
    line-height: var(--vtops-item-height);
    font-weight: 800;
    font-family: Montserrat, sans-serif;
    flex: none;
}

.footer-text {
    font-size: 0.875rem;
    font-family: Montserrat, sans-serif;
}

.channel-title {
    font-size: 1rem;
    font-weight: 800;
    font-family: Montserrat, sans-serif;
    --line-clamp: 1;
}

.station-name {
    font-weight: 800;
    font-family: Montserrat, sans-serif;
}


.btn:hover {
    background-color: var(--player-primary);
    color: #ffffff;
}

.channel-description {
    font-size: 0.75rem;
    font-weight: 600;
}

.news-thumb-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(1rem);
}

body {
    font-family: var(--secondary-font);
    overflow-x: hidden;
    line-height: 1.5;
    background-color: var(--body-bg);
    color: var(--color-text);
    background-image: var(--body-bg-image, none);
    background-repeat: repeat;
    background-attachment: fixed;

    background-position: center;
    background-size: auto;
}

.prm-image {
    width: 180px;
    border-radius: 1rem;
    cursor: pointer;
    border: 5px solid rgba(255, 255, 255, 0);
    box-shadow: 0px 8px 17px 2px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12), 0px 5px 5px -3px rgba(0, 0, 0, 0.2);
}

.header {
    border-bottom: 5px solid var(--player-primary);
}

.team-title {
    font-weight: 800;
}

.news-thumb-title {
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-transform: capitalize;
}

.section-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    margin: 0;
}

.section-name svg {
    flex-shrink: 0;
    vertical-align: middle;
    width: 1em;
    height: 1em;
}

.schedule-item-title::after {
    background-image: linear-gradient(to right, var(--player-primary) 50%, var(--player-secondary, var(--player-primary)) 100%);
}

/* ===== Iconos del menú desktop (imitados de la plantilla nueva) ===== */
.header-menu-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    position: relative;
}

.header-menu-list .icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/* El menú de escritorio de Onsur NO llevaba iconos: se ocultan en desktop.
   La barra móvil (menú móvil) es un clon y conserva sus SVG. */
.header-menu-list a svg {
    display: none;
}

/* ===== Botón modo claro/oscuro =====
   main.css muestra SOL en modo claro y LUNA en modo oscuro; se invierte:
   en modo claro se ve la LUNA (para activar el modo oscuro) y en modo
   oscuro se ve el SOL (para volver al modo día). custom.css va después,
   así que gana a main.css (misma especificidad). */
.light #toggle-scheme .toggle-sun {
    display: none;
}

.light #toggle-scheme .toggle-moon {
    display: inline-block;
}

.dark #toggle-scheme .toggle-moon {
    display: none;
}

.dark #toggle-scheme .toggle-sun {
    display: inline-block;
}

/* El clon "Modo" de la barra inferior móvil usa el mismo swap (no es #toggle-scheme). */
.light .mobile-extra-scheme .toggle-sun {
    display: none;
}

.light .mobile-extra-scheme .toggle-moon {
    display: inline-block;
}

.dark .mobile-extra-scheme .toggle-moon {
    display: none;
}

.dark .mobile-extra-scheme .toggle-sun {
    display: inline-block;
}

/* ===== Barra inferior móvil (imitada de la plantilla nueva) =====
   Iconos SOLO, sin texto (como en la plantilla nueva). */
:root {
    --mobile-menu-height: 80px;
}

.mobile-menu-list {
    display: grid;
    grid-auto-flow: column;
    gap: 0.75rem;
    padding: 0.7rem 1.1rem;
    background: var(--btn-bg, var(--player-primary));
    margin: 0;
}

.mobile-menu-list a {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-title);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 46px;
    text-decoration: none;
    font-family: "Bebas Neue", sans-serif;
    font-size: 0;
    letter-spacing: 0.04em;
}

.mobile-menu-list .icon {
    margin: auto;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.mobile-menu-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.55rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    font-family: Montserrat, sans-serif;
}

.mobile-menu-list li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    list-style: none;
}

#mobile-menu {
    z-index: 999;
    inset: auto 0 0;
    position: fixed;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.14);
}

.mobile-menu-list a.is-active {
    color: var(--player-primary);
}

.mobile-height-compensation {
    height: var(--mobile-menu-height);
}

/* En móvil el player queda por ENCIMA de la barra de iconos inferior,
   así los controles de play/pausa se ven y son usables. */
@media (max-width: 991.98px) {
    .player {
        /* main.crypto aplica bottom:0 inline; hay que superarlo */
        bottom: var(--mobile-menu-height) !important;
    }

    /* Header móvil: logo + botones superiores en UNA sola fila horizontal,
       sin apilarse y sin ocultar; la barra inferior queda solo con secciones. */
    .header-wrapper {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .header-left {
        order: 0;
        flex: 1;
        justify-content: flex-start;
        min-width: 0;
    }

    .header-logo img {
        height: 2.6rem;
        width: auto;
    }

    .header-right {
        order: 1;
        flex: none;
        display: flex;
        align-items: center;
        gap: 0.3rem;
    }

    #toggle-scheme {
        padding: 0.45rem 0.6rem;
    }

    #toggle-scheme .icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Footer móvil: espacio extra para que el copyright y el resto se lean por
       ENCIMA del player + barra inferior fijos, sin tocar el player. */
    .footer {
        padding-bottom: calc(var(--mobile-menu-height, 80px) + 130px);
    }
}

@media (min-width: 992px) {
    #mobile-menu,
    .mobile-height-compensation {
        display: none;
    }
}

/* ===== Modales: fondo sólido según tema (el translúcido pierde el texto) ===== */
/* Otros modales (LIVE TV, videos): tarjeta sólida sobre el fondo oscuro. */
.modal-content {
    background-color: var(--main-body-bg, #ffffff);
    color: var(--color-text, #1C1C1C);
}

html.dark .modal-content {
    background-color: #15171b;
    color: #ececec;
}

/* Modal de ARTÍCULO: tarjeta centrada sobre un fondo atenuado. En modo claro el
   fondo revela la tarjeta blanca (antes era blanco sobre blanco y no se veía
   diferencias); el botón de cerrar va en oscuro para contrastar. */
.modal.modal-article {
    background-color: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 1rem;
}

.modal.modal-article .modal-content {
    display: block;
    background-color: #ffffff;
    color: var(--color-text, #1C1C1C);
    border: 1px solid var(--player-border, #d9d9d9);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    width: 100%;
    max-width: 1000px;
    height: auto;
    max-height: 84vh;
    overflow-y: auto;
    margin: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--player-primary, #F20D18) rgba(0, 0, 0, 0.1);
}

.modal.modal-article .modal-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.modal.modal-article .modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 999px;
}
.modal.modal-article .modal-content::-webkit-scrollbar-thumb {
    background-color: var(--player-primary, #F20D18);
    border-radius: 999px;
}

.modal.modal-article .modal-body {
    min-height: 0;
    padding: 1.75rem 2rem 2.25rem;
}

/* Más aire para la lectura de los textos del artículo */
.modal.modal-article .modal-article-content {
    line-height: 1.7;
}
.modal.modal-article .modal-article-content p {
    margin-bottom: 1rem;
}
.modal.modal-article .modal-article-content img {
    border-radius: 0.6rem;
    margin: 0.5rem 0 1rem;
}

.modal.modal-article .modal-close {
    position: sticky;
    top: 0.75rem;
    display: block;
    width: max-content;
    margin-left: auto;
    margin-right: 0.75rem;
    margin-bottom: 0.5rem;
    z-index: 30;
    background-color: #111111;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.85);
}

html.dark .modal.modal-article {
    background-color: rgba(0, 0, 0, 0.72);
}

html.dark .modal.modal-article .modal-content {
    background-color: #15171b;
    color: #ececec;
    border-color: #3a3e47;
}

html.dark .modal.modal-article .modal-article-title {
    border-bottom-color: #363a43;
}

html.dark .modal.modal-article .modal-close {
    position: sticky;
    background-color: #ececec;
    color: #15171b;
    border: 1px solid #363a43;
}

/* ===== Miniaturas de las noticias secundarias: círculos que sí se llenan =====
   main.css las hace circulares (999px). Se conserva el círculo con medida fija
   cuadrada y object-fit:cover para que la foto vertical llene el círculo sin
   distorsionarse, y se mantiene la caja resaltada del ítem detrás. */
.news-thumb-image img {
    width: 52px;
    height: 52px;
    max-width: 52px;
    min-width: 52px;
    flex-shrink: 0;
    border-radius: 999px;
    object-fit: cover;
    object-position: center;
    background-color: var(--main-body-bg, #ffffff);
}

.news-thumb-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-thumb-item {
    background-color: rgba(0, 0, 0, 0.28);
    border-radius: 0.6rem;
    margin-bottom: 0.25rem;
}

/* === Ajuste títulos de noticias: más pequeños para que quepan en el espacio disponible === */
.news-title {
    font-size: 1.4rem !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    white-space: normal !important;
}
.news-content {
    max-width: 100% !important;
}
.news-description {
    font-size: 1rem !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
    -webkit-line-clamp: 4 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
}
@media (min-width: 992px) {
    .news-title {
        max-width: 72% !important;
    }
    .news-content {
        max-width: 72% !important;
    }
    .news-description {
        max-width: 72% !important;
    }
}

/* === Títulos dinámicos: tamaño ajustable según viewport === */
.news-title {
    font-size: clamp(0.95rem, calc(1rem + (100vw - 600px) * 0.25), 1.4rem) !important;
}


/* ===== Modal de DETALLES de cancion (.modal-song) =====
   main.css define .modal-song .modal-content con color:#fff (texto blanco)
   sobre una tarjeta translucida clara; y la regla generica de arriba deja esa
   tarjeta en blanco opaco. Resultado en modo CLARO: texto blanco sobre fondo
   blanco = los detalles (portada, titulo, Artista/Genero/Album) NO se ven.
   Aqui se le da a este modal una tarjeta oscura fija con texto claro en los dos
   temas. Solo afecta al modal de cancion: ni el player ni el modal de articulo. */
.modal.modal-song .modal-content {
    background-color: #15171b;
    color: #ececec;
}

.modal.modal-song .modal-song-content,
.modal.modal-song .modal-song-title,
.modal.modal-song .modal-song-info,
.modal.modal-song .modal-song-info strong {
    color: #ececec;
}