/* Compuasociados · movimiento Tahoe / macOS (2026-10-21)
   Capa de animación sobre tahoe.css (base, no se edita). «#root > div.h-screen» = alcance de la app autenticada (#root > div.h-screen):
   nunca toca el login ni a Artemisa. Va enlazada al final de index.html.
   Reglas: curva macOS cubic-bezier(.32,.72,0,1); muelles con linear() y respaldo cubic-bezier; solo transform/opacity
   (más color/background-color/border-color donde la base ya los usaba); NO se anima blur, backdrop-filter ni box-shadow;
   perfiles de movimiento (html[data-th-motion]): full, soft (movimiento reducido del sistema: solo interacciones breves) y off (interruptor «Animaciones: No»). */

/* ================= TOKENS ================= */
:root {
  --tm-ease: cubic-bezier(.32, .72, 0, 1);            /* salida rápida, aterrizaje suave (curva de macOS) */
  --tm-ease-out: cubic-bezier(.22, .61, .36, 1);
  --tm-spring: cubic-bezier(.34, 1.32, .64, 1);       /* respaldo: ligero rebote */
  --tm-spring-soft: cubic-bezier(.32, .72, 0, 1);     /* respaldo: sin rebote */
  --tm-track: rgba(11, 31, 58, .07);
  --tm-track-strong: rgba(11, 31, 58, .22);
}
html.dark { --tm-track: rgba(255, 255, 255, .09); --tm-track-strong: rgba(255, 255, 255, .24); }
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* muelle subamortiguado (zeta .72): rebasa ~4 % y se asienta */
    --tm-spring: linear(0, .006 1.5%, .022 3%, .052 4.8%, .097 6.8%, .166 9.3%, .276 12.8%, .505 19.8%, .618 23.5%, .706 26.8%, .782 30%, .846 33.3%, .899 36.5%, .944 40%, .981 43.8%, 1.008 47.8%, 1.026 52.3%, 1.037 57.8%, 1.037 65.3%, 1.006 94.3%, 1.003 99.8%, 1);
    /* muelle casi crítico (zeta .95): sin rebote */
    --tm-spring-soft: linear(0, .005 1.5%, .021 3.3%, .051 5.3%, .1 7.8%, .183 11.3%, .419 20.5%, .524 25%, .611 29.3%, .682 33.3%, .747 37.5%, .803 42%, .85 46.8%, .891 52%, .925 58%, .953 65%, .974 73.8%, .989 85.5%, .997 99.8%, 1);
  }
}

/* ================= KEYFRAMES (el estado final es implícito: el valor calculado del elemento) ================= */
@keyframes tm-fade-in { from { opacity: 0; } }
@keyframes tm-fade-out { to { opacity: 0; } }
@keyframes tm-sheet-in { from { opacity: 0; transform: scale(.94) translateY(14px); } }
@keyframes tm-sheet-out { to { opacity: 0; transform: scale(.97) translateY(6px); } }
@keyframes tm-pop-in { from { opacity: 0; transform: scale(.94) translateY(-4px); } }
@keyframes tm-pop-out { to { opacity: 0; transform: scale(.96); } }
@keyframes tm-view-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes tm-row-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes tm-tile-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes tm-bar-in { from { transform: scaleX(0); } }
@keyframes tm-msg-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes tm-label-in { from { opacity: 0; transform: translateX(-8px); } }
@keyframes tm-check-in { from { opacity: 0; transform: scale(.4); } }
@keyframes tm-focus { from { outline-offset: 7px; outline-color: transparent; } }
@keyframes tm-vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes tm-vt-in { from { opacity: 0; transform: translateY(14px); } }
/* el bundle trae modales centrados con animation: mjpop inline (rebote exagerado): dentro de la app los pasamos al movimiento Tahoe */
#root > div.h-screen [style*="mjpop"] { animation-name: tm-sheet-in !important; animation-duration: .55s !important; animation-timing-function: var(--tm-spring) !important; animation-fill-mode: backwards !important; }

