/*
Theme Name: Mi Radio Web PRO (3 Estaciones)
Theme URI: https://smashcomunicaciones.com
Author: SMASH Comunicaciones
Description: Tema PRO con Splash + Selector de 3 estaciones y mini-web por estación (noticias, banners, videos, programas, locutores) editable en WordPress.
Version: 5.0.0
License: GPLv2 or later
Text Domain: miradiowebpro
*/

:root{
  --bg1:#06101b;
  --bg2:#0a1c2f;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.12);
  --text:#eaf2ff;
  --muted:rgba(234,242,255,.75);
  --accent1:#4f7cff;
  --accent2:#27d2ff;
  --radius:22px;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif;
  background: radial-gradient(1200px 700px at 15% 15%, rgba(79,124,255,.18), transparent 60%),
              radial-gradient(1200px 700px at 85% 35%, rgba(39,210,255,.12), transparent 60%),
              linear-gradient(180deg, var(--bg2), var(--bg1));
}

a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto}

.mrw-container{width:min(1200px, calc(100% - 40px)); margin:0 auto}

/* Header */
.mrw-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(6,16,27,.75), rgba(6,16,27,.35));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mrw-header__inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0}
.mrw-brand{display:flex; align-items:center; gap:12px; min-width:220px}
.mrw-brand__logo{width:36px; height:36px; border-radius:10px; overflow:hidden; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10)}
.mrw-brand__name{font-weight:800; letter-spacing:.2px; line-height:1.1}
.mrw-brand__tag{font-size:12px; color:var(--muted)}

.mrw-nav{display:flex; gap:18px; flex-wrap:wrap; justify-content:center}
.mrw-nav a{font-weight:700; font-size:13px; color:rgba(234,242,255,.85); padding:10px 10px; border-radius:12px}
.mrw-nav a:hover{background:rgba(255,255,255,.06)}

/* Hero layout */
.mrw-hero{padding:28px 0 10px}
.mrw-heroGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
}
@media (max-width: 980px){
  .mrw-heroGrid{grid-template-columns:1fr}
}

.mrw-card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Player */
.mrw-player{position:relative; overflow:hidden; min-height:260px}
.mrw-player__bg{
  position:absolute; inset:0;
  background: radial-gradient(600px 300px at 25% 25%, rgba(79,124,255,.28), transparent 70%),
              radial-gradient(600px 300px at 75% 35%, rgba(39,210,255,.22), transparent 70%);
  opacity:.9;
  transition: filter .6s ease;
}
.mrw-player__particles{position:absolute; inset:-20px; opacity:.55}
.mrw-player__content{position:relative; display:grid; grid-template-columns: 220px 1fr; gap:16px; padding:18px}
@media (max-width: 640px){
  .mrw-player__content{grid-template-columns: 1fr}
}

.mrw-player__logoWrap{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
}
.mrw-player__logo{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; transform:scale(1); animation: mrwPulse 3.2s ease-in-out infinite}
@keyframes mrwPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

.mrw-player__specWrap{padding:10px 14px 14px}
.mrw-player__station{font-weight:900; font-size:18px; margin:2px 0 4px}
.mrw-player__hint{color:var(--muted); font-size:12px; margin:0}

.mrw-controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-start; margin-top:10px}
.mrw-btn{
  appearance:none; border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:var(--text);
  font-weight:900; letter-spacing:.3px;
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.mrw-btn:hover{background: rgba(255,255,255,.10)}
.mrw-btn:active{transform: translateY(1px)}
.mrw-btn--primary{border:none; background: linear-gradient(90deg, var(--accent1), var(--accent2)); color:#06101b}
.mrw-btn--danger{border:none; background: linear-gradient(90deg, #ff5c7a, #ffb15c); color:#1a0b0f}

.mrw-vol{display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:14px; background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.10)}
.mrw-vol input[type=range]{width:160px}

.mrw-spec{
  width:100%; height:64px; margin-top:12px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
}

/* Slider */
.mrw-slider{min-height:260px; padding:14px; display:flex; flex-direction:column; gap:12px}
.mrw-slider__frame{position:relative; overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); height:220px}
.mrw-slide{position:absolute; inset:0; opacity:0; transition:opacity .45s ease}
.mrw-slide.is-active{opacity:1}
.mrw-slide img{width:100%; height:100%; object-fit:cover; display:block}
.mrw-slider__dots{display:flex; gap:8px; justify-content:center}
.mrw-dot{width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.18); cursor:pointer}
.mrw-dot.is-active{background: linear-gradient(90deg,var(--accent1),var(--accent2)); border-color: transparent}

/* Sections */
.mrw-section{padding: 14px 0 28px}
.mrw-section h2{font-size:26px; margin:18px 0 12px}
.mrw-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 980px){.mrw-grid{grid-template-columns: repeat(2, minmax(0,1fr))}}
@media (max-width: 560px){.mrw-grid{grid-template-columns: 1fr}}

.mrw-tile{padding:14px; min-height:160px}
.mrw-tile__thumb{width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22); margin-bottom:10px}
.mrw-tile__thumb img{width:100%; height:100%; object-fit:cover}
.mrw-tile__title{font-weight:900; margin:0 0 6px}
.mrw-tile__meta{color:var(--muted); font-size:12px; margin:0}

.mrw-footer{padding:26px 0 40px; text-align:center; color:rgba(234,242,255,.7)}

/* Splash + Selector */
.mrw-overlay{
  position:fixed; inset:0; z-index:9999;
  display:none;
  align-items:center; justify-content:center;
  background: radial-gradient(1200px 700px at 15% 15%, rgba(79,124,255,.20), transparent 60%),
              radial-gradient(1200px 700px at 85% 35%, rgba(39,210,255,.16), transparent 60%),
              linear-gradient(180deg, rgba(6,16,27,.95), rgba(6,16,27,.92));
}
.mrw-overlay.is-on{display:flex}
.mrw-splashLogo{width:min(320px, 70vw); filter: drop-shadow(0 20px 30px rgba(0,0,0,.55))}

.mrw-selector{
  width:min(760px, calc(100% - 34px));
  padding:16px;
  border-radius: 22px;
}
.mrw-selector__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.mrw-selector__title{font-weight:900; margin:0}
.mrw-selector__sub{margin:0; color:var(--muted); font-size:12px}
.mrw-close{width:38px; height:38px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color:var(--text); cursor:pointer}

.mrw-stations{display:flex; flex-direction:column; gap:10px}
.mrw-stationRow{display:flex; gap:12px; align-items:center; justify-content:space-between; padding:12px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05)}
.mrw-stationRow__left{display:flex; gap:12px; align-items:center; min-width:0}
.mrw-stationRow__logo{width:54px; height:54px; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22)}
.mrw-stationRow__logo img{width:100%; height:100%; object-fit:cover}
.mrw-stationRow__name{font-weight:900; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mrw-stationRow__desc{margin:0; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}