:root {
  --bg-from: #eef2ff; /* indigo-50 */
  --bg-via: #f0f9ff; /* sky-50 */
  --bg-to:  #ecfdf5; /* emerald-50 */
  --accent: #2563eb; /* azul */
}
/* Tema Niño */
.theme-nino {
  --bg-from: #eff6ff; /* blue-50 */
  --bg-via: #e6fffb; /* teal-50 aprox */
  --bg-to:  #ecfeff; /* cyan-50 */
  --accent: #2563eb; /* blue-600 */
}
/* Tema Niña */
.theme-nina {
  --bg-from: #fff1f2; /* rose-50 */
  --bg-via: #faf5ff; /* purple-50 */
  --bg-to:  #f5f3ff; /* violet-50 */
  --accent: #db2777; /* pink-600 */
}

/* Utilidades que leen variables */
.site-bg {
  background-image: linear-gradient(to bottom right, var(--bg-from), var(--bg-via), var(--bg-to));
}
.bg-accent { background-color: var(--accent); }
.text-accent { color: var(--accent); }
.bg-accent\/10 { background-color: color-mix(in srgb, var(--accent) 10%, transparent); }

:root {
  --bg-from: #eef2ff;
  --bg-via: #f0f9ff;
  --bg-to:  #ecfdf5;
  --accent: #2563eb;
}
.theme-nino { --bg-from:#eff6ff; --bg-via:#e6fffb; --bg-to:#ecfeff; --accent:#2563eb; }
.theme-nina { --bg-from:#fff1f2; --bg-via:#faf5ff; --bg-to:#f5f3ff; --accent:#db2777; }
.site-bg { background-image: linear-gradient(to bottom right, var(--bg-from), var(--bg-via), var(--bg-to)); }
.bg-accent { background-color: var(--accent); }
.text-accent { color: var(--accent); }
.bg-accent\/10 { background-color: color-mix(in srgb, var(--accent) 10%, transparent); }
.glass { backdrop-filter: blur(10px); background: linear-gradient(140deg, rgba(255,255,255,0.78), rgba(255,255,255,0.55)); }

/* Tarjeta de avatar */
.avatar-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  background: white;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 0.75rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.avatar-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.avatar-card.selected { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Memoria: tarjetas */
.mem-card {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 */
  perspective: 800px;
  border: none;
  background: transparent;
}
.mem-inner {
  position: absolute; inset: 0;
  border-radius: 0.75rem;
  transform-style: preserve-3d;
  transition: transform 0.35s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.mem-front, .mem-back {
  position: absolute; inset: 0; display: grid; place-items: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 0.75rem; font-size: 2rem;
}
.mem-front { background: white; border: 1px solid rgba(0,0,0,0.08); }
.mem-back {
  transform: rotateY(180deg);
  border: 1px solid rgba(0,0,0,0.08);
  background: var(--accent);
  color: white;
}
.mem-card.flipped .mem-inner { transform: rotateY(180deg); }

/* Versículo: hero con patrón por tema */
.verse-hero { position: relative; }
.verse-hero .verse-pattern { position:absolute; inset:0; opacity:0.12; pointer-events:none; background-size: 28px 28px; }
.theme-nino .verse-hero .verse-pattern { background-image: radial-gradient(var(--accent) 1px, transparent 1px); }
.theme-nina .verse-hero .verse-pattern { background-image: linear-gradient(45deg, color-mix(in srgb, var(--accent) 25%, white) 12%, transparent 12%), linear-gradient(-45deg, color-mix(in srgb, var(--accent) 25%, white) 12%, transparent 12%); background-size: 16px 16px, 16px 16px; background-position: 0 0, 8px 8px; opacity:0.08; }

/* Confetti minimal */
.confetti { position:fixed; inset:0; pointer-events:none; background-image: radial-gradient(var(--accent) 2px, transparent 2px), radial-gradient(#f59e0b 2px, transparent 2px), radial-gradient(#10b981 2px, transparent 2px); background-size: 12px 12px, 14px 14px, 16px 16px; animation: confetti 1.2s ease forwards; }
@keyframes confetti { from { opacity:1; transform: translateY(0); } to { opacity:0; transform: translateY(12%); } }

/* Caja 16:9 responsiva para iframes/players */
.ratio-16x9 { position: relative; width: 100%; }
.ratio-16x9::before { content: ""; display: block; padding-top: 56.25%; } /* 9/16 */
.ratio-16x9 > .ratio-content { position: absolute; inset: 0; width: 100%; height: 100%; }

/* contenedor de texto puede encogerse dentro de flex */
.min-w-0 { min-width: 0; }

/* Títulos de la cola: 2 líneas con elipsis */
.pvk-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Overlay por encima de los players */
#swapOverlay { z-index: 5; }

/* (opcional) wrappers por debajo del overlay */
#playerAWrap, #playerBWrap { z-index: 1; }
/* contenedor del título con máscara suave a los bordes */

.pvk-marquee {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent);
}

/* el texto que se animará */
.pvk-marquee-inner {
  display: inline-block;
  will-change: transform;
}

/* estado animando (la duración se inyecta vía style="--pvk-marquee-dur: Xs") */
.pvk-marquee-anim {
  animation: pvk-marquee var(--pvk-marquee-dur, 6s) linear infinite;
}
@keyframes pvk-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--pvk-marquee-dist, -100%)); }
}
/* Panel de letras */
#lyricsOut {
  max-height: 320px;       /* ajusta a tu layout */
  overflow-y: auto;
  scroll-behavior: smooth; /* scroll suave */
  padding: 8px 12px;
}

