/* ============================================================
   PROYECTOS ESCOLARES — style.css  v3.0
   ============================================================ */

*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* Colores */
  --bg:             #0a0a0a;
  --ui-bg:          rgba(0,0,0,0.55);
  --ui-border:      rgba(255,255,255,0.12);
  --text:           rgba(255,255,255,0.92);
  --text-dim:       rgba(255,255,255,0.50);
  --school-primary: #1a1a2e;
  --school-accent:  #e8c547;
  --docente-accent: #4fc3f7;
  --padres-accent:  #81c784;

  /* Safe areas */
  --safe-bottom:    env(safe-area-inset-bottom, 0px);
  --safe-top:       env(safe-area-inset-top, 0px);

  /* Layout */
  --tab-h:          62px;
  --sidebar-w:      200px;

  /* Breakpoints como referencia (usados en JS y comentarios) */
  /* --bp-sm: 360px | --bp-md: 768px | --bp-lg: 1024px */

  /* Tipografía */
  --font-main: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body {
  background: var(--bg);
  font-family: var(--font-main);
  overscroll-behavior: none;
  height: 100%;
}


/* ============================================================
   SPLASH
   ============================================================ */

#splash {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--school-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#splash.splash-out { opacity: 0; transform: scale(1.04); pointer-events: none; }

.splash-inner {
  display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 32px;
  animation: splashFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes splashFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── FIX LOGO: contenedor fijo + blend mode para eliminar fondo negro de la PNG ── */
.splash-logo-mark {
  /* Tamaño FIJO — primer muro de contención del logo */
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sin fondo propio: el blend mode de la imagen actúa directo contra --school-primary */
  background: transparent;
  animation: splashPop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}
.splash-logo-img {
  /* La imagen llena el contenedor y object-fit:contain escala sin deformar */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* mix-blend-mode: screen hace que el negro puro del fondo de la PNG
     desaparezca sobre el fondo oscuro del splash (#1a1a2e).
     Los colores claros/rojos del escudo quedan completamente visibles. */
  mix-blend-mode: screen;
}
@keyframes splashPop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
.splash-logo-text {
  font-size: clamp(22px,6vw,32px); font-weight: 800;
  color: #fff; letter-spacing: -0.02em; text-align: center; line-height: 1;
  animation: splashFadeUp 0.5s ease 0.3s both;
}
.splash-logo-text span { color: var(--school-accent); display: block; }
.splash-tagline {
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); text-align: center;
  animation: splashFadeUp 0.5s ease 0.45s both;
}
.splash-loader {
  width: 120px; height: 2px; background: rgba(255,255,255,0.12);
  border-radius: 999px; overflow: hidden;
  animation: splashFadeUp 0.5s ease 0.55s both;
}
.splash-loader-fill {
  height: 100%; background: var(--school-accent); border-radius: 999px; width: 0%;
  animation: splashLoad 1.8s cubic-bezier(0.4,0,0.2,1) 0.6s forwards;
}
@keyframes splashLoad { 0%{width:0%} 60%{width:75%} 85%{width:92%} 100%{width:100%} }
.splash-skip {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.25); cursor: pointer;
  animation: splashFadeUp 0.5s ease 1.6s both;
}


/* ============================================================
   BARRA DE PROGRESO
   ============================================================ */

#progressBar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; background: rgba(255,255,255,0.08); z-index: 400;
}
#progressFill {
  height: 100%; background: var(--school-accent); width: 0%;
  transition: width 0.35s cubic-bezier(0.4,0,0.2,1);
}
body[data-tab="docentes"] #progressFill { background: var(--docente-accent); }
body[data-tab="padres"]   #progressFill { background: var(--padres-accent); }


/* ============================================================
   CONTADOR
   ============================================================ */

#counter {
  position: fixed; top: calc(14px + var(--safe-top)); right: 16px;
  z-index: 300;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-dim);
  background: var(--ui-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--ui-border); padding: 6px 12px; border-radius: 999px;
  pointer-events: none;
}
#counter .sep { margin: 0 3px; opacity: 0.4; }
#current { color: var(--school-accent); }
body[data-tab="docentes"] #current { color: var(--docente-accent); }
body[data-tab="padres"]   #current { color: var(--padres-accent); }


/* ============================================================
   BADGE ORIENTACIÓN
   ============================================================ */

#orientationBadge {
  position: fixed; top: calc(14px + var(--safe-top)); left: 16px;
  z-index: 300;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); background: var(--ui-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--ui-border); padding: 6px 10px; border-radius: 999px;
  pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
}
#orientationBadge.visible { opacity: 1; }


