/* ── Jcubo · site-wide dark theme ──────────────────────────────────────────
   Applied to all pages via body.site-dark (head.php default).
   The landing page uses body.landing-dark and is unaffected.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --dk-bg:          #0d1117;
  --dk-surface:     #161b22;
  --dk-surface2:    #1c2128;
  --dk-border:      #30363d;
  --dk-text:        #c9d1d9;
  --dk-muted:       #8b949e;
  --dk-dim:         #6e7681;
  --dk-accent:      #58a6ff;
  --dk-accent-glow: rgba(88,166,255,0.3);
  --dk-green:       #3fb950;
  --dk-yellow:      #FACC15;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */
body.site-dark {
  background-color: var(--dk-bg);
  color: var(--dk-text);
}

/* ── Headings ─────────────────────────────────────────────────────────────── */
body.site-dark h1,
body.site-dark h2,
body.site-dark h3,
body.site-dark h4,
body.site-dark h5,
body.site-dark h6 {
  color: #f0f6fc;
}

/* ── Strong / emphasis ────────────────────────────────────────────────────── */
body.site-dark strong { color: #f0f6fc; }

/* ── Links (only bare <a> without utility class) ─────────────────────────── */
body.site-dark a:not([class]) { color: var(--dk-accent); }
body.site-dark a:not([class]):hover { color: #79c0ff; }

/* ── Header / Nav ─────────────────────────────────────────────────────────── */
body.site-dark #site-header {
  background: rgba(13,17,23,0.92) !important;
  border-color: var(--dk-border) !important;
}

body.site-dark #site-header .font-bold { color: #f0f6fc; }
body.site-dark #site-header .text-ink-900 { color: #f0f6fc; }

body.site-dark #site-header nav > a {
  color: var(--dk-muted) !important;
}
body.site-dark #site-header nav > a:hover {
  color: #f0f6fc !important;
}
body.site-dark #site-header nav > a.text-brand-primary {
  color: var(--dk-accent) !important;
}

body.site-dark #site-header .btn-ghost {
  color: var(--dk-text);
  border-color: var(--dk-border);
}
body.site-dark #site-header .btn-ghost:hover {
  background: var(--dk-surface);
  border-color: rgba(88,166,255,0.4);
}

body.site-dark #nav-toggle {
  color: var(--dk-text);
}
body.site-dark #nav-toggle:hover {
  background: var(--dk-surface);
}

/* Mobile nav ────────────────────────────────────────────────────────────── */
body.site-dark #mobile-nav {
  background: var(--dk-bg);
  border-color: var(--dk-border) !important;
}
body.site-dark #mobile-nav a {
  color: var(--dk-text);
}
body.site-dark #mobile-nav a:hover {
  background: var(--dk-surface);
  color: #f0f6fc;
}

