/* =====================================================================
   MiesApp — MICRO-INTERACCIONES (Nivel 1)
   Animaciones livianas, disparadas por estado (tap / cambio), one-shot.
   Solo transform/opacity (compositan en GPU, no reflow). Aislado: si algo
   de acá falla, la app base sigue. Ver js/micro.js para el pill y el ring.
   Todo respeta prefers-reduced-motion (bloque al final).
   ===================================================================== */

/* -------- 1. Tap squish (feedback al tocar) -------------------------- */
/* transición corta de transform; el :active escala apenas. */
.ghostbtn, .dangerbtn, .bigopt, .tab, .seg button, .chip, .fab, .bk,
.ficha-cc-btn, .ficha-cc-btn2, .fses-fac, .sheet-x, .hc3,
.cfg-item, .cfg-menu-item, .prow, .cta-card, .qbtn, .primary {
  transition: transform .13s cubic-bezier(.34, 1.4, .64, 1);
}
.ghostbtn:active, .dangerbtn:active, .bigopt:active, .tab:active,
.seg button:active, .chip:active, .fab:active, .bk:active,
.ficha-cc-btn:active, .ficha-cc-btn2:active, .fses-fac:active,
.sheet-x:active, .hc3:active, .cfg-item:active, .cfg-menu-item:active,
.qbtn:active, .primary:active { transform: scale(.95); }
/* filas de lista: squish más sutil (son grandes) */
.prow:active, .cta-card:active { transform: scale(.985); }