/* ================= BARRA LATERAL ================= */
#root > div.h-screen aside.w-64 { transition: width .6s var(--tm-spring-soft); }
/* etiquetas: aparecen con desplazamiento corto al expandir (clase transitoria html.tm-sb-in puesta por tahoe-motion.js) */
html.tm-sb-in #root > div.h-screen aside.w-64 nav a .truncate,
html.tm-sb-in #root > div.h-screen aside.w-64 nav > div.px-2,
html.tm-sb-in #root > div.h-screen aside.w-64 > div:first-of-type > div,
html.tm-sb-in #root > div.h-screen aside.w-64 > div:last-child a > div,
html.tm-sb-in #root > div.h-screen aside.w-64 > div:last-child button .flex-1 { animation: tm-label-in .42s var(--tm-ease) .1s backwards; }
html.tm-sb-in.th-min #root > div.h-screen aside.w-64 > div:first-of-type > * { animation: tm-fade-in .28s var(--tm-ease) backwards; }
/* contraer: primero el ancho y las etiquetas se desvanecen (html.tm-sb-out), luego tahoe.js cambia a solo iconos */
html.tm-sb-out #root > div.h-screen aside.w-64 { width: var(--th-sb-min); }
html.tm-sb-out #root > div.h-screen aside.w-64 nav a .truncate,
html.tm-sb-out #root > div.h-screen aside.w-64 nav > div.px-2,
html.tm-sb-out #root > div.h-screen aside.w-64 > div:first-of-type > div,
html.tm-sb-out #root > div.h-screen aside.w-64 > div:last-child a > div,
html.tm-sb-out #root > div.h-screen aside.w-64 > div:last-child button .flex-1 { opacity: 0; transition: opacity .14s linear; }
html.tm-sb-out #root > div.h-screen aside.w-64 .th-toggle svg { transform: rotate(180deg); }
#root > div.h-screen .th-toggle svg { transition: transform .5s var(--tm-spring); }
#root > div.h-screen .th-toggle { transition: background-color .2s ease, transform .5s var(--tm-spring); }
/* enlaces: hover con icono que crece, pulsación con muelle */
#root > div.h-screen aside.w-64 nav a, #root > div.h-screen aside.w-64 > div:last-child a, #root > div.h-screen aside.w-64 > div:last-child button {
  transition: background-color .22s ease, transform .5s var(--tm-spring);
}
#root > div.h-screen aside.w-64 nav a > span.inline-flex, #root > div.h-screen aside.w-64 > div:last-child .inline-flex { transition: transform .5s var(--tm-spring); }
#root > div.h-screen aside.w-64 nav a:hover > span.inline-flex, #root > div.h-screen aside.w-64 > div:last-child button:hover > .inline-flex { transform: scale(1.1); }
#root > div.h-screen aside.w-64 nav a:active, #root > div.h-screen aside.w-64 > div:last-child a:active, #root > div.h-screen aside.w-64 > div:last-child button:active { transform: scale(.97); transition-duration: .12s, .12s; }
/* píldora activa que se desliza entre secciones (la crea tahoe-motion.js) */
#root > div.h-screen aside.w-64 nav { position: relative; }
#root > div.h-screen aside.w-64 nav > a, #root > div.h-screen aside.w-64 nav > div:not(.tm-nav-ind) { position: relative; z-index: 1; }
.tm-nav-ind {
  position: absolute; left: 8px; right: 8px; top: 0; height: 40px; z-index: 0; border-radius: 14px; pointer-events: none; opacity: 0;
  background: var(--th-active); box-shadow: inset 0 0 0 1px rgba(201, 169, 97, .38), 0 6px 14px -10px rgba(154, 126, 58, .6);
  transform: translate3d(0, 0, 0); transition: transform .6s var(--tm-spring), opacity .2s ease;
}
.tm-nav-ind::before { content: ""; position: absolute; left: 1px; top: 50%; height: 18px; width: 3px; margin-top: -9px; border-radius: 0 3px 3px 0; background: var(--th-gold); }
.tm-nav-ind.on { opacity: 1; }
.tm-nav-ind.tm-snap { transition: none; }
html.th-min #root > div.h-screen aside.w-64 .tm-nav-ind { left: 6px; right: 6px; }
html.th-min #root > div.h-screen aside.w-64 .tm-nav-ind::before { display: none; }
#root > div.h-screen aside.w-64 nav.tm-nav a.bg-cream, #root > div.h-screen aside.w-64 nav.tm-nav a.bg-cream:hover { background: transparent !important; box-shadow: none !important; }
#root > div.h-screen aside.w-64 nav.tm-nav a.bg-cream .absolute { opacity: 0; }

/* ================= BOTONES, TARJETAS, FILAS ================= */
/* pulsación y elevación con las propiedades individuales scale/translate: se componen con el transform de Tailwind
   (botones centrados con -translate-y-1/2, perillas, etc.) en lugar de pisarlo */
#root > div.h-screen button, #root > div.h-screen a.rounded-lg, #root > div.h-screen a.rounded-xl {
  transition: scale .5s var(--tm-spring), translate .5s var(--tm-spring), transform .5s var(--tm-spring), background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
