/* radio.net.ar — estilos de los shortcodes.
   Todo va con prefijo .rna para no chocar con el tema. */

.rna {
    --rna-accent: #009ee3;
    --rna-bg: #1a1a1a;
    --rna-line: rgba(128, 128, 128, .28);
    box-sizing: border-box;
    line-height: 1.4;
    text-align: left;
}
.rna *, .rna *::before, .rna *::after { box-sizing: inherit; }

/* Bloques (tarjetas): en modo "radio" llevan el fondo oscuro de la radio. */
.rna-card { display: block; margin: 0 0 1.25em; }
.rna-theme-radio.rna-card {
    background: var(--rna-bg);
    color: #fff;
    border-radius: 14px;
    padding: 16px;
    --rna-line: rgba(255, 255, 255, .16);
}

.rna .rna-empty { margin: 0; padding: 18px 0; text-align: center; opacity: .7; font-size: 14px; }
.rna .rna-title { font-size: 1.25em; font-weight: 700; margin: 0 0 12px; color: var(--rna-accent); }
.rna .rna-day-title { font-weight: 700; margin: 14px 0 2px; color: var(--rna-accent); }

.rna-notice {
    margin: 0 0 1em; padding: 10px 14px; border-left: 4px solid #d63638;
    background: #fcf0f1; color: #50282a; font-size: 13px;
}

/* ---------- Programas ---------- */
.rna .rna-item {
    display: flex; gap: 12px; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--rna-line);
}
.rna .rna-item:last-child { border-bottom: 0; }
.rna .rna-item img {
    width: 56px; height: 56px; flex: 0 0 56px; max-width: none;
    object-fit: cover; margin: 0; padding: 0;
    border-radius: 8px; border: 2px solid var(--rna-accent);
}
.rna .rna-item-body { min-width: 0; }
.rna .rna-item-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.rna .rna-item-time { font-size: 12px; font-weight: 700; color: var(--rna-accent); }
.rna .rna-item-cond { margin-top: 4px; font-size: 12px; opacity: .75; }

.rna-ahora .rna-item { padding: 4px 0; }

.rna .rna-badge {
    display: inline-block; vertical-align: middle; margin-left: 4px;
    padding: 2px 6px; border-radius: 4px;
    background: var(--rna-accent); color: #fff;
    font-size: 9px; font-weight: 700; letter-spacing: .5px; line-height: 1.3;
}

/* Círculos L M M J V S D */
.rna .rna-dias { display: inline-flex; gap: 3px; vertical-align: middle; }
.rna .rna-dia {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid rgba(128, 128, 128, .45);
    font-size: 9px; font-weight: 700; line-height: 1;
    opacity: .5;
}
.rna .rna-dia-on { background: var(--rna-accent); border-color: var(--rna-accent); color: #fff; opacity: 1; }

/* ---------- Solapas de la programación ---------- */
.rna .rna-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 14px; }
.rna .rna-tab {
    all: unset; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--rna-line);
    font-size: 12px; font-weight: 700; line-height: 1; color: inherit;
    cursor: pointer; user-select: none;
    transition: background .15s, border-color .15s, color .15s;
}
.rna .rna-tab:hover { border-color: var(--rna-accent); }
.rna .rna-tab:focus-visible { outline: 2px solid var(--rna-accent); outline-offset: 2px; }
.rna .rna-tab.is-active { background: var(--rna-accent); border-color: var(--rna-accent); color: #fff; }
.rna .rna-panel { display: none; }
.rna .rna-panel.is-visible { display: block; }

/* ---------- Reproductor ---------- */
.rna-player { display: flex; align-items: center; gap: 14px; }
.rna-theme-site.rna-player {
    border: 1px solid var(--rna-line); border-radius: 16px; padding: 12px 16px;
}
.rna .rna-player-logo {
    width: 56px; height: 56px; flex: 0 0 56px; max-width: none; margin: 0; padding: 0;
    border-radius: 50%; object-fit: cover; border: 2px solid var(--rna-accent);
}
.rna .rna-player-info { flex: 1 1 auto; min-width: 0; }
.rna .rna-player-name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rna .rna-player-line { font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rna .rna-player-now { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rna .rna-player-now:empty { display: none; }
.rna .rna-player-now::before { content: "AL AIRE · "; font-weight: 700; color: var(--rna-accent); }

.rna .rna-play {
    all: unset; box-sizing: border-box;
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rna-accent); color: #fff; cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    transition: transform .15s ease, opacity .15s ease;
}
.rna .rna-play:hover { transform: scale(1.06); opacity: .92; }
.rna .rna-play:focus-visible { outline: 2px solid var(--rna-accent); outline-offset: 3px; }
.rna .rna-play .rna-ico { display: none; }
.rna[data-state="idle"] .rna-play .rna-ico-play,
.rna[data-state="error"] .rna-play .rna-ico-play { display: block; }
.rna[data-state="playing"] .rna-play .rna-ico-pause { display: block; }
.rna[data-state="loading"] .rna-play .rna-ico-wait { display: block; animation: rna-spin 1s linear infinite; }
@keyframes rna-spin { to { transform: rotate(360deg); } }

.rna-player-compacto { gap: 10px; padding: 8px 12px; }
.rna-player-compacto .rna-play { order: -1; width: 40px; height: 40px; }
.rna-player-compacto .rna-player-name { font-size: 14px; }

/* ---------- Logo / redes / botón / info ---------- */
.rna-logo-wrap { display: inline-block; line-height: 0; vertical-align: middle; }
.rna-logo-wrap a { display: inline-block; line-height: 0; }
.rna .rna-logo { display: block; max-width: 100%; height: auto; }
.rna .rna-logo-round { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; border: 3px solid var(--rna-accent); }

.rna-redes { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0 0 1em; }
.rna .rna-red { display: inline-flex; color: var(--rna-accent); text-decoration: none; transition: opacity .15s; }
.rna .rna-red:hover { opacity: .7; }

.rna-wa { display: inline-block; }
.rna .rna-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 20px; border-radius: 8px; border: 0;
    color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1.2;
    transition: opacity .2s;
}
.rna .rna-btn:hover { opacity: .8; color: #fff; }
.rna .rna-btn-wa { background: #28a745; }

/* ---------- Banners ---------- */
.rna-banners { overflow: hidden; position: relative; width: 100%; max-width: 100%; margin: 0 0 1em; background: rgba(0, 0, 0, .06); }
.rna .rna-banners-track { display: flex; width: 100%; align-items: center; transition: transform .7s ease-in-out; }
.rna .rna-banner-slide { flex: 0 0 100%; max-width: 100%; line-height: 0; }
.rna .rna-banner-slide a { display: block; width: 100%; }
.rna .rna-banner-slide img { display: block; width: 100%; height: auto; margin: 0; }

/* ---------- Video ---------- */
.rna-video { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; margin: 0 0 1em; background: #000; border-radius: 12px; overflow: hidden; }
.rna-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }