/* =========================================================
   RADIO SUMERCÉ · Identidad sutil (Negro/Blanco + Tricolor)
   Orden: Variables → Base → Utilidades → Header → Menú → Secciones
          → Player → Grids → Contacto → Overlay → Toggle Tema
          → Light Mode → Divisor → Footer → Accesibilidad → Responsive
   ========================================================= */

/* ============ 1) Variables & Tema ============ */
:root{
  /* Base BN */
  --bn-black: #0b0b0b;
  --bn-black-2: #111;           /* paneles */
  --bn-black-3: #171717;        /* hover/superficie */
  --bn-white: #ffffff;
  --bn-white-2: #f5f5f5;

  /* Tricolor (sutil) */
  --co-yellow: #ffd600;
  --co-blue:   #0033a0;
  --co-red:    #ce1126;

  /* Sombras */
  --shadow: 0 6px 24px rgba(0,0,0,.35);

  /* Texturas */
  --woven: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">\
    <g opacity="0.025" stroke="white" stroke-width="0.6">\
      <path d="M0 30 H60"/>\
      <path d="M30 0 V60"/>\
      <path d="M0 0 L60 60"/>\
      <path d="M60 0 L0 60"/>\
    </g>\
  </svg>');

  /* Paleta Modo Claro — papel cálido (CLARO pero no TAN CLARO) */
  --bg-paper:   #f4f2ee;        /* fondo general tipo papel, cálido */
  --bg-surface: #fbfaf8;        /* superficies (tarjetas/secciones) */
  --bg-elev-1:  #f7f4ef;        /* superficies levemente elevadas */
  --ink-1:      #171a1f;        /* texto principal */
  --ink-2:      #4a4f5a;        /* texto secundario */
  --line-ink:   rgba(23,26,31,.12); /* bordes suaves */
  --shadow-light: 0 8px 30px rgba(0,0,0,.07);

  --woven-light: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">\
    <g opacity="0.03" stroke="black" stroke-width="0.6">\
      <path d="M0 30 H60"/><path d="M30 0 V60"/><path d="M0 0 L60 60"/><path d="M60 0 L0 60"/>\
    </g>\
  </svg>');
}

/* ============ 2) Base & Accesibilidad ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Inter","Montserrat","Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background: var(--bn-black) var(--woven);
  color: var(--bn-white);
  line-height: 1.6;
  padding-top: 180px;   /* espacio para top-panel + menú */
  padding-bottom: 56px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{
  outline: 2px solid var(--bn-white);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.12), 0 0 0 8px rgba(0,0,0,.3);
}

/* ============ 3) Utilidades ============ */
.co-gradient{ 
  background-image: linear-gradient(90deg,var(--co-yellow),var(--co-blue),var(--co-red));
}
.co-border-hairline{
  border-image: linear-gradient(90deg,var(--co-yellow),var(--co-blue),var(--co-red)) 1;
  border-width: 1px;
  border-style: solid;
}