#root > div.h-screen button.bg-navy:hover:not(:active):not(:disabled), #root > div.h-screen a.bg-navy:hover:not(:active),
#root > div.h-screen button.rounded-lg.border:hover:not(:active):not(:disabled), #root > div.h-screen a.rounded-lg.border:hover:not(:active) { translate: 0 -1px; }
#root > div.h-screen button:active:not(:disabled) { transform: none; }   /* la base Tahoe usa transform: scale(.985): lo sustituye la propiedad scale */
#root > div.h-screen button[class*="translate-"]:active:not(:disabled) { transform: translate(var(--tw-translate-x, 0px), var(--tw-translate-y, 0px)); }
#root > div.h-screen button:active:not(:disabled), #root > div.h-screen a.rounded-lg:active, #root > div.h-screen a.rounded-xl:active { scale: .97; transition-duration: .12s, .12s, .12s, .14s, .14s, .14s, .14s; }
/* tarjetas de métricas */
#root > div.h-screen .grid > .rounded-xl.border.p-4, #root > div.h-screen button.rounded-xl.border.p-4 { transition: translate .55s var(--tm-spring), scale .55s var(--tm-spring), transform .55s var(--tm-spring), border-color .2s ease, background-color .2s ease; }
#root > div.h-screen .grid > .rounded-xl.border.p-4:hover, #root > div.h-screen button.rounded-xl.border.p-4:hover:not(:active) { translate: 0 -2px; }
#root > div.h-screen button.rounded-xl.border.p-4:hover:active { scale: .98; }
#root > div.h-screen .grid > .rounded-xl.border.p-4 > span.inline-flex, #root > div.h-screen button.rounded-xl.border.p-4 > span.inline-flex { transition: transform .55s var(--tm-spring); }
#root > div.h-screen .grid > .rounded-xl.border.p-4:hover > span.inline-flex, #root > div.h-screen button.rounded-xl.border.p-4:hover > span.inline-flex { transform: scale(1.08) rotate(-4deg); }
/* filas y elementos de lista */
#root > div.h-screen main div.overflow-auto > div.grid.items-center, #root > div.h-screen main label.rounded-lg, #root > div.h-screen main .group.rounded-lg.cursor-pointer { transition: background-color .18s ease; }
#root > div.h-screen input:not([type=checkbox]):not([type=radio]), #root > div.h-screen select, #root > div.h-screen textarea { transition: border-color .22s ease, background-color .22s ease; }
/* interruptores (Usuarios/Configuración): la perilla viaja con transform y se estira al pulsar */
#root > div.h-screen button[aria-label^="toggle"] { transition: background-color .3s ease, transform .5s var(--tm-spring); }
#root > div.h-screen button[aria-label^="toggle"] > span { left: 2px !important; transform: translateX(0); transition: transform .5s var(--tm-spring); transform-origin: 0 50%; }
#root > div.h-screen button[aria-label^="toggle"].bg-emerald-500 > span { transform: translateX(16px); }
#root > div.h-screen button[aria-label^="toggle"]:active > span { transform: scaleX(1.25); }
#root > div.h-screen button[aria-label^="toggle"].bg-emerald-500:active > span { transform: translateX(12px) scaleX(1.25); transform-origin: 100% 50%; }
/* casillas de los filtros: el check entra con muelle */
#root > div.h-screen label > span.h-4.w-4 > svg { animation: tm-check-in .38s var(--tm-spring) backwards; }

/* ================= CONTROLES SEGMENTADOS Y PESTAÑAS (indicador deslizante) ================= */
.tm-seg:not(.sticky):not(.absolute):not(.fixed), .tm-tabs:not(.sticky):not(.absolute):not(.fixed) { position: relative; }
.tm-seg, .tm-tabs { isolation: isolate; }
#root > div.h-screen .tm-seg > button { position: relative; z-index: 1; background: none !important; background-color: transparent !important; box-shadow: none !important;
  transition: scale .5s var(--tm-spring), translate .5s var(--tm-spring), transform .5s var(--tm-spring), color .24s ease .1s, border-color .2s ease, opacity .2s ease; }
