/* Tema controlado por el sitio. Evita que el navegador fuerce colores no diseñados. */
:root {
  color-scheme: light;
  --theme-bg: #ffffff;
  --theme-surface: #ffffff;
  --theme-surface-soft: #f5f9fd;
  --theme-surface-alt: #f8fbff;
  --theme-ink: #0d2545;
  --theme-text: #35465d;
  --theme-muted: #5a6d83;
  --theme-line: #dce8f5;
  --theme-header: rgba(255,255,255,.96);
  --theme-shadow: rgba(11,35,67,.08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #07131f;
  --theme-surface: #0c1d2f;
  --theme-surface-soft: #0a1929;
  --theme-surface-alt: #10243a;
  --theme-ink: #f3f7fc;
  --theme-text: #b8c7d9;
  --theme-muted: #91a5bb;
  --theme-line: #20364d;
  --theme-header: rgba(7,19,31,.96);
  --theme-shadow: rgba(0,0,0,.24);
}

html,
body {
  background: var(--theme-bg);
}

body,
.section h2,
.card h3,
.project-card h3,
.catalog-card h2,
.service-cta h2,
.projects-page-hero h1 {
  color: var(--theme-ink);
}

.section p,
.card p,
.project-card p,
.catalog-card p,
.projects-page-hero p,
.service-cta p,
.principles small {
  color: var(--theme-text);
}

.site-header {
  background: var(--theme-header);
  border-bottom-color: var(--theme-line);
}

.theme-toggle {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: var(--theme-surface);
  color: var(--theme-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.theme-toggle:hover {
  border-color: #168cff;
  transform: translateY(-1px);
}

.theme-toggle-icon {
  font-size: 20px;
  line-height: 1;
}

.theme-toggle-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

html[data-theme="dark"] .nav-links a {
  color: #dce8f5;
}

html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a.active {
  color: #43a7ff;
}

html[data-theme="dark"] .menu-toggle {
  color: #f3f7fc;
}

html[data-theme="dark"] .section,
html[data-theme="dark"] .projects,
html[data-theme="dark"] .projects-page,
html[data-theme="dark"] .service-page,
html[data-theme="dark"] footer {
  background: var(--theme-bg);
}

html[data-theme="dark"] .process,
html[data-theme="dark"] .about,
html[data-theme="dark"] .service-cta,
html[data-theme="dark"] .projects-page-hero {
  background: linear-gradient(100deg, #0a1929, #0d2136);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .catalog-card {
  background: linear-gradient(180deg, #0d2136, #0a1929);
  border-color: var(--theme-line);
  box-shadow: 0 12px 28px var(--theme-shadow);
}

html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .project-card:hover,
html[data-theme="dark"] .catalog-card:hover {
  box-shadow: 0 18px 40px rgba(0,0,0,.3);
}

html[data-theme="dark"] .tab {
  color: #cbd9e8;
  background: #10243a;
  border-color: #28415b;
}

html[data-theme="dark"] .tab:hover {
  border-color: #168cff;
}

html[data-theme="dark"] .tab.active {
  color: #fff;
  background: linear-gradient(135deg,#168cff,#0877df);
  border-color: transparent;
}

html[data-theme="dark"] .service-list-item {
  background: #0d2136;
  border-color: var(--theme-line);
  color: var(--theme-ink);
}

html[data-theme="dark"] .principles > div,
html[data-theme="dark"] .about-grid > :last-child {
  border-color: var(--theme-line) !important;
}

html[data-theme="dark"] .muted-link,
html[data-theme="dark"] .catalog-status {
  color: var(--theme-muted);
}

html[data-theme="dark"] .project-card .badge,
html[data-theme="dark"] .catalog-card span {
  background: rgba(22,140,255,.12);
  color: #62b2ff;
}

html[data-theme="dark"] .badge.purple {
  background: rgba(151,71,255,.14);
  color: #c79cff;
}

html[data-theme="dark"] .carousel-dots button {
  background: #39516b;
}

html[data-theme="dark"] .carousel-dots button.active {
  background: #168cff;
}

html[data-theme="dark"] .footer-bottom {
  border-top-color: var(--theme-line);
  color: var(--theme-muted);
}

html[data-theme="dark"] .footer-top nav,
html[data-theme="dark"] .footer-phone,
html[data-theme="dark"] .footer-phone a {
  color: #c8d6e5;
}

html[data-theme="dark"] .skip-link {
  background: #10243a;
  color: #f3f7fc;
}

/* Hero, franja de valor, CTA de montaña y hero de servicios mantienen su identidad oscura. */
.hero,
.value-strip,
.cta,
.service-hero {
  color-scheme: dark;
}

/* El sistema visual del IDE debe permanecer idéntico en ambos temas. */
.code-window,
.hero-code-window {
  color-scheme: dark;
}

/* Evita que controles nativos sean recoloreados de forma inesperada. */
button,
input,
select,
textarea {
  color-scheme: inherit;
}

@media (max-width: 900px) {
  html[data-theme="dark"] .nav-links {
    background: #0a1929;
    border-top-color: var(--theme-line);
  }

  html[data-theme="dark"] .nav-links a {
    border-bottom-color: var(--theme-line);
  }
}

@media (max-width: 720px) {
  .theme-toggle {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle {
    transition: none;
  }
}

/* Intercambio inmediato del logotipo según tema, incluso antes de ejecutar theme.js. */
html[data-theme="dark"] .brand-logo img {
  content: url('../brand/logo-horizontal-dark.svg');
}

html[data-theme="light"] .brand-logo img {
  content: url('../brand/logo-horizontal-light.svg');
}