/* ============================================================
   BARRA DE TABS
   ============================================================ */

#tabBar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
  height: calc(var(--tab-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: flex; align-items: stretch;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.tab-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); padding: 8px 4px 0;
  transition: color 0.2s; touch-action: manipulation; position: relative;
}
.tab-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.tab-icon svg { width: 22px; height: 22px; transition: transform 0.2s; }
.tab-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* Línea indicadora superior */
.tab-btn::before {
  content: ''; position: absolute; top: 0; left: 25%; right: 25%;
  height: 2px; border-radius: 0 0 2px 2px; background: transparent;
  transition: background 0.2s;
}
.tab-btn[data-tab="alumnos"].active  { color: var(--school-accent); }
.tab-btn[data-tab="alumnos"].active::before  { background: var(--school-accent); }
.tab-btn[data-tab="docentes"].active { color: var(--docente-accent); }
.tab-btn[data-tab="docentes"].active::before { background: var(--docente-accent); }
.tab-btn[data-tab="padres"].active   { color: var(--padres-accent); }
.tab-btn[data-tab="padres"].active::before   { background: var(--padres-accent); }
.tab-btn.active .tab-icon svg { transform: scale(1.1); }
.tab-btn:active { opacity: 0.7; }


/* ============================================================
   CONTENEDOR DE FEEDS
   ============================================================ */

#feedContainer { position: fixed; inset: 0; }

.feed-panel {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.feed-panel.active { opacity: 1; pointer-events: all; }

.feed {
  /* FIX CLAVE: --real-vh calculado por JS = window.innerHeight real,
     excluye la barra del browser en iOS Safari */
  height: calc(var(--real-vh, 1vh) * 100);
  overflow-y: scroll; scroll-snap-type: y mandatory;
  scroll-behavior: smooth; overscroll-behavior-y: none;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.feed::-webkit-scrollbar { display: none; }


/* ============================================================
   SECCIÓN DE VIDEO
   ============================================================ */

.video-section {
  position: relative;
  /* FIX DEFINITIVO iOS Safari:
     --real-vh se calcula en JS con window.innerHeight (excluye UI del browser).
     100dvh es el fallback moderno, 100vh como último recurso. */
  height: calc(var(--real-vh, 1vh) * 100);
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  background: var(--bg); overflow: hidden; isolation: isolate;
}

/* ============================================================
   YOUTUBE WRAPPER — contenedor del iframe y poster
   ============================================================ */

/* Wrapper que ocupa todo el espacio disponible de la sección */
.yt-wrapper {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1; overflow: hidden;
  background: #000;
}

/* El div donde YT.Player inyecta el <iframe> */
.yt-player-box {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* El iframe generado por YT.Player */
.yt-player-box iframe {
  position: absolute;
  width: 100%; height: 100%;
  border: none; pointer-events: none; /* touch lo maneja el sitio */
}

/* ── Vertical: iframe que cubre toda la pantalla (tipo Reels) ── */
.video-section.is-vertical .yt-player-box iframe {
  /* Usamos scale para agrandar el iframe y empujar la UI de YouTube
     (barra de título arriba, barra de controles abajo) fuera del viewport.
     scale(1.18) = 18% más grande → ~9% de margen en cada lado vertical.
     El overflow:hidden del .yt-wrapper recorta lo que sobresale.
     Más predecible que top/height% porque no depende del containing block. */
  transform: scale(1.18);
  transform-origin: center center;
}

/* ── Horizontal: iframe centrado con relación 16:9 ── */
.video-section.is-horizontal .yt-player-box {
  position: relative;
  width: 100%;
  /* aspect-ratio moderno — soportado en todos los browsers actuales */
  aspect-ratio: 16 / 9;
  max-width: min(100vw, 900px);
  flex-shrink: 0;
}
.video-section.is-horizontal .yt-player-box iframe {
  position: absolute;
  /* Mismo truco scale para ocultar UI de YT en horizontal */
  top: 0; left: 0;
  width: 100%; height: 100%;
  transform: scale(1.04);
  transform-origin: center center;
}

/* ── Poster: miniatura de YT que se muestra mientras carga el player ── */
.yt-poster {
  position: absolute; inset: 0;
  background-color: #111;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  transition: opacity 0.4s ease;
  overflow: hidden;
}
/* BUG-13 FIX: img ocupa el poster completo con object-fit:cover */
.yt-poster-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;
}
.yt-poster-play {
  position: relative; z-index: 1;  /* sobre la imagen */
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  border: 2px solid rgba(255,255,255,0.3);
  animation: posterPulse 2s ease infinite;
}
@keyframes posterPulse {
  0%,100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.85; }
}

/* ── Capa de toque transparente sobre el iframe (BUG-16 FIX) ── */
/* Captura touch/click que el iframe de YT bloquearía */
.yt-touch-layer {
  position: absolute; inset: 0; z-index: 5;
  cursor: pointer;
  /* Transparente — solo para interceptar eventos */
  background: transparent;
}

/* ── Video con ytId inválido / placeholder ── */
.yt-invalid {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--text-dim); font-size: 13px; text-align: center; padding: 20px;
}
.yt-invalid span { font-size: 32px; }

