/* ============================================================ TV MODE — Otimizado para Smart TV / Android TV / Fire TV Ativo via .tv-mode no (detectado por user-agent ou ?tv=true) Regras: fonte grande, alvos de toque >= 48px, foco visível, grid menor (4-5 colunas), sem hover, overscan safe, scroll simplificado, animações reduzidas. ============================================================ */ /* --- RESET & BASE --- */ .tv-mode { font-size: 18px; --tv-safe-padding: 4vw; --tv-card-min: 200px; --tv-focus-color: #00d2ff; --tv-focus-glow: 0 0 20px rgba(0, 210, 255, 0.6); cursor: none !important; } /* Esconde qualquer cursor no modo TV (crítico pro WebOS) */ .tv-mode, .tv-mode *, .tv-mode *::before, .tv-mode *::after { cursor: none !important; -webkit-user-select: none; user-select: none; caret-color: transparent; } /* Restaura cursor em inputs (precisa pro teclado virtual) */ .tv-mode input, .tv-mode textarea, .tv-mode [contenteditable] { cursor: text !important; caret-color: #00d2ff !important; -webkit-user-select: text; user-select: text; } .tv-mode * { -webkit-tap-highlight-color: transparent; } /* Força foco visível em todos elementos focáveis */ .tv-mode :focus { outline: 3px solid var(--tv-focus-color) !important; outline-offset: 4px !important; } /* --- OVERSCAN SAFE AREA --- */ .tv-mode #app, .tv-mode #player, .tv-mode #dashboard-container { padding: var(--tv-safe-padding); } /* ============================================================ FOCUS RING — Principal feedback visual do controle remoto ============================================================ */ .tv-mode .tv-focused, .tv-mode *:focus-visible { outline: 3px solid var(--tv-focus-color) !important; outline-offset: 4px !important; box-shadow: var(--tv-focus-glow) !important; transform: scale(1.04); transition: transform 0.15s ease, box-shadow 0.15s ease, outline 0.15s ease; z-index: 10; position: relative; } /* Cards em grid com foco */ .tv-mode .stream-card.tv-focused, .tv-mode .stream-card:focus-visible { transform: scale(1.06); border-color: var(--tv-focus-color) !important; box-shadow: 0 0 30px rgba(0, 210, 255, 0.5), 0 0 60px rgba(0, 210, 255, 0.2) !important; } /* Category / sidebar items */ .tv-mode .category-item.tv-focused, .tv-mode .category-item:focus-visible, .tv-mode .nav-link.tv-focused, .tv-mode .nav-link:focus-visible { background: rgba(0, 210, 255, 0.15) !important; color: #fff !important; outline-color: var(--tv-focus-color) !important; } /* Buttons */ .tv-mode button.tv-focused, .tv-mode button:focus-visible, .tv-mode .ccs-menu-btn.tv-focused, .tv-mode .ccs-menu-btn:focus-visible { transform: scale(1.08); border-color: var(--tv-focus-color) !important; } /* --- ZERA HOVER (TV não tem hover) --- */ .tv-mode .stream-card:hover { transform: none !important; border-color: transparent !important; box-shadow: none !important; } .tv-mode .category-item:hover { background: transparent !important; color: var(--text-muted) !important; } .tv-mode button:hover { transform: none !important; } /* ============================================================ LOGIN / LANDING PAGE ============================================================ */ .tv-mode .auth-section { padding: 6vw 4vw; } .tv-mode .login-card { max-width: 560px; padding: 48px 40px; border-radius: 24px; } .tv-mode #login-form .form-group { margin-bottom: 28px; } .tv-mode #login-form label { font-size: 16px; letter-spacing: 0.05em; } .tv-mode #login-form input { padding: 18px 20px; font-size: 20px; border-radius: 14px; min-height: 56px; } .tv-mode #login-form button[type="submit"] { padding: 20px 32px; font-size: 20px; border-radius: 16px; min-height: 60px; width: 100%; } /* ============================================================ CATEGORY CHOICE SCREEN ============================================================ */ .tv-mode .category-choice-screen { padding: 6vw; } .tv-mode .ccs-menu-btn { min-height: 120px; min-width: 280px; padding: 32px 40px; border-radius: 20px; font-size: 22px; gap: 20px; } .tv-mode .ccs-menu-icon { width: 56px; height: 56px; } .tv-mode .ccs-menu-icon svg { width: 32px; height: 32px; } .tv-mode .ccs-clock { margin-bottom: 40px; } .tv-mode .ccs-time { font-size: 56px; } .tv-mode .ccs-date { font-size: 22px; } /* ============================================================ PLAYER HEADER ============================================================ */ .tv-mode #player-header { padding: 16px var(--tv-safe-padding); min-height: 80px; } .tv-mode #player-header button, .tv-mode #back-to-categories-btn { width: 56px !important; height: 56px !important; border-radius: 16px !important; } .tv-mode #player-header button svg, .tv-mode #back-to-categories-btn svg { width: 24px; height: 24px; } .tv-mode .tab { font-size: 18px !important; padding: 10px 16px !important; } .tv-mode #search-input, .tv-mode #search-input-mobile { font-size: 18px !important; padding: 14px 18px 14px 42px !important; min-height: 52px !important; } .tv-mode #provider-select, .tv-mode #provider-select-mobile { font-size: 16px !important; padding: 14px 20px !important; min-height: 52px !important; } /* ============================================================ STREAM GRID (cards gigantes para TV) ============================================================ */ .tv-mode #stream-grid, .tv-mode .channel-list-scroll, .tv-mode .poster-grid { gap: 28px !important; padding: 20px var(--tv-safe-padding) !important; } .tv-mode #stream-grid:not(.poster-grid) { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; } .tv-mode .poster-grid { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; } .tv-mode .stream-card { border-radius: 18px !important; min-height: 220px; } .tv-mode .card-thumb { min-height: 160px; } .tv-mode .card-thumb img { max-width: 75%; max-height: 75%; } .tv-mode .card-info { padding: 18px 16px !important; } .tv-mode .card-name { font-size: 16px !important; } /* Live channel list items */ .tv-mode .channel-item { padding: 18px 20px !important; font-size: 18px !important; border-radius: 12px !important; min-height: 56px; } /* ============================================================ SIDEBAR / CATEGORIES ============================================================ */ .tv-mode .sidebar { width: 340px !important; } .tv-mode .sidebar-header h2 { font-size: 22px !important; } .tv-mode .sidebar-header { padding: 28px 24px !important; } .tv-mode .category-item { padding: 16px 20px !important; font-size: 17px !important; border-radius: 12px !important; min-height: 56px; margin-bottom: 8px !important; } .tv-mode .category-list { padding: 16px 12px !important; } .tv-mode #category-list { padding-right: 20px !important; } /* ============================================================ PLAYER OVERLAY (fullscreen video) ============================================================ */ .tv-mode #player-overlay { /* Já é fullscreen, mas garantimos */ } .tv-mode .player-header { height: 80px !important; padding: 0 32px !important; } .tv-mode .close-player { font-size: 2.5rem !important; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; } /* ============================================================ VOD DETAIL MODAL ============================================================ */ .tv-mode .vod-modal-content { max-width: 1100px !important; border-radius: 32px !important; } .tv-mode .vod-modal-close { width: 56px !important; height: 56px !important; top: 28px !important; right: 28px !important; } .tv-mode #vod-detail-title { font-size: 38px !important; } .tv-mode #vod-detail-synopsis { font-size: 18px !important; line-height: 1.7 !important; } .tv-mode .btn-play-primary { padding: 18px 36px !important; font-size: 18px !important; border-radius: 18px !important; min-height: 60px; } .tv-mode .vod-modal-info { padding: 56px !important; } .tv-mode .vod-detail-badge { font-size: 14px !important; padding: 8px 16px !important; } /* ============================================================ DASHBOARD / ADMIN ============================================================ */ .tv-mode .dashboard-layout { /* Sidebar + content */ } .tv-mode .nav-link { padding: 18px 24px !important; font-size: 18px !important; border-radius: 14px !important; min-height: 56px; margin-bottom: 6px !important; } .tv-mode .nav-link svg { width: 24px !important; height: 24px !important; } .tv-mode .saas-top-bar { min-height: 72px !important; padding: 0 28px !important; } .tv-mode .top-bar-btn { width: 52px !important; height: 52px !important; border-radius: 14px !important; } /* Dashboard cards & tables */ .tv-mode #saas-content table { font-size: 17px !important; } .tv-mode #saas-content table th, .tv-mode #saas-content table td { padding: 16px 20px !important; } .tv-mode #saas-content button { min-height: 48px; padding: 12px 24px !important; font-size: 16px !important; border-radius: 12px !important; } .tv-mode #saas-content input, .tv-mode #saas-content select, .tv-mode #saas-content textarea { font-size: 17px !important; padding: 14px 18px !important; min-height: 50px !important; border-radius: 12px !important; } /* ============================================================ MODALS & FORMS GERAIS ============================================================ */ .tv-mode .modal-container-standard { max-width: 600px !important; border-radius: 24px !important; } .tv-mode .iptv-modern-form .title { font-size: 24px !important; } .tv-mode .iptv-modern-form .message { font-size: 16px !important; } .tv-mode .iptv-modern-form .input, .tv-mode .iptv-modern-form .select-saas { font-size: 18px !important; padding: 16px 18px !important; min-height: 54px !important; border-radius: 14px !important; } /* ============================================================ SCROLLBARS — Minimalistas para TV ============================================================ */ .tv-mode ::-webkit-scrollbar { width: 8px; } .tv-mode ::-webkit-scrollbar-track { background: transparent; } .tv-mode ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; } /* ============================================================ PERFORMANCE — Reduzir animações pesadas ============================================================ */ .tv-mode .stream-card, .tv-mode .category-item, .tv-mode .nav-link { transition: transform 0.15s ease, box-shadow 0.15s ease, outline 0.15s ease !important; } /* Desativa animações de hover que são desnecessárias */ .tv-mode .stream-card:hover { transform: none !important; } /* ============================================================ TOASTS — Maiores e mais visíveis ============================================================ */ .tv-mode .saas-toast { min-width: 380px !important; max-width: 520px !important; padding: 18px 24px !important; border-radius: 20px !important; font-size: 16px !important; } .tv-mode .toast-icon { width: 44px !important; height: 44px !important; } .tv-mode .toast-message { font-size: 17px !important; } /* ============================================================ MOBILE-ONLY / DESKTOP-ONLY em TV — mostrar ambos ============================================================ */ .tv-mode .mobile-only-btn { display: block !important; } .tv-mode .desktop-only-btn { display: block !important; } /* ============================================================ RESPONSIVE: TV 720p (HD Ready) ============================================================ */ @media (max-width: 1280px) { .tv-mode #stream-grid:not(.poster-grid) { grid-template-columns: repeat(3, 1fr) !important; } .tv-mode .poster-grid { grid-template-columns: repeat(4, 1fr) !important; } .tv-mode .sidebar { width: 280px !important; } .tv-mode { font-size: 16px; } } /* ============================================================ RESPONSIVE: TV 1080p+ ============================================================ */ @media (min-width: 1920px) { .tv-mode #stream-grid:not(.poster-grid) { grid-template-columns: repeat(5, 1fr) !important; } .tv-mode .poster-grid { grid-template-columns: repeat(6, 1fr) !important; } .tv-mode { font-size: 20px; } }