/* Capa de movimiento · AURA-OS (la mitad de CSS; la que decide CUÁNDO es motion.js)
   ================================================================================
   Idéntica para todos los clientes y sin ningún color propio: el anillo, el foco y las sombras salen de las
   variables de marca de base.css. Todo se engancha a `mov-`, `data-mov` o `data-magnetico`: ninguna regla
   toca una etiqueta suelta. Referencia completa: docs/CAPA-DE-MOVIMIENTO.md

   CLAUDE.md §8.6: lo ESCONDIDO solo existe detrás de `html.mov-ok`, una clase que agrega el script cuando
   de verdad corre; sin ella (falló, lo bloquea una extensión) la página se ve entera. Y las reglas se apagan
   con «reducir movimiento» y con `en-pausa` / `quieto`. Solo se animan `transform` y `opacity` en lo que se
   mueve al hacer scroll; `box-shadow` y colores, solo en botones al tocarlos.
*/

/* La guarda de `hidden` (L17): cualquier `display` del autor le gana al
   atributo, y esta hoja la cargan vistas que esconden cosas con él. */
[hidden]{display:none!important}

/* ---------- Variables: el vocabulario común de movimiento y superficies ----
   Un panel y una cuenta que hablan el mismo idioma: las mismas tres duraciones,
   la misma curva, tres sombras y tres radios. Quien necesite una sombra o un
   radio usa estas variables y no inventa otro valor. */
:root{
  /* Curva de entrada: arranca decidida y frena suave (la que usa el sitio v2). */
  --mov-ease:cubic-bezier(.2,.7,.2,1);
  /* Curva de salida: lo que se va no se hace esperar. */
  --mov-ease-salida:cubic-bezier(.4,0,1,1);
  --mov-rapido:160ms;   /* micro: hover, foco, botón */
  --mov-medio:220ms;    /* un panel que se abre, el anillo que crece */
  --mov-lento:380ms;    /* una aparición: de 280 a 420 ms se lee como un gesto */

  /* Tres niveles de elevación. Un nivel por JERARQUÍA, no por gusto: 1 = reposo
     de una tarjeta, 2 = lo que responde al puntero, 3 = lo que flota (menús,
     hojas). El color de la sombra es el de la tinta, no negro puro. */
  --sombra-rgb:14,27,36;
  --sombra-1:0 1px 2px rgba(var(--sombra-rgb),.08),0 1px 1px rgba(var(--sombra-rgb),.05);
  --sombra-2:0 4px 14px rgba(var(--sombra-rgb),.12),0 1px 3px rgba(var(--sombra-rgb),.08);
  --sombra-3:0 16px 38px rgba(var(--sombra-rgb),.20),0 4px 10px rgba(var(--sombra-rgb),.10);

  /* Tres radios: 1 = controles (botones, campos), 2 = tarjetas, 3 = hojas. */
  --radio-1:6px;
  --radio-2:10px;
  --radio-3:16px;

  /* El anillo del cursor va por encima de todo MENOS de los modales: las
     fichas y el visor están en z-index 100, el asistente en 60 a 70. */
  --z-anillo:90;
}
/* En fondo oscuro una sombra tiene que ser más densa para notarse. Mismas dos
   puertas que base.css: el sistema pide oscuro y nadie fijó el claro. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --sombra-rgb:0,0,0;
  --sombra-1:0 1px 2px rgba(var(--sombra-rgb),.35),0 1px 1px rgba(var(--sombra-rgb),.25);
  --sombra-2:0 6px 18px rgba(var(--sombra-rgb),.42),0 1px 3px rgba(var(--sombra-rgb),.30);
  --sombra-3:0 18px 44px rgba(var(--sombra-rgb),.55),0 4px 12px rgba(var(--sombra-rgb),.35);
}}
:root[data-theme="dark"]{
  --sombra-rgb:0,0,0;
  --sombra-1:0 1px 2px rgba(var(--sombra-rgb),.35),0 1px 1px rgba(var(--sombra-rgb),.25);
  --sombra-2:0 6px 18px rgba(var(--sombra-rgb),.42),0 1px 3px rgba(var(--sombra-rgb),.30);
  --sombra-3:0 18px 44px rgba(var(--sombra-rgb),.55),0 4px 12px rgba(var(--sombra-rgb),.35);
}

/* ---------- Aparición: data-mov="rev" ---------------------------------------
   El contenido NACE VISIBLE. Solo cuando el script está corriendo (`mov-ok`)
   y nadie pidió quietud, lo que aún no apareció parte 14 px más abajo y
   transparente. El script le agrega `mov-visto` cuando entra a la pantalla, y
   `mov-hecho` cuando la transición terminó: ahí estas reglas dejan de aplicar
   y el elemento vuelve a mandar sus propias transiciones (si no, el retraso
   del escalonado quedaría pegado y su hover reaccionaría tarde). */
html.mov-ok:not(.en-pausa):not(.quieto) [data-mov="rev"]:not(.mov-hecho){
  transition:opacity var(--mov-lento) var(--mov-ease),
             transform var(--mov-lento) var(--mov-ease);
  transition-delay:var(--mov-d,0ms);
}
html.mov-ok:not(.en-pausa):not(.quieto) [data-mov="rev"]:not(.mov-visto){
  opacity:0;
  transform:translate3d(0,14px,0);
}

/* Mientras el script decide dónde va un elemento recién pintado, sus
   transiciones están apagadas (ver `registraRev` en motion.js). */
[data-mov="rev"].mov-nuevo{transition:none!important}

/* ---------- Números que cuentan: data-mov="cuenta" -------------------------
   El texto final ya está en el HTML; el script solo lo recorre desde cero.
   Cifras de ancho fijo SOLO mientras cuenta (`mov-contando`, que pone y quita el script), para que el
   número no vibre al crecer. Antes quedaban tabulares para siempre y la misma cifra se dibujaba
   distinta en dos secciones de la misma pantalla. */
.mov-contando{font-variant-numeric:tabular-nums}

/* ---------- Botones con tacto: .mov-tacto ----------------------------------
   Se levanta 1 px y gana sombra al pasar el mouse (solo con mouse: en el
   teléfono no existe «pasar por encima»), se hunde al presionar y responde
   igual con un dedo. `--mx` y `--my` son el empujón magnético que pone el
   script si el botón lleva `data-magnetico`; sin él valen 0. */
.mov-tacto,[data-magnetico]{
  transition:transform var(--mov-rapido) var(--mov-ease),
             box-shadow var(--mov-rapido) var(--mov-ease),
             background-color var(--mov-rapido) var(--mov-ease),
             border-color var(--mov-rapido) var(--mov-ease),
             color var(--mov-rapido) var(--mov-ease),
             filter var(--mov-rapido) var(--mov-ease);
}
@media (hover:hover) and (pointer:fine){
  .mov-tacto:hover:not(:disabled):not([aria-disabled="true"]){
    transform:translate3d(var(--mx,0px),calc(var(--my,0px) - 1px),0);
    box-shadow:var(--sombra-2);
  }
  [data-magnetico]:not(.mov-tacto):hover:not(:disabled){
    transform:translate3d(var(--mx,0px),var(--my,0px),0);
  }
}
.mov-tacto:active:not(:disabled):not([aria-disabled="true"]){
  transform:translate3d(var(--mx,0px),calc(var(--my,0px) + 1px),0) scale(.985);
  box-shadow:var(--sombra-1);
  transition-duration:80ms;
}

/* ---------- Foco: .mov-foco ------------------------------------------------
   Un anillo nítido de 2 px (lo que exige la accesibilidad, y sigue visible en
   el modo de alto contraste de Windows porque es un `outline`) más un halo
   suave de la marca. Aparece con el teclado, no con el clic del mouse. */
.mov-foco{
  outline:2px solid transparent;
  outline-offset:0;
  transition:outline-color var(--mov-rapido) var(--mov-ease),
             outline-offset var(--mov-rapido) var(--mov-ease),
             box-shadow var(--mov-rapido) var(--mov-ease);
}
.mov-foco:focus-visible{
  outline-color:var(--marca);
  outline-offset:3px;
  box-shadow:0 0 0 7px color-mix(in srgb,var(--marca) 16%,transparent);
}

/* ---------- Esqueleto de carga: .mov-esqueleto ------------------------------
   Reemplaza al «Cargando…» y, sobre todo, RESERVA el espacio: si el esqueleto
   tiene el alto de lo que va a llegar, nada salta cuando llega (CLS). El
   brillo es un `transform`, así que no cuesta layout. Ponle `aria-busy="true"`
   al contenedor mientras dura y quítaselo al terminar. */