/* ── Estado error ── */
.video-section.yt-error .yt-wrapper::after {
  content: '⚠ Video no disponible';
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-dim);
  background: rgba(0,0,0,0.7);
  z-index: 20;
}

/* ── Vertical: info sobre el video ── */
.video-section.is-vertical .video-info {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 20;
  padding: 48px 20px calc(var(--tab-h) + var(--safe-bottom) + 24px);
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
  pointer-events: none;
}

/* ── Horizontal: info debajo del video ── */
.video-section.is-horizontal {
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.video-section.is-horizontal .yt-wrapper {
  /* BUG-15 FIX: reset explícito en vez de inset:unset (comportamiento inconsistente) */
  position: relative;
  top: auto; left: auto; right: auto; bottom: auto;
  width: 100%;
  height: auto;
  background: transparent;
}
.video-section.is-horizontal .yt-player-box {
  position: relative;
}
.video-section.is-horizontal .video-info {
  position: relative; width: 100%;
  padding: 10px 20px calc(var(--tab-h) + var(--safe-bottom) + 16px);
  background: none; z-index: 20; pointer-events: none;
}


/* ============================================================
   INFO DEL VIDEO
   ============================================================ */

.video-meta-top { display: flex; gap: 8px; margin-bottom: 8px; }

.video-materia, .video-grado {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}
/* Chip por rol */
.video-materia:not(.docente-chip):not(.padres-chip) { background: var(--school-accent); color: #1a1a1a; }
.docente-chip { background: var(--docente-accent); color: #0a1929; }
.padres-chip  { background: var(--padres-accent);  color: #0a1f0a; }
.video-grado  { background: rgba(255,255,255,0.15); color: var(--text); border: 1px solid rgba(255,255,255,0.2); }

.video-title {
  font-size: 18px; font-weight: 800; color: var(--text);
  letter-spacing: -0.02em; text-shadow: 0 1px 8px rgba(0,0,0,0.8); line-height: 1.2;
  margin-bottom: 12px;
}

/* Fila de acciones: contador ⭐ + botón votar */
.video-actions {
  display: flex; align-items: center; gap: 10px;
  pointer-events: all;
}

.reaction-count-inline {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.55);
  display: flex; align-items: center; gap: 4px;
}

.reaction-num.pop {
  display: inline-block;
  animation: numPop 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes numPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.5); color: var(--school-accent); }
  100% { transform: scale(1); }
}

/* Botón 👑 Votar (solo Alumnos) */
.vote-btn {
  height: 32px; padding: 0 14px; border-radius: 999px;
  background: linear-gradient(135deg, #e8c547, #f5a623); color: #1a1a1a;
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
  border: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.15s, opacity 0.2s; touch-action: manipulation;
  box-shadow: 0 2px 12px rgba(232,197,71,0.35);
}
.vote-btn:hover { transform: scale(1.06); }
.vote-btn:active { transform: scale(0.92); }
.vote-btn:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }


/* ============================================================
   REACCIÓN FLOTANTE
   ============================================================ */

.reaction-badge {
  position: absolute; top: 56px; left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 40;
  background: rgba(0,0,0,0.70);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 999px;
  padding: 7px 16px; font-size: 13px; font-weight: 700; color: var(--school-accent);
  pointer-events: none; opacity: 0; white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.reaction-badge.visible { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ============================================================
   CANVAS
   ============================================================ */

#particleCanvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 200;
}


/* ============================================================
   PANEL DE VOTACIÓN
   ============================================================ */

#voteOverlay {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,0.80);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
#voteOverlay.open { opacity: 1; pointer-events: all; }

#votePanel {
  width: 100%; max-width: 520px;
  background: #111118; border-top: 1px solid rgba(255,255,255,0.10);
  border-radius: 24px 24px 0 0;
  padding: 0 0 calc(24px + var(--safe-bottom));
  max-height: 85vh; overflow-y: auto; scrollbar-width: none;
  transform: translateY(40px);
  transition: transform 0.35s cubic-bezier(0.32,0.72,0,1); position: relative;
}
#votePanel::-webkit-scrollbar { display: none; }
#voteOverlay.open #votePanel { transform: translateY(0); }

#voteClose {
  position: absolute; top: 16px; right: 20px;
  background: rgba(255,255,255,0.08); border: none;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--text-dim); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
