/* APICEPLAY brand — VERSAO FINAL (paleta v3 escolhida 26/09/2026).
   Overrides carregados depois de style.css/web-ui.css/celular.css.
   Preserva render v3 do PC + cobre sync screen + ajusta viewport mobile. */

/* ============================================================
   FUNDOS GERAIS (avermelhado profundo em vez de cinza)
   ============================================================ */
html, body {
    background: #0d0303 !important;
}
.screen {
    background-color: #050505;
}
#live-tv-screen,
#vod-tv-screen {
    background: linear-gradient(180deg, #0a0508 0%, #050303 100%) !important;
}
.live-col-categories,
.live-col-channels {
    background: rgba(15, 5, 5, 0.4);
}
.live-category-item.active,
.live-channel-item.active,
.vod-category-item.active {
    background: linear-gradient(90deg, rgba(220, 30, 30, 0.18), transparent);
    border-left: 3px solid #e11d1d;
}
#live-player-overlay {
    background: #050303 !important;
}

/* ============================================================
   LOGO A + WORDMARK APICEPLAY
   ============================================================ */
.logo {
    height: 140px !important;
    width: auto !important;
    margin-bottom: 32px !important;
}
.nav-logo {
    height: 44px !important;
    width: auto !important;
}
.login-hero .logo {
    height: 140px !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)) !important;
    transform: translateX(-10px);
}
.login-hero::after {
    content: 'APICEPLAY';
    display: block;
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 8px;
    color: #ffffff !important;
    text-shadow: none !important;
    filter: none !important;
    margin-top: 14px;
    text-align: center;
    width: 100%;
}
.login-hero {
    flex-direction: column;
}
.nav-logo {
    height: 42px !important;
}
html.modo-toque .nav-logo {
    height: 50px !important;
}

/* ============================================================
   LOGIN PC (#login-screen) — gradient v3
   ============================================================ */
#login-screen {
    background: radial-gradient(ellipse at 50% 30%,
        #3a0c0c 0%,
        #180505 22%,
        #050101 48%,
        #000 70%) !important;
    box-shadow: inset 0 0 400px 120px #000 !important;
}
.login-form-wrapper > *,
#login-screen form {
    border-color: rgba(225, 29, 29, 0.18) !important;
}
#login-screen input:focus {
    border-color: rgba(225, 29, 29, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(225, 29, 29, 0.15) !important;
    outline: none !important;
}
.btn-entrar:hover,
.btn-entrar:focus {
    background-color: #e11d1d !important;
    color: #fff !important;
    border-color: #e11d1d !important;
    box-shadow: 0 6px 24px rgba(225, 29, 29, 0.4) !important;
}

/* ============================================================
   LOGIN MOBILE (.tela-login) — gradient adaptado ao viewport.
   Elipse 130vw x 80vh forca o vinho a ocupar bem a tela iPhone,
   mesmo em aspect ratio 9:19.5 (que fica muito alto e estreito).
   ============================================================ */
.tela-login {
    background: radial-gradient(
        ellipse 130vw 80vh at 50% 35%,
        #4a1010 0%,
        #240707 25%,
        #0a0202 55%,
        #000 85%
    ) !important;
    box-shadow: inset 0 0 200px 40px rgba(0, 0, 0, 0.75) !important;
}
.tela-login .logo {
    width: 180px !important;
    height: auto !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)) !important;
    transform: translateX(-10px);
}
.tela-login .logo + form::before {
    content: 'APICEPLAY';
    display: block;
    text-align: center;
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 6px;
    color: #ffffff !important;
    text-shadow: none !important;
    filter: none !important;
    margin: -20px 0 28px;
}
.tela-login .campo {
    border-color: rgba(225, 29, 29, 0.2) !important;
}
.tela-login .btn-entrar {
    background: #e11d1d !important;
    box-shadow: 0 6px 24px rgba(225, 29, 29, 0.35) !important;
}
.cabecalho .logo {
    height: 32px !important;
    width: auto !important;
}

/* ============================================================
   SPLASH SYNC — PC (#sync-screen) + mobile (.tela-sync)
   Mesma paleta v3 do login.
   ============================================================ */
#sync-screen {
    background: radial-gradient(ellipse at 50% 30%,
        #3a0c0c 0%,
        #180505 22%,
        #050101 48%,
        #000 70%) !important;
    box-shadow: inset 0 0 400px 120px #000 !important;
}
.tela-sync {
    background: radial-gradient(
        ellipse 130vw 80vh at 50% 35%,
        #4a1010 0%,
        #240707 25%,
        #0a0202 55%,
        #000 85%
    ) !important;
    box-shadow: inset 0 0 200px 40px rgba(0, 0, 0, 0.75) !important;
}

/* Barra de progresso — troca laranja (var --vf-accent) por vermelho APICEPLAY */
.sync-progress-fill {
    background: linear-gradient(90deg, #e11d1d, #ff5a5a) !important;
    box-shadow: 0 0 12px rgba(225, 29, 29, 0.6) !important;
}
.sync-barra div {
    background: linear-gradient(90deg, #e11d1d, #ff5a5a) !important;
}

/* ============================================================
   TELA CONFIGURACOES (settings-screen + .cfg-*)
   Troca cinza puro por bordo escuro + acentos vermelho APICEPLAY.
   ============================================================ */
#settings-screen {
    background: #0d0303 !important;
}
.cfg-layout {
    background-color: #0d0303 !important;
}
.cfg-menu {
    background-color: #180505 !important;
    border: 1px solid rgba(225, 29, 29, 0.08) !important;
}
.cfg-aba.active {
    background-color: rgba(225, 29, 29, 0.12) !important;
    border-left: 4px solid #e11d1d !important;
    color: #fff !important;
}
.cfg-aba:focus,
.cfg-aba:hover {
    background-color: rgba(225, 29, 29, 0.08) !important;
    color: #fff !important;
}
.cfg-aba.active:focus,
.cfg-aba.active:hover {
    background-color: rgba(225, 29, 29, 0.18) !important;
    color: #fff !important;
}
.cfg-cartao {
    background-color: #180505 !important;
    border: 1px solid rgba(225, 29, 29, 0.10) !important;
}
.cfg-opcao {
    background-color: #0d0303 !important;
    border-color: rgba(225, 29, 29, 0.10) !important;
}
.cfg-opcao.selecionada {
    border-color: #e11d1d !important;
    background-color: rgba(225, 29, 29, 0.10) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(225, 29, 29, 0.25) !important;
}
.cfg-opcao:focus,
.cfg-opcao:hover {
    background-color: rgba(225, 29, 29, 0.08) !important;
    border-color: rgba(225, 29, 29, 0.35) !important;
    color: #fff !important;
}
/* Ícones de titulo (Player / Adulto / etc) e cabecalhos de cartao */
.cfg-painel-titulo,
.cfg-cartao-titulo {
    color: #fff !important;
}
.cfg-painel-titulo svg {
    stroke: #e11d1d !important;
}
.cfg-cartao-titulo svg {
    stroke: #e11d1d !important;
}
/* Switch (interruptor) — se ativo, vira vermelho */
.cfg-switch.ativo,
.cfg-switch[aria-checked="true"] {
    background: #e11d1d !important;
}