/* ============================================================
   EG PUBLIC HOTFIX (SIN BUNDLE) — ✅ CORREGIDO COMPLETO
   Objetivo: layout público estable en producción
   - Contenido + sidebars centrados a 1360px (NO full width)
   - Submenús respetan [hidden] (no aparecen “solos”)
   - Grid 1–3 columnas con clases full-width / solo-izquierda / solo-derecha
   - Anti-overflow (sin scroll horizontal)
   - Sidebar derecha sin huecos y sin “CSS como texto”
   ============================================================ */

/* =========================
   0) Variables
========================= */
:root{
  --eg-maxw: 1360px;
  --eg-gap: 16px;
  --eg-radius: 14px;

  --eg-side-left: 300px;
  --eg-side-right: 320px;

  --eg-radio-h: 56px;
  --eg-marquesina-h: 62px;
  --eg-safe-bottom: env(safe-area-inset-bottom, 0px);

  --eg-bg: #070b12;
  --eg-card: #0c1220;
  --eg-line: rgba(255,255,255,.10);
  --eg-text: rgba(255,255,255,.92);
  --eg-muted: rgba(255,255,255,.70);
  --eg-accent: #1ea7ff;
  --eg-accent2: #ffd34d;
}

/* =========================
   1) Base + anti-overflow
========================= */
*{ box-sizing: border-box; }
html, body{ height: 100%; max-width: 100%; }

html{ overflow-x: clip; }
@supports not (overflow-x: clip){
  html{ overflow-x: hidden; }
}

body{
  margin: 0;
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background: var(--eg-bg);
  color: var(--eg-text);

  /* espacio para radio fixed arriba */
  padding-top: var(--eg-radio-h);

  /* espacio para marquesina + dock abajo */
  padding-bottom: calc(var(--eg-marquesina-h) + 110px + var(--eg-safe-bottom));
}

a{ color: inherit; text-decoration: none; }
a:hover{ opacity: .95; }

/* Media dentro del contenido nunca debe romper el ancho */
img, video, iframe, svg{ max-width: 100%; height: auto; }

/* =========================
   2) Contenedores centrados
========================= */
.sponsor-top-inner,
.header-top,
#main-nav,
.eg-root,
.football-ticker-inner,
.public-wrapper,
#marquesina-mensajes{
  max-width: var(--eg-maxw);
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   3) Radio bar (fixed top)
========================= */
.radio-player-bar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 3000;

  min-height: var(--eg-radio-h);
  background: rgba(0,0,0,.85);
  border-bottom: 1px solid var(--eg-line);
  backdrop-filter: blur(8px);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
}

.rp-left, .rp-center, .rp-right{
  display: flex;
  align-items: center;
  gap: 10px;
}

.rp-btn{
  border: 1px solid var(--eg-line);
  background: rgba(255,255,255,.06);
  color: var(--eg-text);
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 900;
  cursor: pointer;
}

.rp-title{ font-weight: 900; }
.rp-status{ color: var(--eg-muted); font-size: 13px; }
.rp-live-pill{
  background: #ff3355;
  color: #fff;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
}
.rp-volume{ width: 120px; }

@media (max-width: 520px){
  .rp-center{ display:none; }
  .rp-volume{ display:none; }
}