/* ============ 4) Header / Branding ============ */
.top-panel{
  position:fixed; inset:0 0 auto 0; width:100%;
  background: rgba(17,17,17,0.9);
  backdrop-filter: blur(8px);
  padding: 14px 0 12px;
  box-shadow: var(--shadow);
  z-index:1100;
  display:flex; flex-direction:column; align-items:center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.top-panel::after{
  content:""; display:block; width:100%; height:2px;
  background-image: linear-gradient(90deg,var(--co-yellow),var(--co-blue),var(--co-red));
  opacity:.65;
}

.logo-container{display:flex;align-items:center;gap:14px;margin-bottom:6px}

.logo{
  --ring: conic-gradient(from 0deg,
            var(--co-yellow) 0 33.33%,
            var(--co-blue) 33.33% 66.66%,
            var(--co-red) 66.66% 100%);
  width:72px;height:72px;border-radius:50%;
  background: var(--bn-black-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  position:relative;
}
.logo::before{
  content:""; position:absolute; inset:-3px;
  border-radius:50%;
  background: var(--ring);
  filter: saturate(85%) blur(.2px);
  opacity:.35;
}
.logo::after{
  content:""; position:absolute; inset:4px;
  border-radius:50%;
  background: var(--bn-black-2);
  border:1px solid rgba(255,255,255,.08);
}
.logo img{width:100%;height:100%;object-fit:cover;border-radius:50%;position:relative;z-index:1}

.radio-name{
  font-weight:800; letter-spacing:.3px;
  font-size:22px; color: var(--bn-white);
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
}
.slogan{font-size:15px; color:rgba(255,255,255,.80)}
.region-text{font-size:13px; color:rgba(255,255,255,.66)}

/* ===== Redes sociales ===== */
.social-icons {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.social-icons a {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transition: transform .2s ease, box-shadow .2s ease;
}

.social-icons a:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

.social-icons img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============ 5) Menú flotante ============ */
.floating-menu{
  position:fixed; top:126px; left:0; width:100%;
  background: rgba(17,17,17,0.88);
  backdrop-filter: blur(6px);
  padding: 10px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  z-index:1000;
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.menu-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; 
  gap: 8px;
  padding: 0 12px;
  max-width: 100%;
}
.menu-container::-webkit-scrollbar{display:none}

.menu-item{
  padding:8px 14px; margin:0 2px;
  color: var(--bn-white);
  background: var(--bn-black-2);
  border-radius: 999px;
  font-weight:600; font-size:13.5px; white-space:nowrap;
  border:1px solid rgba(255,255,255,.10);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  position:relative;
}
.menu-item::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-2px; height:2px;
  background-image: linear-gradient(90deg,var(--co-yellow),var(--co-blue),var(--co-red));
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.menu-item:hover,
.menu-item.active{
  background: var(--bn-black-3);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}
.menu-item:hover::after,
.menu-item.active::after{ transform: scaleX(1) }

/* ============ 6) Secciones / Tarjetas ============ */
.section{
  padding:40px 22px; margin:22px auto; max-width:1000px;
  background: rgba(17,17,17,.82);
  border-radius: 14px;
  box-shadow: var(--shadow);
  position:relative; overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.section::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background-image: linear-gradient(90deg,var(--co-yellow),var(--co-blue),var(--co-red));
  opacity:.7;
}
.section-title{
  font-weight:800; color: var(--bn-white);
  margin-bottom: 22px; text-align:center; font-size:28px;
  position:relative; display:inline-block;
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}
.section-title::after{
  content:""; position:absolute; bottom:-10px; left:50%;
  transform:translateX(-50%); width:72px; height:2px;
  background-image: linear-gradient(90deg,var(--co-yellow),var(--co-blue),var(--co-red));
  opacity:.8;
}

/* ============ 7) Player Principal ============ */
.player-container{
  background: rgba(23,23,23,.92);
  padding: 24px; border-radius: 12px; text-align:center; margin: 20px 0;
  border: 1px solid rgba(255,255,255,.10);
}
.now-playing{
  margin: 8px auto 6px;
  font-weight: 700;
  font-size: 15px;
  color: var(--bn-white);
  opacity: .95;
}
.player-controls{
  display:flex; justify-content:center; align-items:center; gap: 18px; margin-top: 12px;
}
.play-btn{
  width:64px; aspect-ratio:1 / 1; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--bn-white);
  color: var(--bn-black);
  font-size:24px; cursor:pointer; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  position:relative;
}
.play-btn::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  padding:2px; background: conic-gradient(var(--co-yellow),var(--co-blue),var(--co-red),var(--co-yellow));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.45;
}
.play-btn:hover{ transform: scale(1.04) }
.play-btn:active{ transform: scale(.98) }

