/* Reset básico */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#000;color:#fff;font-family:Inter,system-ui,Arial,sans-serif}

/* NEWS BAR - por defecto abajo */
.news-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;            /* por defecto en la parte inferior */
  height:48px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 12px 0 18px;
  background:#FF5722;
  z-index:2000;
  cursor:grab;
}
.news-bar:active{cursor:grabbing}

/* Area que contiene el texto y se anima */
.news-content{
  display:inline-block;
  white-space:nowrap;
  font-weight:600;
  font-size:16px;
  color:#fff;
  padding-right:20px;
  animation: ticker 40s linear infinite;
  animation-play-state: running;
}

/* Keyframes: translateX de 0 a -100% */
@keyframes ticker {
  0%{transform:translateX(0)}
  100%{transform:translateX(-100%)}
}

/* Botón mover */
.move-btn{
  margin-left:auto;
  background:#333;
  color:#fff;
  border:0;border-radius:6px;padding:6px 8px;cursor:pointer;
}

/* GRID (desktop: fijo y ocupa viewport menos la barra) */
.grid{
  position:fixed;
  left:8px;
  right:8px;
  top:8px;
  bottom:calc(48px + 8px); /* espacio inferior = altura barra + padding */
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:8px;
  padding:0;
}

/* Iframes/tiles */
.tile{position:relative;overflow:hidden;border-radius:6px;background:#000;border:4px solid #0a6fb5}
.tile iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}

/* Floating button (copyright) */
.floating-btn{
  position:fixed;
  right:12px;
  bottom:35px; /* 66 px sobre la barra, en margen inferior derecho */
  z-index:2100;
  background:#ffffff;
  background-image:url('ico_envivo247_48.png');
  color:#fff;
  width:50px;
  height:50px;
  border:0;
  padding:12px;
  border-radius:50%;
  cursor:pointer;
  font-size:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.6)
}

/* Configuracion (boton izq) */
.config-btn{
  position:fixed;
  left:12px;
  bottom:35px;
  z-index:2100;
  background:#6a00d9;
  color:#fff;
  width:50px;
  height:50px;
  border:0;
  border-radius:50%;
  cursor:pointer;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.45);
}

/* Menú de configuración */
.config-menu{
  position:fixed;
  left:12px;
  bottom:80px;
  width:300px;
  max-height:420px;
  overflow-y:auto;
  background:#ffffff;
  color:#111;
  padding:12px;
  border-radius:8px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
  z-index:2200;
  display:none;
}
.config-menu.active{display:block}

.config-menu h3{margin:0 0 8px 0; font-size:18px; color:#111}
.menu-pantallas .menu-item{margin-bottom:10px}
.menu-pantallas label{display:block; margin-bottom:6px; color:#333}
.menu-pantallas select{width:100%; padding:6px; border-radius:6px; border:1px solid #ccc}

/* Count options */
.count-options{display:flex; gap:8px; margin-bottom:10px; align-items:center}
.count-options label{background:#f3f3f3; padding:6px 8px; border-radius:6px; color:#222; cursor:pointer}

/* Modal (centrado) */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:3000;align-items:center;justify-content:center}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:#0f1720;color:#fff;padding:18px;border-radius:10px;max-width:420px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.close{position:absolute;right:14px;top:12px;background:transparent;border:0;color:#9aa3ad;font-size:22px;cursor:pointer}

/* RESPONSIVE: en pantallas pequeñas permitimos scroll y 1 columna */
@media (max-width:1024px){
  body{overflow-y:auto}
  .grid{position:relative;left:0;right:0;top:auto;bottom:auto;display:block;padding:8px 8px 110px} /* espacio para la barra */
  .tile{height:240px;margin-bottom:8px;border-width:3px}
  .news-bar{position:fixed;left:0;right:0;height:48px}
  .floating-btn{bottom:35px}
  .config-menu{left:8px; right:8px; width:auto; bottom:70px}
}

/* Links dentro de la barra de noticias */
.news-content a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  margin: 0 8px;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
.news-content a:hover { text-decoration: underline; }