/* ═══ Microinteracciones · #464 ════════════════════════════════════════════════
   UN sistema para todos los botones y controles. Se carga el último: aquí se
   decide cómo se pulsa, cómo se enciende/apaga y cómo confirma un guardado.
   Solo transform, opacity, clip-path y stroke-dashoffset; `background-color` solo
   en transiciones cortas. Nada cambia de tamaño ni de sitio (CLS 0).
   Lo que no puede saber el CSS (cuándo cambió un estado, cuándo aceptó el
   servidor) lo marca src/micro.js con `data-mi` y BotonAccion con `data-fase`. */

:root {
  --mi-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  --mi-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mi-press: 100ms;
  /* Valores de movimiento en UN sitio: con movimiento reducido pasan a `none`. */
  --mi-down: scale(0.97);
  --mi-fila: scale(0.992);
  --mi-lift: translateY(-1px);
  --mi-pop: scale(1.06);
}

/* ── 1. Pulsar: todo botón se hunde, con hover sutil ───────────────────────── */
.btn-primary, .btn-ghost, .btn-approve, .btn-reject, .btn-descartar, .chip, .icon-btn,
.snd-probar, .ptool, .fp-seg-b, .ficha-tab, .mt-seg button, .client-option, .btn-cruce,
.btn-salir, .toast-accion, .in-btn {
  transition: transform var(--mi-press) var(--mi-ease),
    background-color 160ms var(--mi-ease), color 160ms var(--mi-ease),
    opacity 160ms linear, filter 160ms var(--mi-ease);
}
button:not(:disabled):not(:is(.rh-card-btn, .ck-main, .mt-fila, .pl-card, .client-card,
  .tl-card-btn, .in-row-main, .pal-row, .lst-cab, .at-group-head, .ck-group-head, .wk-chip-t,
  .pl-client, .mt-kpi, .mt-carga-f, .ck-more, .lst-mas, .task-nav)):active,
a.btn-primary:active, .chip:active, .icon-btn:active {
  transform: var(--mi-down);
}
/* Filas largas (una lista entera es un botón): un hundimiento mucho más leve. */
:is(.ck-main, .mt-fila, .pl-card, .client-card, .tl-card-btn, .in-row-main, .pal-row, .lst-cab,
  .at-group-head, .ck-group-head, .wk-chip-t, .pl-client, .mt-kpi, .mt-carga-f, .ck-more,
  .lst-mas):not(:disabled):active {
  transform: var(--mi-fila);
}
@media (hover: hover) {
  .btn-primary:not(:disabled):hover, .btn-reject:not(:disabled):hover,
  .btn-descartar:not(:disabled):hover, .snd-probar:not(:disabled):hover { transform: var(--mi-lift); }
  .icon-btn:not(:disabled):hover { transform: var(--mi-pop); }
}
/* El hundimiento manda sobre el hover cuando se pulsa encima. */
.btn-primary:not(:disabled):active, .btn-reject:not(:disabled):active,
.btn-descartar:not(:disabled):active, .snd-probar:not(:disabled):active,
.icon-btn:not(:disabled):active, .btn-ghost:not(:disabled):active, .chip:active {
  transform: var(--mi-down);
}

/* ── 2. Encender y apagar: el indicador entra y sale ───────────────────────── */
/* Un solo relleno-capa por control (opacity + scale), en vez de cambiar el
   fondo del propio botón: entra al activarse y sale al revés al desactivarse. */
