/* Hoja base de /app/, trozo 06 — su index enlaza los trozos en orden, y la cascada depende de él. */
/* ===== F16 P2A — CONTRATO CON MOTION (portada) ===== */
/* ==================================================================================================
   F16 P2A — MOVIMIENTO CON MOTION: lo que la hoja tiene que CEDER, y lo que sigue siendo suyo.
   --------------------------------------------------------------------------------------------------
   Todo lo de aquí abajo cuelga de una sola clase, `con-motion`, que animacion.js pone en <html>
   cuando —y solo cuando— se cumplen las dos condiciones a la vez:

       window.Motion existe   Y   prefers-reduced-motion NO es «reduce»

   Sin esas dos, la clase no está y NINGUNA de estas reglas se aplica: el movimiento de P1 vuelve a
   ser el único que hay, intacto, y la app se ve y se usa exactamente igual. Esa es la razón de que
   el bloque entero esté escrito como una CESIÓN condicional en vez de como una reescritura — que
   el motor de terceros no cargue, o que alguien pida menos movimiento, no puede dejar esta
   interfaz peor de lo que P1 la dejó.

   La clase se sincroniza EN VIVO con matchMedia: activar «reducir movimiento» a mitad de sesión
   devuelve el mando a esta hoja en el acto, sin recargar.

   POR QUÉ HAY QUE APAGAR LO DE P1 Y NO BASTA CON SUPERPONER: dos animaciones sobre la misma
   propiedad se pelean, y la que gana no es la que se eligió sino la que dice la cascada. Una pieza
   entrando dos veces —una por keyframes y otra por Motion— es un parpadeo, y un parpadeo sobre una
   tarjeta de acción es ruido justo donde hace más daño.

   LO QUE **NO** CEDE LA HOJA, y por qué:
     · El fondo del diálogo (`.paleta[open]::backdrop`). Es un fundido plano de llegada y los
       pseudo-elementos no son terreno de una librería de DOM. Se queda donde está.
     · El latido del esqueleto de carga. Es un bucle, y un bucle solo se justifica mientras se
       espera un dato; no lo conduce nadie más.
     · TODO el color. Ni una regla de aquí abajo toca un color, un borde ni un contraste: el
       movimiento no puede cambiar lo que una pieza AFIRMA, solo llamar la atención sobre ella.
       Los contrastes medidos en P1 siguen siendo los de P1, exactos.
   ================================================================================================== */

/* ---- 1 y 2 · la entrada de las piezas del hilo -------------------------------------------------
   Cede el escalonado por :nth-child entero. Motion escalona con `delay` por elemento (28 ms, seis
   como mucho) y las piezas que llegan en vivo entran con retraso CERO, esté donde esté.
   Los tres selectores repiten los de arriba a propósito: `.tiempo > .nace` es (0,2,0) igual que
   `.tiempo > *`, así que sin nombrarlo el apagado no lo alcanzaría por orden pero sí quedaría
   atado a él — y un apagado que depende del orden de dos reglas iguales se rompe el día que
   alguien mueva un bloque. Nombrados, ganan por especificidad y no por suerte. */
.con-motion .tiempo > *,
.con-motion .tiempo > .nace,
.con-motion .tiempo > .ya-puesta { animation: none; }

/* ---- 3 · el despliegue de una tarjeta ----------------------------------------------------------
   La clase `.desplegando` sigue siendo de la hoja para lo que es suyo —recorte mientras crece y el
   will-change acotado, que se va con la clase— y cede SOLO la transición. Tiene que ceder: en la
   cascada una transición en curso gana a una animación, así que dejarla puesta no sería una
   redundancia inofensiva, sería el resorte pintado por encima de una bézier. */
.con-motion .tarjeta.desplegando { transition: none; }

/* ---- 4 · popover de «/» y paleta ---------------------------------------------------------------
   Ceden la animación de entrada y, con ella, el `transform-origin`: animacion.js lo calcula para
   el popover de «/» (la columna del cursor en el cajón, que es de donde sale de verdad) y lo deja
   en manos de esta hoja para la paleta, porque a la paleta la invoca ⌘K y un atajo de teclado no
   tiene punto en la pantalla. No se le inventa un origen que no existe.
   El `::backdrop` NO cede: sigue siendo el fundido plano de arriba. */
.con-motion .sugerencias:not([hidden]),
.con-motion .paleta[open],
/* F20 — los dos paneles nuevos ceden igual. El menú del «+» tenía la curva de 120 ms de esta
   hoja y ahora lo conduce un resorte que sale del propio botón; la búsqueda no tenía nada. En la
   cascada, una animación de la hoja y otra de Motion sobre el mismo elemento compiten, así que
   la hoja se aparta cuando hay motor — y se queda como está cuando no lo hay. */
.con-motion .adj-menu:not([hidden]),
.con-motion #busca-hilo:not([hidden]) { animation: none; }

/* ---- 5 · la barra lateral ----------------------------------------------------------------------
   Cede la transición ENTERA, las dos propiedades: el margen (o el transform en móvil) porque lo
   conduce el resorte, y `visibility` porque su tiempo lo marca ahora la animación y no un plazo
   fijo — con la transición puesta, la barra seguía visible 180 ms después de haber terminado de
   irse, y una barra fuera de pantalla que todavía es `visible` sigue siendo alcanzable con el
   tabulador. Eso no es un adorno de más: es un fallo de accesibilidad.

   `animando` la pone y la quita animacion.js alrededor del resorte, y hace UNA sola cosa: mantener
   la barra visible mientras se va. Sin ella, `visibility: hidden` entra en el primer fotograma y
   el recorrido se corta en seco. */