/* ============ 8) Grids (Programas / Podcasts) ============ */
.program-grid, .podcast-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 20px; margin-top: 20px;
}
.program-card{
  background: rgba(20,20,20,.86);
  border-radius:12px; padding:18px; text-align:center;
  border:1px solid rgba(255,255,255,.10);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.program-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.program-time{
  font-weight:800; letter-spacing:.2px;
  color: var(--bn-white);
  display:inline-block; padding:2px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  position:relative;
}
.program-time::after{
  content:""; position:absolute; left:8px; right:8px; bottom:-6px; height:2px;
  background-image: linear-gradient(90deg,var(--co-yellow),var(--co-blue),var(--co-red));
  opacity:.9;
}
.podcast-title{
  font-weight:800; font-size:18px; color: var(--bn-white); margin: 12px 0 8px;
}
.podcast-controls{ margin-top: 12px }

/* ============ 9) Formulario de Contacto ============ */
.contact-form {
  max-width: 600px;
  margin: 40px auto;
  padding: 28px 24px;
  background: rgba(20, 20, 20, 0.9);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,.12);
}
.contact-form h2 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 700;
  color: var(--bn-white);
  position: relative;
}
.contact-form h2::after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  margin: 10px auto 0;
  background-image: linear-gradient(90deg, var(--co-yellow), var(--co-blue), var(--co-red));
  border-radius: 2px;
}
.contact-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
  color: rgba(255,255,255,.85);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: #111;
  color: var(--bn-white);
  font-size: 14px;
  transition: border-color .25s ease, box-shadow .25s ease;
  margin-bottom: 18px;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--co-yellow);
  box-shadow: 0 0 0 3px rgba(255,214,0,.25);
  outline: none;
}
.contact-form button {
  display: inline-block;
  width: 100%;
  padding: 12px 18px;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  background: linear-gradient(90deg, var(--co-yellow), var(--co-blue), var(--co-red));
  color: var(--bn-black);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.4);
}

/* ============ 10) Overlay Envío / Éxito ============ */
.rs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.rs-overlay.rs-show { opacity: 1; pointer-events: auto; }

.rs-card {
  background: rgba(17,17,17,.92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: var(--shadow);
  text-align: center;
  min-width: 260px;
}
.rs-spinner {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: var(--bn-white);
  margin: 0 auto 12px;
  animation: rs-spin 1s linear infinite;
}
@keyframes rs-spin { to { transform: rotate(360deg); } }

.rs-title { font-weight: 800; margin-bottom: 6px; }
.rs-sub { color: rgba(255,255,255,.8); font-size: 14px; }

.rs-check {
  width: 56px; height: 56px; margin: 0 auto 10px;
  border-radius: 50%;
  border: 2px solid rgba(46,204,113,.9);
  display: grid; place-items: center;
  transform: scale(.9);
  animation: rs-pop .35s ease forwards;
}
.rs-check svg { width: 30px; height: 30px; }
@keyframes rs-pop {
  0% { transform: scale(.6); opacity: .2; }
  100% { transform: scale(1); opacity: 1; }
}

/* ============ 11) Toggle Modo Oscuro/Claro ============ */
.theme-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  cursor: pointer;
  font-size: 20px;
  color: var(--bn-white);
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s ease, transform .2s ease;
}
.theme-toggle:hover {
  background: rgba(255,255,255,.2);
  transform: rotate(10deg);
}

