/* ============================================================================ theme.css — TEMA POR HORA DEL DÍA Y UBICACIÓN (marketing / blog) ---------------------------------------------------------------------------- Historia: tema ambiental por fase del cielo (day / dawn / dusk / night). - Selección por atributo en : data-sky="day|dawn|dusk|night" (calculado por theme.js: hora local o elevación solar NOAA con geoloc). - Override manual del toggle: data-theme="light|dark". - SOLO se re-declaran tokens de FONDO / SUPERFICIE / TEXTO / BORDE, en ambos namespaces existentes (--q-* canónico y --qirava-* de la landing) + un WASH ambiental del body. NO se tocan gradientes de marca ni fondos de botón. INTOCABLES (NO redefinidos aquí): --q-gradient-primary, --q-gradient-hover, --qirava-gradient-primary, --qirava-gradient-hover, .q-btn--primary, .btn-nav-cta, .btn-primary, .btn-login (sus fondos verde/azul/degradado se conservan intactos). Sin morado en ningún token. ============================================================================ */ /* ── Transiciones de tema (solo si NO se pide reducir movimiento) ────────── */ @media (prefers-reduced-motion: no-preference) { body, .site-header, .q-card, .q-surface { transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease; } } /* ============================================================================ FASE: DAY (base CLARA) — fondo claro, texto oscuro. Los :root ya son claros: aquí solo reafirmamos color-scheme. ============================================================================ */ html[data-sky="day"], html[data-theme="light"] { color-scheme: light; } /* ============================================================================ FASE: DAWN — wash ambiental amarillo → azul (amanecer). Texto oscuro legible. Aplicado al FONDO base (body/superficies), no a componentes individuales. ============================================================================ */ html[data-sky="dawn"] { color-scheme: light; /* Fondo base con tinte cálido→frío muy sutil */ --q-bg: #FBF7EE; --q-bg-strong: #F1EFE4; --q-surface: #FFFDF8; --q-surface-glass: rgba(255, 253, 248, 0.80); --q-border: #E7E0CF; --q-border-strong: #D8D0BC; /* Mismos overrides en el namespace de la landing */ --qirava-bg: #FBF7EE; --qirava-bg-strong: #F1EFE4; --qirava-surface: #FFFDF8; --qirava-surface-glass: rgba(255, 253, 248, 0.80); --qirava-border: #E7E0CF; --qirava-border-strong: #D8D0BC; /* CAUSA RAÍZ del contraste en heroes/secciones "soft": el gradiente base terminaba SIEMPRE en blanco. Se re-deriva por fase para que todo consumidor (.ab-hero, .qh-section--soft, .q-cta, .ai-featured, hero de vision…) tinte su fondo con el cielo de la fase, sin parchar cada componente. Tinta oscura legible en fases claras. NO se tocan --q-gradient-primary/-hover. */ --q-gradient-soft: radial-gradient(circle at 18% 10%, rgba(255, 214, 120, 0.20), transparent 34%), radial-gradient(circle at 86% 14%, rgba(120, 170, 210, 0.16), transparent 30%), linear-gradient(180deg, #FFF3D6 0%, #FBF7EE 60%, #E9F0F7 100%); --qirava-gradient-soft: radial-gradient(circle at 18% 10%, rgba(255, 214, 120, 0.20), transparent 34%), radial-gradient(circle at 86% 14%, rgba(120, 170, 210, 0.16), transparent 30%), linear-gradient(180deg, #FFF3D6 0%, #FBF7EE 60%, #E9F0F7 100%); } /* Wash del cielo del amanecer: amarillo arriba → azul abajo, MUY sutil. */ html[data-sky="dawn"] body { background: radial-gradient(circle at 20% 6%, rgba(255, 214, 120, 0.22), transparent 42%), radial-gradient(circle at 82% 4%, rgba(255, 184, 108, 0.16), transparent 38%), linear-gradient(180deg, #FFF3D6 0%, #FBF7EE 46%, #E9F0F7 100%); } /* ============================================================================ FASE: DUSK — wash ambiental naranja → rojizo (atardecer). Texto oscuro. ============================================================================ */ html[data-sky="dusk"] { color-scheme: light; --q-bg: #FBF1EC; --q-bg-strong: #F1E5DE; --q-surface: #FFFAF6; --q-surface-glass: rgba(255, 250, 246, 0.80); --q-border: #E8D8CE; --q-border-strong: #DAC6B9; --qirava-bg: #FBF1EC; --qirava-bg-strong: #F1E5DE; --qirava-surface: #FFFAF6; --qirava-surface-glass: rgba(255, 250, 246, 0.80); --qirava-border: #E8D8CE; --qirava-border-strong: #DAC6B9; /* Gradiente "soft" del atardecer (mismo criterio que dawn). Tinta oscura. */ --q-gradient-soft: radial-gradient(circle at 18% 10%, rgba(255, 168, 92, 0.20), transparent 34%), radial-gradient(circle at 86% 14%, rgba(224, 112, 96, 0.16), transparent 30%), linear-gradient(180deg, #FFE6CE 0%, #FBF1EC 60%, #F3DCD6 100%); --qirava-gradient-soft: radial-gradient(circle at 18% 10%, rgba(255, 168, 92, 0.20), transparent 34%), radial-gradient(circle at 86% 14%, rgba(224, 112, 96, 0.16), transparent 30%), linear-gradient(180deg, #FFE6CE 0%, #FBF1EC 60%, #F3DCD6 100%); } /* Wash del cielo del atardecer: naranja → rojizo, MUY sutil. */ html[data-sky="dusk"] body { background: radial-gradient(circle at 18% 8%, rgba(255, 168, 92, 0.22), transparent 42%), radial-gradient(circle at 84% 6%, rgba(224, 112, 96, 0.18), transparent 40%), linear-gradient(180deg, #FFE6CE 0%, #FBF1EC 48%, #F3DCD6 100%); } /* ============================================================================ FASE: NIGHT (base OSCURA) — NOCHE NEGRA PROFUNDA, texto claro legible. El CEO pidió negro de noche (no "bosque verde de día"). Fondo casi negro con tinte verdoso MUY sutil de marca en superficies. Se invierten fondos/superficies; tinta a un blanco-verdoso muy claro legible (AA). NO se tocan gradientes ni fondos de botón (siguen verde/azul/degradado). ============================================================================ */ html[data-sky="night"], html[data-theme="dark"] { color-scheme: dark; /* Base SÓLIDA de noche: el lienzo del navegador queda NEGRO detrás de los washes radiales que se desvanecen a transparente (fix fondo blanco). */ background-color: #05060A; /* Fondos / superficies — NEGRO PROFUNDO de noche (tinte verdoso mínimo) */ --q-bg: #05060A; --q-bg-strong: #0E1013; --q-surface: #0E1013; --q-surface-glass: rgba(14, 16, 19, 0.86); /* Tinta / texto claro legible (blanco levemente verdoso) */ --q-ink: #E8F1EC; --q-ink-2: #F3FAF6; --q-muted: #A6B4AD; --q-muted-2: #C4D4CC; --q-placeholder: #7E8C86; /* Bordes oscuros sutiles sobre negro */ --q-border: #1B1F23; --q-border-strong: #2A3037; /* Foco visible sobre oscuro (halo verdoso, NO morado) */ --q-focus-ring: rgba(94, 190, 140, 0.30); --q-focus-inset: rgba(120, 210, 165, 0.45); /* Verde de hover/acento: el #2E6B41 base es demasiado OSCURO sobre negro (usado en chips de categoría .ai-card__cat/.ai-featured__cat/.ai-rel__cat y enlaces). Se aclara a verde de marca legible SOLO en noche. No se toca qirava-tokens.css; es un override de token en el namespace night. */ --q-accent-hover: #86C1A9; /* Mismos overrides en el namespace de la landing */ --qirava-bg: #05060A; --qirava-bg-strong: #0E1013; --qirava-surface: #0E1013; --qirava-surface-glass: rgba(14, 16, 19, 0.86); --qirava-ink: #E8F1EC; --qirava-ink-2: #F3FAF6; --qirava-muted: #A6B4AD; --qirava-muted-2: #C4D4CC; --qirava-border: #1B1F23; --qirava-border-strong: #2A3037; /* CAUSA RAÍZ del texto claro sobre fondo claro en NOCHE: el gradiente "soft" base terminaba en blanco y NO invertía. Aquí se re-deriva a NEGRO de noche (tinte verde/cian de marca, no morado) para que TODO consumidor del token (.ab-hero, .qh-section--soft, .q-cta, .ai-featured, hero de vision, landing…) tenga fondo oscuro y la tinta clara (--q-ink) sea legible. Reemplaza los parches por-componente. NO se tocan --q-gradient-primary/-hover. */ --q-gradient-soft: radial-gradient(circle at 18% 10%, rgba(60, 143, 134, 0.14), transparent 34%), radial-gradient(circle at 86% 14%, rgba(34, 211, 238, 0.10), transparent 30%), linear-gradient(180deg, #0A0C10 0%, #06070B 62%, #05060A 100%); --qirava-gradient-soft: radial-gradient(circle at 18% 10%, rgba(60, 143, 134, 0.14), transparent 34%), radial-gradient(circle at 86% 14%, rgba(34, 211, 238, 0.10), transparent 30%), linear-gradient(180deg, #0A0C10 0%, #06070B 62%, #05060A 100%); /* Verde de MARCA como TEXTO (eyebrows/labels/acentos) es demasiado OSCURO sobre negro: #3E8551 daba contraste ~1.2. Se expone un token de acento de TEXTO que se aclara SOLO en noche. No se toca --q-brand (se usa como RELLENO de botones/pasos con texto blanco encima; aclararlo rompería ese contraste). */ --q-brand-text: #7FD1AC; --qirava-green-text: #7FD1AC; } /* Wash nocturno del body: cielo NEGRO con brillo verde apenas perceptible. */ html[data-sky="night"] body, html[data-theme="dark"] body { background: radial-gradient(circle at 20% 6%, rgba(46, 158, 143, 0.08), transparent 38%), radial-gradient(circle at 84% 4%, rgba(30, 80, 64, 0.10), transparent 40%), linear-gradient(180deg, #07080C 0%, #05060A 60%, #030407 100%); } /* En night, reforzar legibilidad de texto de cuerpo que usa el token de tinta. */ html[data-sky="night"] body, html[data-theme="dark"] body { color: var(--q-ink); } /* ── Foco accesible visible (no rompe el existente; solo lo refuerza) ────── */ html[data-sky="night"] :focus-visible, html[data-theme="dark"] :focus-visible { outline: 3px solid var(--q-focus-inset); outline-offset: 2px; } /* ============================================================================ NIGHT — OVERRIDES DE ZONAS QUE NO INVERTÍAN (quedaban blancas/grises). Estas superficies traían fondo BLANCO/traslúcido hardcodeado en las hojas base (no tokens), por eso se veían grises sobre el fondo oscuro. Aquí se fuerzan a superficie de noche SOLO en fase night, sin tocar hojas base ni qirava-tokens.css. NO se tocan gradientes de marca ni fondos de botón. ============================================================================ */ /* Header y footer: traían rgba(255,255,255,.76/.56) → gris. A superficie noche. */ html[data-sky="night"] .site-header, html[data-theme="dark"] .site-header { background: rgba(8, 10, 14, 0.82) !important; border-color: var(--q-border) !important; } html[data-sky="night"] .site-footer, html[data-theme="dark"] .site-footer { background: #07080C !important; border-color: var(--q-border) !important; color: var(--q-ink) !important; } html[data-sky="night"] .site-footer a, html[data-theme="dark"] .site-footer a, html[data-sky="night"] .footer-inner a, html[data-theme="dark"] .footer-inner a { color: var(--q-muted-2) !important; } /* ── Logo: alterna wordmark por tema. En claro se ve el normal; en noche se ve la variante -dark (wordmark claro). Evita el texto oscuro sobre negro que desaparecía. ─────────────────────────────────────────────── */ .brand-logo .logo-dark { display: none; } .brand-logo .logo-light { display: inline-block; } html[data-sky="night"] .brand-logo .logo-light, html[data-theme="dark"] .brand-logo .logo-light { display: none; } html[data-sky="night"] .brand-logo .logo-dark, html[data-theme="dark"] .brand-logo .logo-dark { display: inline-block; } /* En noche, forzar tinta clara en marca del footer (acróstico + glosa) para que no queden textos oscuros sobre el fondo negro. NO se toca --q-gradient ni fondos de botón; el verde de las iniciales () se conserva. */ html[data-sky="night"] .footer-copy, html[data-theme="dark"] .footer-copy, html[data-sky="night"] .footer-slogan-gloss, html[data-theme="dark"] .footer-slogan-gloss { color: var(--q-muted-2) !important; } html[data-sky="night"] .q-acro, html[data-theme="dark"] .q-acro { color: var(--q-ink) !important; } html[data-sky="night"] .q-acro b, html[data-theme="dark"] .q-acro b { color: #86C1A9 !important; /* verde de marca claro, legible sobre negro */ } /* ── EYEBROWS / LABELS / ACENTOS de MARCA como TEXTO en NOCHE ────────────── Estas clases pintan texto con el verde de marca (#3E8551 vía --q-brand / --qirava-green), ilegible sobre negro (contraste ~1.2). Se re-tintan al verde claro legible SOLO en noche. Cubre los patrones recurrentes de las 7 páginas (about, /, vision, products, consulting, aprende-ia hub/artículo) en un solo bloque por-patrón — NO 50 parches por elemento. No toca rellenos de botón. */ html[data-sky="night"] .ab-eyebrow, html[data-theme="dark"] .ab-eyebrow, html[data-sky="night"] .vision-eyebrow, html[data-theme="dark"] .vision-eyebrow, html[data-sky="night"] .qh-eyebrow, html[data-theme="dark"] .qh-eyebrow, html[data-sky="night"] .ai-hub__eyebrow, html[data-theme="dark"] .ai-hub__eyebrow, html[data-sky="night"] .eyebrow, html[data-theme="dark"] .eyebrow, html[data-sky="night"] .kicker, html[data-theme="dark"] .kicker { color: var(--q-brand-text, #7FD1AC) !important; } /* Enlaces del cuerpo (contenido) que heredan el verde de marca en noche. */ html[data-sky="night"] .content a, html[data-theme="dark"] .content a, html[data-sky="night"] .ab-prose a, html[data-theme="dark"] .ab-prose a { color: var(--q-brand-text, #7FD1AC); } /* CTA "showcase" de /vision (.vision-cta): en DÍA es un panel OSCURO intencional (background:var(--q-ink), texto var(--q-surface)). En NOCHE esos tokens SE INVIERTEN y el panel se volvía CLARO con texto/enlace claro encima (verde #86C1A9 ilegible, contraste ~1.8). Se fija OSCURO en noche para conservar el diseño y la legibilidad. Enlace y nota a verde claro sobre el panel oscuro. */ html[data-sky="night"] .vision-cta, html[data-theme="dark"] .vision-cta { background: #0B0D11 !important; color: #F3FAF6 !important; border: 1px solid var(--q-border); } html[data-sky="night"] .vision-cta h2, html[data-theme="dark"] .vision-cta h2 { color: #F3FAF6 !important; } html[data-sky="night"] .vision-cta p, html[data-theme="dark"] .vision-cta p, html[data-sky="night"] .vision-cta-note, html[data-theme="dark"] .vision-cta-note { color: #C4D4CC !important; } html[data-sky="night"] .vision-cta-note a, html[data-theme="dark"] .vision-cta-note a { color: #7FD1AC !important; } /* Badges de estado ("Disponible"/"Pronto"): en día son verde/gris sobre pastel claro. En noche el verde de éxito (#10B981/#065F46) queda ilegible sobre el fondo oscuro (contraste ~1.8). Se re-tintan a verde claro sobre verde-negro. */ html[data-sky="night"] .badge-live, html[data-theme="dark"] .badge-live, html[data-sky="night"] .stage-badge--live, html[data-theme="dark"] .stage-badge--live { background: rgba(16, 185, 129, 0.16) !important; color: #A7F3D0 !important; } html[data-sky="night"] .badge-soon, html[data-theme="dark"] .badge-soon, html[data-sky="night"] .stage-badge--soon, html[data-theme="dark"] .stage-badge--soon { background: var(--q-bg-strong) !important; color: var(--q-muted-2) !important; } /* Menú desplegable del header: traía blanco sólido. */ html[data-sky="night"] .hdr-dd-menu, html[data-theme="dark"] .hdr-dd-menu { background: var(--q-surface) !important; border-color: var(--q-border) !important; color: var(--q-ink) !important; } /* Hero de la landing (.qh-hero) y variante "soft": el degradado base terminaba en BLANCO (linear-gradient(#fff → #f8fafc → #ecf3ec)). Se pinta noche. Se conserva el brillo verde/cian ambiental (tinte de marca), no morado. */ html[data-sky="night"] .qh-hero, html[data-theme="dark"] .qh-hero, html[data-sky="night"] .qh-section--soft, html[data-theme="dark"] .qh-section--soft { background-image: radial-gradient(circle at 18% 10%, rgba(60, 143, 134, 0.14), transparent 34%), radial-gradient(circle at 86% 14%, rgba(34, 211, 238, 0.10), transparent 30%), linear-gradient(180deg, #0A0C10 0%, #06070B 62%, #05060A 100%) !important; } /* Tarjeta destacada del blog (.ai-featured): traía degradado a blanco. */ html[data-sky="night"] .ai-featured, html[data-theme="dark"] .ai-featured { background-image: radial-gradient(circle at 18% 10%, rgba(60, 143, 134, 0.14), transparent 34%), radial-gradient(circle at 86% 14%, rgba(34, 211, 238, 0.10), transparent 30%), linear-gradient(180deg, #0C0E12 0%, #08090D 100%) !important; border-color: var(--q-border) !important; } /* Refuerzo defensivo de componentes del blog/artículo por si alguno trae fondo/borde claro hardcodeado. Superficie de noche, tinta clara. */ html[data-sky="night"] .card, html[data-theme="dark"] .card, html[data-sky="night"] .note, html[data-theme="dark"] .note, html[data-sky="night"] figure, html[data-theme="dark"] figure, html[data-sky="night"] .pfloat, html[data-theme="dark"] .pfloat, html[data-sky="night"] .blog-table, html[data-theme="dark"] .blog-table, html[data-sky="night"] .content table, html[data-theme="dark"] .content table { background-color: var(--q-surface); border-color: var(--q-border); color: var(--q-ink); } html[data-sky="night"] .content th, html[data-theme="dark"] .content th { background-color: var(--q-bg-strong); border-color: var(--q-border); color: var(--q-ink-2); } html[data-sky="night"] .content td, html[data-theme="dark"] .content td { border-color: var(--q-border); } html[data-sky="night"] .attrib, html[data-theme="dark"] .attrib { color: var(--q-muted); } /* Code / pre en artículos: fondo negro levantado, tinta clara. */ html[data-sky="night"] code, html[data-theme="dark"] code, html[data-sky="night"] pre, html[data-theme="dark"] pre { background-color: #0B0D11; border-color: var(--q-border); color: var(--q-ink-2); } /* Inputs / textarea / select: superficie noche, tinta clara, placeholder tenue. */ html[data-sky="night"] input, html[data-theme="dark"] input, html[data-sky="night"] textarea, html[data-theme="dark"] textarea, html[data-sky="night"] select, html[data-theme="dark"] select { background-color: var(--q-surface); border-color: var(--q-border-strong); color: var(--q-ink); } html[data-sky="night"] ::placeholder, html[data-theme="dark"] ::placeholder { color: var(--q-placeholder); } /* Caja de cargue de archivo (drop-zone / file-picker) en /transcribe y /premium/transcribe. La etiqueta contenedora traía fondo BLANCO hardcodeado (no token) y el input file premium usaba su propia superficie clara, por eso NO invertían en noche y quedaban como una caja blanca sobre el fondo oscuro. Aquí se fuerzan a superficie de noche con borde sutil, SOLO en fase night. */ html[data-sky="night"] .file-pick-label, html[data-theme="dark"] .file-pick-label { background: var(--q-surface) !important; box-shadow: inset 0 0 0 1px var(--q-border) !important; } html[data-sky="night"] #file-name-display, html[data-theme="dark"] #file-name-display { color: var(--q-muted); } html[data-sky="night"] .file-pick-icon, html[data-theme="dark"] .file-pick-icon, html[data-sky="night"] .file-pick-btn, html[data-theme="dark"] .file-pick-btn { color: var(--q-accent-hover); } html[data-sky="night"] .file-pick-btn, html[data-theme="dark"] .file-pick-btn { background: var(--q-bg-strong); } html[data-sky="night"] .file-pick-label:hover .file-pick-btn, html[data-theme="dark"] .file-pick-label:hover .file-pick-btn { background: var(--q-surface-2, var(--q-bg)); } /* Input file visible del premium (superficie + tinta + borde punteado en noche) */ html[data-sky="night"] #pt-files, html[data-theme="dark"] #pt-files { background: var(--q-surface) !important; color: var(--q-ink) !important; border-color: var(--q-border-strong) !important; } /* ============================================================================ TOGGLE DE TEMA — control accesible inyectado por theme.js (botón flotante). Estilo neutro; NO usa gradientes de marca ni morado. ============================================================================ */ .q-theme-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 2147483000; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--q-border-strong, #C6DBC9); border-radius: 999px; background: var(--q-surface, #FFFFFF); color: var(--q-ink, #0B102A); font-family: var(--q-font-sans, system-ui, sans-serif); font-size: 0.82rem; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18); } .q-theme-toggle:hover { border-color: var(--q-brand, #3E8551); } .q-theme-toggle:focus-visible { outline: 3px solid var(--q-focus-inset, rgba(60, 143, 134, 0.45)); outline-offset: 2px; } .q-theme-toggle__icon { font-size: 1rem; line-height: 1; } @media (prefers-reduced-motion: no-preference) { .q-theme-toggle { transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease; } } /* ============================================================================ TOGGLE DE TEMA EN EL HEADER (.header-right) — botón compacto ☀/🌙. Consume superficie/borde/tinta de la fase activa. Sin morado. ============================================================================ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--q-border, #DCE3F1); border-radius: var(--q-radius-sm, 8px); background: var(--q-surface, #FFFFFF); color: var(--q-ink, #0B102A); font-size: 1.05rem; line-height: 1; cursor: pointer; } .theme-toggle:hover { border-color: var(--q-brand, #3E8551); } .theme-toggle:focus-visible { outline: 3px solid var(--q-focus-inset, rgba(60, 143, 134, 0.45)); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { .theme-toggle { transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease; } } /* ============================================================================ FASE NOCHE — CAJA DE CARGUE .transcribe-form (landing.css la deja BLANCA). El vidrio blanco pasa a vidrio oscuro coherente con el tema noche. Cubre el form, sus inputs, la píldora "Elegir archivo" y paneles internos que hereden blanco. Texto en tinta clara. NO toca modo claro. NO redefine los degradados de botones (verde free / azul premium). Sin morado. ============================================================================ */ html[data-sky="night"] .transcribe-form, html[data-theme="dark"] .transcribe-form { background: var(--q-surface-glass, rgba(14, 16, 19, 0.86)) !important; border-color: var(--q-border, #1B1F23) !important; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55) !important; color: var(--q-ink, #E8F1EC); } html[data-sky="night"] .transcribe-form input, html[data-theme="dark"] .transcribe-form input { background: var(--q-bg, #05060A) !important; color: var(--q-ink, #E8F1EC) !important; box-shadow: inset 0 0 0 1px var(--q-border, #1B1F23) !important; } html[data-sky="night"] .transcribe-form input::placeholder, html[data-theme="dark"] .transcribe-form input::placeholder { color: var(--q-ink-2, #96A3AD) !important; opacity: 0.65; } html[data-sky="night"] .transcribe-form .file-pick-label, html[data-theme="dark"] .transcribe-form .file-pick-label, html[data-sky="night"] .file-pick-label, html[data-theme="dark"] .file-pick-label { background: var(--q-bg, #05060A) !important; border-color: var(--q-border, #1B1F23) !important; color: var(--q-ink, #E8F1EC) !important; } html[data-sky="night"] .transcribe-form .file-pick-name, html[data-theme="dark"] .transcribe-form .file-pick-name, html[data-sky="night"] .file-pick-name, html[data-theme="dark"] .file-pick-name { color: var(--q-ink, #E8F1EC) !important; } html[data-sky="night"] .transcribe-form .file-pick-btn, html[data-theme="dark"] .transcribe-form .file-pick-btn, html[data-sky="night"] .file-pick-btn, html[data-theme="dark"] .file-pick-btn { background: var(--q-surface, #0E1013) !important; border: 1px solid var(--q-border, #1B1F23) !important; color: var(--q-ink, #E8F1EC) !important; }