/* EVO+ visual layer
 * Local production-derived preview only. Geometry and application behavior stay unchanged.
 */
:root {
  color-scheme: dark;
  --bg: #02050c !important;
  --panel: #07101f !important;
  --panel2: #0a1730 !important;
  --surface: #07101f !important;
  --surface2: #0a1730 !important;
  --text: #f6f9ff !important;
  --muted: #8ea3bf !important;
  --line: rgba(143, 207, 255, .18) !important;
  --cyan: #25e7ff !important;
  --violet: #9367ff !important;
  --mint: #40f0b7 !important;
  --gold: #25e7ff !important;
  --gold2: #8eeeff !important;
  --silver: #dceaff !important;
  --ok: #40f0b7 !important;
  --danger: #ff4d6d !important;
  --admin-bg: #02050c !important;
  --admin-surface: #07101f !important;
  --admin-surface-raised: #0a1730 !important;
  --admin-border: rgba(143, 207, 255, .18) !important;
  --admin-border-strong: rgba(37, 231, 255, .42) !important;
  --admin-gold: #25e7ff !important;
  --admin-gold-light: #8eeeff !important;
  --admin-silver: #dceaff !important;
  --admin-muted: #8ea3bf !important;
  --evo-blue: #1264ff;
  --evo-blue-deep: #0036de;
  --evo-cyan: #25e7ff;
  --evo-white: #f2fdff;
  --evo-panel: #07101f;
  --evo-panel-2: #0a1730;
  --evo-border: rgba(143, 207, 255, .18);
  --evo-royal: #1264ff;
  --evo-royal-deep: #0036de;
  --evo-focus-red: #a61f32;
  --evo-focus: 0 0 0 2px #f7e9ec, 0 0 0 5px rgba(166, 31, 50, .76), 0 0 28px rgba(112, 12, 31, .82);
}

html,
body,
body.theme-blackeye {
  background:
    radial-gradient(circle at 82% 7%, rgba(18, 100, 255, .2), transparent 34%),
    radial-gradient(circle at 8% 92%, rgba(37, 231, 255, .09), transparent 34%),
    linear-gradient(145deg, #01030a, #030916 54%, #010209) !important;
  color: var(--text);
}

body::before,
body.theme-blackeye::before {
  opacity: .2 !important;
  background-image:
    linear-gradient(120deg, rgba(37, 231, 255, .035) 1px, transparent 1px),
    linear-gradient(30deg, rgba(147, 103, 255, .035) 1px, transparent 1px) !important;
}

::selection { background: rgba(37, 231, 255, .28); color: #fff; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none !important;
  box-shadow: var(--evo-focus) !important;
}

/* The official transparent EVO+ wordmark keeps the existing brand slots readable. */
.theme-blackeye .brand img,
.admin-brand img,
.sales-app .brand img {
  width: 116px !important;
  height: 54px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

img[src*="evo-plus-wordmark-transparent-20261006.png"] {
  object-fit: contain !important;
  background: transparent !important;
}

.login-card > img,
.account-access-brand img,
.welcome-card > img,
.logo {
  object-fit: contain !important;
  border-radius: 22px;
  filter: none !important;
}

.theme-blackeye .blackeye-loader-logo,
.theme-blackeye .orb,
.theme-blackeye .hero-disc {
  border-color: rgba(37, 231, 255, .34) !important;
  background: radial-gradient(circle at 36% 24%, #103f91, #06142e 48%, #01040b 76%) !important;
  box-shadow: inset -25px -28px 60px rgba(0,0,0,.58), 0 0 95px rgba(18,100,255,.38) !important;
}

/* Preparing-content indicator: the official wordmark itself becomes the progress. */
#providerChooser .blackeye-loader-logo {
  position: relative !important;
  isolation: isolate;
  width: clamp(220px, 25vw, 360px) !important;
  height: auto !important;
  aspect-ratio: 597 / 195 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#providerChooser .blackeye-loader-logo::before,
#providerChooser .blackeye-loader-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/evo-plus/evo-plus-wordmark-transparent-20261006.png") center / contain no-repeat;
  pointer-events: none;
}

#providerChooser .blackeye-loader-logo::before {
  opacity: .2;
  filter: grayscale(1) brightness(.72);
}

#providerChooser .blackeye-loader-logo::after {
  z-index: 1;
  clip-path: inset(0 100% 0 0);
  filter: none;
  animation: evo-wordmark-fill 2.65s cubic-bezier(.42, 0, .2, 1) infinite;
  will-change: clip-path, opacity;
}

