/* Theme selection is applied in the head before the first paint. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eef1f7;
  --muted: #abb4c3;
  --orange: #ffa610;
  --accent: #ffbd30;
  --line: #303a4b;
}
.navigation nav { margin-left: auto; }
.theme-toggle {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #e2e5e9;
  border-radius: 50%;
  color: #414958;
  background: #fff;
  transition: border-color .18s, background .18s;
}
.theme-toggle .icon { width: 20px; height: 20px; }
.theme-toggle:hover { background: #fff5e2; border-color: #dcaa4b; }
html[data-theme="dark"] body { background: #111722; }
html[data-theme="dark"] .site-header {
  background: #111722f0;
  border-bottom-color: #283244;
}
html[data-theme="dark"] .navigation nav > a:not(.button) { color: #bbc4d3; }
html[data-theme="dark"] .navigation nav > a:not(.button):hover { color: #ffbd30; }
html[data-theme="dark"] .theme-toggle {
  color: #ffbd30;
  border-color: #394458;
  background: #1c2534;
}
html[data-theme="dark"] .theme-toggle:hover { background: #2a3546; border-color: #cc9634; }
html[data-theme="dark"] .button-dark { background: #edf0f5; color: #171c28; }
html[data-theme="dark"] .button-dark:hover { background: #fff; }
html[data-theme="dark"] .skip-link { background: #ffbd30; color: #171c28; }
html[data-theme="dark"] .hero { background: linear-gradient(#111722 72%, #161e2a); }
html[data-theme="dark"] .visual-halo {
  background: radial-gradient(ellipse at 62% 49%, #ffb42623, #ffbc3010 40%, transparent 70%);
}
html[data-theme="dark"] .eyebrow { color: #b6bdca; }
html[data-theme="dark"] .scene-label { color: #b9c2cf; }
html[data-theme="dark"] .visual-footnote { color: #aeb9c9; }
html[data-theme="dark"] .visual-footnote i { color: #6f7b8d; }
html[data-theme="dark"] .hero-offer > span { color: #8f7b55; }
html[data-theme="dark"] .fine-print { color: #a7b1c1; }
html[data-theme="dark"] .hero-bottom { border-top-color: #334052; color: #d9deea; }
html[data-theme="dark"] .hero-bottom > span { color: #eef1f7; }
html[data-theme="dark"] .hero-bottom .icon { color: #ffbd30; }
html[data-theme="dark"] .hero-bottom .concept {
  background: #202a39;
  border-color: #384559;
  box-shadow: none;
}
html[data-theme="dark"] .hero-bottom .concept strong { color: #f4f6fa; }
html[data-theme="dark"] .hero-bottom .concept p { color: #b7c0cf; }
html[data-theme="dark"] .concept-icon { background: #44351c; color: #ffbd30; }
html[data-theme="dark"] .realtime-heading { color: #eef1f7; }
html[data-theme="dark"] .realtime-heading span { color: #ffbd30; }
html[data-theme="dark"] .product-tabs button { color: #b3bdce; }
html[data-theme="dark"] .product-tabs button[aria-selected="true"] {
  color: #ffbd30;
  background: linear-gradient(0deg, #ffa61012, transparent);
}
html[data-theme="dark"] .product-frame { border-color: #394357; background: #1d2636; box-shadow: 0 18px 50px #00000030; }
html[data-theme="dark"] .product-toolbar { background: #1c2534; border-bottom-color: #354055; color: #d4dbe7; }
html[data-theme="dark"] .text-button { color: #c6d0df; }
html[data-theme="dark"] .product-caption { color: #b8c3d2; }
html[data-theme="dark"] .product-caption > span { color: #a8b4c5; }
html[data-theme="dark"] .savings-section { background: #0b1019; }
html[data-theme="dark"] .comparison { background: #18212e; border-color: #364356; }
html[data-theme="dark"] .loticompu-cost { background: #222c3b; border-top-color: #384456; }
html[data-theme="dark"] .benefit-card {
  background: #1a2331;
  border-color: #303c4e;
}
html[data-theme="dark"] .risk-card { background: #27241e; border-color: #463a28; }
html[data-theme="dark"] .team-card { background: #1b2330; }
html[data-theme="dark"] .report-card { background: #23262c; }
html[data-theme="dark"] .benefit-copy p { color: #bac4d3; }
html[data-theme="dark"] .feature-number { color: #a9b5c7; }
html[data-theme="dark"] .benefit-visual img { border-color: #566277; }
html[data-theme="dark"] .owner-node,
html[data-theme="dark"] .supervisors > div { background: #273347; border-color: #46526a; }
html[data-theme="dark"] .owner-node span,
html[data-theme="dark"] .supervisors span,
html[data-theme="dark"] .team-diagram > p { color: #b4c0d3; }
html[data-theme="dark"] .supervisors .icon { color: #ffbd30; }
html[data-theme="dark"] .tree-line { border-bottom-color: #64738b; }
html[data-theme="dark"] .tree-line:before,
html[data-theme="dark"] .supervisors > div:before { background: #64738b; }
html[data-theme="dark"] .terminal-dots i { border-color: #bdc7d7; }
html[data-theme="dark"] .workflow-section { background: #17202d; border-color: #2e3b4e; }
html[data-theme="dark"] .flow-icon { background: #263247; border-color: #45516a; }
html[data-theme="dark"] .flow-icon .icon { color: #ffbd30; }
html[data-theme="dark"] .flow-icon:after { background: #56647b; }
html[data-theme="dark"] .workflow li > span { color: #a6b4c9; }
html[data-theme="dark"] .workflow li > p,
html[data-theme="dark"] .workflow-note { color: #b5c0d1; }
html[data-theme="dark"] .license-heading h2 > span { color: #bac5d6; }
html[data-theme="dark"] .license-heading p:not(.eyebrow),
html[data-theme="dark"] .license-details p { color: #b2bed1; }
html[data-theme="dark"] .license-details .icon { color: #e9b55b; }
html[data-theme="dark"] .infinity-art { background: radial-gradient(ellipse, #ffb82a16, transparent 70%); }
html[data-theme="dark"] .infinity-art > span { color: #f0bb57; }
html[data-theme="dark"] .includes-section { background: #1a2331; }
html[data-theme="dark"] .includes-grid,
html[data-theme="dark"] .includes-grid > div + div { border-color: #3a475c; }
html[data-theme="dark"] .includes-grid .icon { color: #d0b074; }
html[data-theme="dark"] .includes-grid p { color: #b7c1d2; }
html[data-theme="dark"] .faq-heading > p:not(.eyebrow),
html[data-theme="dark"] .faq-list details > p { color: #bac6d7; }
html[data-theme="dark"] .faq-list summary > span { color: #a8b7ce; }
html[data-theme="dark"] .faq-list details[open] summary > span { color: #ffbd30; }
html[data-theme="dark"] .contact-card { background: #232e40; border: 1px solid #394960; }
html[data-theme="dark"] .footer-main > p,
html[data-theme="dark"] .footer-bottom { color: #a5b3c8; }
html[data-theme="dark"] .floating-whatsapp { background: #263247; border-color: #4a5a72; }
html[data-theme="dark"] dialog { background: #17202e; color: #eef1f7; border-color: #4b5b73; }
html[data-theme="dark"] .dialog-toolbar { background: #202c3d; border-bottom-color: #415069; }
html[data-theme="dark"] .dialog-toolbar button { background: #33435b; color: #eef1f7; }
html[data-theme="dark"] dialog::backdrop { background: #050a12dd; }
@media (max-width: 850px) {
  .navigation { gap: 15px; }
  .navigation nav { gap: 14px; }
  .theme-toggle { width: 38px; height: 38px; flex-basis: 38px; }
}
@media (max-width: 640px) {
  .navigation { gap: 12px; }
  .navigation > .brand { margin-right: auto; }
  .navigation > .menu-toggle { order: 4; }
  .navigation > .theme-toggle { order: 3; }
  html[data-theme="dark"] .navigation nav { background: #1b2535; border-color: #3a4860; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}
/* Render the approved light lettering before DOMContentLoaded as well. */
html[data-theme="dark"] .brand img { content: url("assets/logo-aprobado-oscuro.svg"); }