/* Animaciones: 150 a 350 ms, solo transform y opacity (Glass en compu suma desenfoque en la entrada).
   Sin estilos inline: los retardos escalonados son clases (d0 a d6). prefers-reduced-motion las apaga todas. */
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes entra-glass { from { opacity: 0; transform: translateY(10px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes pantalla { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes crece-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes crece-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes despliega { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes despliega-sub { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes modal-caja { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes aviso-sale { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } }
@keyframes tilde { from { opacity: 0; transform: rotate(45deg) scale(0.4); } to { opacity: 1; transform: rotate(45deg) scale(1); } }
@keyframes fila-entra { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

/* Entrada escalonada de tarjetas (en Glass compu, de desenfocadas a nitidas) */
.entra { animation: entra 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.entra.d1 { animation-delay: 20ms; } .entra.d2 { animation-delay: 40ms; } .entra.d3 { animation-delay: 60ms; }
.entra.d4 { animation-delay: 80ms; } .entra.d5 { animation-delay: 100ms; } .entra.d6 { animation-delay: 100ms; }
@media (min-width: 761px) and (pointer: fine) { html[data-tema="glass"] .entra { animation-name: entra-glass; } }

/* Cambio de pantalla: View Transitions, o esta entrada simple donde no hay */
.pantalla-entra { animation: pantalla 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Numeros que cuentan: el texto real queda en el DOM (transparente) y el ::before muestra la cuenta */
.contando { position: relative; }
.contando > .cuenta-real { opacity: 0; }
.contando::before { content: attr(data-cuenta); position: absolute; left: 0; top: 0; white-space: nowrap; }
.oculto .contando::before { display: none; }

/* Graficos SVG que se dibujan */
svg.dib rect { transform-box: fill-box; transform-origin: 50% 100%; animation: crece-y 250ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
svg.dib rect:nth-of-type(even) { animation-delay: 40ms; }
svg.dib.progreso rect { transform-origin: 0 50%; animation-name: crece-x; animation-delay: 0s; }
svg.dib .barra-fondo { animation: none; }
svg.dib polyline, svg.dib polygon { transform-box: fill-box; transform-origin: 0 50%; animation: crece-x 250ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
svg.dib line:not(.eje) { animation: aparece 300ms 150ms both; }

/* Pastillas: la activa queda por encima mientras se desliza */
.seg { position: relative; }
.seg[aria-pressed="true"] { z-index: 1; }

/* Guardar: el texto se oculta y aparece un tilde */
.boton { position: relative; }
.boton.guardado { color: transparent; }
.boton.guardado::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 16px; margin: -12px 0 0 -4px;
  border: solid var(--onprimary); border-width: 0 3px 3px 0; transform: rotate(45deg); animation: tilde 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.fila-nueva { animation: fila-entra 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* Menu, modales y avisos */
.mas-panel { transform-origin: bottom center; animation: despliega 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.nav-sub.abre { transform-origin: top left; animation: despliega-sub 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.modal { animation: aparece 180ms ease both; }
.modal-caja { animation: modal-caja 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.aviso { animation: aviso-entra 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.aviso.saliendo { animation: aviso-sale 250ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.aviso-nuevo { display: flex; align-items: center; gap: 12px; }
.aviso-nuevo .boton-chico { color: var(--onprimary); border-color: var(--onprimary); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}