/* =====================================================
   VARIABLES EDITABLES
===================================================== */

:root{

  --fondo-principal:#ffffff;
  --fondo-secundario:#f6f6f6;

  --tab-bg:#65c0bb;
  --tab-text:#000000;
  --tab-active-bg:#000000;
  --tab-active-text:#ffffff;

  --hora-color:#5DB8C7;
  --titulo-color:#000000;
  --descripcion-color:#4a4b4c;

  --envivo-bg-inicio:#e6e6e6;
  --envivo-bg-fin:#e6e6e6;
  --envivo-borde:#ff0000;

  --hover-bg:#f0f0f0;
  --card-radius:10px;
}

/* =====================================================
   CONTENEDOR GENERAL
===================================================== */

.radio-programacion{
  font-family:Arial, Helvetica, sans-serif;
  background:var(--fondo-principal);
  color:#ffffff;
  padding:20px;
}

/* =====================================================
   TABS
===================================================== */

.tabs{
  display:flex;
  gap:10px;
  margin-bottom:30px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.tabs::-webkit-scrollbar{
  display:none;
}

.tab-btn{
  flex:0 0 auto;
  white-space:nowrap;
  background:var(--tab-bg);
  border:none;
  color:var(--tab-text);
  padding:8px 18px;
  cursor:pointer;
  border-radius:30px;
  font-size:14px;
  transition:all .3s ease;
}

.tab-btn.active,
.tab-btn:hover{
  background:var(--tab-active-bg);
  color:var(--tab-active-text);
}

.tab-btn .short{
  display:none;
}

/* =====================================================
   BLOQUES DE PROGRAMACIÓN
===================================================== */

.programa{
  background:var(--fondo-secundario);
  padding:20px;
  margin-bottom:15px;
  border-radius:var(--card-radius);
  transition:all .3s ease;
  border:1px solid #fff;
}

.programa:hover{
  background:var(--hover-bg);
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,0.4);
}

.programa .hora{
  font-weight:bold;
  margin-bottom:10px;
  color:var(--hora-color);
  font-size:15px;
  letter-spacing:1px;
}

.programa .contenido{
  display:flex;
  gap:20px;
  align-items:center;
}

/* Imagen */

.programa img{
  width:180px;
  height:120px;
  object-fit:cover;
  border-radius:8px;
  flex-shrink:0;
  transition:transform .3s ease;
}

.programa:hover img{
  transform:scale(1.05);
}

/* TÍTULO */

.programa h3{
  margin:0 0 8px 0;
  font-size:30px;
  font-weight:600;
  color:var(--titulo-color);
}

/* DESCRIPCIÓN */

.programa p{
  margin:0;
  font-size:18px;
  line-height:1.6;
  color:var(--descripcion-color);
}

/* =====================================================
   PROGRAMA EN VIVO
===================================================== */

.programa.en-vivo{
  background:linear-gradient(
    90deg,
    var(--envivo-bg-inicio),
    var(--envivo-bg-fin)
  );
  border-left:4px solid var(--envivo-borde);
  position:relative;
  animation:suavePulse 2.5s infinite alternate;
}

/* Badge EN VIVO */

.programa.en-vivo::before{
  content:"EN VIVO AHORA";
  position:absolute;
  top:15px;
  right:15px;
  font-size:11px;
  font-weight:bold;
  color:#ffffff;
  background:#ff0000;
  padding:4px 8px;
  border-radius:20px;
  letter-spacing:1px;
}

/* Animación suave */

@keyframes suavePulse{
  from{box-shadow:0 0 0 rgba(0,0,0,0.5);}
  to{box-shadow:0 0 20px rgba(0,0,0,0.5);}
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:768px){

  .tab-btn .full{
    display:none !important;
  }

  .tab-btn .short{
    display:inline !important;
  }

  .tab-btn{
    font-size:13px;
    padding:6px 14px;
  }

  .radio-programacion{
    padding:15px;
  }

  .programa{
    padding:15px;
  }

  .programa .contenido{
    flex-direction:column;
    align-items:flex-start;
  }

  .programa img{
    width:100%;
    height:auto;
  }

  .programa h3{
    font-size:18px;
  }

}