/* ============ 12) LIGHT MODE (CLARO no cegador) ============ */
body.light-mode{
  background: var(--bg-paper) var(--woven-light);
  color: var(--ink-1);
}
body.light-mode a{ color: inherit; }
body.light-mode .theme-toggle{
  color: var(--ink-1);
  background: rgba(0,0,0,.06);
}
body.light-mode .theme-toggle:hover{ background: rgba(0,0,0,.12); }
body.light-mode .top-panel{
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-ink);
  box-shadow: var(--shadow-light);
}
body.light-mode .top-panel::after{ opacity: .8; }
body.light-mode .radio-name{ color: var(--ink-1); text-shadow:none; }
body.light-mode .slogan{ color: rgba(23,26,31,.72); }
body.light-mode .social-btn{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.12);
  color: var(--ink-1);
}
body.light-mode .social-btn:hover{
  background: rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.22);
}
body.light-mode .floating-menu{
  background: rgba(255,255,255,.82);
  border-top: 1px solid var(--line-ink);
  border-bottom: 1px solid var(--line-ink);
  box-shadow: var(--shadow-light);
}
body.light-mode .menu-item{
  color: var(--ink-1);
  background: var(--bg-elev-1);
  border-color: var(--line-ink);
}
body.light-mode .menu-item:hover,
body.light-mode .menu-item.active{
  background: #f1efec;
  border-color: rgba(23,26,31,.20);
}
body.light-mode .section{
  background: var(--bg-surface);
  border: 1px solid var(--line-ink);
  box-shadow: var(--shadow-light);
  color: var(--ink-1);
}
body.light-mode .section::before{ opacity:.85; }
body.light-mode .section-title{ color: var(--ink-1); text-shadow:none; }
body.light-mode .program-card{
  background: var(--bg-surface);
  border: 1px solid var(--line-ink);
  box-shadow: var(--shadow-light);
}
body.light-mode .program-card:hover{
  border-color: rgba(23,26,31,.22);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
body.light-mode .program-time{
  color: var(--ink-1);
  border-color: rgba(23,26,31,.16);
}
body.light-mode .player-container{
  background: var(--bg-surface);
  border: 1px solid var(--line-ink);
  box-shadow: var(--shadow-light);
}
body.light-mode .now-playing{ color: var(--ink-1); }
body.light-mode .play-btn{
  background: #111; color: #fff;
}
body.light-mode .play-btn::after{ opacity:.35; }
body.light-mode .contact-form{
  background: var(--bg-surface);
  border: 1px solid var(--line-ink);
  box-shadow: var(--shadow-light);
}
body.light-mode .contact-form h2{ color: var(--ink-1); }
body.light-mode .contact-form label{ color: var(--ink-2); }
body.light-mode .contact-form input,
body.light-mode .contact-form textarea{
  background: #fff;
  color: var(--ink-1);
  border: 1px solid rgba(23,26,31,.18);
}
body.light-mode .contact-form input::placeholder,
body.light-mode .contact-form textarea::placeholder{ color: rgba(23,26,31,.45); }
body.light-mode .contact-form input:focus,
body.light-mode .contact-form textarea:focus{
  border-color: var(--co-yellow);
  box-shadow: 0 0 0 3px rgba(255,214,0,.20);
}
body.light-mode .rs-overlay{ background: rgba(0,0,0,.25); }
body.light-mode .rs-card{
  background: var(--bg-surface);
  border: 1px solid var(--line-ink);
  box-shadow: var(--shadow-light);
  color: var(--ink-1);
}
body.light-mode .rs-sub{ color: rgba(23,26,31,.72); }
body.light-mode .logo{
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
body.light-mode .logo::after{
  background: #fff;
  border: 1px solid var(--line-ink);
}

/* ============ 13) Divisor de sección ============ */
.section-divider{
  height:2px; margin: 30px auto; max-width:1000px;
  background-image: linear-gradient(90deg,var(--co-yellow),var(--co-blue),var(--co-red));
  opacity:.7; border-radius:2px;
}

/* ============ 14) Footer ============ */
footer{
  max-width:1000px; margin: 24px auto 0; padding: 18px 12px;
  color: rgba(255,255,255,.80); font-size: 13.5px; text-align:center;
  border-top: 1px solid rgba(255,255,255,.12);
  background: transparent;
}
body.light-mode footer{
  color: rgba(23,26,31,.78);
  border-top: 1px solid var(--line-ink);
}

/* ============ 15) Accesibilidad (reduce motion) ============ */
@media (prefers-reduced-motion: reduce){
  html:focus-within{scroll-behavior:auto}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

/* ============ 16) Responsive ============ */
@media (max-width: 768px){
  body{padding-top:150px}
  .top-panel{padding:10px 0}
  .logo{width:54px;height:54px}
  .radio-name{font-size:17px}
  .slogan{font-size:13px}
  .floating-menu{top:100px;padding:8px 0}
  .menu-item{font-size:12.5px;padding:7px 12px}
  .socials{margin-top:6px}
  .social-btn{width:34px;height:34px}
}
@media (max-width: 480px){
  body{padding-top:140px}
  .top-panel{padding:8px 0}
  .logo{width:48px;height:48px}
  .radio-name{font-size:15px}
  .slogan{font-size:12px}
  .floating-menu{top:92px}
  .menu-item{font-size:12px;padding:6px 10px}
}

/* ===== Ajuste de color de fondo oscuro pedido (azul oscuro no tan oscuro) ===== */
:root{
  --bn-black: #102a43;  /* azul oscuro elegante (antes negro) */
}