/* -------- 2. Checkboxes: pop al marcar ------------------------------- */
input[type="checkbox"] { transition: transform .15s cubic-bezier(.34, 1.5, .64, 1); }
input[type="checkbox"]:active { transform: scale(.86); }
input[type="checkbox"]:checked { animation: mi-chkpop .28s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes mi-chkpop {
  0% { transform: scale(.7); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* -------- 3. Iconos de estado de sesión: entrada con resorte -------- */
/* Corre al insertarse la fila (innerHTML). Barato: solo el ícono. */
.cta-ico { animation: mi-icopop .3s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes mi-icopop {
  0% { transform: scale(.55); opacity: .3; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* -------- 4. Botón facturar: pop al pasar a "facturada" ------------- */
.fses-fac.on { animation: mi-facpop .34s cubic-bezier(.34, 1.6, .64, 1); }
@keyframes mi-facpop {
  0% { transform: scale(.7); }
  55% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* -------- 5. Segmentado con píldora deslizante (.tabbar) ------------ */
/* La píldora la posiciona js/micro.js (clase .has-pill). Sin JS, cae al
   estilo .tab.sel de siempre (fallback seguro). */
.tabbar.has-pill { position: relative; }
.tabbar.has-pill .mi-pill {
  position: absolute; left: 0; top: 0; z-index: 0;
  background: var(--bg);
  border-radius: var(--rad-xs);
  box-shadow: var(--sh-tab);
  transition: transform .3s cubic-bezier(.32, .72, 0, 1), width .3s cubic-bezier(.32, .72, 0, 1);
  will-change: transform, width;
  pointer-events: none;
}
.tabbar.has-pill .mi-pill.mi-hide { opacity: 0; }
.tabbar.has-pill .mi-pill.mi-noanim { transition: none; }
/* Con píldora, el .sel no lleva su propio fondo (lo pone la píldora); se
   mantiene color y peso del texto por encima. */
.tabbar.has-pill .tab { position: relative; z-index: 1; }
.tabbar.has-pill .tab.sel { background: none; box-shadow: none; }

/* .seg (frecuencia): sin píldora, pero que el color deslice suave */
.seg button { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .13s cubic-bezier(.34, 1.4, .64, 1); }

/* -------- 6. Toast: entra deslizando desde abajo -------------------- */
/* El centrado usa translateX(-50%); combinamos con translateY para el slide.
   js/micro.js maneja el estado de entrada (observa el display). */
#toast { transition: transform .26s cubic-bezier(.32, .72, 0, 1), opacity .2s ease; }
#toast.mi-toast-enter { transform: translateX(-50%) translateY(16px); opacity: 0; }
#toast.mi-toast-noanim { transition: none; }

/* -------- 7. Campana: "ring" al entrar un aviso nuevo --------------- */
/* js/micro.js agrega .mi-ring al .bell-btn cuando sube el contador. */
.bell-btn.mi-ring [data-ico="bell"], .bell-btn.mi-ring svg {
  transform-origin: 50% 15%;
  animation: mi-ring .7s ease;
}
@keyframes mi-ring {
  0% { transform: rotate(0); }
  15% { transform: rotate(16deg); }
  30% { transform: rotate(-13deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
  100% { transform: rotate(0); }
}
.bell-btn.mi-ring .bell-badge { animation: mi-badgepop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes mi-badgepop {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* -------- 8. Entrada del inicio: fade + rise (stagger por JS) ------- */
/* js/vistas.js (homeEntrada) agrega .mi-in y setea animationDelay por índice.
   'both' mantiene el estado inicial (invisible) hasta que llega su delay. */
@keyframes mi-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mi-in { animation: mi-rise .44s cubic-bezier(.22, .61, .36, 1) both; }

/* -------- 9. Skeleton de carga (reemplaza "Cargando…") ------------- */
/* Solo se ve si los datos no llegaron dentro del splash (red lenta). Bloques
   gris claro con un brillo que barre. Bajo reduced-motion quedan estáticos. */
.sk { position: relative; overflow: hidden; background: var(--surf); border-radius: 8px; }
.sk::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  animation: mi-shimmer 1.2s infinite;
}
@keyframes mi-shimmer { 100% { transform: translateX(100%); } }
.sk-big { height: 30px; width: 55%; margin: 4px 0 10px; }
.sk-sm  { height: 12px; width: 40%; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; }
.sk-ico { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; }
.sk-tx  { height: 12px; flex: 1; }
.sk-amt { width: 54px; height: 12px; flex: 0 0 auto; }

/* -------- 8b. Inicio "en espera" mientras el splash tapa ----------- */
/* homeEntrada agrega .mi-hold al #s-home hasta que el splash se va del todo, así
   la cascada NO corre tapada por el splash (se vería a medias). Al sacarla,
   homeAnimPlay anima sobre el DOM ya visible. */
#s-home.mi-hold .home-widgets,
#s-home.mi-hold #home-welcome { opacity: 0; }

/* -------- 10. Transición de pantalla (fade al navegar) ------------- */
/* Cada .scr que se enciende hace un fade corto. SOLO opacidad → no rompe
   position:sticky/fixed de los headers ni las tabbars. Barato (compositor). */
@keyframes mi-scr { from { opacity: 0; } to { opacity: 1; } }
.scr.on { animation: mi-scr .2s ease both; }

/* -------- Accesibilidad: respetar "menos movimiento" --------------- */
@media (prefers-reduced-motion: reduce) {
  .cta-ico, .fses-fac.on, input[type="checkbox"]:checked,
  .bell-btn.mi-ring [data-ico="bell"], .bell-btn.mi-ring svg,
  .bell-btn.mi-ring .bell-badge { animation: none !important; }
  .tabbar.has-pill .mi-pill, #toast { transition: none !important; }
  .ghostbtn:active, .dangerbtn:active, .bigopt:active, .tab:active,
  .seg button:active, .chip:active, .fab:active, .bk:active,
  .ficha-cc-btn:active, .ficha-cc-btn2:active, .fses-fac:active,
  .sheet-x:active, .hc3:active, .cfg-item:active, .cfg-menu-item:active,
  .qbtn:active, .primary:active, .prow:active, .cta-card:active,
  input[type="checkbox"]:active { transform: none !important; }
}