/* ── Section backgrounds ──────────────────────────────────────────────────── */
body.site-dark .bg-white   { background-color: var(--dk-bg); }
body.site-dark .bg-ink-50  { background-color: var(--dk-surface); }
body.site-dark .bg-ink-100 { background-color: var(--dk-surface2); }
body.site-dark .bg-ink-900 { background-color: #0d1117; }
body.site-dark .bg-ink-950 { background-color: #010409; }

/* Sections with no explicit bg class inherit from body */
body.site-dark section {
  background-color: inherit;
}

/* ── Text colours ─────────────────────────────────────────────────────────── */
body.site-dark .text-ink-900 { color: #f0f6fc; }
body.site-dark .text-ink-700 { color: var(--dk-muted); }
body.site-dark .text-ink-500 { color: var(--dk-dim); }
body.site-dark .text-ink-300 { color: #484f58; }

/* White text stays white */
body.site-dark .text-white { color: #fff; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
/* .card-hover uses @apply card, so in compiled CSS it has bg-white inlined   */
/* — must target both class names explicitly                                   */
body.site-dark .card,
body.site-dark .card-hover {
  background: var(--dk-surface);
  border-color: var(--dk-border);
  color: var(--dk-text);
}
body.site-dark .card h2,  body.site-dark .card-hover h2,
body.site-dark .card h3,  body.site-dark .card-hover h3,
body.site-dark .card h4,  body.site-dark .card-hover h4 { color: #f0f6fc; }
body.site-dark .card p,   body.site-dark .card-hover p   { color: var(--dk-muted); }
body.site-dark .card a,   body.site-dark .card-hover a   { color: var(--dk-accent); }

body.site-dark .card-dark {
  background: var(--dk-surface2);
  border: 1px solid var(--dk-border);
}

body.site-dark .card-hover:hover {
  border-color: rgba(88,166,255,0.35);
  box-shadow: 0 8px 32px rgba(88,166,255,0.1);
}

/* ── Chips ────────────────────────────────────────────────────────────────── */
body.site-dark .chip {
  background: var(--dk-surface2);
  color: var(--dk-muted);
  border: 1px solid var(--dk-border);
}
body.site-dark .chip-accent {
  background: rgba(88,166,255,0.12);
  color: var(--dk-accent);
  border-color: rgba(88,166,255,0.25);
}
body.site-dark .chip-cta {
  background: rgba(250,204,21,0.12);
  color: var(--dk-yellow);
  border-color: rgba(250,204,21,0.25);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
body.site-dark .btn-ghost {
  color: var(--dk-text);
  border-color: var(--dk-border);
  background: transparent;
}
body.site-dark .btn-ghost:hover {
  background: var(--dk-surface);
  border-color: rgba(88,166,255,0.5);
  color: #f0f6fc;
}
body.site-dark .btn-secondary {
  background: var(--dk-surface);
  color: #f0f6fc;
}

/* ── Form inputs (@tailwindcss/forms compatible) ──────────────────────────── */
body.site-dark input[type="text"],
body.site-dark input[type="email"],
body.site-dark input[type="tel"],
body.site-dark input[type="number"],
body.site-dark input[type="password"],
body.site-dark textarea,
body.site-dark select {
  background-color: var(--dk-surface);
  border-color: var(--dk-border);
  color: var(--dk-text);
}
body.site-dark input::placeholder,
body.site-dark textarea::placeholder {
  color: var(--dk-dim);
}
body.site-dark input:focus,
body.site-dark textarea:focus,
body.site-dark select:focus {
  border-color: var(--dk-accent);
  --tw-ring-color: rgba(88,166,255,0.25);
  --tw-ring-shadow: 0 0 0 3px rgba(88,166,255,0.25);
  box-shadow: var(--tw-ring-shadow);
}
body.site-dark input[type="checkbox"] {
  background-color: var(--dk-surface);
  border-color: var(--dk-border);
}
body.site-dark label span.text-sm { color: var(--dk-text); }

/* Turnstile widget (dark mode) */
body.site-dark .cf-turnstile { filter: invert(0.85) hue-rotate(175deg); }

/* ── Borders ──────────────────────────────────────────────────────────────── */
body.site-dark .border-ink-100 { border-color: var(--dk-border); }
body.site-dark .border-ink-300 { border-color: #484f58; }
body.site-dark .divide-ink-100 > * + * { border-color: var(--dk-border); }

/* ── Dividers ─────────────────────────────────────────────────────────────── */
body.site-dark hr { border-color: var(--dk-border); }

/* ── Prose / Blog ─────────────────────────────────────────────────────────── */
body.site-dark .prose-jcubo,
body.site-dark .prose { color: var(--dk-text); }
body.site-dark .prose-jcubo h1,
body.site-dark .prose-jcubo h2,
body.site-dark .prose-jcubo h3,
body.site-dark .prose-jcubo h4  { color: #f0f6fc; }
body.site-dark .prose-jcubo strong { color: #f0f6fc; }
body.site-dark .prose-jcubo a   { color: var(--dk-accent); }
body.site-dark .prose-jcubo code {
  background: var(--dk-surface2);
  color: var(--dk-accent);
}
body.site-dark .prose-jcubo blockquote {
  border-left-color: var(--dk-accent);
  color: var(--dk-muted);
}
body.site-dark .prose-jcubo pre {
  background: var(--dk-surface);
  border: 1px solid var(--dk-border);
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
body.site-dark table { color: var(--dk-text); }
body.site-dark th    { color: #f0f6fc; background: var(--dk-surface2); border-color: var(--dk-border); }
body.site-dark td    { border-color: var(--dk-border); }
body.site-dark tr:nth-child(even) td { background: rgba(22,27,34,0.5); }

/* ── Scroll-reveal (already animates fine, just preserve opacity) ─────────── */
body.site-dark .reveal         { opacity: 0; }
body.site-dark .reveal.is-visible { opacity: 1; }

/* ── Footer (already dark, just make sure bg is consistent) ──────────────── */
body.site-dark footer.bg-ink-950 { background-color: #010409; }

/* ── Page-specific overrides ─────────────────────────────────────────────── */

/* Precio page feature list "✓" and "—" markers */
body.site-dark .text-ink-700 { color: var(--dk-muted); }
body.site-dark .text-ink-500 { color: var(--dk-dim); }

/* Grid-bg overlay (IA page hero) already handled by its own section bg */
body.site-dark .grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
}

/* AI network nodes (integraciones-ia page) — keep their own colours */
body.site-dark .ai-network__node {
  background: var(--dk-surface2);
  border-color: var(--dk-border);
  color: var(--dk-accent);
}

/* Inline code blocks outside prose */
body.site-dark code {
  background: var(--dk-surface2);
  color: var(--dk-accent);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Sticky headers / aside panels */
body.site-dark .sticky { /* inherit */ }

/* ── Aside / info boxes ───────────────────────────────────────────────────── */
body.site-dark aside .card-dark { background: var(--dk-surface2); }

/* "Legal" pages */
body.site-dark .prose-jcubo ul li::marker { color: var(--dk-accent); }
body.site-dark .prose-jcubo ol li::marker { color: var(--dk-accent); }

/* ── Tailwind gradient overrides ──────────────────────────────────────────── */
/* from-ink-50 to-white gradient → dark surface to dark bg */
body.site-dark .from-ink-50 {
  --tw-gradient-from: var(--dk-surface);
  --tw-gradient-to: rgba(22,27,34,0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
body.site-dark .to-white {
  --tw-gradient-to: var(--dk-bg);
}
body.site-dark .from-white {
  --tw-gradient-from: var(--dk-bg);
  --tw-gradient-to: rgba(13,17,23,0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
/* from-ink-50 without to- modifier still needs a visible end */
body.site-dark .bg-gradient-to-b.from-ink-50:not([class*="to-"]) {
  background-image: linear-gradient(to bottom, var(--dk-surface), var(--dk-bg));
}

/* ── Shadow adjustments for dark surfaces ─────────────────────────────────── */
body.site-dark .shadow-lg {
  box-shadow: 0 10px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.25);
}
body.site-dark .shadow-md {
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.2);
}
body.site-dark .shadow-sm {
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* ── Hover states needing extra specificity ───────────────────────────────── */
body.site-dark a.hover\:text-brand-primary:hover { color: var(--dk-accent); }
body.site-dark a.hover\:text-ink-900:hover       { color: #f0f6fc; }

/* ── Feature lists in service pages ─────────────────────────────────────────
   e.g. precios.php checkmarks and text ─────────────────────────────────── */
body.site-dark .text-brand-cta { color: var(--dk-yellow); }

/* ── Section that start with no explicit bg (plain pt-16 etc.) ─────────────── */
body.site-dark section:not([class*="bg-"]) {
  background-color: var(--dk-bg);
}