/* mimi · la capa de MARCA
 *
 * La cargan las DOS páginas —el registro y «cómo funciona»— y es lo único que comparten además del
 * selector de idioma. Lo que vive acá es lo que tiene que verse y moverse igual en toda la app; lo
 * que es de una pantalla sola se queda en su hoja.
 *
 * ── Por qué existe ──
 * `consola.css` decía, textual, que sus tokens estaban duplicados del blueprint de la otra página y
 * que el día que hubiera un TERCER consumidor se extraían. Ese día llegó: la superficie de la marca
 * la usan el fondo del login y las barras superiores de las dos páginas. Escrita tres veces, la
 * primera vez que alguien ajusta el degradado en una, dejan de ser el mismo producto.
 *
 * ── Qué NO se mudó, y por qué ──
 * La paleta neutra (`--bg`, `--text`, `--line`…) sigue en cada hoja. No es olvido: la página pública
 * convive con una escala propia para su navegación OSCURA (`--side-*`) que solo tiene sentido allá, y
 * unificar los neutros a medias deja medio sistema en un archivo y medio en otro — peor que tenerlo
 * completo en dos. Se muda cuando se mude la escala entera.
 *
 * ── El movimiento es una decisión de marca, no un detalle de cada regla ──
 * Antes cada hoja inventaba lo suyo: `140ms ease` acá, `200ms cubic-bezier(.4,0,.2,1)` allá. Dos
 * pantallas del mismo producto que se mueven distinto se sienten como dos productos.
 */

:root {
  /* ── El degradado de la marca ─────────────────────────────────────────────
     Tres focos y una base. El azul entra por arriba a la izquierda, el lavanda
     por la derecha, y el rosa apoya abajo. Los valores son EXACTAMENTE los que
     el fondo del login ya tenía: se subieron acá para que la barra use los
     mismos, no para cambiarlos. */
  --marca-1: #c2ddfb;
  --marca-2: #d5cff9;
  --marca-3: #edd3f0;
  --marca-base-a: #b9d3f5;
  --marca-base-b: #c4d3f7;
  --marca-base-c: #d2c9f2;

  /* La tinta que se lee SOBRE la superficie. No es `--text-2` ni `--text-3`: sobre
     el degradado un gris medio se queda corto de contraste —`--text-3` da 4,2:1
     contra el azul más claro— y esto se mide contra el píxel pintado, no contra
     el token. */
  --marca-tinta: #3c4a66;
  --marca-tinta-suave: rgba(60, 74, 102, 0.45);

  /* La sombra de la marca lleva el TINTE del degradado. Una sombra negra sobre
     una superficie azul se ve sucia. */
  --marca-sombra-barra: 0 1px 3px rgba(40, 56, 96, 0.1), 0 8px 24px -16px rgba(40, 56, 96, 0.3);

  /* ── El movimiento ────────────────────────────────────────────────────────
     Tres duraciones y dos curvas, y no más. Un producto con siete duraciones no
     tiene ritmo, tiene ruido.

     Las DOS curvas son un par: `--e-entra` es un ease-out —hace el 80% del camino
     en el primer 20% del tiempo, que es lo que se siente ágil al aparecer— y
     `--e-sale` es su espejo. Abrir y cerrar con la MISMA curva es lo que hace que
     algo se vea «brusco» aunque la duración esté bien. */
  --mov-rapido: 140ms;
  --mov-normal: 200ms;
  --mov-calmo: 320ms;
  --e-entra: cubic-bezier(0.2, 0.8, 0.2, 1);
  --e-sale: cubic-bezier(0.8, 0, 0.8, 0.2);
}

/* ── La superficie ────────────────────────────────────────────────────────── */

/* UNA sola receta para los tres lugares donde aparece: el fondo del login a
   pantalla completa (`.marca-superficie`) y las dos barras superiores
   (`.marca-barra`). Lo único que las separa es qué parte del alambrado se ve.

   No declara `position`: quien la usa ya se posiciona —el fondo del login es
   `fixed`, la barra pública es `sticky`— y forzar `relative` acá le ganaría a esa
   declaración, porque esta hoja se carga última.

   `.marca-barra` sí lo declara, porque la barra del registro no se posiciona sola
   y el alambrado necesita un contenedor al que agarrarse. */
.marca-superficie,
.marca-barra {
  background:
    radial-gradient(1200px 820px at 10% 14%, var(--marca-1) 0%, rgba(194, 221, 251, 0) 58%),
    radial-gradient(1020px 900px at 90% 26%, var(--marca-2) 0%, rgba(213, 207, 249, 0) 60%),
    radial-gradient(920px 740px at 74% 98%, var(--marca-3) 0%, rgba(237, 211, 240, 0) 58%),
    linear-gradient(118deg, var(--marca-base-a) 0%, var(--marca-base-b) 44%, var(--marca-base-c) 100%);
}

.marca-barra {
  position: relative;
  /* Hilo claro arriba y sombra abajo. Sobre un degradado, una línea gris se lee
     como un borde pegado encima en vez de como el fin de una superficie. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--marca-sombra-barra);
}

/* El alambrado, en un pseudo-elemento: así ningún consumidor necesita un nodo
   extra en el HTML — se gana la superficie agregando UNA clase.

   Es UN archivo (`assets/malla-marca.svg`, generado por `scripts/gen-malla.mjs`)
   y lo comparten los tres lugares. Con una copia inline en el login y otra en
   archivo para las barras, un retoque en una deja las dos superficies distintas y
   nada falla: se ven parecidas, que es la clase de diferencia que nadie reporta y
   todos notan. */
.marca-superficie::before,
.marca-barra::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/malla-marca.svg");
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

/* A pantalla completa se ve la tela entera, centrada. */
.marca-superficie::before { background-position: center; }

/* En 60 px se ve la franja de ARRIBA del mismo dibujo. No es un recorte
   cualquiera: es la continuación de la pantalla anterior, y es lo que hace que
   entrar no se sienta como cambiar de sitio. */
.marca-barra::before { background-position: top center; }

/* ── El vidrio ────────────────────────────────────────────────────────────── */

/* Los controles que viven SOBRE la superficie. El mismo tratamiento que la tarjeta
   del login: pertenecen al fondo en vez de posarse encima. */
.marca-vidrio {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Sin `backdrop-filter` el vidrio se vuelve casi OPACO, no más transparente. Es la
   diferencia entre «se ve distinto» y «no se lee»: al no haber desenfoque, lo que
   quedaría detrás del texto son las curvas de la malla a foco. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .marca-vidrio { background: rgba(255, 255, 255, 0.88); }
}

/* ── Quien pidió que nada se mueva ────────────────────────────────────────── */

/* Una sola declaración para las dos páginas. No apaga las transiciones de estado
   —un botón que no acusa recibo del clic es peor, no más accesible— sino que las
   acorta a un valor casi instantáneo. Lo que se repite solo lo apaga cada hoja,
   donde está declarado. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mov-rapido: 1ms;
    --mov-normal: 1ms;
    --mov-calmo: 1ms;
  }
}