/* La barra de Blaeind y el movimiento del sistema. FUENTE ÚNICA: no copiar estas
   reglas a ninguna página.
   La portada y el admin la enlazan; las páginas que generan las funciones y el
   generador la inyectan inline, porque una entrega de cliente tiene que abrirse
   y guardarse como PDF sin depender de la red.
   Los valores salen de DESIGN-SYSTEM.md; cambiarlos acá los cambia en todas. */
.barra{
  position:sticky;top:0;z-index:50;
  background:#05012F;color:#fff;border-bottom:3px solid #C0F600;
}
.barra > .interior,
.barra.plana{
  display:flex;align-items:center;gap:16px;padding-block:18px;
  transition:padding .22s ease;
}
/* La barra respira más ancho que la columna de lectura, a propósito: alineada al mismo
   borde se veía apretada entre la marca y la acción. Es el único elemento del sitio que
   se sale de esa alineación. */
.barra > .interior{max-width:71.5rem}
/* Una barra que se compacta al hacer scroll: la portada la usa, las demás no. */
.barra.compacta > .interior{padding-block:10px}
.barra.plana{padding-inline:37px}
.marca{
  display:inline-flex;align-items:center;gap:10px;
  color:#C0F600;font:500 15px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;margin:0;
}
.glifo{width:24px;height:24px;flex:none;display:block}
/* La marca y su bajada se leen como una firma: el nombre arriba, la línea debajo y
   alineada bajo la palabra, no bajo el glifo. Cuando la barra se compacta al hacer
   scroll, la bajada se pliega —ya cumplió su trabajo en la primera pantalla— y la barra
   queda con lo que sirve para navegar. */
.identidad{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.tagline{
  font:11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;
  /* Pegada al logotipo, no debajo de él: el glifo mide 24px y la palabra tiene
     line-height 1, así que .marca ya deja unos 5px de aire bajo el texto. Un margen
     generoso encima de ese aire despega la bajada y deja de leerse como una firma. */
  color:#8E90A8;white-space:nowrap;margin-top:1px;margin-left:34px;
  max-height:1.1em;overflow:hidden;
  transition:opacity var(--mov) var(--curva),max-height var(--mov) var(--curva),
             margin-top var(--mov) var(--curva);
}
.barra.compacta .tagline{opacity:0;max-height:0;margin-top:0}
/* La portada pliega la bajada con JS, porque ya tiene un handler de scroll para compactar
   la barra. Las entregas no llevan JS a propósito —se guardan como PDF desde el disco— así
   que ahí el plegado lo hace el propio scroll del documento. Donde el navegador no soporte
   la línea de tiempo de scroll, la bajada se queda visible, que es como estaba antes. */
@supports (animation-timeline:scroll()){
  .tagline{animation:plegar-bajada linear both;animation-timeline:scroll();animation-range:0 90px}
}
@keyframes plegar-bajada{to{opacity:0;max-height:0;margin-top:0}}
.barra .derecha{margin-left:auto}
@media(max-width:640px){
  /* La bajada estaba escondida en teléfono, que es donde más se entra. Cabe: va bajo el
     logotipo y no compite por el ancho de la fila. Se pliega igual al hacer scroll. */
  .tagline{font-size:10px;margin-left:32px}
  /* En la entrega, a la derecha va «Imprimir / guardar PDF», que a 360px no cabe en la
     misma fila que el logotipo: flex lo partía en dos líneas y le comía la bajada. Con
     el texto entero y la fila envolviendo, el botón baja a una segunda línea completo.
     En la portada la fila cabe de sobra y esto no hace nada. */
  .barra > .interior{flex-wrap:wrap}
  .barra .derecha{white-space:nowrap}
  .barra > .interior,.barra.plana{padding-block:14px}
  .barra.plana{padding-inline:23px}
}
@media print{
  .barra{position:static;background:#fff;color:#05012F;border-bottom-color:#DEDFE8}
  .barra > .interior,.barra.plana{padding-block:8px}
  .tagline{display:none}
}

/* ---------------------------------------------------------------- movimiento

   La familia de glifos está construida con solo rectas y diagonales, sin una
   sola curva, y eso también es vocabulario de movimiento: nada de rebotes, de
   escalas que saltan ni de rotaciones. Traslaciones en un eje, bordes que
   crecen, color que cambia. Curva de aceleración geométrica, salida limpia.

   Va acá y no en cada página porque el movimiento es marca: si la portada se
   siente distinta de la entrega, el cliente entró a otro sitio. Lo que vive
   acá es solo CSS, sin depender de JS ni de red: las entregas se guardan como
   PDF desde el disco. El scroll y las cifras que cuentan son de la portada. */
:root{
  --mov-rapido:.16s;
  --mov:.28s;
  --curva:cubic-bezier(.2,.6,.15,1);
}
a,button,summary{
  transition:color var(--mov-rapido) var(--curva),
             background-color var(--mov-rapido) var(--curva),
             border-color var(--mov-rapido) var(--curva),
             opacity var(--mov-rapido) var(--curva);
}
/* El foco es navy sobre fondo claro y lima sobre navy: el lima contra el papel
   da 1,20 de contraste y un anillo de 2px sería un anillo invisible. */
:focus-visible{outline:2px solid #05012F;outline-offset:2px;border-radius:0}
.barra :focus-visible{outline-color:#C0F600}
.barra .marca:hover .glifo,
.barra .marca:focus-visible .glifo{transform:translateX(2px)}
.glifo{transition:transform var(--mov) var(--curva)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  /* Una animación atada al scroll no se apaga acortando su duración: sin timeline propia
     saltaría al estado final y la bajada quedaría oculta siempre. */
  .tagline{animation:none !important}
}
@media print{
  *,*::before,*::after{transition:none !important;animation:none !important}
}