#root > div.h-screen .tm-seg > button:not(.bg-navy):hover { background-color: var(--th-hover) !important; }
#root > div.h-screen .tm-tabs > button { position: relative; z-index: 1; transition: scale .5s var(--tm-spring), translate .5s var(--tm-spring), transform .5s var(--tm-spring), color .24s ease .08s, border-color .2s ease, background-color .2s ease; }
#root > div.h-screen .tm-tabs > button.border-navy { border-bottom-color: transparent !important; }
.tm-ind { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; transform-origin: 0 50%; opacity: 0; transition: transform .6s var(--tm-spring), opacity .2s ease; }
.tm-ind.on { opacity: 1; }
.tm-ind.tm-snap { transition: none; }
.tm-ind-pill {
  border-radius: 7px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, var(--th-navy-2), var(--th-navy));
  background-color: var(--th-navy); box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 6px 12px -8px rgba(11, 31, 58, .8);
}
html.dark .tm-ind-pill { background-color: #284c83; }
.tm-ind-line { border-radius: 2px 2px 0 0; }
/* bandeja del control segmentado: el indicador viaja sobre ella (sin cambiar la maquetación: el anillo es un box-shadow estático) */
.tm-pills { width: fit-content; background: var(--tm-track); border-radius: 10px; box-shadow: 0 0 0 3px var(--tm-track); }
.tm-segb { background: var(--th-surface-3); }

/* ================= MODALES, HOJAS, MENÚS ================= */
/* telón: fundido (el desenfoque no se anima: solo la opacidad del telón) */
#root > div.h-screen .fixed.inset-0 > .absolute.inset-0:not([class*="transition-"]) { animation: tm-fade-in .34s var(--tm-ease) backwards; }
#root > div.h-screen .fixed.inset-0:not(:has(> .absolute.inset-0)) { animation: tm-fade-in .3s var(--tm-ease) backwards; }
/* hoja / panel: escala .94 → 1 con muelle desde el centro (los cajones con transition-transform no se tocan) */
#root > div.h-screen .fixed.inset-0 > :not(.absolute.inset-0):not([class*="transition-"]):not([class*="animate-"]) { animation: tm-sheet-in .55s var(--tm-spring) backwards; }
/* salida: tahoe-motion.js deja un fantasma del modal/menú recién cerrado y lo funde */
#root > div.h-screen .tm-ghost { pointer-events: none !important; }
#root > div.h-screen .tm-ghost.fixed > .absolute.inset-0 { animation: tm-fade-out .24s var(--tm-ease) forwards !important; }
#root > div.h-screen .tm-ghost.fixed:not(:has(> .absolute.inset-0)) { animation: tm-fade-out .24s var(--tm-ease) forwards !important; }
#root > div.h-screen .tm-ghost.fixed > :not(.absolute.inset-0) { animation: tm-sheet-out .24s var(--tm-ease) forwards !important; }
#root > div.h-screen .tm-ghost.absolute.shadow-xl { animation: tm-pop-out .16s var(--tm-ease) forwards !important; }
/* menús y popovers: aparecen desde su ancla */
#root > div.h-screen .absolute.shadow-xl:not(.tm-ghost) { animation: tm-pop-in .38s var(--tm-spring) backwards; transform-origin: top left; }
#root > div.h-screen .absolute.shadow-xl.right-0 { transform-origin: top right; }
#root > div.h-screen .absolute.shadow-xl.bottom-full, #root > div.h-screen .absolute.shadow-xl.bottom-0 { transform-origin: bottom left; }
/* velo móvil de la barra lateral */
html.th-open-m #root > div.h-screen aside.w-64 + main::after { animation: tm-fade-in .34s var(--tm-ease) backwards; }

/* ================= CAMBIO DE VISTA, LISTAS, MÉTRICAS ================= */
#root > div.h-screen .fade-in { animation: tm-view-in .5s var(--tm-ease) backwards; }
/* filas de tablas/listados: aparición escalonada de las 12 primeras */
#root > div.h-screen main div.rounded-xl > div.overflow-auto > div.grid.items-center:nth-child(-n+12), #root > div.h-screen main tbody tr:nth-child(-n+12) { animation: tm-row-in .4s var(--tm-ease) backwards; }
#root > div.h-screen main div.rounded-xl > div.overflow-auto > div.grid.items-center:nth-child(2), #root > div.h-screen main tbody tr:nth-child(2) { animation-delay: 20ms; }
#root > div.h-screen main div.rounded-xl > div.overflow-auto > div.grid.items-center:nth-child(3), #root > div.h-screen main tbody tr:nth-child(3) { animation-delay: 40ms; }
#root > div.h-screen main div.rounded-xl > div.overflow-auto > div.grid.items-center:nth-child(4), #root > div.h-screen main tbody tr:nth-child(4) { animation-delay: 60ms; }
#root > div.h-screen main div.rounded-xl > div.overflow-auto > div.grid.items-center:nth-child(5), #root > div.h-screen main tbody tr:nth-child(5) { animation-delay: 80ms; }
#root > div.h-screen main div.rounded-xl > div.overflow-auto > div.grid.items-center:nth-child(6), #root > div.h-screen main tbody tr:nth-child(6) { animation-delay: 100ms; }
#root > div.h-screen main div.rounded-xl > div.overflow-auto > div.grid.items-center:nth-child(7), #root > div.h-screen main tbody tr:nth-child(7) { animation-delay: 120ms; }
#root > div.h-screen main div.rounded-xl > div.overflow-auto > div.grid.items-center:nth-child(8), #root > div.h-screen main tbody tr:nth-child(8) { animation-delay: 140ms; }
#root > div.h-screen main div.rounded-xl > div.overflow-auto > div.grid.items-center:nth-child(9), #root > div.h-screen main tbody tr:nth-child(9) { animation-delay: 160ms; }
#root > div.h-screen main div.rounded-xl > div.overflow-auto > div.grid.items-center:nth-child(10), #root > div.h-screen main tbody tr:nth-child(10) { animation-delay: 180ms; }
#root > div.h-screen main div.rounded-xl > div.overflow-auto > div.grid.items-center:nth-child(11), #root > div.h-screen main tbody tr:nth-child(11) { animation-delay: 200ms; }
#root > div.h-screen main div.rounded-xl > div.overflow-auto > div.grid.items-center:nth-child(12), #root > div.h-screen main tbody tr:nth-child(12) { animation-delay: 220ms; }
/* tarjetas del panel: entrada escalonada; barras que crecen desde la izquierda */
#root > div.h-screen main .grid.grid-cols-2 > .rounded-xl.border { animation: tm-tile-in .55s var(--tm-ease) backwards; }
#root > div.h-screen main .grid.grid-cols-2 > .rounded-xl.border:nth-child(2) { animation-delay: 50ms; }
#root > div.h-screen main .grid.grid-cols-2 > .rounded-xl.border:nth-child(3) { animation-delay: 100ms; }
#root > div.h-screen main .grid.grid-cols-2 > .rounded-xl.border:nth-child(4) { animation-delay: 150ms; }
#root > div.h-screen main .grid.grid-cols-2 > .rounded-xl.border:nth-child(5) { animation-delay: 200ms; }
#root > div.h-screen .bg-ink-100.rounded.overflow-hidden > div.h-full { transform-origin: 0 50%; animation: tm-bar-in .9s var(--tm-ease) .12s backwards; }
#root > div.h-screen :nth-child(2) > .bg-ink-100.rounded.overflow-hidden > div.h-full { animation-delay: .17s; }
#root > div.h-screen :nth-child(3) > .bg-ink-100.rounded.overflow-hidden > div.h-full { animation-delay: .22s; }
#root > div.h-screen :nth-child(4) > .bg-ink-100.rounded.overflow-hidden > div.h-full { animation-delay: .27s; }
#root > div.h-screen :nth-child(5) > .bg-ink-100.rounded.overflow-hidden > div.h-full { animation-delay: .32s; }
#root > div.h-screen :nth-child(6) > .bg-ink-100.rounded.overflow-hidden > div.h-full { animation-delay: .37s; }
#root > div.h-screen :nth-child(7) > .bg-ink-100.rounded.overflow-hidden > div.h-full { animation-delay: .42s; }
#root > div.h-screen :nth-child(8) > .bg-ink-100.rounded.overflow-hidden > div.h-full { animation-delay: .47s; }
#root > div.h-screen :nth-child(9) > .bg-ink-100.rounded.overflow-hidden > div.h-full { animation-delay: .52s; }
#root > div.h-screen :nth-child(n+10) > .bg-ink-100.rounded.overflow-hidden > div.h-full { animation-delay: .57s; }
/* chat: cada mensaje nuevo asciende y se asienta */
#root > div.h-screen section .max-w-3xl.mx-auto.space-y-4 > div.flex.gap-3 { animation: tm-msg-in .5s var(--tm-ease) backwards; }

/* ================= FOCO ================= */
#root > div.h-screen :is(a, button, [role=tab], [tabindex]):focus-visible { outline: 2px solid var(--th-gold); outline-offset: 2px; animation: tm-focus .42s var(--tm-ease) backwards; }
#root > div.h-screen .tm-seg > button:focus-visible, #root > div.h-screen .tm-tabs > button:focus-visible { outline-offset: -2px; }

/* ================= TOOLTIP (barra colapsada) ================= */
.tm-tip {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; white-space: nowrap; padding: 6px 11px; border-radius: 10px;
  font: 600 12px/1.25 Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: var(--th-text);
  background: var(--th-surface-3); border: 1px solid var(--th-edge); box-shadow: var(--th-shadow-sm);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  opacity: 0; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(.92); transform-origin: left center;
  transition: opacity .16s ease, transform .4s var(--tm-spring);
}
.tm-tip.on { opacity: 1; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1); }
.tm-tip.tm-snap { transition: opacity .16s ease; }

