/* * Dark mode — activo cuando lleva la clase `tk-dark`. La clase la añade * `base.html` según la preferencia del usuario (light/dark/auto). En modo * `auto` se sincroniza con `prefers-color-scheme` del SO. * * Los temas cosméticos han sido eliminados. El sistema de temas ahora solo * soporta light / dark / auto. */ /* ── I11: prefers-reduced-motion — neutralise Tailwind keyframe animations ── Tailwind defines animation utilities via @keyframes in the compiled CSS, but tailwind.config.js cannot easily emit @media (prefers-reduced-motion) wrappers for every custom animation (fade-up, slide-in, pulse-ring, shimmer). We handle this here in the global CSS file that is already loaded on every page. The rule preserves opacity transitions (still useful for focus/hover feedback) but disables translate/scale transforms and infinite loops. */ @media (prefers-reduced-motion: reduce) { /* Tailwind animate-* utilities map to these animation names */ .animate-fade-up, .animate-fade-in, .animate-slide-in, .animate-pulse-ring, .animate-shimmer, .animate-ping, .animate-bounce, .animate-spin { animation: none !important; transition: none !important; } /* Skeleton shimmer (base.html inline) */ .skeleton { animation: none !important; background: #e7ebef !important; } /* Native page-transition classes (base.html) */ html.is-native main, html.is-native main.native-route-push, html.is-native main.native-route-pop { animation: none !important; } /* Modal-sheet entrance (modal_sheet.js adds translate; transition: none kills it) */ .modal-sheet-panel { transition: none !important; } } html.tk-dark { color-scheme: dark; } /* ── Base ───────────────────────────────────────────────────── */ html.tk-dark body { background-color: #1b2433; color: #e7ebef; } /* ── Paper / surfaces (nuevos tokens) ──────────────────────── */ html.tk-dark .bg-paper-0, html.tk-dark .bg-paper-0\/70, html.tk-dark .bg-paper-0\/90, html.tk-dark .bg-white { background-color: #243044 !important; } /* Las variantes responsive deben respetar el mismo breakpoint que Tailwind. Si se pisan sin media query, una clase `lg:bg-paper-0` pinta también en móvil aunque `lg:rounded-*`, `lg:border` y `lg:p-*` sigan inactivas. El resultado era una superficie rectangular sin radio en /recipes. */ @media (min-width: 640px) { html.tk-dark .sm\:bg-paper-50 { background-color: #1b2433 !important; } } @media (min-width: 768px) { html.tk-dark .md\:bg-paper-0, html.tk-dark .md\:bg-white { background-color: #243044 !important; } } @media (min-width: 1024px) { html.tk-dark .lg\:bg-paper-0, html.tk-dark .lg\:bg-white { background-color: #243044 !important; } } html.tk-dark .bg-paper-50\/95, html.tk-dark .bg-paper-50\/80, html.tk-dark .bg-paper-50\/70, html.tk-dark .bg-paper-50 { background-color: #1b2433 !important; } html.tk-dark .bg-paper-0\/70 { background-color: rgba(36,48,68,0.7) !important; } html.tk-dark .bg-paper-50\/60 { background-color: rgba(27,36,51,0.6) !important; } html.tk-dark .bg-paper-50\/50 { background-color: rgba(27,36,51,0.5) !important; } html.tk-dark .bg-paper-50\/40 { background-color: rgba(27,36,51,0.4) !important; } html.tk-dark .bg-paper-100 { background-color: #303c50 !important; } html.tk-dark .bg-paper-200 { background-color: #303c50 !important; } html.tk-dark .bg-paper-300 { background-color: #3b485d !important; } /* Variantes de estado generadas por Tailwind (.hover:*, .active:*, .has:* y .group-hover:*) no llevan la clase base literal, así que los overrides de .bg-paper-* / .bg-brand-* de arriba no las alcanzan. Sin esto, controles seleccionables como el modal de ayuno quedan con fondos pastel claros en dark mode. */ html.tk-dark .hover\:bg-paper-50:hover, html.tk-dark .hover\:bg-paper-50\/60:hover, html.tk-dark .hover\:bg-paper-100:hover, html.tk-dark .active\:bg-paper-100:active { background-color: #303c50 !important; } html.tk-dark .hover\:bg-paper-200:hover, html.tk-dark .active\:bg-paper-200:active, html.tk-dark .active\:bg-paper-300:active { background-color: #3b485d !important; } html.tk-dark .hover\:bg-brand-50:hover, html.tk-dark .hover\:bg-brand-50\/40:hover, html.tk-dark .group:hover .group-hover\:bg-brand-100, html.tk-dark .has-\[\:checked\]\:bg-brand-50:has(:checked) { background-color: rgba(52,211,153,.12) !important; } html.tk-dark .hover\:bg-brand-100:hover { background-color: rgba(52,211,153,.18) !important; } html.tk-dark .hover\:border-brand-200:hover, html.tk-dark .hover\:border-brand-300:hover, html.tk-dark .has-\[\:checked\]\:border-brand-500:has(:checked) { border-color: #34d399 !important; } /* ── Compat con tokens Tailwind antiguos (gray-*) ──────────── */ html.tk-dark .bg-gray-50 { background-color: #1b2433 !important; } html.tk-dark .bg-gray-100 { background-color: #303c50 !important; } /* Pista "apagada" de toggles (Apple/Google Health, biometría en /profile): gray-200 horneado en claro queda como píldora brillante en dark. */ html.tk-dark .bg-gray-200 { background-color: #3b485d !important; } html.tk-dark .bg-gray-50\/50 { background-color: rgba(27,36,51,0.5) !important; } html.tk-dark .bg-gray-100\/50 { background-color: rgba(48,60,80,0.5) !important; } /* ── Colored card backgrounds (-50 = fondos suaves) ───────────── En vez de colapsar todos los tonos a un gris plano (look apagado), se aplica un lavado translúcido del color sobre la base oscura. Alpha bajo (.08) → recupera identidad cromática sin tocar contraste del texto. Mismo criterio que el tinte `color+1A` del modal de rachas. */ html.tk-dark .bg-green-50\/50, html.tk-dark .bg-green-50, html.tk-dark .bg-emerald-50\/50, html.tk-dark .bg-emerald-50 { background-color: rgba(52,211,153,.08) !important; } html.tk-dark .bg-amber-50\/50, html.tk-dark .bg-amber-50, html.tk-dark .bg-yellow-50\/50, html.tk-dark .bg-yellow-50 { background-color: rgba(251,191,36,.08) !important; } html.tk-dark .bg-orange-50\/50, html.tk-dark .bg-orange-50 { background-color: rgba(251,146,60,.08) !important; } html.tk-dark .bg-red-50, html.tk-dark .bg-rose-50 { background-color: rgba(248,113,113,.08) !important; } html.tk-dark .bg-blue-50\/50, html.tk-dark .bg-blue-50, html.tk-dark .bg-sky-50\/50, html.tk-dark .bg-sky-50, html.tk-dark .bg-cyan-50, html.tk-dark .bg-info-50\/50 { background-color: rgba(56,189,248,.08) !important; } html.tk-dark .bg-indigo-50\/50, html.tk-dark .bg-indigo-50 { background-color: rgba(129,140,248,.08) !important; } html.tk-dark .bg-purple-50\/50, html.tk-dark .bg-purple-50 { background-color: rgba(192,132,252,.08) !important; } html.tk-dark .bg-pink-50\/50, html.tk-dark .bg-pink-50 { background-color: rgba(244,114,182,.08) !important; } html.tk-dark .bg-teal-50\/50, html.tk-dark .bg-teal-50 { background-color: rgba(45,212,191,.08) !important; } html.tk-dark .bg-lime-50 { background-color: rgba(163,230,53,.08) !important; } /* ── Brand backgrounds ─────────────────────────────────────── */ html.tk-dark .bg-brand-50\/20, html.tk-dark .bg-brand-50\/40, html.tk-dark .bg-brand-50\/50, html.tk-dark .bg-brand-50\/60, html.tk-dark .bg-brand-50\/70, html.tk-dark .bg-brand-50 { background-color: rgba(52,211,153,.08) !important; } html.tk-dark .bg-brand-100\/60 { background-color: rgba(52,211,153,.14) !important; } html.tk-dark .bg-brand-100 { background-color: rgba(52,211,153,.14) !important; } html.tk-dark .bg-brand-200\/30 { background-color: rgba(52,211,153,.12) !important; } /* Rampa de barras (funnel de activación, barras de planes): sin estos overrides los pasos 200/300/400 quedaban en su verde claro de light y rompían el degradado de intensidad (los pasos "débiles" salían más brillantes que los "fuertes"). */ html.tk-dark .bg-brand-200 { background-color: rgba(52,211,153,.30) !important; } html.tk-dark .bg-brand-300 { background-color: rgba(52,211,153,.45) !important; } html.tk-dark .bg-brand-400 { background-color: rgba(52,211,153,.65) !important; } html.tk-dark .bg-brand-500 { background-color: #10b981 !important; } html.tk-dark .bg-brand-500\/70 { background-color: rgba(16,185,129,.70) !important; } html.tk-dark .bg-brand-600 { background-color: #059669 !important; } html.tk-dark .bg-brand-700 { background-color: #047857 !important; } /* ── Familias de acento de avatar (mint/ocean/grape/berry/coral/flame/gold) ── Paleta vistosa de avatares (tailwind.config.js) + tinte de retos en el dashboard. Solo exponen 50/100/400/500/600 y dark.css NO las cubría → sus -50/-100 (fondos claros) sobrevivían blancos en dark: el grid de avatares mezclaba círculos oscuros (brand/success/info/danger/warning, ya cubiertos) con círculos brillantes (estas 7). Mismo lavado translúcido que el resto de familias (.08 en -50, .14 en -100) sobre la base slate. sky-* ya está cubierto. */ html.tk-dark .bg-mint-50 { background-color: rgba(45,212,191,.08) !important; } html.tk-dark .bg-mint-100 { background-color: rgba(45,212,191,.14) !important; } html.tk-dark .bg-ocean-50 { background-color: rgba(96,165,250,.08) !important; } html.tk-dark .bg-ocean-100 { background-color: rgba(96,165,250,.14) !important; } html.tk-dark .bg-grape-50 { background-color: rgba(192,132,252,.08) !important; } html.tk-dark .bg-grape-100 { background-color: rgba(192,132,252,.14) !important; } html.tk-dark .bg-berry-50 { background-color: rgba(232,121,249,.08) !important; } html.tk-dark .bg-berry-100 { background-color: rgba(232,121,249,.14) !important; } html.tk-dark .bg-coral-50 { background-color: rgba(251,113,133,.08) !important; } html.tk-dark .bg-coral-100 { background-color: rgba(251,113,133,.14) !important; } html.tk-dark .bg-flame-50 { background-color: rgba(251,146,60,.08) !important; } html.tk-dark .bg-flame-100 { background-color: rgba(251,146,60,.14) !important; } html.tk-dark .bg-gold-50 { background-color: rgba(250,204,21,.08) !important; } html.tk-dark .bg-gold-100 { background-color: rgba(250,204,21,.14) !important; } /* ── Gradient color stops (from/via/to) used by hero cards ─ */ html.tk-dark .from-white { --tw-gradient-from: #243044 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(36,48,68,0) var(--tw-gradient-to-position) !important; } /* via-white compila --tw-gradient-stops con #fff hardcodeado, no basta con sobreescribir --tw-gradient-via */ html.tk-dark .via-white { --tw-gradient-via: #243044 var(--tw-gradient-via-position) !important; --tw-gradient-stops: var(--tw-gradient-from), #243044 var(--tw-gradient-via-position), var(--tw-gradient-to) !important; } html.tk-dark .to-white { --tw-gradient-to: #243044 var(--tw-gradient-to-position) !important; } html.tk-dark .from-paper-0 { --tw-gradient-from: #243044 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(36,48,68,0) var(--tw-gradient-to-position) !important; } /* El indicador de overflow de Recetas usa paper-0/90 para fundirse con la superficie. Tailwind hornea el stop intermedio, igual que con via-white. */ html.tk-dark .via-paper-0\/90 { --tw-gradient-via: rgba(36,48,68,.90) var(--tw-gradient-via-position) !important; --tw-gradient-stops: var(--tw-gradient-from), rgba(36,48,68,.90) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; } html.tk-dark .from-paper-100 { --tw-gradient-from: #303c50 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(48,60,80,0) var(--tw-gradient-to-position) !important; } html.tk-dark .to-paper-100 { --tw-gradient-to: #303c50 var(--tw-gradient-to-position) !important; } html.tk-dark .from-paper-50 { --tw-gradient-from: #1b2433 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(27,36,51,0) var(--tw-gradient-to-position) !important; } html.tk-dark .to-paper-0 { --tw-gradient-to: #243044 var(--tw-gradient-to-position) !important; } html.tk-dark .from-amber-50 { --tw-gradient-from: #303c50 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(48,60,80,0) var(--tw-gradient-to-position) !important; } html.tk-dark .via-amber-50 { --tw-gradient-via: #303c50 var(--tw-gradient-via-position) !important; } html.tk-dark .to-amber-50 { --tw-gradient-to: #303c50 var(--tw-gradient-to-position) !important; } /* Glow de marca en cabeceras ceremoniales (hero de /profile + card del recap semanal): en claro from-brand-50 es un verde pálido; en dark, en vez de gris plano, un lavado esmeralda translúcido que se funde al slate vía via-white/to-paper-100. Solo afecta a páginas que cargan dark.css (las standalone checkin/onboarding/billing_success/welcome no lo cargan). */ html.tk-dark .from-brand-50 { --tw-gradient-from: rgba(52,211,153,.14) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(52,211,153,0) var(--tw-gradient-to-position) !important; } html.tk-dark .via-brand-50 { --tw-gradient-via: #303c50 var(--tw-gradient-via-position) !important; } html.tk-dark .to-brand-50 { --tw-gradient-to: #303c50 var(--tw-gradient-to-position) !important; } html.tk-dark .from-brand-50\/40 { --tw-gradient-from: rgba(52,211,153,.10) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(52,211,153,0) var(--tw-gradient-to-position) !important; } html.tk-dark .from-brand-200, html.tk-dark .from-brand-300, html.tk-dark .from-brand-400, html.tk-dark .from-brand-500, html.tk-dark .from-brand-600 { --tw-gradient-from: rgba(16,185,129,.45) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(16,185,129,0) var(--tw-gradient-to-position) !important; } html.tk-dark .via-brand-700 { --tw-gradient-via: rgba(4,120,87,.50) var(--tw-gradient-via-position) !important; } html.tk-dark .to-brand-400, html.tk-dark .to-brand-500, html.tk-dark .to-brand-600, html.tk-dark .to-brand-700, html.tk-dark .to-brand-800 { --tw-gradient-to: rgba(5,150,105,.55) var(--tw-gradient-to-position) !important; } html.tk-dark .from-ink-900\/80 { --tw-gradient-from: rgba(15,23,42,.70) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(15,23,42,0) var(--tw-gradient-to-position) !important; } html.tk-dark .via-ink-900\/10 { --tw-gradient-via: rgba(15,23,42,.24) var(--tw-gradient-via-position) !important; } html.tk-dark .to-ink-800 { --tw-gradient-to: rgba(30,41,59,.72) var(--tw-gradient-to-position) !important; } html.tk-dark .from-success-300 { --tw-gradient-from: rgba(52,211,153,.34) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(52,211,153,0) var(--tw-gradient-to-position) !important; } html.tk-dark .from-warning-400 { --tw-gradient-from: rgba(251,191,36,.34) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(251,191,36,0) var(--tw-gradient-to-position) !important; } html.tk-dark .to-warning-500 { --tw-gradient-to: rgba(245,158,11,.42) var(--tw-gradient-to-position) !important; } /* ── Miniaturas de receta (Área 1) ────────────────────────────── El degradado se hornea en la clase de componente (@apply from-/to-), así que los overrides por util no llegan: se pisan por clase. Tintes translúcidos por familia (alpha ~.16/.08) sobre la superficie oscura para que el color identifique el tipo sin saturar. El disco del icono pasa a un velo claro translúcido para que el emoji respire. */ html.tk-dark .recipe-thumb { background-color: #243044 !important; } html.tk-dark .recipe-thumb-disc { background-color: rgba(255,255,255,.10) !important; box-shadow: none !important; } /* Miniaturas neutras en dark: sin tinte por tipo, solo la superficie base. */ html.tk-dark .recipe-thumb--breakfast, html.tk-dark .recipe-thumb--morning_snack, html.tk-dark .recipe-thumb--lunch, html.tk-dark .recipe-thumb--afternoon_snack, html.tk-dark .recipe-thumb--dinner, html.tk-dark .recipe-thumb--default { background-image: none !important; } html.tk-dark .recipe-action-panel, html.tk-dark .recipe-content-card { background-color: #1b2433 !important; border-color: #303c50 !important; } html.tk-dark .recipe-list-group-header { background-color: #1b2433 !important; border-color: #303c50 !important; color: #94a3b8 !important; } html.tk-dark .recipe-list-group + .recipe-list-group, html.tk-dark .recipe-list-group .recipe-row + .recipe-row, html.tk-dark .recipe-list-group .discover-card + .discover-card, html.tk-dark .recipe-list-card > .recipe-row:not([hidden]) + .recipe-row:not([hidden]), html.tk-dark .recipe-list-card > .discover-card + .discover-card { border-color: #303c50 !important; } html.tk-dark .recipe-row-title { color: #f8fafc !important; } html.tk-dark .recipe-row-icon { color: #94a3b8 !important; } html.tk-dark .recipe-action-menu-panel { background-color: #243044 !important; border-color: #3a465c !important; } html.tk-dark .recipe-filter-panel { border-color: #303c50 !important; } html.tk-dark .recipe-action-menu[open] > .recipe-action-trigger, html.tk-dark .recipe-filter-trigger[aria-expanded="true"], html.tk-dark .recipe-action-trigger:hover, html.tk-dark .recipe-filter-trigger:hover { background-color: #303c50 !important; color: #e2e8f0 !important; } html.tk-dark .recipe-action-menu-item { color: #e2e8f0 !important; } html.tk-dark .recipe-action-menu-item:hover { background-color: #1b2433 !important; } html.tk-dark .recipe-reason-card { background-color: rgba(16,185,129,.10) !important; border-color: rgba(52,211,153,.22) !important; } html.tk-dark .recipe-section-title { color: #f8fafc !important; } html.tk-dark .recipe-step-badge { background-color: rgba(16,185,129,.14) !important; color: #6ee7b7 !important; --tw-ring-color: rgba(52,211,153,.22) !important; } /* Separador "·" del pie de cifras: hornea text-paper-300. */ html.tk-dark .recipe-stat-sep { color: #4b5563 !important; } /* Checklist de ingredientes: la caja hornea bg/border claros (@apply), y el texto hornea text-ink-*; hay que pisarlos por clase para que se vean en superficie oscura. */ html.tk-dark .check-box { background-color: #1b2433 !important; border-color: #3a465c !important; } html.tk-dark .check-label { color: #cbd5e1 !important; } html.tk-dark .check-input:checked + .check-box { background-color: #10b981 !important; border-color: #10b981 !important; } html.tk-dark .check-input:checked ~ .check-label { color: #94a3b8 !important; } /* .stat-mini-card hornea bg-paper-50/border-paper-200 vía @apply → el override de utilidad no lo alcanza y quedaba blanco en dark (rejilla de macros del detalle de receta). Inset oscuro sobre la card padre. */ html.tk-dark .stat-mini-card { background-color: #1b2433 !important; border-color: #303c50 !important; } html.tk-dark .progress-overview-dot > span { background-color: #3b485d !important; } html.tk-dark .progress-overview-dot[aria-selected="true"] > span { background-color: #10b981 !important; } /* Los disclosures secundarios del dashboard hornean sus superficies con @apply. Al abrirse, la cabecera y el contenido comparten una única card exterior neutra; no dependen de un acento de marca para verse unidos. */ html.tk-dark .dashboard-collapsible[open], html.tk-dark .dashboard-collapsible-content { background-color: #243044 !important; } html.tk-dark .dashboard-collapsible[open] { border-color: #3b485d !important; } html.tk-dark .dashboard-collapsible-summary { background-color: #243044 !important; border-color: #303c50 !important; } html.tk-dark .dashboard-collapsible-chevron { background-color: #1b2433 !important; border-color: #303c50 !important; } html.tk-dark .dashboard-collapsible[open] > .dashboard-collapsible-summary { background-color: #1b2433 !important; border-bottom-color: #303c50 !important; } html.tk-dark .dashboard-collapsible[open] > .dashboard-collapsible-summary .section-title, html.tk-dark .dashboard-collapsible[open] > .dashboard-collapsible-summary .dashboard-collapsible-chevron { color: #e7ebef !important; } html.tk-dark .dashboard-collapsible[open] > .dashboard-collapsible-summary .dashboard-collapsible-chevron { background-color: #243044 !important; border-color: #3b485d !important; } html.tk-dark.is-native .native-sticky-header { background-color: rgba(36,48,68,.94) !important; border-color: #303c50 !important; } /* ── Badge backgrounds & progress tracks (-100) ───────────────── Lavado translúcido por familia (alpha .14, algo más marcado que -50). Un track de progreso con tinte de su propia familia (verde/ámbar…) queda cohesivo con el relleno, no apagado. */ html.tk-dark .bg-green-100, html.tk-dark .bg-green-100\/80, html.tk-dark .bg-emerald-100, html.tk-dark .bg-emerald-100\/80 { background-color: rgba(52,211,153,.14) !important; } html.tk-dark .bg-amber-100, html.tk-dark .bg-amber-100\/80, html.tk-dark .bg-yellow-100, html.tk-dark .bg-yellow-100\/80 { background-color: rgba(251,191,36,.14) !important; } html.tk-dark .bg-orange-100, html.tk-dark .bg-orange-100\/80 { background-color: rgba(251,146,60,.14) !important; } html.tk-dark .bg-red-100, html.tk-dark .bg-rose-100 { background-color: rgba(248,113,113,.14) !important; } html.tk-dark .bg-blue-100, html.tk-dark .bg-blue-100\/80, html.tk-dark .bg-sky-100, html.tk-dark .bg-sky-100\/80 { background-color: rgba(56,189,248,.14) !important; } html.tk-dark .bg-indigo-100 { background-color: rgba(129,140,248,.14) !important; } html.tk-dark .bg-purple-100, html.tk-dark .bg-purple-100\/80 { background-color: rgba(192,132,252,.14) !important; } html.tk-dark .bg-pink-100, html.tk-dark .bg-pink-100\/80 { background-color: rgba(244,114,182,.14) !important; } html.tk-dark .bg-teal-100, html.tk-dark .bg-teal-100\/80 { background-color: rgba(45,212,191,.14) !important; } html.tk-dark .bg-lime-100 { background-color: rgba(163,230,53,.14) !important; } /* ── Borders ──────────────────────────────────────────────── */ html.tk-dark .border-paper-50, html.tk-dark .border-paper-100, html.tk-dark .border-paper-200, html.tk-dark .border-paper-300, html.tk-dark .border-paper-0, html.tk-dark .border-gray-100, html.tk-dark .border-gray-200 { border-color: #303c50 !important; } @media (min-width: 768px) { html.tk-dark .md\:border-paper-200 { border-color: #303c50 !important; } } @media (min-width: 1024px) { html.tk-dark .lg\:border-paper-200 { border-color: #303c50 !important; } } /* Sello "favorita" sobre el icono de tipo (redesign lista compacta): el ring blanco (`ring-paper-0`) hornea rgb(255,255,255) — sin este override quedaría un halo blanco puro sobre fondo oscuro, en vez del tono sutil que ya usan el resto de bordes claros de la lista. */ html.tk-dark .ring-paper-0 { --tw-ring-color: rgba(48,60,80,var(--tw-ring-opacity,1)) !important; } html.tk-dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]), html.tk-dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]), html.tk-dark .divide-warning-100 > :not([hidden]) ~ :not([hidden]), html.tk-dark .divide-paper-50 > :not([hidden]) ~ :not([hidden]), html.tk-dark .divide-paper-100 > :not([hidden]) ~ :not([hidden]), html.tk-dark .divide-paper-200 > :not([hidden]) ~ :not([hidden]) { border-color: #303c50 !important; } /* Track de los anillos de progreso del calendario: el stroke va inline (rgb(231,235,239), gris casi-blanco) y no se adapta → aro brillante en dark. El stroke de esta clase CSS gana al atributo de presentación. */ html.tk-dark .cal-ring-track { stroke: #303c50 !important; } html.tk-dark .border-orange-100, html.tk-dark .border-blue-100, html.tk-dark .border-amber-100, html.tk-dark .border-amber-200, html.tk-dark .border-purple-100, html.tk-dark .border-green-100, html.tk-dark .border-emerald-100, html.tk-dark .border-pink-100, html.tk-dark .border-teal-100, html.tk-dark .border-yellow-100, html.tk-dark .border-sky-100, html.tk-dark .border-indigo-100, html.tk-dark .border-lime-100, html.tk-dark .border-red-100, html.tk-dark .border-red-200, html.tk-dark .border-rose-100 { border-color: #303c50 !important; } html.tk-dark .border-brand-100, html.tk-dark .border-brand-200 { border-color: #303c50 !important; } html.tk-dark .border-brand-300, html.tk-dark .border-brand-400, html.tk-dark .border-brand-500, html.tk-dark .border-brand-600, html.tk-dark .border-brand-700 { border-color: #34d399 !important; } /* ── Top accent borders ──────────────────────────────────── */ html.tk-dark .border-t-orange-400 { border-top-color: #fb923c !important; } html.tk-dark .border-t-blue-400 { border-top-color: #60a5fa !important; } html.tk-dark .border-t-amber-400 { border-top-color: #fbbf24 !important; } html.tk-dark .border-t-purple-400 { border-top-color: #c084fc !important; } html.tk-dark .border-t-green-400 { border-top-color: #4ade80 !important; } html.tk-dark .border-t-emerald-400 { border-top-color: #34d399 !important; } html.tk-dark .border-t-pink-400 { border-top-color: #f472b6 !important; } html.tk-dark .border-t-teal-400 { border-top-color: #2dd4bf !important; } html.tk-dark .border-t-yellow-400 { border-top-color: #facc15 !important; } html.tk-dark .border-t-sky-400 { border-top-color: #38bdf8 !important; } html.tk-dark .border-t-brand-400, html.tk-dark .border-t-brand-500 { border-top-color: #34d399 !important; } /* ── Text — ink + gray scale ─────────────────────────────── */ html.tk-dark .text-ink-900, html.tk-dark .text-gray-900 { color: #f8fafc !important; } html.tk-dark .text-ink-800, html.tk-dark .text-gray-800 { color: #f1f5f9 !important; } html.tk-dark .text-ink-700, html.tk-dark .text-gray-700 { color: #e7ebef !important; } html.tk-dark .text-ink-600, html.tk-dark .text-gray-600 { color: #cbd5e1 !important; } html.tk-dark .text-ink-500, html.tk-dark .text-gray-500 { color: #94a3b8 !important; } html.tk-dark .text-ink-400, html.tk-dark .text-gray-400 { color: #94a3b8 !important; } html.tk-dark .text-ink-300, html.tk-dark .text-ink-200, html.tk-dark .text-gray-300 { color: #64748b !important; } /* ── Colored value text & badge text ─────────────────────── */ html.tk-dark .text-orange-600, html.tk-dark .text-orange-700, html.tk-dark .text-orange-800, html.tk-dark .text-orange-900 { color: #fb923c !important; } html.tk-dark .text-blue-600, html.tk-dark .text-blue-700, html.tk-dark .text-blue-800, html.tk-dark .text-blue-900 { color: #60a5fa !important; } html.tk-dark .text-amber-600, html.tk-dark .text-amber-700, html.tk-dark .text-amber-800, html.tk-dark .text-amber-900, html.tk-dark .text-amber-500, html.tk-dark .text-amber-300 { color: #fbbf24 !important; } html.tk-dark .text-purple-600, html.tk-dark .text-purple-700, html.tk-dark .text-purple-800, html.tk-dark .text-purple-900 { color: #c084fc !important; } html.tk-dark .text-green-600, html.tk-dark .text-green-700, html.tk-dark .text-green-800, html.tk-dark .text-green-900 { color: #4ade80 !important; } html.tk-dark .text-emerald-600, html.tk-dark .text-emerald-700, html.tk-dark .text-emerald-800, html.tk-dark .text-emerald-900 { color: #34d399 !important; } html.tk-dark .text-pink-600, html.tk-dark .text-pink-700, html.tk-dark .text-pink-800, html.tk-dark .text-pink-900 { color: #f472b6 !important; } html.tk-dark .text-teal-600, html.tk-dark .text-teal-700, html.tk-dark .text-teal-800, html.tk-dark .text-teal-900 { color: #2dd4bf !important; } html.tk-dark .text-yellow-600, html.tk-dark .text-yellow-700, html.tk-dark .text-yellow-800, html.tk-dark .text-yellow-900 { color: #facc15 !important; } html.tk-dark .text-sky-600, html.tk-dark .text-sky-700, html.tk-dark .text-sky-800, html.tk-dark .text-sky-900, html.tk-dark .text-sky-500 { color: #38bdf8 !important; } html.tk-dark .text-lime-600, html.tk-dark .text-lime-700, html.tk-dark .text-lime-800, html.tk-dark .text-lime-900 { color: #a3e635 !important; } html.tk-dark .text-red-600, html.tk-dark .text-red-700, html.tk-dark .text-red-800, html.tk-dark .text-red-900 { color: #f87171 !important; } html.tk-dark .text-indigo-600, html.tk-dark .text-indigo-700, html.tk-dark .text-indigo-800, html.tk-dark .text-indigo-900 { color: #818cf8 !important; } /* mint (familia de acento): badge "+N" de retos + relleno del anillo del dashboard. El -600 (#0d9488) horneado quedaba demasiado oscuro sobre el tinte translúcido en dark → se aclara al -400. El -100 es la PISTA del anillo (stroke vía currentColor): mint tenue, no brillante. */ html.tk-dark .text-mint-500, html.tk-dark .text-mint-600, html.tk-dark .text-mint-700, html.tk-dark .text-mint-800, html.tk-dark .text-mint-900 { color: #2dd4bf !important; } html.tk-dark .text-mint-100 { color: rgba(45,212,191,.30) !important; } /* macro: la etiqueta de proteína (#4361ee) cae por debajo de WCAG AA sobre superficies oscuras (contraste 2.65). Se aclara SOLO en dark a un azul más luminoso (≈ AA 5:1) que sigue siendo claramente azul, distinto del morado de grasa. carbos (#f4a531) y grasa (#8b7ff5) ya cumplen → no se tocan; la identidad de marca en modo claro queda intacta. */ html.tk-dark .text-macro-protein { color: #7e9bff !important; } /* ── Brand text ──────────────────────────────────────────── */ html.tk-dark .text-brand-500, html.tk-dark .text-brand-600, html.tk-dark .text-brand-700, html.tk-dark .text-brand-800, html.tk-dark .text-brand-900 { color: #34d399 !important; } html.tk-dark .text-brand-100, html.tk-dark .text-brand-200, html.tk-dark .text-brand-300, html.tk-dark .text-brand-300\/80 { color: #6ee7b7 !important; } html.tk-dark .text-brand-400 { color: #6ee7b7 !important; } /* ── Inputs ──────────────────────────────────────────────── */ html.tk-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.tk-dark select, html.tk-dark textarea { background-color: #243044 !important; color: #e7ebef !important; border-color: #303c50 !important; } html.tk-dark input::placeholder, html.tk-dark textarea::placeholder { color: #4b5563 !important; } html.tk-dark input:focus, html.tk-dark select:focus, html.tk-dark textarea:focus { border-color: #10b981 !important; } /* AC-2 — Anillo de foco más visible sobre superficies oscuras: brand-500 (#10b981) queda algo apagado sobre #1b2433/#243044; brand-400 (#34d399) mantiene el AA de componentes UI con mejor legibilidad del foco. */ html.tk-dark :focus-visible, html.tk-dark input:focus-visible, html.tk-dark select:focus-visible, html.tk-dark textarea:focus-visible, html.tk-dark button:focus-visible { outline-color: #34d399 !important; } /* Inputs nativos de hora/fecha (p.ej. hora de inicio del ayuno): el icono de reloj/calendario (::-webkit-calendar-picker-indicator) y el desplegable nativo son negros por defecto → invisibles/inusables sobre el fondo oscuro #243044. color-scheme: dark hace que WebKit/Chromium y la WKWebView de la app rendericen el chrome del widget en tema oscuro. */ html.tk-dark input[type="time"], html.tk-dark input[type="date"], html.tk-dark input[type="datetime-local"], html.tk-dark input[type="month"], html.tk-dark input[type="week"] { color-scheme: dark; } /* ── Measure picker (peso / altura / proteína) ──────────────── .measure-picker hornea bg-paper-50 + border-paper-200 vía @apply, así que el override de utilidad .bg-paper-50 NO lo alcanza → el div queda blanco en dark. El está además excluido de la regla global de inputs de arriba (necesita su gradiente propio), por lo que la pista sin rellenar (paper.200 horneado) también queda clara. Se re-mapean ambos. */ html.tk-dark .measure-picker { background-color: #243044 !important; border-color: #303c50 !important; } html.tk-dark .range-slider { background: linear-gradient(to right, #10b981 0%, #10b981 var(--pct, 50%), #303c50 var(--pct, 50%), #303c50 100%) !important; } /* Botones ± y lectura tocable: hornean paper-50/100 vía @apply → re-mapear. */ html.tk-dark .measure-step { background-color: #2c3850 !important; border-color: #3a4760 !important; color: #34d399 !important; } html.tk-dark .measure-step:hover { background-color: #344056 !important; } html.tk-dark .measure-step:disabled { color: #5b6577 !important; } html.tk-dark output.measure-readout:hover { background-color: #2c3850 !important; } /* ── .card / .card-elevated en dark ──────────────────────── */ /* .stat-hero hornea card-elevated (bg-white) vía @apply, así que el override de .card-elevated (selector de clase) NO lo alcanza: el elemento sólo lleva la clase `stat-hero`. Sin esto la tarjeta principal del dashboard quedaba BLANCA en dark (mismo patrón que .sel-card más abajo). */ html.tk-dark .card, html.tk-dark .card-elevated, html.tk-dark .card-interactive, html.tk-dark .stat-hero { background-color: #243044 !important; border-color: #303c50 !important; } html.tk-dark .photo-preview-card, html.tk-dark .photo-preview-actions { background-color: #243044 !important; border-color: #303c50 !important; } html.tk-dark .photo-preview-media { background-color: #1b2433 !important; } /* ── .sel-card en dark (tarjetas seleccionables: objetivo / ritmo / apariencia) ─────────────────────────────────────────────────── .sel-card hornea bg-white vía @apply, y .sel-card.is-selected hornea bg-brand-50, así que las utilidades html.tk-dark .bg-white / .bg-brand-50 NO los alcanzan (el elemento no lleva esas clases literales) → las tarjetas NO seleccionadas quedan blancas y la seleccionada queda verde claro/blanquecino en dark. Re-mapeamos ambos estados explícitamente. */ html.tk-dark .sel-card:not(.is-selected):not([aria-selected="true"]) { background-color: #243044 !important; border-color: #303c50 !important; } html.tk-dark .sel-card:not(.is-selected):not([aria-selected="true"]):hover { border-color: #34d399 !important; } html.tk-dark .sel-card.is-selected, html.tk-dark .sel-card[aria-selected="true"] { background-color: rgba(52, 211, 153, .12) !important; border-color: #34d399 !important; } html.tk-dark .goal-option-icon { background-color: #1b2433 !important; border-color: #3b485d !important; color: #cbd5e1 !important; } html.tk-dark .sel-card.is-selected .goal-option-icon, html.tk-dark .sel-card[aria-selected="true"] .goal-option-icon { background-color: rgba(52, 211, 153, .14) !important; border-color: rgba(52, 211, 153, .30) !important; color: #6ee7b7 !important; } /* ── .empty-state: el color ink va baked-in vía @apply, así que las utilidades .text-ink-* de arriba no lo alcanzan ─ */ html.tk-dark .empty-state-title { color: #f1f5f9 !important; } html.tk-dark .empty-state-body { color: #94a3b8 !important; } html.tk-dark .empty-state-icon { background-color: #303c50 !important; } html.tk-dark .empty-state-icon::after { border-color: rgba(52,211,153,.18) !important; } /* ── Componentes con color horneado vía @apply ────────────────── Igual que .empty-state, estas clases hornean text-ink-* con @apply, así que las utilidades .text-ink-* de arriba NO las alcanzan. Sin esto, los títulos de sección quedan en #1b2433 (idéntico al fondo dark → invisibles) y eyebrows / labels / helps quedan casi negros. Usados en /social, /u/ y todos los formularios de la app. ──────────────────────────────── */ html.tk-dark .section-title { color: #f8fafc !important; } html.tk-dark .field-label { color: #e7ebef !important; } html.tk-dark .eyebrow { color: #94a3b8 !important; } html.tk-dark .field-help { color: #94a3b8 !important; } /* ── Macro bars: neutral tracks with colored fills ───────── */ html.tk-dark .macro-bar-track { background-color: #3b485d !important; box-shadow: inset 0 0 0 1px rgba(148,163,184,.08) !important; } html.tk-dark .macro-bar-fill { box-shadow: 0 0 0 1px rgba(15,23,42,.18) inset !important; } html.tk-dark .macro-bar-fill-target, html.tk-dark .macro-dot { background-color: #10b981 !important; } html.tk-dark .macro-bar-fill-neutral, html.tk-dark .macro-dot-neutral, html.tk-dark .water-bar-fill { background-color: #64748b !important; } html.tk-dark .water-bar-fill-low { background: #64748b !important; } html.tk-dark .water-bar-fill-mid { background: linear-gradient(90deg, #64748b 0%, #7dd3fc 100%) !important; } html.tk-dark .water-bar-fill-near { background: linear-gradient(90deg, #7dd3fc 0%, #38bdf8 100%) !important; } html.tk-dark .water-bar-fill-target { background: #38bdf8 !important; } /* ── .btn-secondary en dark ──────────────────────────────── */ /* `.btn-secondary-sm` hace @apply btn-secondary (copia estilos, no añade la clase), así que hay que listarlo aquí igual que se hace con .btn-ghost-sm. */ html.tk-dark .btn-secondary, html.tk-dark .btn-secondary-sm { background-color: #303c50 !important; color: #e7ebef !important; border-color: #303c50 !important; } html.tk-dark .btn-secondary:hover, html.tk-dark .btn-secondary-sm:hover { background-color: #3b485d !important; } /* ── .btn-ghost / .btn-ghost-sm en dark ────────────────────── El color ink-500 va horneado vía @apply, así que las utilidades .text-ink-* de arriba no lo alcanzan → texto casi invisible sobre superficie oscura. Override a nivel de componente. */ html.tk-dark .btn-ghost, html.tk-dark .btn-ghost-sm { color: #cbd5e1 !important; } html.tk-dark .btn-ghost-sm { border-color: #4a586e !important; } html.tk-dark .btn-ghost:hover, html.tk-dark .btn-ghost-sm:hover { color: #f1f5f9 !important; background-color: #303c50 !important; } html.tk-dark .btn-ghost:active, html.tk-dark .btn-ghost-sm:active { background-color: #303c50 !important; } /* ── .btn-danger en dark ────────────────────────────────────── danger-50/100 (rosa pastel) chirría sobre fondo oscuro. Pasamos a superficie translúcida roja con texto danger-300. */ html.tk-dark .btn-danger { background-color: rgba(239,68,68,0.12) !important; border-color: rgba(239,68,68,0.22) !important; color: #fca5a5 !important; } html.tk-dark .btn-danger:hover { background-color: rgba(239,68,68,0.20) !important; } html.tk-dark .btn-danger-sm { background-color: rgba(239,68,68,0.12) !important; border-color: rgba(239,68,68,0.22) !important; color: #fca5a5 !important; } html.tk-dark .btn-danger-sm:hover { background-color: rgba(239,68,68,0.20) !important; } /* ── Elevación en dark: las sombras oscuras desaparecen sobre fondo oscuro, dejando el layout plano. Restauramos profundidad con un halo blanco de baja opacidad + sombra negra para asiento. ─────── */ html.tk-dark .shadow-soft, html.tk-dark .md\:shadow-soft { box-shadow: 0 1px 2px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.04) !important; } html.tk-dark .shadow-card { box-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.05) !important; } html.tk-dark .shadow-pop { box-shadow: 0 10px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06) !important; } /* ── Pills en dark ───────────────────────────────────────── */ html.tk-dark .pill-brand, html.tk-dark .pill-success { background-color: rgba(52,211,153,.14) !important; color: #6ee7b7 !important; border-color: rgba(52,211,153,.30) !important; } html.tk-dark .pill-warning { background-color: rgba(251,191,36,.14) !important; color: #fcd34d !important; border-color: rgba(251,191,36,.30) !important; } html.tk-dark .pill-danger { background-color: rgba(248,113,113,.14) !important; color: #fca5a5 !important; border-color: rgba(248,113,113,.30) !important; } html.tk-dark .pill-info { background-color: rgba(56,189,248,.14) !important; color: #7dd3fc !important; border-color: rgba(56,189,248,.30) !important; } html.tk-dark .pill-neutral { background-color: #303c50 !important; color: #cbd5e1 !important; border-color: #3b485d !important; } html.tk-dark .pill[aria-pressed="true"] { background-color: rgba(52,211,153,.14) !important; color: #6ee7b7 !important; border-color: rgba(52,211,153,.30) !important; } /* ── Banners en dark ─────────────────────────────────────── */ html.tk-dark .banner { background-color: #243044 !important; border-color: #3b485d !important; color: #cbd5e1 !important; } html.tk-dark .banner-info { background-color: rgba(56,189,248,.10) !important; border-left-color: #0ea5e9 !important; color: #7dd3fc !important; } html.tk-dark .banner-success { background-color: rgba(52,211,153,.10) !important; border-left-color: #10b981 !important; color: #6ee7b7 !important; } html.tk-dark .banner-warning { background-color: rgba(251,191,36,.10) !important; border-left-color: #f59e0b !important; color: #fcd34d !important; } html.tk-dark .banner-danger { background-color: rgba(248,113,113,.10) !important; border-left-color: #ef4444 !important; color: #fca5a5 !important; } html.tk-dark .banner-special { background: rgba(251,191,36,.10) !important; border-left-color: #f59e0b !important; color: #fcd34d !important; } /* ── Segmented control ───────────────────────────────────── */ html.tk-dark .segmented { background-color: #303c50 !important; } html.tk-dark .segmented-item { color: #94a3b8 !important; } html.tk-dark .segmented-item-active { background-color: #3b485d !important; color: #f1f5f9 !important; } /* ── Tab bar ─────────────────────────────────────────────── */ html.tk-dark nav.safe-top { background-color: rgba(36,48,68,.95) !important; border-bottom-color: #303c50 !important; } html.tk-dark #mobile-menu { background-color: #243044 !important; border-top-color: #303c50 !important; } html.tk-dark #app-tab-bar { background-color: transparent !important; border-top-color: transparent !important; box-shadow: none !important; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { html.tk-dark #app-tab-bar { -webkit-backdrop-filter: none; backdrop-filter: none; } } html.tk-dark .tab-item { color: #cbd5e1 !important; } html.tk-dark .tab-item.tab-active { color: #34d399 !important; } html.tk-dark .tab-item.tab-active .tab-icon-wrap { background: transparent !important; box-shadow: none !important; } html.tk-dark .tab-item:active .tab-icon-wrap { background-color: transparent !important; } html.tk-dark .tab-camera-inner { border-color: rgba(36,48,68,0.88) !important; box-shadow: 0 12px 24px rgba(16,185,129,0.34), 0 4px 12px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,0.30) !important; } /* ── Modal sheet panel (fondo hardcodeado en base.html) ─────── */ html.tk-dark .modal-sheet-panel { background: #243044 !important; } html.tk-dark .modal-sheet-handle { background: #4a586e !important; } html.tk-dark .modal-sheet-close { color: #9ca3af !important; } html.tk-dark .modal-sheet-close:hover { color: #e7ebef !important; background: #303c50 !important; } html.tk-dark .modal-sheet-title { color: #f8fafc !important; } html.tk-dark .modal-sheet-footer { border-top-color: #303c50 !important; } html.tk-dark .modal-sheet-icon { background: #303c50 !important; color: #34d399 !important; } /* Avatar ring (cosmético) — brand-400 en dark para contraste sobre fondo oscuro */ html.tk-dark .tk-ring-default { box-shadow: 0 0 0 2px #34d399, 0 0 0 4px rgba(52,211,153,0.18) !important; } /* bg-white con opacidad (no cubre el override de bg-white) ── */ html.tk-dark .bg-white\/95 { background-color: rgba(36,48,68,0.95) !important; } html.tk-dark .bg-white\/90 { background-color: rgba(36,48,68,0.9) !important; } html.tk-dark .bg-white\/85 { background-color: rgba(36,48,68,0.85) !important; } html.tk-dark .bg-white\/80 { background-color: rgba(36,48,68,0.8) !important; } html.tk-dark .bg-white\/70 { background-color: rgba(36,48,68,0.7) !important; } html.tk-dark .bg-white\/60 { background-color: rgba(36,48,68,0.6) !important; } html.tk-dark .bg-white\/25 { background-color: rgba(36,48,68,0.25) !important; } html.tk-dark .bg-white\/20, html.tk-dark .bg-white\/15, html.tk-dark .bg-white\/10, html.tk-dark .bg-white\/\[0\.07\] { background-color: rgba(255,255,255,0.08) !important; } html.tk-dark .hover\:bg-white\/20:hover { background-color: rgba(255,255,255,0.12) !important; } html.tk-dark .hover\:bg-white\/25:hover { background-color: rgba(255,255,255,0.16) !important; } /* ── Modals / overlays ───────────────────────────────────── */ html.tk-dark #entryModal .bg-white, html.tk-dark #entryModal .bg-paper-0, html.tk-dark #barcodeServingModal .bg-white, html.tk-dark #barcodeServingModal .bg-paper-0 { background-color: #243044 !important; } /* ── Unified Add Food Hub Modal ──────────────────────────── */ html.tk-dark #manualEntryModal .bg-paper-0 { background-color: #243044 !important; } html.tk-dark #manualEntryModal .card-interactive { background-color: #303c50 !important; border-color: #4a586e !important; } html.tk-dark #manualEntryModal .card-interactive:hover { background-color: #3b485d !important; border-color: #4b5563 !important; } html.tk-dark #manualEntryModal .card { background-color: #303c50 !important; border-color: #4a586e !important; } html.tk-dark #manualEntryModal .border-paper-200 { border-color: #4a586e !important; } /* Selector 2×2: una única superficie oscura y divisores suaves. Los iconos descansan sobre la superficie del modal, sin repetir un segundo contorno. */ html.tk-dark #manualEntryModal .add-food-quick-grid { background-color: #1b2433 !important; } html.tk-dark #manualEntryModal .add-food-quick-action:active { background-color: rgba(52, 211, 153, .12) !important; } html.tk-dark #manualEntryModal .add-food-quick-action:active .add-food-quick-icon { background-color: rgba(52, 211, 153, .14) !important; } html.tk-dark #manualEntryModal .add-food-analyze-hero { background-color: rgba(52, 211, 153, .08) !important; border-color: rgba(52, 211, 153, .30) !important; } html.tk-dark #manualEntryModal .add-food-analyze-hero:hover, html.tk-dark #manualEntryModal .add-food-analyze-hero:active { background-color: rgba(52, 211, 153, .12) !important; } html.tk-dark #meSearchInput, html.tk-dark #meCopyFromDate { background-color: #303c50 !important; border-color: #4a586e !important; color: #e7ebef !important; } /* ── Skeleton ────────────────────────────────────────────── */ html.tk-dark .skeleton { background: linear-gradient(90deg, #303c50 25%, #3b485d 50%, #303c50 75%) !important; } /* ════════════════════════════════════════════════════════════ Tokens semánticos (success/warning/danger/info) Sin estas reglas, text-danger-700/text-warning-700/etc se quedan oscuros e ilegibles sobre #1b2433. ════════════════════════════════════════════════════════════ */ /* ── Text — success ──────────────────────────────────────── */ html.tk-dark .text-success-500, html.tk-dark .text-success-600, html.tk-dark .text-success-700, html.tk-dark .text-success-800 { color: #34d399 !important; } html.tk-dark .text-success-400 { color: #6ee7b7 !important; } /* ── Text — warning ──────────────────────────────────────── */ html.tk-dark .text-warning-500, html.tk-dark .text-warning-600, html.tk-dark .text-warning-700, html.tk-dark .text-warning-800, html.tk-dark .text-warning-900, html.tk-dark .text-warning-400, html.tk-dark .text-warning-300 { color: #fbbf24 !important; } /* ── Text — danger ───────────────────────────────────────── */ html.tk-dark .text-danger-500, html.tk-dark .text-danger-600, html.tk-dark .text-danger-700, html.tk-dark .text-danger-700\/80, html.tk-dark .text-danger-800 { color: #f87171 !important; } html.tk-dark .text-danger-400 { color: #fca5a5 !important; } /* ── Text — info ─────────────────────────────────────────── */ html.tk-dark .text-info-500, html.tk-dark .text-info-600, html.tk-dark .text-info-700, html.tk-dark .text-info-800 { color: #38bdf8 !important; } html.tk-dark .text-info-400 { color: #7dd3fc !important; } /* ── Backgrounds — semantic 50/100 (soft surfaces) ────────────── Lavado translúcido del color semántico (igual criterio que los -50/-100 genéricos). Recupera el "verde de éxito / ámbar de aviso / rojo de error" como tinte de superficie en vez de gris plano. */ html.tk-dark .bg-success-50, html.tk-dark .bg-success-50\/70 { background-color: rgba(52,211,153,.08) !important; } html.tk-dark .bg-warning-50, html.tk-dark .bg-warning-50\/50, html.tk-dark .bg-warning-50\/40, html.tk-dark .bg-warning-50\/70 { background-color: rgba(251,191,36,.08) !important; } html.tk-dark .bg-danger-50, html.tk-dark .bg-danger-50\/50, html.tk-dark .bg-danger-50\/40, html.tk-dark .bg-danger-50\/30, html.tk-dark .bg-danger-50\/70 { background-color: rgba(248,113,113,.08) !important; } html.tk-dark .bg-info-50, html.tk-dark .bg-info-50\/70 { background-color: rgba(56,189,248,.08) !important; } html.tk-dark .bg-info-50\/70 .text-ink-900 { color: #f8fafc !important; } html.tk-dark .bg-info-50\/70 .text-ink-600 { color: #cbd5e1 !important; } html.tk-dark .bg-success-100 { background-color: rgba(52,211,153,.14) !important; } html.tk-dark .bg-warning-100 { background-color: rgba(251,191,36,.14) !important; } html.tk-dark .bg-warning-100\/50 { background-color: rgba(251,191,36,.10) !important; } html.tk-dark .bg-warning-200, html.tk-dark .bg-warning-300 { background-color: rgba(251,191,36,.22) !important; } html.tk-dark .bg-danger-100 { background-color: rgba(248,113,113,.14) !important; } html.tk-dark .bg-danger-200 { background-color: rgba(248,113,113,.22) !important; } html.tk-dark .bg-info-100 { background-color: rgba(56,189,248,.14) !important; } html.tk-dark .hover\:bg-success-50:hover, html.tk-dark .active\:bg-success-50:active { background-color: rgba(52,211,153,.12) !important; } html.tk-dark .hover\:bg-success-100:hover { background-color: rgba(52,211,153,.18) !important; } html.tk-dark .hover\:bg-warning-50:hover, html.tk-dark .active\:bg-warning-50:active { background-color: rgba(251,191,36,.12) !important; } html.tk-dark .hover\:bg-warning-100:hover { background-color: rgba(251,191,36,.18) !important; } html.tk-dark .hover\:bg-warning-200:hover, html.tk-dark .active\:bg-warning-200:active { background-color: rgba(251,191,36,.24) !important; } html.tk-dark .hover\:bg-danger-50:hover, html.tk-dark .hover\:bg-danger-50\/50:hover, html.tk-dark .active\:bg-danger-50:active { background-color: rgba(248,113,113,.12) !important; } html.tk-dark .hover\:bg-danger-100:hover { background-color: rgba(248,113,113,.18) !important; } html.tk-dark .hover\:bg-danger-200:hover, html.tk-dark .active\:bg-danger-200:active { background-color: rgba(248,113,113,.24) !important; } html.tk-dark .hover\:bg-info-50:hover, html.tk-dark .active\:bg-info-50:active { background-color: rgba(56,189,248,.12) !important; } html.tk-dark .hover\:bg-info-100:hover { background-color: rgba(56,189,248,.18) !important; } /* ── Borders — semantic 100/200 (subtle outlines) ───────── */ html.tk-dark .border-success-100, html.tk-dark .border-success-200, html.tk-dark .border-warning-100, html.tk-dark .border-warning-200, html.tk-dark .border-warning-300, html.tk-dark .border-warning-400, html.tk-dark .border-danger-100, html.tk-dark .border-danger-200, html.tk-dark .border-danger-300, html.tk-dark .border-danger-400, html.tk-dark .border-info-100, html.tk-dark .border-info-200 { border-color: #303c50 !important; } /* ── Text on saturated semantic bg stays white ──────────── */ html.tk-dark .bg-success-400, html.tk-dark .bg-success-500, html.tk-dark .bg-success-600 { color: #052e1f; } html.tk-dark .bg-warning-400, html.tk-dark .bg-warning-500 { color: #3b2008; } html.tk-dark .bg-danger-400, html.tk-dark .bg-danger-500 { color: #fef2f2; } html.tk-dark .bg-info-400, html.tk-dark .bg-info-500 { color: #082f49; } /* ── Grade badges (A→F) — mantener color, asegurar texto ─ */ /* Los fondos quedan visibles sobre #1b2433; reforzamos solo contraste de texto sobre los más claros (B = #84cc16). */ html.tk-dark .bg-grade-b { color: #052e15 !important; } html.tk-dark .nova-color.text-ink-900 { color: #0f172a !important; } /* ── Text grade refinado para legibilidad en dark ───────── */ html.tk-dark .text-grade-a { color: #34d399 !important; } html.tk-dark .text-grade-b { color: #a3e635 !important; } html.tk-dark .text-grade-c { color: #fbbf24 !important; } html.tk-dark .text-grade-d { color: #fb923c !important; } html.tk-dark .text-grade-f { color: #f87171 !important; } /* ── ink-900/800 surfaces: queremos que destaquen sobre body ─ */ /* En light, bg-ink-900 era "casi-negro" sobre paper claro. En dark, body ya es #1b2433 → ink-900 idéntico al fondo. Re-mapeamos a tonos elevados para que botones/banners sigan distinguiéndose. */ html.tk-dark .bg-ink-900, html.tk-dark .hover\:bg-ink-900:hover, html.tk-dark .active\:bg-ink-900:active { background-color: #303c50 !important; } html.tk-dark .bg-ink-800, html.tk-dark .hover\:bg-ink-800:hover { background-color: #3b485d !important; } html.tk-dark .bg-ink-700 { background-color: #4a586e !important; } /* Neutros claros usados como relleno de barras (funnel/planes) y como punto de badge (bg-ink-400 + texto blanco en la nav admin). En light son grises medios; sin override mantenían su valor claro y salían como barras/puntos casi-blancos sobre superficie oscura. */ html.tk-dark .bg-ink-200, html.tk-dark .bg-ink-300, html.tk-dark .bg-ink-400 { background-color: #64748b !important; } html.tk-dark .bg-ink-100 { background-color: #3b485d !important; } html.tk-dark .bg-black, html.tk-dark .active\:bg-black:active { background-color: #243044 !important; } /* Opacity-suffixed variants used in overlays/cookie notice */ html.tk-dark .bg-ink-900\/95 { background-color: rgba(48,60,80,0.95) !important; } html.tk-dark .bg-ink-900\/70 { background-color: rgba(48,60,80,0.78) !important; } html.tk-dark .bg-ink-900\/60 { background-color: rgba(48,60,80,0.7) !important; } html.tk-dark .bg-ink-900\/55 { background-color: rgba(48,60,80,0.7) !important; } html.tk-dark .bg-ink-900\/50 { background-color: rgba(48,60,80,0.7) !important; } html.tk-dark .bg-ink-900\/40 { background-color: rgba(48,60,80,0.6) !important; } html.tk-dark .bg-black\/50 { background-color: rgba(0,0,0,0.7) !important; } html.tk-dark .bg-black\/60 { background-color: rgba(0,0,0,0.72) !important; } html.tk-dark .bg-black\/40 { background-color: rgba(0,0,0,0.65) !important; } /* ── Borders ink (separadores) ──────────────────────────── */ html.tk-dark .border-ink-700, html.tk-dark .border-ink-800, html.tk-dark .border-ink-900, html.tk-dark .border-ink-300 { border-color: #4a586e !important; } /* ── text-black / text-paper-* fallbacks ────────────────── */ html.tk-dark .text-black { color: #f8fafc !important; } html.tk-dark .text-paper-300 { color: #4b5563 !important; } /* ── border-white: anillo "recorte" de badges sobre avatares ─ (badge de nivel, dot de notificaciones). En light recorta contra la superficie blanca; en dark debe igualar la card (#243044) en lugar de quedar como un aro blanco brillante. */ html.tk-dark .border-white { border-color: #243044 !important; } html.tk-dark .border-white\/20 { border-color: rgba(255,255,255,0.14) !important; } /* ════════════════════════════════════════════════════════════ Admin sub-system (clases .admin-* de tailwind.input.css) Estas clases hornean colores claros vía @apply (bg-white, text-ink-900, bg-paper-50…), por lo que los overrides de utilidad de arriba NO las alcanzan. Hay que re-mapearlas explícitamente o quedan como divs blancos / texto ilegible. ════════════════════════════════════════════════════════════ */ /* ── Tipografía / títulos ────────────────────────────────── */ html.tk-dark .admin-page-title { color: #f8fafc !important; } html.tk-dark .admin-page-sub { color: #94a3b8 !important; } html.tk-dark .admin-section-title { color: #94a3b8 !important; } html.tk-dark .admin-empty { background-color: rgba(27,36,51,0.4) !important; border-color: #3b485d !important; color: #94a3b8 !important; } /* ── Toolbar ─────────────────────────────────────────────── */ html.tk-dark .admin-toolbar { border-bottom-color: #303c50 !important; } html.tk-dark .admin-toolbar-btn { background-color: #303c50 !important; border-color: #4a586e !important; color: #e7ebef !important; } html.tk-dark .admin-toolbar-btn:hover { background-color: #3b485d !important; } /* primary mantiene su fondo brand sólido + texto blanco (legible) */ html.tk-dark .admin-toolbar-btn-primary { background-color: #10b981 !important; border-color: #059669 !important; color: #ffffff !important; } html.tk-dark .admin-toolbar-btn-primary:hover { background-color: #059669 !important; } html.tk-dark .admin-action-menu-trigger, html.tk-dark .admin-action-menu-panel { background-color: #243044 !important; border-color: #4a586e !important; } html.tk-dark .admin-action-menu-trigger { color: #cbd5e1 !important; } html.tk-dark .admin-action-menu-trigger:hover, html.tk-dark .admin-action-menu-item:hover { background-color: #303c50 !important; color: #f8fafc !important; } html.tk-dark .admin-action-menu-item { color: #e7ebef !important; } html.tk-dark .admin-action-menu-item svg { color: #94a3b8 !important; } html.tk-dark .admin-action-menu-item-danger { color: #fca5a5 !important; } html.tk-dark .admin-action-menu-item-danger:hover { background-color: rgba(248,113,113,.14) !important; color: #fecaca !important; } html.tk-dark .admin-action-menu-item-danger svg { color: #f87171 !important; } html.tk-dark .admin-action-menu-divider { border-color: #303c50 !important; } /* ── Search / inputs ─────────────────────────────────────── */ html.tk-dark .admin-search, html.tk-dark .admin-input { background-color: #243044 !important; border-color: #4a586e !important; color: #e7ebef !important; } /* ── Stat cards ──────────────────────────────────────────── */ html.tk-dark .admin-stat-card { background-color: #243044 !important; border-color: #303c50 !important; } html.tk-dark .admin-stat-label { color: #94a3b8 !important; } html.tk-dark .admin-stat-value { color: #f8fafc !important; } html.tk-dark .admin-stat-delta-up { color: #34d399 !important; } html.tk-dark .admin-stat-delta-down { color: #f87171 !important; } /* ── Navegación móvil / disclosures ─────────────────────── */ html.tk-dark .admin-mobile-nav, html.tk-dark .admin-disclosure { background-color: #243044 !important; border-color: #303c50 !important; } html.tk-dark .admin-mobile-nav-icon { background-color: #303c50 !important; border-color: #4a586e !important; color: #cbd5e1 !important; } html.tk-dark .admin-mobile-nav-panel, html.tk-dark .admin-disclosure-body { border-color: #303c50 !important; } html.tk-dark .admin-mobile-nav-item { color: #cbd5e1 !important; } html.tk-dark .admin-mobile-nav-item:hover { background-color: #303c50 !important; color: #f8fafc !important; } html.tk-dark .admin-mobile-nav-item-active { background-color: rgba(52,211,153,.14) !important; color: #6ee7b7 !important; } /* ── Tablas ──────────────────────────────────────────────── */ html.tk-dark .admin-table thead { background-color: #303c50 !important; border-bottom-color: #4a586e !important; } html.tk-dark .admin-table th { color: #cbd5e1 !important; } html.tk-dark .admin-table tbody tr { border-bottom-color: #303c50 !important; } html.tk-dark .admin-table tbody tr:hover { background-color: #303c50 !important; } html.tk-dark .admin-table td { color: #e7ebef !important; } /* Columna sticky (1ª col): th:first-child hornea bg-paper-50 y td:first-child bg-white vía @apply (selector descendiente → la utilidad .bg-white/.bg-paper-50 no lo alcanza). Sin esto la 1ª columna queda blanca con texto claro (ilegible) en dark en las 21 tablas admin. Se re-mapean los 3 estados (header / celda / hover) a la misma superficie que el resto de la tabla. */ html.tk-dark .admin-table thead th:first-child { background-color: #303c50 !important; } html.tk-dark .admin-table tbody td:first-child { background-color: #243044 !important; } html.tk-dark .admin-table tbody tr:hover td:first-child { background-color: #303c50 !important; } /* ── Pills ───────────────────────────────────────────────── */ html.tk-dark .admin-pill, html.tk-dark .admin-pill-neutral { background-color: #303c50 !important; border-color: #3b485d !important; } html.tk-dark .admin-pill-success { background-color: rgba(52,211,153,.14) !important; border-color: rgba(52,211,153,.30) !important; color: #6ee7b7 !important; } html.tk-dark .admin-pill-warning { background-color: rgba(251,191,36,.14) !important; border-color: rgba(251,191,36,.30) !important; color: #fcd34d !important; } html.tk-dark .admin-pill-danger { background-color: rgba(248,113,113,.14) !important; border-color: rgba(248,113,113,.30) !important; color: #fca5a5 !important; } html.tk-dark .admin-pill-info { background-color: rgba(56,189,248,.14) !important; border-color: rgba(56,189,248,.30) !important; color: #7dd3fc !important; } html.tk-dark .admin-pill-brand { background-color: rgba(52,211,153,.14) !important; border-color: rgba(52,211,153,.30) !important; color: #6ee7b7 !important; } html.tk-dark .admin-pill-neutral { color: #cbd5e1 !important; } /* ── Cards / links ───────────────────────────────────────── */ html.tk-dark .admin-card { background-color: #243044 !important; border-color: #303c50 !important; } html.tk-dark .admin-link { color: #34d399 !important; } /* ── Brand lockup: intercambio de variante de wordmark por tema ── * Usar en superficies que cambian con el tema (nav base, headers mobile). * .brand-lockup-light = wordmark oscuro (fondo claro) * .brand-lockup-dark = wordmark blanco (fondo oscuro) */ .brand-lockup-dark { display: none; } html.tk-dark .brand-lockup-light { display: none; } html.tk-dark .brand-lockup-dark { display: block; } /* ── Blog: .article-prose / .article-note ──────────────────────── Los partials de /blog emiten HTML plano y toda la tipografía se apoya en .article-prose, que hornea text-ink-*/bg-paper-*/brand vía @apply. Como esos valores quedan baked, las utilidades .text-ink-* / .bg-paper-* de arriba NO los alcanzan: sin estos overrides el artículo entero queda con texto oscuro sobre fondo oscuro (ilegible) y el blockquote/nota con fondo claro horneado. Por eso "el blog se ve todo oscuro" en dark mode. ───────────── */ html.tk-dark .article-prose, html.tk-dark .article-prose p, html.tk-dark .article-prose ul > li, html.tk-dark .article-prose ol > li, html.tk-dark .article-prose blockquote, html.tk-dark .article-prose blockquote p { color: #e7ebef !important; } html.tk-dark .article-prose h2, html.tk-dark .article-prose h3, html.tk-dark .article-prose strong, html.tk-dark .article-note h3 { color: #f8fafc !important; } /* ol hornea marker:text-ink-400; el color base lo aplica .article-prose ol > li */ html.tk-dark .article-prose ol { color: #94a3b8 !important; } html.tk-dark .article-prose ol > li { color: #e7ebef !important; } /* Enlaces inline y acentos de marca → verde dark (igual que text-brand-*) */ html.tk-dark .article-prose a { color: #34d399 !important; } html.tk-dark .article-prose a:hover { color: #6ee7b7 !important; } html.tk-dark .article-prose a.btn-primary, html.tk-dark .article-prose a.btn-primary-lg, html.tk-dark .article-prose a.btn-primary:hover, html.tk-dark .article-prose a.btn-primary-lg:hover { color: #ffffff !important; } html.tk-dark .article-prose ul > li::before { background-color: #34d399 !important; } /* Blockquote: fondo paper-50 horneado (claro) → superficie dark */ html.tk-dark .article-prose blockquote { background-color: #243044 !important; border-left-color: #34d399 !important; } /* .article-note hace @apply card-elevated (baked, no añade la clase), así que el override de .card-elevated no la alcanza. */ html.tk-dark .article-note { background-color: #243044 !important; border-color: #303c50 !important; } /* ── I7: Voice mic (dashboard) — override light-mode CSS custom properties ── */ /* Small mic listening state: danger-900/danger-200 on dark gives enough contrast */ html.tk-dark .voice-mic-listening { --voice-mic-bg: #450a0a; --voice-mic-fg: #fca5a5; } /* Large mic idle: brand-400→brand-600 dark gradient */ html.tk-dark .voice-mic-big { --voice-mic-big-from: #059669; --voice-mic-big-to: #065f46; box-shadow: 0 10px 25px -10px rgba(16,185,129,0.35) !important; } /* Large mic listening: danger-600→danger-800 — WCAG AA white text ≈ 4.83:1+ */ html.tk-dark .voice-mic-big.voice-mic-listening { --voice-mic-big-listen-from: #dc2626; --voice-mic-big-listen-to: #7f1d1d; } /* ── I7: Streak level badges — color-mix fallback for browsers without it ── On dark surfaces the per-level accent color is retained but lightened so text remains readable. We can't know the exact hex at build time (it's a Jinja variable), so we rely on opacity to ensure legibility: - Badge background tint: keep color-mix transparent, raise opacity slightly - Text/fill: the accent color itself is kept; for very light palette entries the dark background provides sufficient contrast on its own. These rules guarantee the badge surface darkens to the dark surface token. */ html.tk-dark .streak-level-current-item { /* Static fallback first for WKWebView/Safari < 16.4 (no color-mix support). */ background-color: rgba(52, 211, 153, 0.10) !important; background-color: color-mix(in srgb, var(--streak-color, #10b981) 18%, #1b2433) !important; } html.tk-dark .streak-level-badge { background-color: rgba(52, 211, 153, 0.10) !important; background-color: color-mix(in srgb, var(--streak-color, #10b981) 18%, #1b2433) !important; } /* ── /upgrade (paywall standalone) ───────────────────────────────────────── Overrides dark de las clases .upgrade-* (definidas en tailwind.input.css). Antes vivían en un