/* ============================================================
   assets/css/themes.css — themes alternativos del sitio público.
   Rednoir es la base de app.css: esta hoja NO se carga en rednoir.
   La imprime inc/layout/head.php cuando el default del admin no es rednoir, o la
   agrega el script del <head> / assets/js/themes.js cuando el visitante elige otro.
   Todo va detrás de html[data-theme] / html[data-ui]: cargada y sin usar, es inerte.

   Dos atributos en <html> (registro en inc/layout/themes.php):
     data-theme = id del theme -> tokens de color (un bloque por theme, sección 0)
     data-ui    = familia      -> capa de componentes compartida
        "site"  = componentes de app.css (rednoir, mono)
        "panel" = estilo panel de demos: plano, cristal, azul (iOS claro / iOS oscuro);
                  sus --dm-* vienen de /assets/css/demo-classic.css
   AGREGAR UN THEME = 1 entrada en site_themes_registry() + 1 bloque de tokens aquí
   (y, solo si su look lo pide, reglas propias bajo su data-theme, como "mono").
   En la familia "panel" no hay rojo en ningún CTA. En TODOS los themes:
   WhatsApp verde y Telegram azul de marca.
   Los estilos base del selector van inline en head.php (existen también en rednoir).
   ============================================================ */

/* ===================== 0) TOKENS POR THEME ===================== */

/* rednoir (ui:"site"): los tokens del :root de app.css, sin tocar -> no necesita bloque. */

/* iOS claro (ui:"panel"): los --dm-* claros del :root de demo-classic.css, tal cual. */
html[data-theme="ios"] {
  color-scheme: light;
  --on-brand-ink: var(--dm-head);   /* texto sobre el verde WhatsApp / azul Telegram (AA) */
  --brand-tint: 12%;                /* tinte del color de marca en banners/íconos de producto */
  --brand-base: var(--dm-card);
  --roku-ink: var(--roku-600);      /* texto del chip Roku sobre su tinte lila */
}

/* iOS oscuro (ui:"panel"): copia literal del bloque html[data-theme="dark"] de
   assets/css/demo-classic.css (líneas 106-145). Selector propio para no chocar
   con el data-theme="dark" del panel de demos. */
html[data-theme="ios-dark"] {
  color-scheme: dark;
  --dm-bg: #0d0d0f;
  --dm-grid: rgba(255, 255, 255, .075);
  --dm-head: #f5f5f7;
  --dm-text: #e5e5ea;
  --dm-muted: #aeaeb2;
  --dm-line: rgba(84, 84, 88, .55);
  --dm-line-strong: rgba(120, 120, 128, .6);
  --dm-fill: rgba(118, 118, 128, .24);
  --dm-fill-h: rgba(118, 118, 128, .34);
  --dm-hover: rgba(118, 118, 128, .14);
  --dm-thumb-bg: #2c2c2e;
  --dm-blue: #0a84ff;
  --dm-accent: #0a6fdb;
  --dm-accent-h: #0a7aef;
  --dm-link: #3d9dff;
  --dm-link-h: #70b6ff;
  --dm-focus: #0a84ff;
  --dm-glass: rgba(38, 38, 42, .55);
  --dm-glass-sheet: rgba(44, 44, 46, .9);
  --dm-card: rgba(30, 30, 34, .66);
  --dm-tile: rgba(118, 118, 128, .16);
  --dm-hairline: rgba(255, 255, 255, .12);
  --dm-spec: inset 0 1px 0 rgba(255, 255, 255, .09);
  --dm-float: 0 8px 32px rgba(0, 0, 0, .08);
  --dm-backdrop: rgba(0, 0, 0, .5);
  --dm-input-bg: rgba(118, 118, 128, .16);
  --dm-input-bd: rgba(235, 235, 245, .34);
  --dm-placeholder: #98989f;
  --dm-seg-thumb: #636366;
  --dm-switch-off: rgba(120, 120, 128, .4);
  --dm-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23aeaeb2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  --dm-code-bg: rgba(118, 118, 128, .24);
  --dm-selection: rgba(10, 132, 255, .35);
  --dm-ok: #30d158;   --dm-ok-bg: rgba(48, 209, 88, .16);   --dm-ok-fg: #6ee08a;
  --dm-warn: #ff9f0a; --dm-warn-bg: rgba(255, 159, 10, .18); --dm-warn-fg: #ffc266;
  --dm-err: #ff453a;  --dm-err-bg: rgba(255, 69, 58, .18);   --dm-err-fg: #ff8a82;
  --dm-mute-bg: rgba(118, 118, 128, .24); --dm-mute-fg: #d1d1d6;

  --on-brand-ink: var(--dm-bg);     /* texto oscuro sobre verde/azul de marca (AA) */
  /* Tinte de marca casi neutro: sobre --dm-card (translúcido) el 12 % quedaba guinda en
     marcas rojas; aquí 5 % sobre la base opaca del panel. */
  --brand-tint: 5%;
  --brand-base: var(--dm-thumb-bg);
  --roku-ink: var(--roku-300);      /* lila claro legible sobre fondo oscuro */
}
/* Mismos respaldos que demo-classic.css (sin cristal / transparencia reducida) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="ios-dark"] { --dm-glass: #1c1c1e; --dm-glass-sheet: #2c2c2e; --dm-card: #1c1c1e; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="ios-dark"] { --dm-glass: #1c1c1e; --dm-glass-sheet: #2c2c2e; --dm-card: #1c1c1e; }
}

/* Texto sobre el relleno de acento (--orange-400). Rojo/azul -> blanco; en "mono" el
   acento es blanco, así que va oscuro (lo usa el selector de themes). */