/* ================= VIEW TRANSITIONS (cambio de sección y tema claro/oscuro) ================= */
html.tm-vt-nav #root > div.h-screen main { view-transition-name: tm-main; }
html.tm-vt-nav #root > div.h-screen .fade-in { animation: none !important; }
html.tm-vt-nav::view-transition-old(root), html.tm-vt-nav::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.tm-vt-nav::view-transition-group(tm-main) { animation-duration: .44s; animation-timing-function: var(--tm-ease); }
html.tm-vt-nav::view-transition-old(tm-main) { animation: tm-vt-out .44s var(--tm-ease) both; }
html.tm-vt-nav::view-transition-new(tm-main) { animation: tm-vt-in .44s var(--tm-ease) both; }
html.tm-vt-theme::view-transition-old(root), html.tm-vt-theme::view-transition-new(root) { animation-duration: .55s; animation-timing-function: var(--tm-ease); }

/* ================= INTERRUPTOR «Animaciones: Sí / No» (pie de la barra lateral, junto al botón de tema; lo crea tahoe-motion.js) ================= */
.tm-sw-row { position: relative; }
.tm-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--tm-track-strong); transition: background-color .25s ease; }
.tm-sw-k { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .5s var(--tm-spring); }
.tm-sw-row[aria-checked="true"] .tm-sw { background: var(--th-gold); }
.tm-sw-row[aria-checked="true"] .tm-sw-k { transform: translateX(14px); }
.tm-sw-row[aria-checked="false"] > span:first-child { opacity: .7; }
html.th-min #root > div.h-screen aside.w-64 .tm-sw { display: none; }