.chip, .fp-seg-b, .ficha-tab, .topnav button, .tab, .mt-seg button {
  position: relative; isolation: isolate;
}
.chip, .ficha-tab { --mi-pill: var(--cdp-black); --mi-inset: -1px; }
.fp-seg-b { --mi-pill: var(--cdp-purple-deep); --mi-inset: -1px; }
.topnav button { --mi-pill: var(--cdp-black); --mi-inset: 0px; }
.tab { --mi-pill: var(--text-1); --mi-inset: 0px; }
.mt-seg button {
  --mi-pill: var(--surface); --mi-inset: 0px;
  --mi-sombra: 0 1px 2px rgba(20, 24, 30, 0.08), 0 4px 10px -6px rgba(20, 24, 30, 0.18);
}
.chip::before, .fp-seg-b::before, .ficha-tab::before, .topnav button::before,
.tab::before, .mt-seg button::before {
  content: ""; position: absolute; inset: var(--mi-inset, 0px); z-index: -1; pointer-events: none;
  border-radius: inherit; background: var(--mi-pill); box-shadow: var(--mi-sombra, none);
  opacity: 0; transform: scale(0.84);
  transition: opacity 150ms linear, transform 240ms var(--mi-spring);
}
.chip.on::before, .fp-seg-b.on::before, .ficha-tab.on::before, .topnav button.on::before,
.tab.on::before, .mt-seg button[aria-pressed="true"]::before {
  opacity: 1; transform: none;
}
/* El fondo propio pasa a ser el de la capa. */
.chip.on, .fp-seg-b.on, .ficha-tab.on, .topnav button.on, .tab.on { background-color: transparent; }
.mt-seg button[aria-pressed="true"] { background-color: transparent; box-shadow: none; }
/* La pestaña de una ficha pintaba un subrayado propio: con la capa ya no hace falta. */
.ficha-tab::after { display: none; }

/* Pulso de confirmación (lo pone micro.js con data-mi un instante). */
@keyframes mi-on {
  0% { transform: scale(0.93); } 55% { transform: scale(1.06); } 100% { transform: scale(1); }
}
@keyframes mi-off {
  0% { transform: scale(1.035); } 50% { transform: scale(0.95); } 100% { transform: scale(1); }
}
[data-mi="on"] { animation: mi-on 380ms var(--mi-ease) both; }
[data-mi="off"] { animation: mi-off 300ms var(--mi-ease) both; }

/* Casilla de una opción de menú («Solo mías», «Donde superviso»): siempre
   presente, así que entra y sale con escala en vez de aparecer de golpe. */
[role="menuitemcheckbox"] .client-option-check {
  transition: opacity 140ms linear, transform 220ms var(--mi-spring);
}
[role="menuitemcheckbox"][aria-checked="false"] .client-option-check {
  opacity: 0; transform: scale(0.4);
}
.client-option-check { display: inline-block; }

/* Interruptores del panel de sonido: casilla nativa → interruptor. El fondo
   (capa morada) se funde y la bola se desplaza; al pulsar se estira un poco. */