.mov-esqueleto{
  position:relative;overflow:hidden;
  display:block;
  background:var(--sup-2,#eaf1f5);
  border-radius:var(--radio-1);
  color:transparent!important;
  pointer-events:none;user-select:none;
}
.mov-esqueleto>*{visibility:hidden}
.mov-esqueleto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tinta,#000) 8%,transparent),transparent);
  transform:translate3d(-100%,0,0);
  animation:mov-brillo 1.5s var(--mov-ease) infinite;
}
@keyframes mov-brillo{to{transform:translate3d(100%,0,0)}}
.mov-esqueleto--linea{height:.95em;margin-block:.45em}
.mov-esqueleto--titulo{height:1.5em;width:60%;margin-block:.35em}
.mov-esqueleto--bloque{min-height:6rem}
.mov-esqueleto--tarjeta{min-height:9rem;border-radius:var(--radio-2)}
.mov-esqueleto--circulo{aspect-ratio:1;border-radius:50%}

/* ---------- Cursor suave: el anillo -----------------------------------------
   Un acompañante decorativo: el cursor de verdad SIGUE VISIBLE (accesibilidad).
   Lo crea y lo mueve motion.js, solo con mouse (hover:hover y pointer:fine).
   `.mov-anillo` es el punto de anclaje (el script le pone el `translate3d`
   cada cuadro); `i` es el círculo, y es el que cambia de tamaño con una
   transición, así que mover y crecer no se pelean por el mismo `transform`. */
.mov-anillo{
  display:none;
  position:fixed;left:0;top:0;width:0;height:0;
  z-index:var(--z-anillo,90);
  pointer-events:none;
}
/* `will-change` solo mientras el anillo se mueve: el script pone `mov-mueve`
   al empezar y la quita cuando llegó. Tenerlo siempre reservaría memoria de
   video para algo que casi todo el tiempo está quieto. */
.mov-anillo.mov-mueve{will-change:transform}
@media (hover:hover) and (pointer:fine){.mov-anillo{display:block}}
.mov-anillo>i{
  position:absolute;left:-17px;top:-17px;width:34px;height:34px;
  box-sizing:border-box;
  border:1.5px solid var(--marca-2,var(--marca));
  border-radius:50%;
  background:transparent;
  opacity:0;
  transform:scale(var(--s,1));
  transition:transform var(--mov-medio) var(--mov-ease),
             opacity var(--mov-medio) var(--mov-ease),
             background-color var(--mov-medio) var(--mov-ease);
}
.mov-anillo.mov-on>i{opacity:.7}
/* sobre lo que se puede tocar: crece y se llena apenas de color */
.mov-anillo.mov-grande>i{--s:1.55;background:color-mix(in srgb,var(--marca-2,var(--marca)) 14%,transparent)}
/* sobre texto y campos: se afina, para no tapar lo que se lee */
.mov-anillo.mov-fino>i{--s:.5;opacity:.5}
.mov-anillo.mov-presionado>i{--s:.82}
.mov-anillo.mov-grande.mov-presionado>i{--s:1.3}

/* ---------- Quietud -----------------------------------------------------------
   Tres puertas que dicen lo mismo: el sistema pide menos movimiento, o la
   persona pulsó «Pausar animaciones» (`en-pausa`), o el sitio decidió `quieto`.
   Se quita el MOVIMIENTO, no la aparición: nada queda invisible. */
@media (prefers-reduced-motion:reduce){
  [data-mov="rev"]{opacity:1!important;transform:none!important;transition:none!important}
  .mov-anillo{display:none!important}
  .mov-tacto,[data-magnetico]{transform:none!important;transition-duration:.01ms!important}
  .mov-esqueleto::after{animation:none!important;display:none}
  .mov-foco{transition-duration:.01ms!important}
}
html.en-pausa [data-mov="rev"],html.quieto [data-mov="rev"]{
  opacity:1!important;transform:none!important;transition:none!important}
html.en-pausa .mov-anillo,html.quieto .mov-anillo{display:none!important}
html.en-pausa .mov-tacto,html.quieto .mov-tacto,
html.en-pausa [data-magnetico],html.quieto [data-magnetico]{
  transform:none!important;transition-duration:.01ms!important}
html.en-pausa .mov-esqueleto::after,html.quieto .mov-esqueleto::after{animation:none!important;display:none}

/* Un documento impreso no espera a nadie. */
@media print{
  [data-mov="rev"]{opacity:1!important;transform:none!important;transition:none!important}
  .mov-anillo{display:none!important}
}