/* ================= PERFILES DE MOVIMIENTO (html[data-th-motion="full|soft|off"], lo fija tahoe-motion.js) =================
   full = todo lo anterior · off = sin animación (localStorage['tahoe-motion']='off', o html.th-static sin prefers-reduced-motion)
   soft = el sistema pide movimiento reducido (Windows con animaciones desactivadas) pero el usuario NO las apagó: tahoe.css base fuerza
   duraciones de .001 ms con !important bajo prefers-reduced-motion; aquí se reponen, con !important y más especificidad, solo las
   interacciones breves (hover/pulsación, modales, menús, indicadores, colapso de la barra), con distancias y duraciones cortas,
   sin escalonados ni View Transitions de pantalla completa. */
@keyframes tm-sheet-in-s { from { opacity: 0; transform: scale(.975) translateY(6px); } }
@keyframes tm-sheet-out-s { to { opacity: 0; transform: scale(.985); } }
@keyframes tm-pop-in-s { from { opacity: 0; transform: scale(.97); } }
@keyframes tm-view-in-s { from { opacity: 0; transform: translateY(4px); } }

html[data-th-motion="soft"] #root > div.h-screen aside.w-64 { transition: width .32s var(--tm-ease) !important; }
html[data-th-motion="soft"] #root > div.h-screen .th-toggle svg { transition: transform .26s var(--tm-ease) !important; }
html[data-th-motion="soft"] #root > div.h-screen .th-toggle { transition: background-color .16s ease, transform .2s var(--tm-ease) !important; }
html[data-th-motion="soft"] #root > div.h-screen aside.w-64 nav a, html[data-th-motion="soft"] #root > div.h-screen aside.w-64 > div:last-child a, html[data-th-motion="soft"] #root > div.h-screen aside.w-64 > div:last-child button { transition: background-color .18s ease, transform .2s var(--tm-ease) !important; }
html[data-th-motion="soft"] #root > div.h-screen aside.w-64 nav a > span.inline-flex, html[data-th-motion="soft"] #root > div.h-screen aside.w-64 > div:last-child .inline-flex { transition: transform .22s var(--tm-ease) !important; }
html.tm-sb-in[data-th-motion="soft"] #root > div.h-screen aside.w-64 nav a .truncate,
html.tm-sb-in[data-th-motion="soft"] #root > div.h-screen aside.w-64 nav > div.px-2,
html.tm-sb-in[data-th-motion="soft"] #root > div.h-screen aside.w-64 > div:first-of-type > div,
html.tm-sb-in[data-th-motion="soft"] #root > div.h-screen aside.w-64 > div:last-child a > div,
html.tm-sb-in[data-th-motion="soft"] #root > div.h-screen aside.w-64 > div:last-child button .flex-1 { animation: tm-fade-in .2s var(--tm-ease) .03s backwards !important; }
html.tm-sb-in.th-min[data-th-motion="soft"] #root > div.h-screen aside.w-64 > div:first-of-type > * { animation: tm-fade-in .16s var(--tm-ease) backwards !important; }
html.tm-sb-out[data-th-motion="soft"] #root > div.h-screen aside.w-64 nav a .truncate,
html.tm-sb-out[data-th-motion="soft"] #root > div.h-screen aside.w-64 nav > div.px-2,
html.tm-sb-out[data-th-motion="soft"] #root > div.h-screen aside.w-64 > div:first-of-type > div,
html.tm-sb-out[data-th-motion="soft"] #root > div.h-screen aside.w-64 > div:last-child a > div,
html.tm-sb-out[data-th-motion="soft"] #root > div.h-screen aside.w-64 > div:last-child button .flex-1 { transition: opacity .09s linear !important; }
html[data-th-motion="soft"] .tm-nav-ind, html[data-th-motion="soft"] .tm-ind { transition: transform .3s var(--tm-ease), opacity .16s ease !important; }
html[data-th-motion="soft"] .tm-nav-ind.tm-snap, html[data-th-motion="soft"] .tm-ind.tm-snap { transition: none !important; }
html[data-th-motion="soft"] #root > div.h-screen button, html[data-th-motion="soft"] #root > div.h-screen a.rounded-lg, html[data-th-motion="soft"] #root > div.h-screen a.rounded-xl { transition: scale .2s var(--tm-ease), translate .2s var(--tm-ease), transform .2s var(--tm-ease), background-color .16s ease, color .16s ease, border-color .16s ease, opacity .16s ease !important; }
html[data-th-motion="soft"] #root > div.h-screen button:active:not(:disabled), html[data-th-motion="soft"] #root > div.h-screen a.rounded-lg:active, html[data-th-motion="soft"] #root > div.h-screen a.rounded-xl:active { transition-duration: .09s, .09s, .09s, .12s, .12s, .12s, .12s !important; }
html[data-th-motion="soft"] #root > div.h-screen .tm-seg > button { transition: color .18s ease .06s, scale .2s var(--tm-ease), translate .2s var(--tm-ease), transform .2s var(--tm-ease), border-color .16s ease !important; }
html[data-th-motion="soft"] #root > div.h-screen .tm-tabs > button { transition: color .18s ease .05s, scale .2s var(--tm-ease), translate .2s var(--tm-ease), transform .2s var(--tm-ease), border-color .16s ease, background-color .16s ease !important; }
html[data-th-motion="soft"] #root > div.h-screen .grid > .rounded-xl.border.p-4, html[data-th-motion="soft"] #root > div.h-screen button.rounded-xl.border.p-4 { transition: translate .22s var(--tm-ease), scale .2s var(--tm-ease), transform .2s var(--tm-ease), border-color .16s ease, background-color .16s ease !important; }
html[data-th-motion="soft"] #root > div.h-screen .grid > .rounded-xl.border.p-4 > span.inline-flex, html[data-th-motion="soft"] #root > div.h-screen button.rounded-xl.border.p-4 > span.inline-flex { transition: transform .22s var(--tm-ease) !important; }
html[data-th-motion="soft"] #root > div.h-screen main div.overflow-auto > div.grid.items-center, html[data-th-motion="soft"] #root > div.h-screen main label.rounded-lg, html[data-th-motion="soft"] #root > div.h-screen main .group.rounded-lg.cursor-pointer { transition: background-color .14s ease !important; }
html[data-th-motion="soft"] #root > div.h-screen input:not([type=checkbox]):not([type=radio]), html[data-th-motion="soft"] #root > div.h-screen select, html[data-th-motion="soft"] #root > div.h-screen textarea { transition: border-color .16s ease, background-color .16s ease !important; }
html[data-th-motion="soft"] #root > div.h-screen button[aria-label^="toggle"] { transition: background-color .2s ease, transform .2s var(--tm-ease) !important; }
html[data-th-motion="soft"] #root > div.h-screen button[aria-label^="toggle"] > span { transition: transform .22s var(--tm-ease) !important; }
html[data-th-motion="soft"] .tm-sw { transition: background-color .18s ease !important; }
html[data-th-motion="soft"] .tm-sw-k { transition: transform .22s var(--tm-ease) !important; }
/* modales, hojas y menús: entrada y salida cortas */
html[data-th-motion="soft"] #root > div.h-screen .fixed.inset-0 > .absolute.inset-0:not([class*="transition-"]) { animation: tm-fade-in .2s var(--tm-ease) backwards !important; }
html[data-th-motion="soft"] #root > div.h-screen .fixed.inset-0:not(:has(> .absolute.inset-0)) { animation: tm-fade-in .18s var(--tm-ease) backwards !important; }
html[data-th-motion="soft"] #root > div.h-screen .fixed.inset-0 > :not(.absolute.inset-0):not([class*="transition-"]):not([class*="animate-"]) { animation: tm-sheet-in-s .26s var(--tm-ease) backwards !important; }
html[data-th-motion="soft"] #root > div.h-screen [style*="mjpop"] { animation-name: tm-sheet-in-s !important; animation-duration: .26s !important; animation-timing-function: var(--tm-ease) !important; animation-fill-mode: backwards !important; }
html[data-th-motion="soft"] #root > div.h-screen .tm-ghost.fixed > .absolute.inset-0:not([class*="transition-"]), html[data-th-motion="soft"] #root > div.h-screen .tm-ghost.fixed:not(:has(> .absolute.inset-0)) { animation: tm-fade-out .16s var(--tm-ease) forwards !important; }
html[data-th-motion="soft"] #root > div.h-screen .tm-ghost.fixed > :not(.absolute.inset-0):not([class*="transition-"]):not([class*="animate-"]) { animation: tm-sheet-out-s .16s var(--tm-ease) forwards !important; }
html[data-th-motion="soft"] #root > div.h-screen .tm-ghost.absolute.shadow-xl { animation: tm-pop-out .12s var(--tm-ease) forwards !important; }
html[data-th-motion="soft"] #root > div.h-screen .absolute.shadow-xl:not(.tm-ghost) { animation: tm-pop-in-s .18s var(--tm-ease) backwards !important; }
html.th-open-m[data-th-motion="soft"] #root > div.h-screen aside.w-64 + main::after { animation: tm-fade-in .2s var(--tm-ease) backwards !important; }
/* vista: solo un fundido breve con 4 px; sin escalonados de filas, tarjetas, barras ni mensajes */
html[data-th-motion="soft"] #root > div.h-screen .fade-in { animation: tm-view-in-s .22s var(--tm-ease) backwards !important; }
html[data-th-motion="soft"] #root > div.h-screen main div.rounded-xl > div.overflow-auto > div.grid.items-center, html[data-th-motion="soft"] #root > div.h-screen main tbody tr, html[data-th-motion="soft"] #root > div.h-screen main .grid.grid-cols-2 > .rounded-xl.border,
html[data-th-motion="soft"] #root > div.h-screen .bg-ink-100.rounded.overflow-hidden > div.h-full, html[data-th-motion="soft"] #root > div.h-screen section .max-w-3xl.mx-auto.space-y-4 > div.flex.gap-3, html[data-th-motion="soft"] #root > div.h-screen label > span.h-4.w-4 > svg { animation: none !important; }
html[data-th-motion="soft"] #root > div.h-screen :is(a, button, [role=tab], [tabindex]):focus-visible { animation: tm-focus .22s var(--tm-ease) backwards !important; }
html[data-th-motion="soft"] .tm-tip { transition: opacity .12s ease, transform .2s var(--tm-ease) !important; }
html[data-th-motion="soft"] .tm-tip.tm-snap { transition: opacity .12s ease !important; }
/* los indicadores de carga son información, no adorno: la base los congelaba bajo movimiento reducido */
html[data-th-motion="soft"] #root > div.h-screen .animate-spin { animation: spin 1s linear infinite !important; }

/* ================= PERFIL «off»: nada se anima ================= */
html[data-th-motion="off"] #root > div.h-screen *:not(.animate-spin), html[data-th-motion="off"] #root > div.h-screen *:not(.animate-spin)::before, html[data-th-motion="off"] #root > div.h-screen *:not(.animate-spin)::after { animation: none !important; transition: none !important; }
html[data-th-motion="off"] .tm-tip, html[data-th-motion="off"] .tm-ind, html[data-th-motion="off"] .tm-nav-ind, html[data-th-motion="off"] .tm-sw, html[data-th-motion="off"] .tm-sw-k { transition: none !important; }