/* OreMar · identidad de marca dentro de la app
   Tipografía de marca (Sora) solo en títulos; la interfaz sigue con la fuente del sistema. */
@font-face { font-family: "Sora"; font-weight: 700; font-display: swap; src: url(../fonts/sora-700.woff2) format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 800; font-display: swap; src: url(../fonts/sora-800.woff2) format("woff2"); }

.wordmark, .splash-t, .hdr h1, .d-title, .lg-card h1, .picker .pk-head h1, .lv-num, .lv-name, .vd-title, .acc-name,
.pset h2, .g-ititle, .pin-box h1, .sk-t, .pair-box h1, .pair-code, .pv-name, .digits {
  font-family: "Sora", "LG Smart UI", Roboto, system-ui, sans-serif; letter-spacing: -0.02em;
}
.wordmark { font-weight: 700; }
.pair-code { letter-spacing: .08em; }

/* Texto sobre el acento: tinta (contraste ≥ 5:1 con todos los acentos de Ajustes) */
.login .btn, .pin-key.ok, .app-chk, .mv { color: #07090D; }

/* Símbolo en el login y el selector de cuentas */
.lg-card > .brand.big, .pk-head > .brand.big { margin: 0 auto; }
.pk-head > .brand.big { width: 104px; height: 104px; }

/* Cargador de marca dentro de las listas */
.msg .om-loader { margin: 0 auto 22px; }
.msg { align-content: center; }
/* ---------- Símbolo ---------- */
.om-sym { display: block; width: 100%; height: 100%; overflow: visible; }
.om-sym .om-disc { fill: var(--ac, #FF5C39); }
.om-sym .om-play { fill: #fff; stroke: #fff; stroke-width: 7; stroke-linejoin: round; }
.om-sym .om-wave { fill: none; stroke: #000; stroke-width: 7; stroke-linecap: round; }

/* Reemplazo del círculo "OM": .brand ahora contiene el símbolo */
.brand { background: none !important; }
.brand .om-sym { width: 100%; height: 100%; }

/* ---------- Splash ---------- */
#splash { gap: 36px; }
#splash .om-splash-sym { width: 168px; height: 168px; }
/* la escala se aplica al contenedor HTML (no al SVG) para que funcione igual en webOS antiguos */
#splash .om-splash-sym { animation: om-disc-in 620ms cubic-bezier(.2, 1.4, .4, 1) both; }
#splash .om-splash-sym .om-play { animation: om-play-in 520ms cubic-bezier(.23, 1, .32, 1) 260ms both; }
#splash .om-splash-sym .om-wave { animation: om-wave 2400ms linear infinite; }
#splash .wordmark { font-size: 64px; letter-spacing: -2px; animation: om-rise 520ms cubic-bezier(.23, 1, .32, 1) 480ms both; }
#splash .om-tag { font-size: 26px; color: var(--tx2, #a7b0c0); animation: om-rise 520ms cubic-bezier(.23, 1, .32, 1) 640ms both; }
#splash.out { transition: opacity 360ms ease, transform 360ms ease; transform: scale(1.04); }

@keyframes om-disc-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes om-play-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes om-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
/* la ola es periódica cada 100 unidades: moverla 100 a la derecha la deja igual */
@keyframes om-wave { from { transform: translateX(0); } to { transform: translateX(100px); } }

/* ---------- Cargador de marca (listas, cambio de cuenta, buffering largo) ---------- */
.om-loader { width: 96px; height: 96px; }
.om-loader .om-wave { animation: om-wave 1400ms linear infinite; }
.om-loader { animation: om-breathe 1400ms ease-in-out infinite; }
@keyframes om-breathe { 50% { transform: scale(.94); } }

/* ---------- "En vivo": punto que late (EPG, tarjetas de canal, Reproduciendo ahora) ---------- */
.om-live { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 1px; color: var(--ac, #FF5C39); }
.om-live::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; animation: om-pulse 1600ms ease-in-out infinite; }
@keyframes om-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* ---------- Cambio de canal: destello del símbolo en la esquina (zapping) ---------- */
.om-zap { position: fixed; right: 64px; top: 150px; width: 72px; height: 72px; z-index: 70; pointer-events: none; opacity: 0; }
.om-zap.show { animation: om-zap 900ms cubic-bezier(.23, 1, .32, 1) both; }
@keyframes om-zap { 0% { opacity: 0; transform: scale(.7); } 25% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }

/* Accesibilidad: sin movimiento si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
  #splash *, .om-loader *, .om-live::before, .om-zap.show { animation: none !important; }
}