#providerChooser .blackeye-loader-logo > img {
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
}

#providerChooser .blackeye-loader-track {
  display: none !important;
}

@keyframes evo-wordmark-fill {
  0% { clip-path: inset(0 100% 0 0); opacity: .55; }
  10% { opacity: 1; }
  72%, 88% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #providerChooser .blackeye-loader-logo::after {
    clip-path: inset(0 0 0 0);
    animation: none;
  }
}

.theme-blackeye .blackeye-loader-logo img,
.theme-blackeye .orb img,
.theme-blackeye .hero-disc img {
  mix-blend-mode: normal !important;
  filter: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

/* Main app */
.theme-blackeye {
  --bg: #02050c !important;
  --panel: #07101f !important;
  --panel2: #0a1730 !important;
  --text: #f6f9ff !important;
  --muted: #8ea3bf !important;
  --cyan: #25e7ff !important;
  --violet: #9367ff !important;
  --line: rgba(143, 207, 255, .18) !important;
}

.theme-blackeye .ambient-one { background: #1264ff !important; }
.theme-blackeye .ambient-two { background: #25e7ff !important; }
.theme-blackeye .sidebar,
.admin-sidebar,
.sales-app .sidebar {
  border-color: rgba(143, 207, 255, .14) !important;
  background: linear-gradient(180deg, rgba(3, 9, 22, .98), rgba(1, 4, 12, .98)) !important;
}

.theme-blackeye .nav-item.active,
.theme-blackeye .nav-item:hover,
.theme-blackeye .nav-item:focus,
.admin-sidebar nav button.active,
.admin-sidebar nav button:hover,
.sales-app .sidebar nav button.active,
.sales-app .sidebar nav button:hover {
  border-color: rgba(37, 231, 255, .3) !important;
  background: linear-gradient(90deg, rgba(18, 100, 255, .29), rgba(37, 231, 255, .07)) !important;
  box-shadow: inset 3px 0 #25e7ff !important;
  color: #fff !important;
}

.theme-blackeye .nav-item.active { box-shadow: inset 3px 0 #25e7ff !important; }
.theme-blackeye .nav-item > span,
.admin-sidebar nav button i {
  border-color: rgba(37, 231, 255, .2) !important;
  background-color: #050c1b !important;
}

/* Los mosaicos del menu conservan el formato 1:1 de los artes oficiales. */
body.theme-blackeye .sidebar .nav-item > span.menu-art {
  aspect-ratio: 1 / 1 !important;
}

body.theme-blackeye .sidebar .nav-item > span.menu-art > img {
  width: calc(100% - 2px) !important;
  height: calc(100% - 2px) !important;
  max-width: calc(100% - 2px) !important;
  max-height: calc(100% - 2px) !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Los artes heredados sin reemplazo oficial conservan el dibujo y pasan de oro a azul rey. */
body.theme-blackeye .sidebar .nav-item[data-view="home"] .menu-art > img,
body.theme-blackeye .sidebar .nav-item[data-view="favorites"] .menu-art > img {
  filter: sepia(.72) saturate(4.8) hue-rotate(171deg) brightness(1.08) contrast(1.08) !important;
}

.theme-blackeye .primary-button,
.primary,
.primary-action,
.welcome-card button,
#device + form button,
.forced-password-card button {
  border-color: rgba(142, 238, 255, .72) !important;
  background: linear-gradient(110deg, #25e7ff, #1264ff 62%, #0036de) !important;
  color: #020715 !important;
  box-shadow: 0 10px 28px rgba(18,100,255,.28) !important;
}

.theme-blackeye .profile,
.user-avatar {
  background: linear-gradient(145deg, #8eeeff, #1264ff 68%, #9367ff) !important;
  color: #020715 !important;
}

.theme-blackeye .hero,
.theme-blackeye .home-card-expanded,
.theme-blackeye .home-live-panel,
.theme-blackeye .home-history-panel,
.theme-blackeye .live-folder,
.theme-blackeye .detail-dialog,
.theme-blackeye .account-access-card,
.theme-blackeye .account-access-visual {
  border-color: rgba(143, 207, 255, .17) !important;
  background-color: #07101f !important;
}

.theme-blackeye .hero {
  background:
    radial-gradient(circle at 78% 37%, rgba(18,100,255,.31), transparent 33%),
    radial-gradient(circle at 61% 92%, rgba(37,231,255,.09), transparent 28%),
    linear-gradient(110deg, #07101f, #030916 56%, #0a1730) !important;
}

.theme-blackeye .content-card:hover .poster,
.theme-blackeye .home-curation-card:hover .home-curation-poster,
.theme-blackeye .live-folder:hover,
.theme-blackeye .live-folder:hover {
  border-color: rgba(37,231,255,.7) !important;
  box-shadow: 0 0 0 2px rgba(242,253,255,.95), 0 0 0 5px rgba(37,231,255,.56), 0 16px 40px rgba(18,100,255,.34) !important;
}

/* El foco de control remoto se mantiene rojo, ligeramente mas oscuro. */
.theme-blackeye .content-card:focus .poster,
.theme-blackeye .home-curation-card:focus .home-curation-poster,
.theme-blackeye .home-curation-card.is-selected .home-curation-poster,
.theme-blackeye .live-folder:focus,
.theme-blackeye .nav-item:focus,
.theme-blackeye button:focus-visible,
.theme-blackeye a:focus-visible,
.theme-blackeye [tabindex]:focus-visible {
  border-color: #a61f32 !important;
  outline-color: #a61f32 !important;
  box-shadow: 0 0 0 2px rgba(255, 239, 242, .94), 0 0 0 5px rgba(166, 31, 50, .78), 0 16px 40px rgba(93, 8, 27, .5) !important;
}

.theme-blackeye .nav-item:focus {
  background: linear-gradient(90deg, rgba(112, 12, 31, .42), rgba(26, 6, 15, .34)) !important;
  box-shadow: inset 3px 0 #a61f32, 0 0 0 2px rgba(255, 239, 242, .94), 0 0 0 5px rgba(166, 31, 50, .72) !important;
}

.theme-blackeye .poster::after,
.theme-blackeye .home-curation-play,
.theme-blackeye .home-card-preview-open,
.theme-blackeye .home-curation-rank,
.theme-blackeye .channel-guide-play {
  background: linear-gradient(135deg, #25e7ff, #1264ff) !important;
  color: #020715 !important;
}

.theme-blackeye .category-bar i,
.theme-blackeye .home-curation-progress i,
.theme-blackeye .home-card-expanded-progress i,
.theme-blackeye .channel-guide-progress i,
.theme-blackeye .series-continue-progress i,
.theme-blackeye .progress i {
  background: linear-gradient(90deg, #25e7ff, #1264ff, #9367ff) !important;
  box-shadow: 0 0 14px rgba(37,231,255,.42) !important;
}

.theme-blackeye .eyebrow,
.theme-blackeye .home-overview-kicker,
.theme-blackeye .home-overview-copy small,
.theme-blackeye .home-more-button,
.theme-blackeye .home-curations-intro > div > span,
.theme-blackeye .home-curation-rail > header span,
.theme-blackeye .home-curation-type,
.theme-blackeye .home-curation-fallback span,
.theme-blackeye .home-preview-type,
.theme-blackeye .home-preview-meta,
.theme-blackeye .home-card-preview-meta,
.theme-blackeye .home-card-preview-status,
.theme-blackeye .home-card-preview-audio,
.theme-blackeye .favorite-group-heading span,
.theme-blackeye .genre-intelligence-badge,
.theme-blackeye .series-continue-action,
.theme-blackeye .detail-meta,
.theme-blackeye .sidebar-toggle,
.theme-blackeye .live-folder-symbol,
.theme-blackeye .live-folder-arrow,
.theme-blackeye .section-heading span,
.theme-blackeye .movie-genre-actions small,
.theme-blackeye .be-catalog-position {
  color: #25e7ff !important;
}

.theme-blackeye .home-more-button,
.theme-blackeye .genre-intelligence-badge,
.theme-blackeye .series-continue,
.theme-blackeye .sidebar-toggle,
.theme-blackeye .cast-button,
.theme-blackeye .channel-button,
.theme-blackeye .be-catalog-position {
  border-color: rgba(37,231,255,.42) !important;
  background: rgba(4,24,54,.82) !important;
}

.theme-blackeye .movie-genre-scroller::-webkit-scrollbar-thumb,
.theme-blackeye .home-curation-scroller::-webkit-scrollbar-thumb {
  background: rgba(37,231,255,.48) !important;
}

.theme-blackeye .episode-next-button {
  border-color: rgba(142,238,255,.72) !important;
  background: linear-gradient(90deg, #8eeeff, #1264ff) !important;
  color: #020715 !important;
}

/* Live state remains red; neutral and scheduled states adopt EVO+ blue. */
.theme-blackeye .live-pin,
.theme-blackeye [class*="live-dot"],
.theme-blackeye [class*="is-live"] .live-status {
  color: #ff4d6d !important;
}

/* Admin and commercial panel */
.admin-main,
.workspace,
.sales-login,
.login-view {
  background:
    radial-gradient(circle at 80% 0, rgba(18,100,255,.15), transparent 32%),
    linear-gradient(145deg, #02050c, #040a16) !important;
}

.admin-topbar,
.topbar {
  border-color: rgba(143,207,255,.12) !important;
  background-color: rgba(2,5,12,.8);
}

.login-card,
.panel,
.panel-card,
.stat,
.stat-card,
.account-card,
.dialog-card,
.admin-dialog,
.forced-password-card,
.welcome-card {
  border-color: rgba(143,207,255,.2) !important;
  background: linear-gradient(145deg, rgba(10,23,48,.96), rgba(3,8,19,.98)) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.62) !important;
}

.admin-topbar > div > span,
.kicker,
.panel-card header > div > span,
.section-intro > div > span,
.eyebrow,
.panel header span,
.section-intro span,
.topbar span,
.account-head small,
.ledger-row.head,
.search span,
.admin-search span,
.admin-launchpad em,
.sidebar-foot span {
  color: #25e7ff !important;
}

.service-status,
.badge.active {
  border-color: rgba(64,240,183,.42) !important;
  background: rgba(64,240,183,.08) !important;
  color: #7cf6cf !important;
}

.service-status i,
.online-dot.is-online,
.epg-region-card header i {
  background: #40f0b7 !important;
  box-shadow: 0 0 12px #40f0b7 !important;
}

.admin-search:focus-within,
.compact-search:focus-within,
.search:focus-within,
.login-card input:focus,
.dialog-card input:focus,
.dialog-card select:focus,
.toolbar select:focus {
  border-color: #25e7ff !important;
  box-shadow: 0 0 0 3px rgba(37,231,255,.16) !important;
}

.sidebar-foot,
.identity,
.account-superior,
.invitation-email-form {
  border-color: rgba(37,231,255,.2) !important;
  background: rgba(7,16,31,.86) !important;
}

.sales-topbar-actions button,
.topbar-actions button,
.panel header button,
.card-actions button,
.credit-row button,
.secondary,
.security-action {
  border-color: rgba(37,231,255,.28) !important;
  background: rgba(10,34,70,.72) !important;
  color: #8eeeff !important;
}

.ambient-a,
.glow-one,
.welcome-glow-a { background: #1264ff !important; }
.ambient-b,
.glow-two,
.welcome-glow-b { background: #25e7ff !important; }

/* Pairing, invitation and password pages */
body:has(> main) main,
.welcome-card {
  border-color: rgba(143,207,255,.22) !important;
}

#device {
  border-color: rgba(37,231,255,.3) !important;
  background: rgba(7,22,49,.88) !important;
}

#device strong,
#status,
#welcomeStatus,
.reset-kicker,
.forced-password-card .reset-kicker,
.welcome-card > span,
.welcome-card label span {
  color: #25e7ff !important;
}

@media (max-width: 760px) {
  .theme-blackeye .brand img { width: 76px !important; height: 48px !important; border-radius: 0 !important; }
}

/* Account expiry belongs to the right-side toolbar, immediately before search. */
#app.be-home-active .top-actions > .home-account-expiry {
  order: -1;
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 4px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #79a5ff !important;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .18px;
  white-space: nowrap;
  align-self: center;
}

@media (max-width: 760px) {
  #app.be-home-active .top-actions > .home-account-expiry {
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 8px !important;
  }
}

/* Keep the complete remote-control focus visible inside horizontal carousels.
   Live-channel rails used to clip the external focus shadow at their edges. */
.theme-blackeye .movie-genre-scroller > .content-card:focus .poster,
.theme-blackeye .movie-genre-scroller > .content-card:focus-visible .poster,
.theme-blackeye .home-curation-card:focus .home-curation-poster,
.theme-blackeye .home-curation-card:focus-visible .home-curation-poster,
.theme-blackeye .home-curation-card.is-selected:focus .home-card-expanded,
.theme-blackeye .home-curation-card.is-selected:focus-visible .home-card-expanded,
.theme-blackeye .home-live-carousel-card:focus,
.theme-blackeye .home-live-carousel-card:focus-visible,
.theme-blackeye .carousel-view-all:focus .carousel-view-all-art,
.theme-blackeye .carousel-view-all:focus-visible .carousel-view-all-art {
  box-sizing: border-box;
  border-color: #a61f32 !important;
  outline: none !important;
  box-shadow:
    inset 0 0 0 3px rgba(255, 239, 242, .96),
    inset 0 0 0 6px rgba(166, 31, 50, .94),
    0 12px 30px rgba(93, 8, 27, .45) !important;
}

.theme-blackeye .movie-genre-scroller,
.theme-blackeye .home-curation-scroller,
.theme-blackeye .home-live-carousel {
  padding-top: 8px;
  padding-left: 8px;
  padding-right: 8px;
  scroll-padding-inline: 8px;
}

.theme-blackeye .carousel-view-all:focus,
.theme-blackeye .carousel-view-all:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.theme-blackeye .movie-genre-scroller > .content-card:focus,
.theme-blackeye .movie-genre-scroller > .content-card:focus-visible,
.theme-blackeye .home-curation-card:focus,
.theme-blackeye .home-curation-card:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* The sidebar is also a clipped scroll area, so keep its complete ring inside. */
.theme-blackeye .sidebar nav .nav-item:focus,
.theme-blackeye .sidebar nav .nav-item:focus-visible {
  box-sizing: border-box;
  border-color: #a61f32 !important;
  outline: none !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 239, 242, .96),
    inset 0 0 0 5px rgba(166, 31, 50, .94),
    0 8px 20px rgba(93, 8, 27, .35) !important;
}

.theme-blackeye .sidebar nav {
  padding: 6px;
  scroll-padding: 6px;
}