#lyricsOut .lyric-line { line-height: 1.6; padding: 2px 0; }
#lyricsOut .lyric-line.active {
  font-weight: 600;
  background: rgba(0,0,0,.06);
  border-radius: 6px;
}
/* carátula grande del player */
#coverImg {
  width: 64px;   /* ajusta a tu gusto */
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
}

/* Solo el wrapper visible recibe clics */
#playerAWrap, #playerBWrap { transition: opacity .15s ease; }
#playerBWrap { pointer-events: none; }   /* B oculto por defecto */
#swapOverlay{ transition: opacity .15s ease; z-index: 5; }
#playerAWrap[style*="opacity:1"] { pointer-events:auto; }
#playerAWrap[style*="opacity:0"] { pointer-events:none; }
#playerBWrap[style*="opacity:1"] { pointer-events:auto; }
#playerBWrap[style*="opacity:0"] { pointer-events:none; }

/* === Responsive fixes globales === */
html, body { overflow-x: hidden; }

/* Medios fluidos por defecto */
img, svg, canvas, video { max-width: 100%; height: auto; }

/* Respetar notch / barras en iOS */
:root {
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}
body { padding-bottom: max(0px, var(--safe-bottom)); }

/* Contenedor del área de colorear */
.canvas-wrap {
  position: relative;
  width: 100%;
  max-width: 680px;          /* ajusta si quieres más ancho en desktop */
  margin: 0 auto;            /* centrar */
  aspect-ratio: 3 / 4;       /* por defecto, luego lo ajustamos por JS al viewBox */
}

/* Capas del lienzo (SVG arriba, canvas color abajo) */
#svgHost,
#paintCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;        /* evita desplazamientos erráticos al pintar */
}/* ====== Patches responsive móviles/tablets ====== */
/* 1) En pantallas pequeñas, header de videos apila controles */
@media (max-width: 640px) {
  .page-videos section .flex.items-center.justify-between { gap: 8px; }
  .page-videos section .flex.items-center.justify-between > div:last-child { width: 100%; justify-content: flex-start; flex-wrap: wrap; row-gap: 6px; }
}

/* 2) Grid principal: usar 1 columna en móviles, 12 cols en tablets */
@media (max-width: 1023px) {
  .page-videos .grid { display: grid; grid-template-columns: 1fr; }
  .page-videos aside { order: 2; }
  .page-videos section.lg\:col-span-9 { order: 1; }
}

/* 3) Playlists: que la thumb no descuadre el layout */
.page-videos #playlists img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; }
@media (max-width: 480px) {
  .page-videos #playlists img { width: 72px; height: 48px; }
}

/* 4) Cola: dos columnas en >=640px, una en móviles muy chicos */
@media (max-width: 400px) {
  .page-videos #queue { grid-template-columns: 1fr !important; }
}

/* 5) Botones flotantes del player: no tapar en móviles */
@media (max-width: 640px) {
  #playerStage .top-2.right-2 { top: 6px; right: 6px; }
}

/* 6) Safe area inferior para iOS, evitar que el footer tape contenido */
@supports (padding: max(0px)) {
  body { padding-bottom: max(12px, var(--safe-bottom)); }
}

/* 7) Limitar tamaños de fuente en títulos del header para evitar saltos */
@media (max-width: 480px) {
  .page-videos h1 { font-size: 1.1rem !important; }
}
/* Parches adicionales de layout en móviles para Videos */
@media (max-width: 640px) {
  .page-videos section.rounded-2xl { padding: 12px !important; }
  .page-videos .absolute.top-2.right-2 { top: 6px; right: 6px; }
}
/* ====== Parches responsive para Versículo ====== */
.page-verse .hero-row { align-items: flex-start; }
.page-verse .hero-aside { min-width: 180px; }

@media (max-width: 1024px) {
  .page-verse .hero-row { flex-wrap: wrap; gap: 10px; }
  .page-verse .hero-aside { width: 100%; text-align: left; margin-left: 0; }
  .page-verse .verse-xp { width: 100% !important; max-width: 320px; }
}

@media (max-width: 480px) {
  .page-verse h1 { font-size: 1.15rem; }
  .page-verse #vText { font-size: 0.98rem; line-height: 1.5; }
  .page-verse .hero-aside .flex { gap: 6px; }
}

/* Evitar desbordes horizontales en chips/botones */
.page-verse .hero-row .flex.flex-wrap.items-center.gap-2 > * { max-width: 100%; }
/* ====== Responsive Versículo (aplica al markup actual) ====== */
@media (max-width: 1024px) {
  /* Apilar bloques del hero y permitir flujo vertical */
  .verse-hero > .flex.items-start { flex-wrap: wrap; gap: 10px; }
  .verse-hero .ml-auto.text-right { width: 100%; text-align: left; margin-left: 0; }
  .verse-hero .verse-xp { width: 100% !important; max-width: 320px; }
}
@media (max-width: 480px) {
  .verse-hero h1 { font-size: 1.15rem; }
  .verse-hero #vText { font-size: 0.98rem; line-height: 1.5; }
  /* Evitar desborde de chips/botones */
  .verse-hero .flex.flex-wrap.items-center.gap-2 > * { max-width: 100%; }
}