/* ════════════════════════════════════════════════════════════
   LAYOUT — estructura flex de la app. Mobile-first, full-screen PWA.
   ════════════════════════════════════════════════════════════ */

#app{
  display:flex;
  flex-direction:column;
}

/* ── HEADER ── */
#header{
  flex-shrink:0;
  background:var(--bg1);
  border-bottom:1px solid var(--bord);
  padding:var(--sp-3) var(--sp-3) 0;
  position:relative;
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:var(--sp-2);
}
.header-brand{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
}
.header-logo{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  background:var(--accent-glow);
  border-radius:var(--r-sm);
  flex-shrink:0;
}
.header-clock{ text-align:right; }

/* ── COMP CHIPS — fila horizontal scrolleable, sin scrollbar visible ── */
.comp-chips{
  display:flex;
  gap:var(--sp-1);
  overflow-x:auto;
  padding-bottom:var(--sp-2);
  scrollbar-width:none;
}
.comp-chips::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0;
  padding:6px 14px;
  border-radius:var(--r-full);
  background:var(--bg2);
  border:1px solid var(--bord);
  color:var(--sub);
  font-size:var(--fs-xs);
  white-space:nowrap;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip.on{
  background:var(--accent-glow);
  border-color:var(--accent);
  color:var(--accent-hi);
}

/* ── TICKER (partidos en vivo, colapsa si está vacío) ── */
#ticker{
  flex-shrink:0;
  overflow:hidden;
  max-height:0;
  transition:max-height var(--t-slow);
}
#ticker.has-live{ max-height:34px; }

/* ── TABS (sub-navegación de la competición activa) ── */
.tabs{
  flex-shrink:0;
  display:flex;
  overflow-x:auto;
  background:var(--bg1);
  border-bottom:1px solid var(--bord);
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:1;
  min-width:64px;
  padding:var(--sp-2) 4px;
  text-align:center;
  color:var(--dim);
  position:relative;
  transition:color var(--t-fast);
}
.tab.on{ color:var(--accent-hi); }
.tab.on::after{
  content:'';
  position:absolute;
  left:20%;right:20%;bottom:-1px;
  height:2px;
  background:var(--accent);
  border-radius:2px 2px 0 0;
}

/* ── CONTENIDO PRINCIPAL ── */
.scroll{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--bg0);
  padding-bottom:var(--sp-3);
}

/* ── BOTTOM NAV ── */
.bottom-nav{
  flex-shrink:0;
  display:flex;
  background:var(--bg1);
  border-top:1px solid var(--bord);
  padding-bottom:env(safe-area-inset-bottom, 0); /* iPhone con home indicator */
}
.bn-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:var(--sp-2) 2px calc(var(--sp-1));
  color:var(--dim);
  transition:color var(--t-fast);
}
.bn-item.on{ color:var(--accent-hi); }
.bn-icon{ font-size:18px; line-height:1; }

/* ── SKELETON layout (el shape vive en components.css/animations.css) ── */
.skeleton-list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  padding:var(--sp-3);
}