.snd-fila input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; position: relative; flex: none;
  width: 40px; height: 24px; margin: 0; border-radius: 999px; cursor: pointer;
  background-color: var(--line-strong); isolation: isolate;
}
.snd-fila input[type="checkbox"]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: var(--cdp-purple); opacity: 0; transition: opacity 180ms linear;
}
.snd-fila input[type="checkbox"]::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--cdp-white); translate: 0 0; scale: 1 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: translate 220ms var(--mi-spring), scale 120ms var(--mi-ease);
}
.snd-fila input[type="checkbox"]:checked::before { opacity: 1; }
.snd-fila input[type="checkbox"]:checked::after { translate: 16px 0; }
.snd-fila input[type="checkbox"]:active::after { scale: 1.2 1; }
.snd-fila input[type="checkbox"]:checked:active::after { translate: 14px 0; }
.snd-fila input[type="checkbox"]:disabled { opacity: 0.45; cursor: not-allowed; }
/* El icono de la topbar (🔊/🔇) entra con un pequeño rebote al cambiar. */
.snd-ico { display: inline-block; }
.snd-ico.cambia { animation: mi-ico 320ms var(--mi-spring) both; }
@keyframes mi-ico { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ── 3. Guardar: ocupado → ✓ que se dibuja → vuelve (o tiembla si falla) ───── */
.ba { position: relative; isolation: isolate; }
.ba::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity 140ms linear;
  background: color-mix(in srgb, var(--st-aprobado, #2d9d6b) 74%, #000);
}
.ba[data-fase="ok"]::before, .ba[data-fase="err"]::before { opacity: 1; }
.ba[data-fase="err"]::before { background: color-mix(in srgb, var(--u-critica, #d33) 82%, #000); }
.ba[data-fase], .ba[data-fase]:hover { color: var(--cdp-white); }
/* Los dos textos comparten celda: el botón no cambia de ancho al confirmar. */
.ba-st { position: relative; display: inline-grid; align-items: center; justify-items: center; gap: inherit; }
.ba-t, .ba-ok {
  grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: inherit;
  transition: opacity 140ms linear, transform 220ms var(--mi-ease);
}
.ba-ok { opacity: 0; transform: translateY(55%); pointer-events: none; white-space: nowrap; }
.ba-ok svg { flex: none; }
.ba-ok svg path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 260ms var(--mi-ease) 90ms; }
.ba[data-fase="ok"] .ba-t { opacity: 0; transform: translateY(-55%); }
.ba[data-fase="ok"] .ba-ok { opacity: 1; transform: none; }
.ba[data-fase="ok"] .ba-ok svg path { stroke-dashoffset: 0; }
/* En «ok» el botón no se ve apagado aunque el formulario siga «ocupado». */
.ba[data-fase="ok"], .ba[data-fase="ok"]:disabled, .ba[data-fase="ok"]:disabled:hover,
.ba[data-fase="err"] { opacity: 1; cursor: default; }
@keyframes mi-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-5px); } 40% { transform: translateX(4px); }
  62% { transform: translateX(-3px); } 82% { transform: translateX(2px); }
}
.ba[data-fase="err"] { animation: mi-shake 380ms var(--mi-ease) both; }

/* ── 4. Cada cambio de dato resalta en su propio campo ─────────────────────── */
[data-campo], [data-paso] { position: relative; isolation: isolate; }
.mi-flash::before {
  content: ""; position: absolute; inset: -4px; z-index: -1; pointer-events: none;
  border-radius: 12px; opacity: 0;
  background: color-mix(in srgb, var(--cdp-purple) 24%, transparent);
  animation: mi-flash 1100ms ease-out both;
}
@keyframes mi-flash { 0% { opacity: 0; } 16% { opacity: 1; } 100% { opacity: 0; } }

/* ── Táctil: objetivos de 44 px ────────────────────────────────────────────── */
@media (pointer: coarse), (max-width: 640px) {
  .btn-approve, .btn-reject, .fp-seg-b, .snd-probar { min-height: 44px; }
  .btn-salir { min-width: 44px; min-height: 44px; }
  .ck-box { position: relative; }
  .ck-box::after { content: ""; position: absolute; inset: -13px; }
}

/* ── Movimiento reducido: sin escalas ni desplazamientos, solo fundidos ────── */
@media (prefers-reduced-motion: reduce) {
  :root { --mi-down: none; --mi-fila: none; --mi-lift: none; --mi-pop: none; }
  .chip::before, .fp-seg-b::before, .ficha-tab::before, .topnav button::before, .tab::before,
  .mt-seg button::before { transform: none; transition: opacity 160ms linear !important; }
  @keyframes mi-fade { 0% { opacity: 0.55; } 100% { opacity: 1; } }
  [data-mi], .ba[data-fase="err"], .snd-ico.cambia { animation: mi-fade 260ms linear both !important; }
  .ba-t, .ba-ok, .ba[data-fase="ok"] .ba-t, .ba[data-fase="ok"] .ba-ok {
    transform: none !important; transition: opacity 160ms linear !important;
  }
  .ba-ok svg path { transition: none !important; stroke-dashoffset: 0; }
  .ba::before, [role="menuitemcheckbox"] .client-option-check {
    transition: opacity 160ms linear !important;
  }
  [role="menuitemcheckbox"][aria-checked="false"] .client-option-check { transform: none; }
  .snd-fila input[type="checkbox"]::before { transition: opacity 160ms linear !important; }
  .snd-fila input[type="checkbox"]::after { transition: none !important; scale: 1 1 !important; }
  .mi-flash::before { animation-duration: 1100ms !important; }
}