:root { --on-accent: #fff; }

/* Monocromo (ui:"site"): negro profundo + acento BLANCO/gris, sin rojo. Mismos nombres
   de token que app.css, otros valores. Conserva su look propio (brillos blancos,
   radiales tenues, starfield): NO sigue las reglas "planas" de la familia panel. */
html[data-theme="mono"] {
  color-scheme: dark;
  --bg-0: #060607;
  --bg-1: #0E0E10;
  --bg-2: #151518;
  --bg-3: #232328;
  --bg-4: #2E2E34;
  /* --ink-* y --cyan-* son iguales a los de app.css, salvo --ink-400: el original (#56565C)
     da ~2.7:1 sobre este negro en textos chicos ("pago único", pie, migas); se usa el
     valor de --ink-300 de la misma paleta para pasar AA (4.5:1). */
  --ink-400: #84848B;
  --orange-50:  #FFFFFF;
  --orange-100: #F4F4F5;
  --orange-200: #E4E4E7;
  --orange-300: #F4F4F5;
  --orange-400: #FFFFFF;
  --orange-500: #D4D4D8;
  --orange-600: #3F3F46;
  --roku-300: #E4E4E7;
  --roku-400: #FFFFFF;
  --roku-600: #3F3F46;
  --signal-live: #E4E4E7;
  --shadow-orange: 0 10px 30px -14px rgba(255,255,255,0.28);
  --on-accent: var(--bg-0);
}

/* ---- Monocromo: reglas de componente. Donde app.css pone texto blanco sobre el
   acento (que aquí es blanco), el texto pasa a --bg-0; rojos/lilas -> blancos tenues. ---- */
html[data-theme="mono"] ::selection { background: rgba(255,255,255,0.22); color: #fff; }
html[data-theme="mono"] body::before {
  background:
    radial-gradient(60vw 60vw at 50% 34%, rgba(255,255,255,0.055), transparent 60%),
    radial-gradient(ellipse 60% 40% at 30% 0%,  rgba(255,255,255,0.044), transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(255,255,255,0.05), transparent 70%),
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: auto, auto, auto, 46px 46px, 46px 46px;
}
html[data-theme="mono"] .site-header__lang:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45); }

/* Botones: primario (y compra) blanco con texto negro; ghost con anillo blanco */
html[data-theme="mono"] .btn--primary { color: var(--bg-0); box-shadow: 0 10px 30px -14px rgba(255,255,255,0.35); }
html[data-theme="mono"] .btn--primary:hover { background: #E4E4E7; color: var(--bg-0); }
html[data-theme="mono"] .btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55); color: var(--ink-0); }
/* WhatsApp / Telegram: se quedan con el verde / azul de marca (regla común a todos los themes) */

