/* CF UI · Botón de tema claro/oscuro · requiere tema.js · actúa sobre <html data-theme="light|dark"> */
.cf-theme{--cf-th-accent:#2a62e0;position:relative;width:52px;height:52px;border:1.5px solid var(--cf-th-line,#c9d3e0);border-radius:50%;background:var(--cf-th-bg,#fff);color:var(--cf-th-fg,#14202e);cursor:pointer;overflow:hidden;transition:background .3s,border-color .3s,transform .2s}
.cf-theme:hover{transform:scale(1.06)}
.cf-theme:active{transform:scale(.94)}
.cf-theme:focus-visible{outline:3px solid color-mix(in srgb,var(--cf-th-accent) 50%,transparent);outline-offset:3px}
.cf-theme svg{position:absolute;inset:0;margin:auto;width:24px;height:24px;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s}
.cf-theme .sun{opacity:1;transform:none}
.cf-theme .moon{opacity:0;transform:translateY(130%) rotate(-60deg)}
.cf-theme[aria-pressed="true"] .sun{opacity:0;transform:translateY(-130%) rotate(60deg)}
.cf-theme[aria-pressed="true"] .moon{opacity:1;transform:none}
/* transición suave de toda la página al cambiar (la activa tema.js un instante; no con movimiento reducido) */
html.cf-theme-fade,html.cf-theme-fade *{transition:background-color .35s,color .35s,border-color .35s,fill .35s!important}
@media (prefers-reduced-motion:reduce){.cf-theme,.cf-theme svg{transition:none}html.cf-theme-fade,html.cf-theme-fade *{transition:none!important}}