/*
* 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.
*/
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\/90,
html.tk-dark .md\:bg-paper-0,
html.tk-dark .lg\:bg-paper-0,
html.tk-dark .md\:bg-white,
html.tk-dark .lg\:bg-white,
html.tk-dark .bg-white { background-color: #243044 !important; }
html.tk-dark .bg-paper-50\/95,
html.tk-dark .bg-paper-50\/70,
html.tk-dark .bg-paper-50 { background-color: #1b2433 !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-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; }
/* ── 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 { 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-600 { background-color: #059669 !important; }
html.tk-dark .bg-brand-700 { background-color: #047857 !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-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; }
/* ── 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 .md\:border-paper-200,
html.tk-dark .lg\:border-paper-200,
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; }
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; }
/* ── 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;
}
/* 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 ──────────────────────── */
html.tk-dark .card,
html.tk-dark .card-elevated,
html.tk-dark .card-interactive {
background-color: #243044 !important;
border-color: #303c50 !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;
}
/* ── .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; }
/* ── 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;
}
/* ── .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; }
/* ── 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; }
/* ── 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; }
/* ── Modals / overlays ───────────────────────────────────── */
html.tk-dark #uploadModal .bg-white,
html.tk-dark #uploadModal .bg-paper-0,
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;
}
html.tk-dark #meSearchInput,
html.tk-dark #meManualForm input,
html.tk-dark #meManualForm select,
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;
}
/* ── AI analyzer overlay ─────────────────────────────────── */
html.tk-dark #aiAnalysisOverlay { background-color: #1b2433 !important; }
html.tk-dark #aiAnalysisOverlay h2 { color: #f1f5f9 !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 { 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 { 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 { background-color: rgba(248,113,113,.08) !important; }
html.tk-dark .bg-info-50 { background-color: rgba(56,189,248,.08) !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; }
/* ── 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; }
/* ── 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 { 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; }
/* ── 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; }
/* ── 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; }
/* ── 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;
}