/* =========================
   4) Sponsor top
========================= */
.sponsor-top{
  background: #000;
  border-bottom: 1px solid var(--eg-line);
}
.sponsor-top-inner{
  padding: 8px 16px;
}
.sponsor-top-link{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.sponsor-top-img{
  height: 44px;
  width: auto;
  border-radius: 8px;
  display: block;
}
.sponsor-top-cta{
  background: var(--eg-accent2);
  color: #000;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

/* =========================
   5) Header (sticky debajo del radio)
========================= */
.main-header{
  position: sticky;
  top: var(--eg-radio-h);
  z-index: 2000;

  background: linear-gradient(180deg, #0a1222, #070b12);
  border-bottom: 1px solid var(--eg-line);
}

.header-top{
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.logo{
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo img{ border-radius: 10px; }
.logo-text{
  font-weight: 800;
  letter-spacing: .2px;
}

.menu-toggle{
  border: 1px solid var(--eg-line);
  background: rgba(255,255,255,.06);
  color: var(--eg-text);
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 800;
  cursor: pointer;
}

/* Header nav (Inicio/login/panel) */
#main-nav{
  padding: 0 16px 10px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#main-nav a{
  border: 1px solid var(--eg-line);
  background: rgba(255,255,255,.04);
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
}

/* Móvil: colapsable */
#main-nav.nav-collapsed{ display: none; }
#main-nav.show{ display: flex; }

@media (min-width: 992px){
  .menu-toggle{ display:none; }
  #main-nav{ display:flex !important; }
}

/* =========================
   6) Menú dinámico (UL/LI)
========================= */
.eg-dynmenu{
  border-bottom: 1px solid var(--eg-line);
  background: rgba(255,255,255,.02);
}

.eg-root{
  padding: 8px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.eg-menu-item{
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.eg-link{
  border: 1px solid var(--eg-line);
  background: rgba(255,255,255,.04);
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.eg-subtoggle{
  border: 1px solid var(--eg-line);
  background: rgba(255,255,255,.06);
  color: var(--eg-text);
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

/* ✅ Submenu: oculto por defecto y respeta [hidden] */
.eg-submenu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;

  background: #0b1220;
  border: 1px solid var(--eg-line);
  border-radius: 12px;
  padding: 8px;
  list-style: none;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  z-index: 2100;

  display: none; /* ✅ clave */
}

.eg-submenu[hidden]{ display:none !important; }

.eg-menu-item.is-open > .eg-submenu{
  display: block;
}

.eg-submenu .eg-menu-item{ width: 100%; }
.eg-submenu .eg-link{ width: 100%; justify-content: flex-start; }

/* Desktop hover (fallback visual) */
@media (min-width: 992px){
  .eg-menu-item.has-children:hover > .eg-submenu{
    display: block;
  }
}

/* Mobile: submenú en flujo */
@media (max-width: 980px){
  .eg-root{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .eg-submenu{
    position: static;
    min-width: 0;
    box-shadow: none;
    margin-top: 8px;
  }
}

/* =========================
   7) Ticker fútbol
========================= */
.football-ticker-desktop{
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid var(--eg-line);
}

.football-ticker-inner{
  padding: 8px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.ft-title{ font-weight: 900; white-space: nowrap; }
.ft-items{ overflow: hidden; white-space: nowrap; flex: 1; }
.ft-empty{ color: var(--eg-muted); }

/* =========================
   8) Wrapper / Layout 3 columnas
========================= */
.public-wrapper{
  padding: 12px 16px;
}

.layout-publico{
  display: grid;
  grid-template-columns: var(--eg-side-left) 1fr var(--eg-side-right);
  gap: var(--eg-gap);
  align-items: start;
}

/* Sidebars: tarjeta base */
.sidebar-publico{
  background: var(--eg-card);
  border: 1px solid var(--eg-line);
  border-radius: 18px;
  padding: 12px;
  overflow: visible;
}

/* Colocación explícita para que no quede “hueco” */
.sidebar-publico.izquierda{ grid-column: 1; }
.sidebar-publico.derecha{ grid-column: 3; }

/* Main */
.contenido-principal{
  grid-column: 2;

  background: var(--eg-card);
  border: 1px solid var(--eg-line);
  border-radius: 18px;
  padding: 12px;
  min-height: 220px;

  min-width: 0;            /* ✅ evita overflow por hijos flex */
  overflow-wrap: anywhere; /* ✅ textos largos no rompen */
}

/* Variantes según tu PHP */
.contenido-principal.full-width{ grid-column: 1 / -1; }
.contenido-principal.solo-izquierda{ grid-column: 2 / -1; }
.contenido-principal.solo-derecha{ grid-column: 1 / 3; }

/* Responsive: 1 columna */
@media (max-width: 980px){
  .layout-publico{ grid-template-columns: 1fr; }
  .sidebar-publico.izquierda,
  .sidebar-publico.derecha,
  .contenido-principal{
    grid-column: 1 / -1;
  }
}

/* =========================
   9) Sidebar derecha: sin huecos + sin “CSS como texto”
========================= */
.sidebar-publico.derecha .premium-widget,
.sidebar-publico.derecha .sidebar-widgetbox,
.sidebar-publico.derecha .widget-block{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Si algún widget mete <style> inline, por seguridad lo ocultamos */
.sidebar-publico.derecha style{
  display: none !important;
}

/* =========================
   10) Dock (quicklinks + enviar mensaje)
========================= */
.eg-actions-dock{
  position: fixed;
  z-index: 2500;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;

  bottom: calc(var(--eg-marquesina-h) + 12px + var(--eg-safe-bottom));
  right: 12px;
}

.eg-quicklinks{
  display: none; /* se activa en desktop */
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.eg-quickbtn, .btn-marquesina{
  border: 1px solid var(--eg-line);
  background: rgba(255,255,255,.06);
  color: var(--eg-text);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
}

.btn-marquesina{
  cursor: pointer;
  background: linear-gradient(90deg, rgba(30,167,255,.25), rgba(255,211,77,.22));
}

@media (min-width: 1024px){
  .eg-quicklinks{ display: flex; }
}

/* ✅ Evita tapar la sidebar cuando el viewport es “justo” */
@media (min-width: 992px) and (max-width: 1699px){
  .eg-actions-dock{
    left: 12px;
    right: auto;
    align-items: flex-start;
  }
}
@media (min-width: 1700px){
  .eg-actions-dock{
    left: auto;
    right: 12px;
    align-items: flex-end;
  }
}

/* =========================
   11) Modal (dialog)
========================= */
.modal-marquesina{
  border: 1px solid var(--eg-line);
  border-radius: 14px;
  padding: 14px;
  background: #0b1220;
  color: var(--eg-text);
  width: min(520px, 92vw);
}
.modal-marquesina::backdrop{ background: rgba(0,0,0,.6); }

.modal-marquesina input,
.modal-marquesina textarea{
  width: 100%;
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid var(--eg-line);
  background: rgba(255,255,255,.05);
  color: var(--eg-text);
  padding: 10px;
}
.modal-marquesina textarea{ min-height: 120px; resize: vertical; }
.contador{ margin-top: 8px; color: var(--eg-muted); font-size: 13px; }

.modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}
.btn-cancel, .btn-ok{
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 900;
  border: 1px solid var(--eg-line);
  cursor: pointer;
}
.btn-ok{ background: rgba(30,167,255,.20); }
.btn-cancel{ background: rgba(255,255,255,.06); }

/* =========================
   12) Marquesina inferior noted
========================= */
#marquesina-contenedor{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2200;

  border: 1px solid var(--eg-line);
  background: rgba(0,0,0,.80);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 10px 12px;

  min-height: var(--eg-marquesina-h);
}

#marquesina-mensajes{
  color: var(--eg-text);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

/* =========================
   13) Extras: tablas/tabs dentro del contenido (no rompen ancho)
========================= */
.contenido-principal pre,
.contenido-principal code{
  max-width: 100%;
  overflow-x: auto;
}

.contenido-principal table{ max-width: 100%; }
.contenido-principal .table-responsive{
  max-width: 100%;
  overflow-x: auto;
}

.contenido-principal nav,
.contenido-principal .nav,
.contenido-principal .nav-tabs,
.contenido-principal .nav-pills,
.contenido-principal .tabs,
.contenido-principal .tab-bar,
.contenido-principal .btn-group,
.contenido-principal .btn-toolbar{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.contenido-principal .nav,
.contenido-principal .nav-tabs,
.contenido-principal .nav-pills{
  flex-wrap: nowrap;
}
.contenido-principal .nav > *,
.contenido-principal .nav-tabs > *,
.contenido-principal .nav-pills > *{
  flex: 0 0 auto;
}
:root{ --eg-maxw: 1360px; --eg-gap: 16px; }

/* Contenedor centrado */
.public-wrapper{
  max-width: var(--eg-maxw);
  margin: 0 auto;
  padding: 12px 16px;
}

/* Layout: centro + sidebar derecha */
.layout-publico{
  display: grid;
  grid-template-columns: 1fr 340px; /* central + derecha */
  gap: var(--eg-gap);
  align-items: start;
}

/* Sidebar derecha en “card” */
.sidebar-publico.derecha{
  width: 100%;
  box-sizing: border-box;
  border-radius: 16px;
  padding: 14px;
}

/* Evita overflow por contenido interno */
.contenido-principal{ min-width: 0; }

/* Mobile: todo en 1 columna */
@media (max-width: 980px){
  .layout-publico{ grid-template-columns: 1fr; }
  .sidebar-publico.derecha{ order: 2; }
  .contenido-principal{ order: 1; }
}

/* Cuando solo hay sidebar derecha => grid de 2 columnas (sin huecos) */
.layout-publico.only-right{
  display: grid;
  grid-template-columns: 1fr 320px; /* ancho del sidebar */
  gap: 16px;
  align-items: start;
}

/* Asegura que el contenido no se encoja/rompa */
.layout-publico.only-right .contenido-principal{
  min-width: 0;
}

/* Sidebar derecha ocupa su columna */
.layout-publico.only-right .sidebar-publico.derecha{
  min-width: 0;
  width: 100%;
}

/* ============================================================
   FIX DEFINITIVO: GRID PUBLICO (y modo only-right)
   - Evita huecos
   - Evita que CSS viejo pise el layout
   ============================================================ */

/* Contenedor centrado real */
.public-wrapper{
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 16px;
}

/* Layout base: por defecto 3 columnas (si alguna página lo usa) */
.layout-publico{
  display: grid !important;
  grid-template-columns: 280px minmax(0,1fr) 320px;
  gap: 16px;
  align-items: start;
}

/* ✅ SOLO SIDEBAR DERECHA (sin huecos) */
.layout-publico.only-right{
  grid-template-columns: minmax(0,1fr) 320px !important;
}

/* Asegura que cada bloque caiga en su columna correcta */
.layout-publico.only-right .contenido-principal{
  grid-column: 1 !important;
  min-width: 0;
}
.layout-publico.only-right .sidebar-publico.derecha{
  grid-column: 2 !important;
  min-width: 0;
  width: 100%;
}

/* Responsive */
@media (max-width: 980px){
  .layout-publico,
  .layout-publico.only-right{
    grid-template-columns: 1fr !important;
  }
  .layout-publico.only-right .sidebar-publico.derecha{
    grid-column: auto !important;
  }
}

/* ============================================================
   FIX LAYOUT: SOLO 2 COLUMNAS (contenido + sidebar derecho)
   - Evita que el contenido quede estrecho o desubicado
============================================================ */

/* Layout base: 1 columna por defecto */
.layout-publico{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* ✅ Cuando hay sidebar derecho: 2 columnas reales */
.layout-publico.only-right{
  grid-template-columns: minmax(0, 1fr) 340px; /* ajusta 320-380 si quieres */
}

/* Evita overflow/estrechez por hijos */
.contenido-principal{ min-width: 0; }
.sidebar-publico.derecha{ min-width: 0; width: 100%; }

/* Responsive: sidebar abajo en móviles */
@media (max-width: 980px){
  .layout-publico.only-right{
    grid-template-columns: 1fr;
  }
  .sidebar-publico.derecha{
    order: 2;
  }
  .contenido-principal{
    order: 1;
  }
}
/* ============================================================
   EG LIGHT THEME OVERRIDE
   - Cambia fondo oscuro por claros sin romper el layout
   - Pégalo al FINAL de /css/eg_public_hotfix.css
   ============================================================ */

:root{
  /* Fondo general claro */
  --eg-bg: #f3f5f7;

  /* Tarjetas / paneles claros */
  --eg-card: #ffffff;

  /* Líneas/bordes suaves */
  --eg-line: rgba(15, 23, 42, .12);

  /* Texto oscuro (para que se lea en fondo claro) */
  --eg-text: rgba(15, 23, 42, .92);
  --eg-muted: rgba(15, 23, 42, .70);

  /* Mantén acentos si te gustan */
  --eg-accent: #1ea7ff;
  --eg-accent2: #ffd34d;
}

/* Fondo del sitio */
body{
  background: var(--eg-bg) !important;
  color: var(--eg-text) !important;
}

/* Paneles principales */
.contenido-principal,
.sidebar-publico{
  background: var(--eg-card) !important;
}

/* Header más claro (si también lo sientes oscuro) */
.main-header{
  background: #ffffff !important;
  border-bottom: 1px solid var(--eg-line) !important;
}


/* Este es el cambio clave: obliga a la página a ser más larga 
   para que el footer "termine" antes de la marquesina */
html, body {
    margin: 0;
    padding: 0;
    /* Deja un espacio en blanco al final de 100px */
    padding-bottom: 150px !important; 
}

/* Ajuste específico para tu footer pro */
.ft-main_100 {
    /* Esto asegura que el contenido interno del footer 
       tenga aire suficiente antes de llegar al borde */
    margin-bottom: 0;
    padding-bottom: 80px !important;
}






/* RESET PARA QUE NO SE VEA AL FINAL */
.md-overlay_100 { 
    display: none; 
    position: fixed; 
    inset: 0; /* Cubre toda la pantalla */
    background: rgba(0,0,0,0.85); 
    z-index: 999999 !important; 
    align-items: center; 
    justify-content: center; 
}

/* Cuando se abre (vía JS) */
.md-overlay_100[style*="display: flex"],
.md-overlay_100.is-open {
    display: flex !important;
}

.md-content_100 { 
    background: #1a1a1a; 
    width: 90%; 
    max-width: 400px; 
    border-radius: 12px; 
    border: 2px solid #ffc107; 
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
/* FUERZA EL ESTILO DEL MODAL */
.md-overlay_100 { 
    display: none; 
    position: fixed !important; 
    top: 0; left: 0; 
    width: 100vw; height: 100vh; 
    background: rgba(0,0,0,0.9) !important; 
    z-index: 999999 !important; 
    align-items: center; 
    justify-content: center; 
}

/* Esta clase se activa cuando el modal está visible */
.md-overlay_100[style*="display: flex"] {
    display: flex !important;
}

.md-content_100 { 
    background: #1a1a1a !important; 
    width: 95%; 
    max-width: 420px; 
    border-radius: 12px; 
    border: 2px solid #ffc107 !important; 
    padding: 0;
    overflow: hidden;
    color: white !important;
}

.md-header_100 { 
    background: #ffc107; 
    padding: 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    color: #000 !important; 
}

.md-form_100 { padding: 20px; display: flex; flex-direction: column; gap: 10px; }

.md-group_100 input, .md-group_100 textarea { 
    width: 100%; 
    padding: 10px; 
    background: #222; 
    border: 1px solid #444; 
    color: #fff; 
    border-radius: 6px; 
    margin-bottom: 10px;
}