#voteClose:hover { background: rgba(255,255,255,0.15); }

#votePanelHeader {
  text-align: center; padding: 28px 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
#voteCrown { font-size: 32px; display: block; margin-bottom: 8px; }
#votePanelTitle { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
#votePanelSubtitle {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--school-accent); margin-top: 4px;
}
#voteContent { padding: 20px 20px 0; }

.vote-instructions { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin-bottom: 16px; text-align: center; }

.vote-candidates { display: flex; flex-direction: column; gap: 8px; }
.candidate {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
}
.candidate-highlight { border-color: rgba(232,197,71,0.4); background: rgba(232,197,71,0.06); }
.candidate-info { flex: 1; min-width: 0; }
.candidate-materia {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--school-accent); margin-bottom: 2px;
}
.candidate-title { display: block; font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.candidate-vote-btn {
  flex-shrink: 0; height: 32px; padding: 0 16px; border-radius: 999px;
  background: var(--school-accent); color: #1a1a1a;
  font-size: 12px; font-weight: 800; border: none; cursor: pointer;
  transition: transform 0.15s; touch-action: manipulation;
}
.candidate-vote-btn:hover { transform: scale(1.05); }
.candidate-vote-btn:active { transform: scale(0.93); }

.vote-confirmed, .vote-already { text-align: center; padding: 8px 0 16px; }
.vote-confirmed-icon, .vote-already-icon {
  font-size: 48px; display: block; margin-bottom: 12px;
  animation: splashPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.vote-confirmed-title, .vote-already-title { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.vote-confirmed-sub, .vote-already-sub { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-bottom: 20px; }
.vote-confirmed-sub strong, .vote-already-sub strong { color: var(--school-accent); }

.vote-results { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.result-row { display: flex; align-items: center; gap: 10px; }
.result-title { font-size: 12px; font-weight: 600; color: var(--text-dim); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-bar-wrap { width: 80px; height: 6px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.result-bar { height: 100%; background: var(--school-accent); border-radius: 999px; min-width: 4px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
.result-count { font-size: 12px; font-weight: 700; color: var(--school-accent); min-width: 20px; text-align: right; flex-shrink: 0; }


/* ============================================================
   SONIDO
   ============================================================ */

#soundToggle {
  position: fixed;
  bottom: calc(var(--tab-h) + 16px + var(--safe-bottom)); right: 20px;
  z-index: 300; border: 1px solid var(--ui-border);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ui-bg); color: white; font-size: 20px; cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, background 0.2s; touch-action: manipulation;
}
#soundToggle:active { transform: scale(0.88); }
#soundToggle.active { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); }


/* ============================================================
   WHATSAPP
   ============================================================ */

#whatsappBtn {
  position: fixed;
  bottom: calc(var(--tab-h) + 16px + var(--safe-bottom)); left: 20px;
  z-index: 300; display: flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff; text-decoration: none;
  border-radius: 999px; padding: 0 18px 0 14px; height: 48px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 4px 20px rgba(37,211,102,0.40); touch-action: manipulation;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
  animation: waBounceIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.8s both;
}
#whatsappBtn svg { width: 22px; height: 22px; fill: #fff; flex-shrink: 0; }
#whatsappBtn:hover { background: #1ebe5d; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,0.50); }
#whatsappBtn:active { transform: scale(0.93); }
#whatsappBtn::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid rgba(37,211,102,0.6);
  animation: waPulse 3s ease 5s infinite; pointer-events: none;
}
@keyframes waBounceIn {
  from { opacity: 0; transform: translateY(16px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes waPulse {
  0%  { transform: scale(1); opacity: 0.7; }
  60% { transform: scale(1.18); opacity: 0; }
  100%{ transform: scale(1.18); opacity: 0; }
}
@media (max-width: 767px) {
  .wa-label { display: none; }
  #whatsappBtn { padding: 0; width: 48px; justify-content: center; }
}
@media (max-width: 359px) {
  #whatsappBtn, #soundToggle { width: 44px; height: 44px; }
}


/* ============================================================
   SCROLL HINT
   ============================================================ */

#scrollHint {
  position: fixed;
  bottom: calc(var(--tab-h) + 96px + var(--safe-bottom)); left: 50%;
  transform: translateX(-50%); z-index: 300;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-dim); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; pointer-events: none; opacity: 0;
  animation: fadeHint 0.5s ease 2.5s both, bounceHint 2s ease 2.5s infinite;
}
#scrollHint.hidden { display: none; }
.arrow { width: 1px; height: 28px; background: linear-gradient(to bottom, var(--text-dim), transparent); position: relative; }
.arrow::after {
  content: ''; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%) rotate(45deg); width: 6px; height: 6px;
  border-right: 1px solid var(--text-dim); border-bottom: 1px solid var(--text-dim);
}
@keyframes fadeHint {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes bounceHint {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(6px); }
}


/* ============================================================
   FEED VACÍO
   ============================================================ */

.feed-empty {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  padding: 40px;
}
.feed-empty-icon { font-size: 48px; }
.feed-empty-text {
  font-size: 20px; font-weight: 800; color: var(--text);
  letter-spacing: -0.02em;
}
.feed-empty-sub {
  font-size: 13px; color: var(--text-dim);
  text-align: center; line-height: 1.5;
}


/* ============================================================
   SPINNER
   ============================================================ */

.video-section.loading .yt-poster::after {
  content: ''; position: absolute; width: 32px; height: 32px;
  border: 2px solid rgba(255,255,255,0.15); border-top-color: rgba(255,255,255,0.85);
  border-radius: 50%; animation: spin 0.8s linear infinite;
  pointer-events: none; z-index: 30;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ============================================================
   DESKTOP (≥ 768px) — sidebar lateral
   ============================================================ */

@media (min-width: 768px) {
  #tabBar {
    top: 0; bottom: auto; left: 0; right: auto;
    width: var(--sidebar-w); height: 100%; height: 100dvh;
    flex-direction: column; justify-content: flex-start;
    padding: 32px 0; border-top: none;
    border-right: 1px solid rgba(255,255,255,0.08); gap: 4px;
  }
  .tab-btn {
    flex: none; flex-direction: row; justify-content: flex-start;
    gap: 10px; padding: 12px 24px;
    border-radius: 0 12px 12px 0; margin-right: 8px; width: auto;
  }
  .tab-btn::before {
    top: 0; bottom: 0; left: 0; right: auto;
    width: 3px; height: auto; border-radius: 0 2px 2px 0;
  }
  .tab-icon svg { width: 20px; height: 20px; }
  .tab-label { font-size: 13px; letter-spacing: 0.04em; }
  .tab-btn.active { background: rgba(255,255,255,0.05); }

  #feedContainer { left: var(--sidebar-w); }
  #counter       { right: 24px; }
  #soundToggle   { bottom: 30px; }
  #whatsappBtn   { bottom: 30px; }
  #voteOverlay   { align-items: center; left: var(--sidebar-w); }
  #votePanel     { border-radius: 24px; max-height: 80vh; }

  /* Videos en desktop */
  .video-section { background: #050505; }
  .video-section.is-vertical .video-info {
    padding-bottom: calc(52px + var(--safe-bottom));
  }
  /* Vertical en desktop: centra el iframe con max-width de celular */
  .video-section.is-vertical .yt-wrapper {
    max-width: 430px;
    left: 50%; transform: translateX(-50%);
    border-radius: 20px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.75);
    overflow: hidden;
  }
  .video-section.is-vertical .video-info {
    max-width: 430px; left: 50%; transform: translateX(-50%);
    border-radius: 0 0 20px 20px;
  }
  /* Horizontal en desktop: limita el ancho */
  .video-section.is-horizontal .yt-wrapper {
    max-width: min(90vw, 900px);
  }
  .video-section.is-horizontal .yt-player-box {
    max-width: min(90vw, 900px);
  }
  .video-section.is-horizontal .video-info {
    width: min(90vw, 900px);
  }
}

@media (min-width: 1024px) {
  .video-section.is-horizontal .yt-player-box { max-height: 78vh; }
}


/* ============================================================
   REDUCCIÓN DE MOVIMIENTO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  #splash, .splash-inner, .splash-logo-mark { animation: none; }
  .splash-loader-fill { width: 100%; }
  #scrollHint { animation: none; }
  .video-section.loading .yt-poster::after { animation: none; }
  .feed { scroll-behavior: auto; }
  .feed-panel, #votePanel { transition: none; }
  .yt-poster-play { animation: none; }
}