.con-motion .lateral { transition: none; }
.con-motion .lateral.oculta.animando { visibility: visible; }

/* ---- 6 · la insignia que cambió de estado ------------------------------------------------------
   El pulso sube de 1.06 a 1.12 por decisión del operador en P2A. Se redefinen los keyframes en vez
   de añadir una regla `.con-motion` porque el pulso tiene que ser EL MISMO por las dos vías: es
   una frase —«esto de aquí es lo que cambió»— y una frase no se dice más alto según qué ficheros
   hayan cargado. Un mismo nombre de @keyframes declarado dos veces se queda con el último, así que
   esta sustituye a la de arriba para todo el documento.
   Sigue sin pasarse: 1.12 se ve sin discusión y no llega a leerse como un juguete. Y sigue sin
   tocar ni un color — el color YA dice el estado nuevo, y cruzarlo desde el viejo pintaría medio
   segundo de un estado que no existe. */
@keyframes pulso-insignia {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ---- 7 · la vista de acciones, al entrar en pantalla -------------------------------------------
   No hay nada que ceder aquí (P1 no animaba esta vista), pero sí un seguro que poner.
   animacion.js atenúa a 0 las tarjetas que están FUERA de la pantalla y las destapa al llegar a
   ellas. Al imprimir no hay pantalla, no hay desplazamiento y no hay observador que se dispare:
   sin esta regla, un historial impreso saldría con las tarjetas de más abajo en blanco. Que un
   registro de acciones se imprima incompleto y con aspecto de estar completo es exactamente el
   fallo que este proyecto no se permite, así que va con !important — es el único modo de que una
   hoja gane a un estilo en línea, y aquí ganar es obligatorio. */
@media print {
  .vista-cuerpo > * { opacity: 1 !important; transform: none !important; }
}

/* ---- movimiento reducido ------------------------------------------------------------------------
   No hay bloque nuevo, y esa ausencia es la decisión: bajo `prefers-reduced-motion: reduce` la
   clase `con-motion` NO se pone, así que ninguna regla de esta sección existe, animacion.js no
   anima nada y manda entero el @media de P1 — transformaciones apagadas, fundidos de llegada
   intactos. Un solo interruptor y un solo sitio donde se apaga todo; dos habrían acabado
   discrepando, y el que se olvidara sería el que se ve.
   ================================================================================================== */

/* ---- adjuntos en el cajón (F17) --------------------------------------------------------------
   Fichas que esperan mientras escribes, como en las apps actuales. Antes la subida se contaba en
   turnos del hilo y el archivo se mandaba solo: el hilo no es un registro de subidas, y un
   adjunto que ya voló no puede acompañar al mensaje que aún no has escrito. */
.adj-cola {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  max-width: var(--ancho-prosa, 820px); margin: 0 auto var(--e2);
}
.adj-cola[hidden] { display: none; }
.adj-ficha {
  position: relative; display: flex; align-items: center; gap: var(--e2);
  background: var(--elevada); border: var(--filete, 1px) solid var(--borde);
  border-radius: var(--r-control, 10px); padding: var(--e2) var(--e3);
  max-width: 320px; overflow: hidden;
}
/* El carril del margen, como el resto del sistema: el estado se marca, no se tiñe la ficha. */
.adj-ficha::after {
  content: ''; position: absolute; left: 0; top: var(--e1); bottom: var(--e1);
  width: 3px; border-radius: 0 3px 3px 0; background: var(--tinta-apagada);
}
.adj-ficha.subiendo::after { background: var(--acento); }
.adj-ficha.con-error::after { background: var(--mal); }
.adj-ficha-cuerpo { display: flex; flex-direction: column; min-width: 0; padding-left: var(--e1); }
.adj-nombre {
  font-size: var(--t-sm, 13px); font-weight: 600; color: var(--tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adj-sub {
  font-size: var(--t-xs, 11.5px); color: var(--tinta-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adj-ficha.con-error .adj-sub { color: var(--mal); white-space: normal; }
/* «Se ve rara» es de la RUTA, no del estado de la subida: una ruta sospechosa que subió bien
   sigue siendo sospechosa, y se dice en su propio sitio. */
/* --desconocido y no --alerta: la ruta la juzga el servidor (regla 2 de la sección de adjuntos, 03). */
.adj-rara { font-size: var(--t-xs, 11.5px); color: var(--desconocido); white-space: normal; }
.adj-quitar {
  flex: 0 0 auto; border: 0; background: transparent; color: var(--tinta-suave);
  cursor: pointer; font-size: 13px; line-height: 1; padding: var(--e1) var(--e2);
  border-radius: var(--r-menudo, 6px); min-width: 28px; min-height: 28px;
}
.adj-quitar:hover { background: var(--hundida); color: var(--tinta); }


/* ===== RUEDA DE PROGRESO (F17, portada) ===== */
/* ---- rueda de progreso de una subida (F17) — misma pieza que en /ui/ ------------------------ */
.adj-anillo { width: 18px; height: 18px; flex: 0 0 auto; }
.adj-anillo-pista,
.adj-anillo-arco { fill: none; stroke-width: 2; }
.adj-anillo-pista { stroke: var(--linea, rgba(127,127,127,.28)); }
.adj-anillo-arco {
  stroke: var(--acento, #4f8cff);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset .18s linear;
}
.adj-anillo[data-indeterminado] { animation: adj-girar 1s linear infinite; }
.adj-anillo[data-indeterminado] .adj-anillo-arco { transition: none; }
@keyframes adj-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .adj-anillo[data-indeterminado] { animation: none; }
  .adj-anillo-arco { transition: none; }
}