/* Eyebrows y titulares */
html[data-theme="mono"] .eyebrow,
html[data-theme="mono"] .hero__fresh-eyebrow { font-family: var(--font-sans); font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--ink-300); }
html[data-theme="mono"] .eyebrow::before { display: none; }
html[data-theme="mono"] .hero__title em {
  color: transparent; background: linear-gradient(180deg, #FFFFFF 20%, #9C9CA3 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* Chips y miniaturas: blancos con texto negro; banners de producto en grises */
html[data-theme="mono"] .hero__fresh-chip { color: var(--bg-0); background: rgba(255,255,255,0.94); box-shadow: 0 2px 8px -2px rgba(255,255,255,0.275); }
html[data-theme="mono"] .hero__fresh-media { background: linear-gradient(150deg, #1E1E23 0%, var(--bg-1) 72%) !important; }
html[data-theme="mono"] .app-card__chip--hot,
html[data-theme="mono"] .app-card__chip--roku { background: rgba(255,255,255,0.94); color: var(--bg-0); }
html[data-theme="mono"] .app-card__chip--house { color: var(--bg-0); box-shadow: 0 2px 8px -2px rgba(255,255,255,0.275); }
html[data-theme="mono"] .app-card__plat--roku { background: rgba(255,255,255,0.083); }
html[data-theme="mono"] .app-card__placeholder { background: linear-gradient(150deg, #1E1E23 0%, var(--bg-1) 72%) !important; }
html[data-theme="mono"] .app-card__placeholder::after { opacity: .35; filter: grayscale(1); }
html[data-theme="mono"] .app-card__placeholder span { color: #fff; text-shadow: none; }
html[data-theme="mono"] .tab.is-active,
html[data-theme="mono"] .filter-chip.is-active { color: var(--bg-0); }

/* Cards: brillo blanco tenue en vez de rojo */
html[data-theme="mono"] .app-card:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.275), 0 24px 48px -16px rgba(255,255,255,0.138), 0 8px 24px -8px rgba(0,0,0,0.6); }
html[data-theme="mono"] .hero__fresh-card:hover .hero__fresh-media { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.275), 0 18px 40px -18px rgba(0,0,0,.55); }
html[data-theme="mono"] .feature-card:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 20px 50px -16px rgba(255,255,255,0.138); }
html[data-theme="mono"] .feature-card__icon { background: rgba(255,255,255,0.066); }
html[data-theme="mono"] .price-card--featured { background: linear-gradient(160deg, var(--bg-1), rgba(255,255,255,0.028)); }
html[data-theme="mono"] .price-card__ribbon { color: var(--bg-0); }
html[data-theme="mono"] .phone-frame__glow { background: radial-gradient(circle, rgba(255,255,255,0.138), transparent 60%); }
html[data-theme="mono"] .cta-block { background: linear-gradient(135deg, var(--bg-1), rgba(255,255,255,0.044)); }
html[data-theme="mono"] .cta-block::before { background: radial-gradient(circle, rgba(255,255,255,0.099), transparent 60%); }
html[data-theme="mono"] .prose-stream a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
html[data-theme="mono"] .catalog-search__input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }

/* Catálogo / ficha (.store-skin) */
html[data-theme="mono"] .store-skin { --s-primary-d: #E4E4E7; --s-green: var(--ink-200); --s-amber: #FFFFFF; }
html[data-theme="mono"] .store-btn--primary,
html[data-theme="mono"] .store-btn--primary:hover { color: var(--bg-0); }
html[data-theme="mono"] .store-btn--primary { box-shadow: 0 8px 20px -8px rgba(255,255,255,0.303); }
html[data-theme="mono"] .store-cats button.is-active { color: var(--bg-0); }
html[data-theme="mono"] .store-card:hover { border-color: rgba(255,255,255,0.22); box-shadow: 0 18px 40px -18px rgba(255,255,255,0.154), 0 8px 24px -8px rgba(0,0,0,.6); }
html[data-theme="mono"] .store-card__ph,
html[data-theme="mono"] .store-card__icon,
html[data-theme="mono"] .sd-buy__icon { background: linear-gradient(140deg, #2A2A30, #111114); }
html[data-theme="mono"] .store-card__badge.is-popular { background: #fff; color: var(--bg-0); }
html[data-theme="mono"] .store-card__pricetag { color: var(--ink-0); background: rgba(255,255,255,.1); }
html[data-theme="mono"] .store-card__cta,
html[data-theme="mono"] .store-card__cta:hover { color: var(--bg-0); }
/* Interpretación: el segmentado TV / Celular no existe en el sitio de referencia;
   con el acento blanco su estado activo va con texto negro (si no, blanco sobre blanco). */
html[data-theme="mono"] .sd-mode[aria-pressed="true"] { color: var(--bg-0); }

/* ===================== 1) FAMILIA "panel": remapeo app.css -> --dm-* ===================== */
html[data-ui="panel"] {
  /* Superficies */
  --bg-0: var(--dm-bg);
  --bg-1: var(--dm-card);
  --bg-2: var(--dm-tile);
  --bg-3: var(--dm-line);
  --bg-4: var(--dm-line-strong);

  /* Tinta */
  --ink-0:   var(--dm-head);
  --ink-50:  var(--dm-head);
  --ink-100: var(--dm-text);
  --ink-200: var(--dm-text);
  --ink-300: var(--dm-muted);
  --ink-400: var(--dm-muted);
  --ink-500: var(--dm-muted);

  /* Acento. app.css usa --orange-* casi siempre como COLOR DE TEXTO / ícono -> --dm-link
     (en claro --dm-link == --dm-accent; en oscuro --dm-link es el azul legible sobre negro).
     Los RELLENOS azules (botones, chips, ribbon, segmentados) se fijan abajo con
     --dm-accent + --dm-on-accent. */
  --orange-50:  var(--dm-fill);
  --orange-100: var(--dm-link-h);
  --orange-200: var(--dm-link-h);
  --orange-300: var(--dm-link-h);
  --orange-400: var(--dm-link);
  --orange-500: var(--dm-link-h);
  --orange-600: var(--dm-link-h);

  /* "cyan" = blanco premium -> tinta/neutro del panel */
  --cyan-300: var(--dm-head);
  --cyan-400: var(--dm-head);
  --cyan-500: var(--dm-muted);

  /* Sombras: una sola, la flotante tenue del panel */
  --shadow-sm: var(--dm-float);
  --shadow-md: var(--dm-float);
  --shadow-lg: var(--dm-float);
  --shadow-xl: var(--dm-float);
  --shadow-orange: var(--dm-float);
  --shadow-cyan:   var(--dm-float);

  /* Tipografía SF/system del panel (el mono se queda) */
  --font-display: var(--dm-font);
  --font-sans:    var(--dm-font);

  /* Radios concéntricos del panel */
  --radius-md:  var(--dm-r-ctl);
  --radius-lg:  var(--dm-r-card);
  --radius-xl:  var(--dm-r-card);
  --radius-2xl: var(--dm-r-shell);
  --radius-full: var(--dm-r-pill);
}

/* Fondo: plano + cuadrícula fina del panel (adiós manchas rojas + starfield animado) */
html[data-ui="panel"] body { background: var(--dm-bg); }
html[data-ui="panel"] body::before {
  background:
    linear-gradient(var(--dm-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--dm-grid) 1px, transparent 1px) !important;
  background-size: 46px 46px !important;
  -webkit-mask-image: radial-gradient(circle at 50% 28%, #000 50%, rgba(0,0,0,.45) 100%) !important;
          mask-image: radial-gradient(circle at 50% 28%, #000 50%, rgba(0,0,0,.45) 100%) !important;
}
html[data-ui="panel"] body::after { content: none !important; display: none !important; }
/* iOS oscuro: estrellas blancas ESTÁTICAS, como el panel en oscuro (.dm-body::after) */
html[data-theme="ios-dark"][data-ui="panel"] body::after { content: "" !important; display: block !important; animation: none !important; }
html[data-ui="panel"] ::selection { background: var(--dm-selection); color: inherit; }

/* ============================================================
   2) BARRA SUPERIOR -> cristal del panel. El cristal real vive en la "pill"
   .site-header__inner (app.css dejó .site-header::before en display:none).
   ============================================================ */
html[data-ui="panel"] .site-header__inner {
  background: var(--dm-glass) !important;
  -webkit-backdrop-filter: var(--dm-blur) !important;
          backdrop-filter: var(--dm-blur) !important;
  border: 1px solid var(--dm-hairline) !important;
  box-shadow: var(--dm-spec), var(--dm-float) !important;
}
html[data-ui="panel"] .site-header.is-scrolled .site-header__inner {
  background: var(--dm-glass-sheet) !important;
  border-color: var(--dm-line) !important;
}
html[data-ui="panel"] .site-header::before,
html[data-ui="panel"] .site-header.is-scrolled::before {
  background-color: var(--dm-glass) !important;
  -webkit-backdrop-filter: var(--dm-blur) !important;
          backdrop-filter: var(--dm-blur) !important;
  border-bottom: 1px solid var(--dm-line) !important;
}
html[data-ui="panel"] .nav-toggle { color: var(--dm-head); }
html[data-ui="panel"] .nav-toggle:hover { background: var(--dm-fill); }
html[data-ui="panel"] .site-header__nav a.is-active { color: var(--dm-link); }
html[data-ui="panel"] .site-header__nav a.is-active::after { background: var(--dm-link); }

/* ============================================================
   3) MENÚ MÓVIL (#mobile-nav) -> hoja del panel
   ============================================================ */
html[data-ui="panel"] .mobile-nav {
  background: var(--dm-glass-sheet) !important;
  -webkit-backdrop-filter: var(--dm-blur) !important;
          backdrop-filter: var(--dm-blur) !important;
  border: 1px solid var(--dm-hairline) !important;
  border-top: 1px solid var(--dm-hairline) !important;
  box-shadow: var(--dm-spec), var(--dm-float) !important;
}
html[data-ui="panel"] .mobile-nav a { color: var(--dm-head); border-bottom-color: var(--dm-line) !important; }
html[data-ui="panel"] .mobile-nav a:hover { color: var(--dm-link); }

/* ============================================================
   4) BOTONES: planos estilo panel (píldora, relleno liso, sin sombra ni borde).
   Primario y compra (.btn--buy) -> AZUL del panel. Cero rojo.
   WhatsApp / Telegram conservan su color de marca, con texto oscuro (AA).
   ============================================================ */
html[data-ui="panel"] .btn { border-radius: var(--dm-r-pill); }
html[data-ui="panel"] .btn--primary,
html[data-ui="panel"] .btn--buy {
  background: var(--dm-accent) !important; color: var(--dm-on-accent) !important;
  box-shadow: none !important; border: 0 !important;
}
html[data-ui="panel"] .btn--primary:hover,
html[data-ui="panel"] .btn--primary:active,
html[data-ui="panel"] .btn--buy:hover,
html[data-ui="panel"] .btn--buy:active { background: var(--dm-accent-h) !important; }

html[data-ui="panel"] .btn--whatsapp,
html[data-ui="panel"] .btn--telegram { color: var(--on-brand-ink); box-shadow: none !important; }
html[data-ui="panel"] .btn--cyan { box-shadow: none !important; }

html[data-ui="panel"] .btn--ghost { color: var(--dm-head); box-shadow: inset 0 0 0 1px var(--dm-line); }
html[data-ui="panel"] .btn--ghost:hover { color: var(--dm-link); box-shadow: inset 0 0 0 1px var(--dm-link); }

/* Botones "store" (ficha / catálogo) */
html[data-ui="panel"] .store-btn { border-radius: var(--dm-r-pill); box-shadow: none !important; }
html[data-ui="panel"] .store-btn--primary { background: var(--dm-accent) !important; color: var(--dm-on-accent) !important; }
/* Caja de compra: igual que producción -> botón neutro con el LOGO en su color de marca
   (verde WhatsApp / azul Telegram), siempre en pareja. En el panel, el color de marca
   se reserva al logo. */
html[data-ui="panel"] .store-btn--wa,
html[data-ui="panel"] .store-btn--tg {
  background: var(--dm-fill) !important; color: var(--dm-head) !important; border-color: transparent !important;
}
html[data-ui="panel"] .store-btn--wa:hover,
html[data-ui="panel"] .store-btn--tg:hover { background: var(--dm-fill-h) !important; border-color: transparent !important; transform: none; }
html[data-ui="panel"] .store-btn--wa .wa-ico { color: var(--wa) !important; }
html[data-ui="panel"] .store-btn--tg .tg-ico { color: var(--tg) !important; }

/* ============================================================
   5) GLOWS / washes / scrims -> fuera
   ============================================================ */
html[data-ui="panel"] .app-card::before,
html[data-ui="panel"] .app-card:hover::before,
html[data-ui="panel"] .feature-card::before,
html[data-ui="panel"] .phone-frame__glow,
html[data-ui="panel"] .tv-frame__glow,
html[data-ui="panel"] .cta-block::before { opacity: 0 !important; background: none !important; }
html[data-ui="panel"] .app-hero-bg { display: none !important; }

html[data-ui="panel"] .cta-block {
  background: var(--dm-card) !important;
  border: 1px solid var(--dm-hairline);
  box-shadow: var(--dm-float);
}
html[data-ui="panel"] .cta-block__title em { color: var(--dm-link); }

/* ============================================================
   6) CARDS: superficie del panel + hairline; --dm-float solo al hover.
   ============================================================ */
html[data-ui="panel"] .app-card,
html[data-ui="panel"] .feature-card,
html[data-ui="panel"] .hero__fresh-media { box-shadow: inset 0 0 0 1px var(--dm-hairline) !important; }

html[data-ui="panel"] .app-card:hover,
html[data-ui="panel"] .feature-card:hover,
html[data-ui="panel"] .hero__fresh-card:hover .hero__fresh-media {
  box-shadow: inset 0 0 0 1px var(--dm-line-strong), var(--dm-float) !important;
}

html[data-ui="panel"] .feature-card__icon,
html[data-ui="panel"] .feature-card__icon--cyan { background: var(--dm-fill) !important; color: var(--dm-link); }

html[data-ui="panel"] .price-card { box-shadow: inset 0 0 0 1px var(--dm-hairline); }
html[data-ui="panel"] .price-card--featured {
  background: var(--dm-card) !important;
  box-shadow: inset 0 0 0 2px var(--dm-accent), var(--dm-float) !important;
}
html[data-ui="panel"] .price-card__feature::before { color: var(--dm-ok); }
html[data-ui="panel"] .price-card__feature--off::before { color: var(--dm-muted) !important; }
html[data-ui="panel"] .price-card__ribbon { background: var(--dm-accent) !important; color: var(--dm-on-accent) !important; }

html[data-ui="panel"] .store-card:hover {
  border-color: var(--dm-line-strong) !important;
  box-shadow: var(--dm-float) !important;
}
html[data-ui="panel"] .store-card__badge { background: var(--dm-accent) !important; color: var(--dm-on-accent) !important; }
html[data-ui="panel"] .store-card__badge.is-popular { background: var(--dm-warn-bg) !important; color: var(--dm-warn-fg) !important; }
html[data-ui="panel"] .store-card__cta { background: var(--dm-accent) !important; color: var(--dm-on-accent) !important; }
html[data-ui="panel"] .store-card__cta:hover { background: var(--dm-accent-h) !important; }

/* FAQ: abierto con contorno neutro (sin anillo de color) */
html[data-ui="panel"] .faq-item { box-shadow: inset 0 0 0 1px var(--dm-hairline); }
html[data-ui="panel"] .faq-item[open] { box-shadow: inset 0 0 0 1px var(--dm-line-strong); }

/* ============================================================
   7) Chips / badges / segmentados con relleno de acento
   ============================================================ */
html[data-ui="panel"] .hero__fresh-chip { background: var(--dm-accent) !important; color: var(--dm-on-accent) !important; }
html[data-ui="panel"] .app-card__chip--hot,
html[data-ui="panel"] .app-card__chip--new,
html[data-ui="panel"] .app-card__chip--house { background: var(--dm-accent) !important; color: var(--dm-on-accent) !important; }
html[data-ui="panel"] .footer-social:hover { background: var(--dm-accent) !important; }
html[data-ui="panel"] .filter-chip.is-active,
html[data-ui="panel"] .tab.is-active,
html[data-ui="panel"] .store-cats button.is-active { background: var(--dm-accent) !important; color: var(--dm-on-accent) !important; box-shadow: none !important; }
html[data-ui="panel"] .store-carousel__dot.is-active { background: var(--dm-accent) !important; }

/* Ficha: segmentado TV / Celular y miniaturas */
html[data-ui="panel"] .sd-mode[aria-pressed="true"] { background: var(--dm-accent) !important; color: var(--dm-on-accent) !important; }
html[data-ui="panel"] .sd-thumb:hover,
html[data-ui="panel"] .sd-thumb.is-active { border-color: var(--dm-accent) !important; }

/* Foco azul del panel */
html[data-ui="panel"] .btn:focus-visible,
html[data-ui="panel"] .store-btn:focus-visible,
html[data-ui="panel"] .sd-mode:focus-visible,
html[data-ui="panel"] a:focus-visible,
html[data-ui="panel"] button:focus-visible,
html[data-ui="panel"] select:focus-visible { outline-color: var(--dm-focus) !important; }

/* ============================================================
   8) PANEL PLANO: cero text-shadow; sin glow / sombra de color en chips.
   La única sombra es --dm-float bajo lo que flota.
   ============================================================ */
html[data-ui="panel"] *,
html[data-ui="panel"] *::before,
html[data-ui="panel"] *::after { text-shadow: none !important; }

html[data-ui="panel"] .app-card__chip,
html[data-ui="panel"] .app-card__chip--hot,
html[data-ui="panel"] .app-card__chip--new,
html[data-ui="panel"] .app-card__chip--house,
html[data-ui="panel"] .app-card__rating,
html[data-ui="panel"] .store-card__badge,
html[data-ui="panel"] .hero__fresh-chip { box-shadow: none !important; }

/* ============================================================
   9) BANNERS DE PRODUCTO atenuados + legibilidad (sin scrim oscuro).
   Color de marca de cada app = tinte suave (12 %) sobre la superficie del panel.
   ============================================================ */
html[data-ui="panel"] .app-card__media { background: var(--dm-card) !important; }
html[data-ui="panel"] .app-card__placeholder { background: color-mix(in srgb, var(--brand) var(--brand-tint), var(--brand-base)) !important; }
html[data-ui="panel"] .app-card__placeholder::after { display: none !important; }
html[data-ui="panel"] .app-card__placeholder span { color: var(--dm-muted) !important; }
html[data-ui="panel"] .app-card__overlay { background: none !important; }
html[data-ui="panel"] .app-card__title { color: var(--dm-head) !important; }
html[data-ui="panel"] .app-card__hover { color: var(--dm-link) !important; }
html[data-ui="panel"] .app-card__rating {
  background: var(--dm-glass-sheet) !important; color: var(--dm-head) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-ui="panel"] .app-card__plat--roku { color: var(--roku-ink) !important; }
/* Chip "Roku": era blanco sobre lila (3.1:1 claro / 3.9:1 oscuro) -> relleno neutro + tinta lila (AA) */
html[data-ui="panel"] .app-card__chip--roku { background: var(--dm-fill) !important; color: var(--roku-ink) !important; }

html[data-ui="panel"] .store-card__ph {
  background: color-mix(in srgb, var(--brand) var(--brand-tint), var(--brand-base)) !important;
  color: var(--dm-muted) !important;
}
html[data-ui="panel"] .store-card__icon,
html[data-ui="panel"] .sd-buy__icon {
  background: color-mix(in srgb, var(--brand) var(--brand-tint), var(--brand-base)) !important;
  color: var(--dm-head) !important;
  box-shadow: inset 0 0 0 1px var(--dm-hairline) !important;
}
/* Logos de pago: el badge blanco se queda (los logos lo necesitan), sin sombra */
html[data-ui="panel"] .sd-pay__logo { box-shadow: inset 0 0 0 1px var(--dm-hairline) !important; }

/* Pie: sin el degradado oscuro de rednoir y TRANSPARENTE, para que la cuadrícula
   (y en oscuro las estrellas) del fondo fijo continúen por detrás del pie, igual
   que en el resto de la página. Con fondo opaco la tapaban. */
html[data-ui="panel"] .site-footer { background: transparent !important; }
/* Monocromo: el pie base arranca con --bg-0 opaco y tapa los radiales y los
   brillitos del fondo. Transparente para que el fondo siga hasta abajo. */
html[data-theme="mono"] .site-footer { background: transparent !important; }

/* ============================================================
   10) SELECTOR DE THEMES: solo los ajustes por theme (la base va inline en head.php)
   ============================================================ */
html[data-ui="panel"] .theme-list__btn[aria-pressed="true"] { background: var(--dm-accent); color: var(--dm-on-accent); }
html[data-ui="panel"] .theme-list { border-radius: var(--dm-r-ctl); }
html[data-ui="panel"] .theme-pick__select:focus-visible,
html[data-ui="panel"] .theme-list__btn:focus-visible { outline-color: var(--dm-focus); }

/* ============================================================
   12) COMPONENTES DE PRODUCCIÓN que el prototipo no tenía
   (detectados con el barrido de rojo/contraste y la revisión visual de las páginas reales)
   ============================================================ */

/* ---- /apps: encabezado "store" (texto blanco fijo y glow rojo en app.css) ---- */
html[data-ui="panel"] .store-hero { background: none !important; color: var(--dm-head); }
html[data-ui="panel"] .breadcrumb--onDark { color: var(--dm-muted); }
html[data-ui="panel"] .breadcrumb--onDark a { color: var(--dm-text); }
html[data-ui="panel"] .breadcrumb--onDark a:hover { color: var(--dm-link); }
html[data-ui="panel"] .breadcrumb--onDark .breadcrumb__current { color: var(--dm-head); }
html[data-ui="panel"] .store-hero__pill { background: var(--dm-fill) !important; border-color: transparent !important; color: var(--dm-head) !important; }
html[data-ui="panel"] .store-btn--ghost { background: var(--dm-fill) !important; color: var(--dm-head) !important; border-color: transparent !important; }
html[data-ui="panel"] .store-btn--ghost:hover { background: var(--dm-fill-h) !important; }
html[data-ui="panel"] .store-feat { box-shadow: inset 0 0 0 1px var(--dm-hairline), var(--dm-float) !important; }
html[data-ui="panel"] .store-feat__banner { background: var(--dm-tile) !important; }
/* "Destacada" era blanco sobre ámbar (2.2:1) y las estrellas ámbar sobre blanco (2:1) */
html[data-ui="panel"] .store-feat__tag { background: var(--dm-warn-bg) !important; color: var(--dm-warn-fg) !important; }
html[data-ui="panel"] .store-feat__rating { color: var(--dm-warn-fg) !important; }
html[data-ui="panel"] .store-feat__more { color: var(--dm-link) !important; }
/* contador de la categoría activa: sin el velo blanco (3.8:1) */
html[data-ui="panel"] .store-cats button.is-active span { background: transparent !important; color: var(--dm-on-accent) !important; }
html[data-ui="panel"] .store-cats button:hover:not(.is-active) { background: var(--dm-hover) !important; }
html[data-ui="panel"] .store-side-custom__ico { background: var(--dm-fill) !important; }
html[data-ui="panel"] .store-skin .catalog-search__input:focus { border-color: var(--dm-focus) !important; box-shadow: 0 0 0 3px var(--dm-selection) !important; }

/* ---- Aviso flotante del canal de Telegram (inc/layout/telegram-cta.php) ----
   Su fondo es --bg-2, que en el panel es un tinte translúcido: va como hoja del panel. */
html[data-ui="panel"] .tg-cta {
  background: var(--dm-glass-sheet) !important;
  -webkit-backdrop-filter: var(--dm-blur); backdrop-filter: var(--dm-blur);
  border-color: var(--dm-hairline) !important; box-shadow: var(--dm-float) !important;
}
/* botón azul de marca con texto oscuro: blanco sobre #229ED9 da 3:1 */
html[data-ui="panel"] .tg-cta__btn { color: var(--on-brand-ink) !important; }

/* ---- Monocromo: equivalentes del sitio de referencia + lo que quedaba blanco sobre blanco ---- */
html[data-theme="mono"] .store-hero { background: radial-gradient(1000px 480px at 80% -10%, rgba(255,255,255,0.077), transparent 62%); }
html[data-theme="mono"] .store-hero__pill { background: rgba(255,255,255,0.077); border-color: rgba(255,255,255,0.22); }
html[data-theme="mono"] .store-side-custom__ico { background: rgba(255,255,255,0.066); }
html[data-theme="mono"] .store-skin .catalog-search__input:focus { border-color: rgba(255,255,255,.45); box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
html[data-theme="mono"] .store-cats button.is-active span { background: rgba(0,0,0,.12); color: var(--bg-0); }
/* --s-amber es blanco en mono: el texto de la etiqueta va oscuro */
html[data-theme="mono"] .store-feat__tag { color: var(--bg-0); }
html[data-theme="mono"] .tg-cta__btn { color: var(--bg-0); }

/* ---- Blog, testimonios, compatibilidad, CTA de unirse: anillos/halos rojos fijos en app.css ---- */
html[data-ui="panel"] .post-card,
html[data-ui="panel"] .post-feature,
html[data-ui="panel"] .tcard,
html[data-ui="panel"] .join__box { box-shadow: inset 0 0 0 1px var(--dm-hairline) !important; }
html[data-ui="panel"] .post-card:hover,
html[data-ui="panel"] .post-feature:hover { box-shadow: inset 0 0 0 1px var(--dm-line-strong), var(--dm-float) !important; }
html[data-ui="panel"] .compat,
html[data-ui="panel"] .post__hero { background: none !important; }
html[data-ui="panel"] .roku-section::before,
html[data-ui="panel"] .join__box::before { background: none !important; opacity: 0 !important; }
html[data-ui="panel"] .tag--orange { background: var(--dm-fill) !important; color: var(--dm-link) !important; box-shadow: none !important; }
html[data-ui="panel"] .tag--roku,
html[data-ui="panel"] .roku-badge { background: var(--dm-fill) !important; color: var(--roku-ink) !important; box-shadow: none !important; }
html[data-ui="panel"] .tcard__avatar { background: var(--dm-fill) !important; color: var(--dm-head) !important; }
html[data-ui="panel"] .post-card__media--blank span { color: var(--dm-muted) !important; }
/* Citas del markdown: sin barra de color a un lado (regla del panel) */
html[data-ui="panel"] .prose-stream blockquote {
  border-left: 0 !important; font-style: normal; padding: .9rem 1.1rem;
  border-radius: var(--dm-r-ctl); background: var(--dm-tile); box-shadow: inset 0 0 0 1px var(--dm-hairline);
}
/* Puntitos decorativos: el panel no usa dots */
html[data-ui="panel"] .hero-tag::before,
html[data-ui="panel"] .phone-frame__row::before { display: none !important; }
html[data-ui="panel"] .phone-rotator__dot.is-active { background: var(--dm-accent) !important; }

/* ---- Filtros por tema del blog: relleno de acento con texto blanco fijo ---- */
html[data-ui="panel"] .post-filter a:hover { border-color: var(--dm-line-strong) !important; color: var(--dm-head) !important; }
html[data-ui="panel"] .post-filter a[aria-current="true"],
html[data-ui="panel"] .post-filter a[aria-current="true"] span { background-color: var(--dm-accent) !important; color: var(--dm-on-accent) !important; }
html[data-ui="panel"] .post-filter a[aria-current="true"] span { background-color: transparent !important; }

/* ---- Botón y panel flotantes de contacto (inc/layout/floating_contact.php) ---- */
html[data-ui="panel"] .fab-btn { background: var(--dm-accent) !important; color: var(--dm-on-accent) !important; box-shadow: var(--dm-float) !important; }
html[data-ui="panel"] .fab-btn:hover { background: var(--dm-accent-h) !important; }
html[data-ui="panel"] .fab-panel {
  background: var(--dm-glass-sheet) !important;
  -webkit-backdrop-filter: var(--dm-blur); backdrop-filter: var(--dm-blur);
  box-shadow: inset 0 0 0 1px var(--dm-hairline), var(--dm-float) !important;
}
html[data-ui="panel"] .fab-link:hover { background: var(--dm-hover) !important; box-shadow: inset 0 0 0 1px var(--dm-line-strong) !important; }

/* ---- Aviso de cookies: hoja del panel (su fondo --bg-1 es translúcido aquí) ---- */
html[data-ui="panel"] .ck {
  background: var(--dm-glass-sheet) !important;
  -webkit-backdrop-filter: var(--dm-blur); backdrop-filter: var(--dm-blur);
  border-top-color: var(--dm-hairline) !important; box-shadow: var(--dm-float) !important;
}

/* ---- Monocromo: versiones blancas de los mismos componentes (valores del sitio de referencia) ---- */
html[data-theme="mono"] .hero-tag { gap: .6rem; font-family: var(--font-sans); font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--ink-300); }
html[data-theme="mono"] .hero-tag::before,
html[data-theme="mono"] .phone-frame__row::before { display: none; }
html[data-theme="mono"] .phone-rotator__glow { background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255,255,255,0.11), transparent 60%); }
html[data-theme="mono"] .tcard__avatar { background: linear-gradient(135deg, #FFFFFF, #A1A1AA); color: var(--bg-0); }
html[data-theme="mono"] .fab-btn,
html[data-theme="mono"] .fab-btn:hover { color: var(--bg-0); }
html[data-theme="mono"] .fab-link:hover { background: rgba(255,255,255,0.028); }
html[data-theme="mono"] .roku-section::before { background: radial-gradient(ellipse 60% 50% at 80% 30%, rgba(255,255,255,0.11), transparent 70%), radial-gradient(ellipse 40% 50% at 10% 90%, rgba(255,255,255,0.06), transparent 70%); }
html[data-theme="mono"] .roku-badge { background: rgba(255,255,255,0.083); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }
html[data-theme="mono"] .roku-mockup { background: linear-gradient(160deg, rgba(255,255,255,0.16), var(--bg-1)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.165), 0 40px 80px -20px rgba(0,0,0,0.7); }
html[data-theme="mono"] .roku-mockup__brand { background: rgba(255,255,255,0.083); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.165); }
html[data-theme="mono"] .roku-shot:hover { box-shadow: 0 28px 70px -12px rgba(255,255,255,0.138), 0 0 0 1px rgba(255,255,255,0.22); }
html[data-theme="mono"] .tag--orange { background: rgba(255,255,255,0.066); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.165); }
html[data-theme="mono"] .tag--roku { background: rgba(255,255,255,0.055); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.165); }
html[data-theme="mono"] .compat { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.017), transparent); }
html[data-theme="mono"] .post-feature:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 20px 50px -16px rgba(255,255,255,0.11); }
html[data-theme="mono"] .post-card:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 20px 40px -16px rgba(0,0,0,0.5); }
html[data-theme="mono"] .post-card__media--blank span { color: rgba(255,255,255,0.165); }
html[data-theme="mono"] .post__hero { background: linear-gradient(180deg, rgba(255,255,255,0.033), transparent); }
html[data-theme="mono"] .join__box::before { background: radial-gradient(circle, rgba(255,255,255,0.077), transparent 62%); }
html[data-theme="mono"] .prose-stream blockquote { border-left: 0; font-style: normal; padding: .9rem 1.1rem; border-radius: var(--radius-md); background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--bg-3); }
html[data-theme="mono"] .post-filter a[aria-current="true"] { color: var(--bg-0); }
html[data-theme="mono"] .post-filter a[aria-current="true"] span { color: rgba(0,0,0,.6); }
/* contador de categoría (/apps): --ink-300 sobre --bg-3 da 4.2:1 con este negro -> tinta más clara */
html[data-theme="mono"] .store-cats button span { color: var(--ink-200); }

