/* ============================================================================
   FactuChat — Universal theme toggle (light/dark)
   Loaded on every secondary page (canonical landing has its own inline copy).

   POSITION: ALL toggles render fixed top-right of the viewport, regardless
   of where the button was injected in the DOM (nav, body, etc). This
   guarantees the SAME pixel position across blog, comparar, gestoría,
   precios, ca/, calculadora, etc — exactly what users expect from a
   site-wide control.
   ============================================================================ */
:root{
  --tt-bg:rgba(15,17,22,.7);
  --tt-bdr:rgba(255,255,255,.18);
  --tt-bdr-hover:rgba(99,91,255,.65);
  --tt-bg-hover:rgba(99,91,255,.18);
  --tt-color:#fff;
  --tt-color-hover:#fff;
  --tt-shadow:0 4px 14px rgba(0,0,0,.35);
}
[data-theme="light"]{
  --tt-bg:rgba(255,255,255,.85);
  --tt-bdr:rgba(0,0,0,.18);
  --tt-bdr-hover:rgba(79,70,229,.7);
  --tt-bg-hover:rgba(79,70,229,.10);
  --tt-color:#0a0a14;
  --tt-color-hover:#0a0a14;
  --tt-shadow:0 4px 14px rgba(0,0,0,.10);
}

/* The button — fixed top-right on EVERY page in a position that pairs
   visually with the nav's right-most element:
     • Desktop: sits LEFT of "Probar gratis" CTA (height matches at 2.5rem)
     • Mobile:  sits LEFT of the burger (size matches at 2rem)
   Same offsets on every page (canonical + 226 secondary) so toggle
   never overlaps the nav-cta or burger and always reads as part of
   the same control group. */
.theme-toggle{
  position:fixed !important;
  top:calc(env(safe-area-inset-top, 0px) + .625rem) !important;
  /* Desktop: top-right corner of the viewport. On wide viewports the
     gutter beyond the centered nav container places the toggle clearly
     to the RIGHT of "Probar gratis" CTA. */
  right:calc(env(safe-area-inset-right, 0px) + .875rem) !important;
  bottom:auto !important;
  left:auto !important;
  z-index:9000 !important;
  width:2.5rem;height:2.5rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--tt-bg);
  border:1px solid var(--tt-bdr);
  border-radius:50%;
  color:var(--tt-color);
  cursor:pointer;
  transition:color .25s,border-color .25s,background .25s,
             transform .25s cubic-bezier(.34,1.56,.64,1),
             box-shadow .25s;
  flex-shrink:0;
  margin:0 !important;
  padding:0;
  box-shadow:var(--tt-shadow);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  -webkit-tap-highlight-color:transparent;
  order:0 !important;
}
.theme-toggle svg{width:1rem;height:1rem}
.theme-toggle:hover{
  color:var(--tt-color-hover);
  border-color:var(--tt-bdr-hover);
  background:var(--tt-bg-hover);
}
.theme-toggle:active{transform:scale(.92)}
.theme-toggle:focus-visible{outline:2px solid var(--tt-bdr-hover);outline-offset:3px}
.theme-toggle svg{
  width:1.125rem;height:1.125rem;
  position:absolute;
  transition:opacity .35s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1);
}
.theme-toggle .theme-icon-sun{opacity:0;transform:rotate(-90deg) scale(.5)}
.theme-toggle .theme-icon-moon{opacity:1;transform:rotate(0) scale(1)}
[data-theme="light"] .theme-toggle .theme-icon-sun{opacity:1;transform:rotate(0) scale(1)}
[data-theme="light"] .theme-toggle .theme-icon-moon{opacity:0;transform:rotate(90deg) scale(.5)}

/* Mobile: match the burger size 2rem × 2rem and sit LEFT of it.
   Nav padding is 1.5rem and burger is width:2rem, so burger
   occupies right:1.5rem → 3.5rem. Toggle at right:4rem leaves a
   .5rem gap → "[ ☀/🌙 ] [ ☰ ]" pattern. */
@media(max-width:768px){
  .theme-toggle{
    width:2rem;height:2rem;
    top:calc(env(safe-area-inset-top, 0px) + .75rem) !important;
    right:calc(env(safe-area-inset-right, 0px) + 4rem) !important;
  }
  .theme-toggle svg{width:.9375rem;height:.9375rem}
}

/* Reduced motion: keep it snappy without spring/bounce */
@media(prefers-reduced-motion:reduce){
  .theme-toggle,.theme-toggle svg{transition-duration:.15s !important}
}

/* Print: hide the toggle entirely */
@media print{
  .theme-toggle{display:none !important}
}