/* ---- App-cards con portada real (home, /rebrand-roku): el título va sobre la captura.
   Sin el velo oscuro de app.css (pedido del dueño), el título lleva una placa de cristal del
   panel: legible sobre cualquier imagen y sin franja negra. ---- */
html[data-ui="panel"] .app-card__overlay { padding: 0 .75rem .75rem !important; }
html[data-ui="panel"] .app-card__title {
  display: inline-block; max-width: 100%; padding: .3rem .6rem; border-radius: var(--dm-r-thumb);
  background: var(--dm-glass-sheet); -webkit-backdrop-filter: var(--dm-blur); backdrop-filter: var(--dm-blur);
  box-shadow: inset 0 0 0 1px var(--dm-hairline);
}
html[data-ui="panel"] .app-card__hover {
  display: inline-block; margin-top: .35rem; padding: .2rem .55rem; border-radius: var(--dm-r-pill);
  background: var(--dm-glass-sheet); -webkit-backdrop-filter: var(--dm-blur); backdrop-filter: var(--dm-blur);
}
/* Etiquetas que van SOBRE fotos: superficie sólida del panel (el tinte translúcido se perdía en capturas oscuras) */
html[data-ui="panel"] .store-feat__tag,
html[data-ui="panel"] .store-card__badge.is-popular { background: var(--dm-glass-sheet) !important; color: var(--dm-warn-fg) !important; box-shadow: inset 0 0 0 1px var(--dm-hairline) !important; }
/* Puntos del carrusel de /apps: los inactivos eran blancos al 28 % (invisibles en claro) */
html[data-ui="panel"] .store-carousel__dot { background: var(--dm-line-strong) !important; }
html[data-ui="panel"] .store-carousel__dot:hover { background: var(--dm-muted) !important; }
html[data-ui="panel"] .store-carousel__dot.is-active { background: var(--dm-accent) !important; }

/* ---- /rebrand-roku: el lila de Roku (--roku-300) se usa como TEXTO. Tinta AA por theme, con los
   valores de app.css (--roku-600 en claro, --roku-300 en oscuro) en literal para no encadenar tokens. ---- */
html[data-theme="ios"] { --roku-ink: #662D91; }
html[data-theme="ios-dark"] { --roku-ink: #C9A0FF; }
html[data-ui="panel"] { --roku-300: var(--roku-ink); }
/* Banda oscura fija de las secciones alternas (rgba(19,19,22,.6)): fondo plano del panel */
html[data-ui="panel"] .section--alt { background: none !important; }
/* Leyenda bajo el televisor de muestra: el marco del TV es oscuro en todos los themes */
html[data-ui="panel"] .tv-frame__caption { color: #aeaeb2 !important; }
html[data-theme="mono"] .tv-frame__caption { color: var(--ink-200); }
/* Chip "Roku" de las app-cards: va sobre la portada -> superficie sólida (el relleno translúcido se perdía) */
html[data-ui="panel"] .app-card__chip--roku { background: var(--dm-glass-sheet) !important; box-shadow: inset 0 0 0 1px var(--dm-hairline) !important; }