/* ============================================================
   RPH OS — LA BIENVENIDA · estilos locales del primer arranque.
   Prefijo `.bien`. Nunca un override de `.r-`.

   Todo lo que se ve aquí es del design system —`.r-card`, `.r-h2`,
   `.r-input`, `.r-btn`, `.r-engine`, `.r-status`, `.r-check`, `.r-mono`— y
   lo único que este archivo hace es COLOCARLO: centrar una
   tarjeta angosta sobre el cielo que ya está pintado y decidir qué tan
   apretada va por dentro. Mismo reparto que `acceso.css`, que resuelve el
   mismo problema (una tarjeta sola sobre el tapiz) en su propia página.

   TRES DECISIONES QUE SON DE ESTE ARCHIVO Y NO DEL JS:

   1 · NO HAY VELO, y no es un olvido. El encargo dice que el cielo ES el
       fondo (`app/sky.js` ya lo pinta y deriva con la hora), así que un
       `--scrim` encima taparía justo lo que se quiere enseñar. Y hay una
       razón medida además de la estética: `.r-card` es papel translúcido
       que RECOGE el color de atrás, y el contraste que el design system
       midió sobre el tapiz (§ «Lo que costó, medido»: 5.74 en claro, 7.60
       en cockpit para `--ink-2`) es el del tapiz SIN velo. Oscurecer el
       fondo en el tema claro empeora el papel en vez de mejorarlo.

   2 · NO INTERCEPTA EL RATÓN. La capa es `pointer-events: none` y solo la
       tarjeta vuelve a `auto`. Dos razones y las dos importan:

         · El encargo lo pide en sus propias palabras — «un onboarding del
           que no puedes salir es un secuestro». El OS de atrás sigue vivo
           y alcanzable; la tarjeta pregunta, no encierra.
         · El paso de los gestos NECESITA que el prompt de verdad reciba
           el foco cuando se aprieta ⌘K. Una capa que se come los eventos
           convierte la lección en una animación.

   3 · `--z-panel` Y NO `--z-scrim`. El estrato de arriba es «el velo que
       atenúa lo de atrás» y aquí no hay velo; `--z-panel` es «lo que el
       velo va a dejar ver», que es exactamente esta tarjeta. Con 60 le
       gana al chasis (40) y al panel flotante (35), y sigue perdiendo
       contra el toast (90) — un aviso del OS tiene que poder salir encima
       de esto.

   Cero valores crudos: todo sale de un token de `tokens.css`.
   ============================================================ */

/* ---------- La capa ---------- */
.bien {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel);
  display: grid;
  place-items: center;
  padding: var(--s-6);
  pointer-events: none;
  transition: padding var(--d-slow) var(--ease);
}

/* Con un panel abierto la tarjeta se centra en lo que queda LIBRE, con los
   mismos tokens y la misma curva que la columna del centro (`.os-center` en
   os.css). No pasa en un primer arranque de verdad —un OS nuevo no tiene
   panel que recordar— pero sí en cuanto alguien pica un orbe con la tarjeta
   puesta, y eso está permitido a propósito (arriba, decisión 2). Sin esto
   la tarjeta se queda a caballo entre el centro y el panel. */
[data-flyout-open] .bien {
  padding-inline-end: calc(var(--flyout-rail) + var(--flyout-w) + var(--flyout-air));
}
/* Y en angosto se deja de reservar, con el mismo umbral y por la misma razón
   que `.os-center` (os.css, «una degradación declarada»): abajo de ~900px no
   sobra ancho que repartir, así que el panel pasa por encima y la tarjeta se
   queda con la ventana entera. Sin esto la reserva se come el viewport y la
   tarjeta sale de 0 px de ancho. */
@media (max-width: 900px) {
  [data-flyout-open] .bien { padding-inline-end: var(--s-6); }
}
/* Mientras se arrastra el canto nada interpola: el panel sigue al dedo y la
   tarjeta con él. Misma regla que el centro. */
[data-flyout-resizing] .bien { transition: none; }

/* ---------- La tarjeta ----------
   `.r-card` (vidrio) y no `.r-card--solid`: es la postura por omisión del
   sistema y aquí el color de atrás es el contenido, no el adorno. La
   excepción del papel opaco es para «lo que no puede negociar
   legibilidad» —lectura larga, formularios densos, tablas—; esto es una
   pregunta, un campo y un botón.

   `--e-3` porque esto SÍ flota: es la única sombra del sistema reservada
   para lo que de verdad está encima de todo. */
.bien__card {
  pointer-events: auto;
  width: min(24rem, 100%);
  display: grid;
  gap: var(--s-5);
  padding: var(--s-6);
  box-shadow: var(--e-3);
}

/* OBA: el cerebro entra a pantalla, no en una tarjeta flotante. */
.bien.bien--lienzo {
  pointer-events: auto;
  place-items: center;
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--s-8));
  padding-right: calc(env(safe-area-inset-right, 0px) + var(--s-5));
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-6));
  padding-left: calc(env(safe-area-inset-left, 0px) + var(--s-5));
  background: var(--canvas);
}
.bien.bien--lienzo .bien__card {
  width: min(36rem, 100%);
  box-shadow: none;
  background: transparent;
  border: 0;
}
.bien.bien--lienzo #bienSigue {
  --btn-bg: var(--voice);
  --btn-fg: var(--on-accent);
  --btn-bd: transparent;
}
.bien__orbe {
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--voice);
  background: radial-gradient(circle at 40% 35%, var(--surface-2), var(--canvas-deep) 70%);
  box-shadow: 0 0 1.5rem color-mix(in srgb, var(--voice) 35%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.bien__orbe span {
  display: block;
  height: 2px;
  width: 60%;
  border-radius: 2px;
  background: var(--voice);
}
.bien__orbe span:nth-child(2) { width: 46%; }
.bien__orbe span:nth-child(3) { width: 32%; }
.bien__qr {
  width: min(16rem, 72%);
  margin-inline: auto;
}
.bien__qr svg { width: 100%; height: auto; display: block; }

/* La entrada: se desvanece y sube un pelo. La regla del OS es «se mueve lo
   que cambia de lugar, se desvanece lo que entra y sale», y esto hace las
   dos porque llega de fuera del documento. Nada dura más que `--d-slow`. */
@keyframes bien-entra {
  from { opacity: 0; transform: translateY(var(--s-3)); }
  to   { opacity: 1; transform: none; }
}
.bien__card { animation: bien-entra var(--d-slow) var(--ease-out) both; }

/* La salida es del JS (pone `data-bien-va`) y no de un `hidden` seco: la
   tarjeta se va antes de que el nodo desaparezca. */
.bien[data-bien-va] .bien__card {
  opacity: 0;
  transform: translateY(calc(var(--s-2) * -1));
  transition: opacity var(--d-base) var(--ease-in),
              transform var(--d-base) var(--ease-in);
  animation: none;
}

/* LÁPIDA: `.bien__marca` era el rótulo «RPH OS» que iba encima de la
   pregunta, y se fue el 2026-08-26 con su nodo. Robbie: «no debería decir
   eso… tiene que ser mucho más limpio todo lo que UI».

   Y la parte que este archivo tenía que comprobar: LA TARJETA NO SE
   DESCUADRÓ. El aire de arriba era el `gap` de la retícula de `.bien__card`,
   no un margen del rótulo, así que al irse el hijo se fue su hueco — la
   tarjeta encoge 38px (medido a 1280×800 en el paso del nombre: 259.4 con el
   rótulo, 221.4 sin él, mismo ancho de 384) y el relleno de `--s-6` sigue
   siendo el mismo por los cuatro lados. No hizo
   falta tocar ni el padding ni el gap, y por eso no se tocaron: un ajuste
   compensatorio sin hueco que compensar es el que descuadra la siguiente
   vez que alguien cambie algo. */

/* La pregunta del paso. `.r-h2` y no `.r-h3`: «el tamaño se gana», y en
   esta vista lo que manda es la pregunta — no hay métrica que compita. */
.bien__q { text-wrap: balance; }

/* El cuerpo del paso. `min-height` para que la tarjeta no cambie de alto
   entre un paso de un campo y uno de dos renglones: un salto de caja en
   cada avance se lee como si hubiera llegado otra tarjeta. Es geometría de
   ritmo, medida contra el paso más alto (los gestos).

   La puerta de la carpeta es más alta que eso y no cambia el número, a
   propósito: `min-height` es un PISO y la puerta no compite en el ritmo del
   guion —se ve una vez, sola, y sin cuadritos al lado—. Subir el piso por
   ella dejaría un hueco en los tres pasos que sí se recorren seguidos. */
.bien__cuerpo {
  display: grid;
  gap: var(--s-3);
  min-height: var(--s-16);
  align-content: start;
}

/* El cambio de paso: sale y entra el CONTENIDO, no la caja. Mismo criterio
   que `data-flyout-swap` en el panel del chasis — animar la tarjeta diría
   que llegó otra tarjeta, y es la misma. */
.bien__cuerpo, .bien__q {
  transition: opacity var(--d-fast) var(--ease);
}
.bien[data-bien-swap] .bien__cuerpo,
.bien[data-bien-swap] .bien__q { opacity: 0; }

/* ---------- El renglón del pie ---------- */
.bien__pie {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* ---------- El progreso ----------
   Tres cuadritos y TRES estados, no dos: el paso de ahora en tinta plena,
   los que ya pasaron en trama, los que faltan huecos. Con solo
   «lleno / hueco» el último paso se pinta lleno-lleno-lleno y deja de
   distinguirse de «ya terminaste» — se ve en pantalla, y se vio.

   POR QUÉ NO ES `.r-dots`, que a primera vista es esta pieza: `.r-dots` es
   una MATRIZ DE DENSIDAD, no una barra de progreso. Reparte los encendidos
   «sin agrupar» (ver `drawDots` en ron.js), así que con tres puntos y dos
   encendidos pinta ●○● — el segundo paso se leería como si el de en medio
   estuviera pendiente. Su semántica es «cuántos de cuántos», no «dónde
   vas».

   Cuadrados y no redondos, que es la lengua del OS para un punto de estado
   (`.r-status`), y en tinta y no en ácido: el acento es de la acción que
   manda —el botón de avanzar— y un progreso no compite con ella. */
.bien__pasos {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}
.bien__paso {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  border: var(--stroke) solid var(--trace);
  transition: background var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease);
}
.bien__paso[data-hecho] {
  background: var(--trace);
  border-color: var(--trace);
}
/* Después de `[data-hecho]` a propósito: si un día los dos coincidieran en
   el mismo nodo, el paso de AHORA es el que tiene que ganar. */
.bien__paso[data-on] {
  background: var(--ink);
  border-color: var(--ink);
}

/* ---------- Piezas de un paso ---------- */

/* El campo del nombre ocupa el ancho: es el único destino del paso, y un
   campo corto centrado en una tarjeta se lee como una opción entre varias.
   Mismo argumento que `.ac__go` en la puerta. */
.bien__nom { width: 100%; }

.bien__engine { margin: 0; }

/* Las dos acciones de Finder (existente / nueva). Van a la vista: ver las
   alternativas ES el punto, y son dos, caben en un renglón apilado. */
.bien__acciones {
  display: grid;
  gap: var(--s-2);
}
.bien__nube {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-body-sm);
}

/* LÁPIDA: `.bien__opts` era la lista de radios sugeridas. La puerta ahora
   es Finder (o el campo, si no hay shell). Se queda el CSS por si un
   renglón viejo reaparece en una prueba; no se usa. */
.bien__opts {
  display: grid;
  gap: var(--s-1);
  /* UNA DEGRADACIÓN DECLARADA, no un scroll de la vista. El contrato manda
     «dos o tres rutas» más «Otra», y con eso la puerta mide 544px de alto en
     una ventana de 800 y no scrollea nada. Si algún día llegan seis, la
     LISTA se recorre y la pregunta, el error y el botón siguen a la vista —
     que es lo contrario de que la tarjeta crezca más que la ventana y se le
     corte el botón: la capa es `pointer-events: none`, así que un desborde
     de la tarjeta no se puede scrollear con el ratón. */
  max-height: 58vh;
  overflow-y: auto;
}

.bien__opt {
  display: flex;
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease);
}
.bien__opt:hover { background: var(--surface-sunk); }
/* La opción elegida se marca con FONDO y no con borde: un hairline que
   aparece y desaparece mueve el renglón un píxel, y son cuatro renglones
   pegados. `:has` porque el estado vive en el input, no en la etiqueta. */
.bien__opt:has(input:checked) { background: var(--surface-sunk); }
/* Y la que no se puede usar no se esconde: se dice. Un permiso que falta es
   la clase de cosa que hay que poder VER para entender por qué no aparece la
   carpeta que esperabas. */
.bien__opt[data-no] { cursor: default; opacity: 0.55; }
.bien__opt[data-no]:hover { background: none; }

.bien__opt .r-check { margin-block-start: 2px; }

.bien__opt__t {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

/* La ruta puede ser larga y el ancho de la tarjeta es fijo: se recorta con
   elipsis y el nombre completo queda en el `title`, que es el reparto del
   resto del OS. */
.bien__ruta {
  color: var(--ink);
  font-size: var(--t-body-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bien__que { color: var(--ink-3); margin: 0; }

/* El campo de la ruta a mano: revelado, no permanente, y VIVE FUERA del
   `radiogroup` —un campo de texto no es una opción del grupo— así que lo que
   lo ata a «Otra» es esta sangría: la misma que deja el `.r-check` (16px) más
   el hueco de la fila más el relleno de la opción. */
.bien__otra {
  margin-inline-start: calc(16px + var(--s-3) + var(--s-3));
  margin-block-start: var(--s-1);
  /* `width: auto` porque `.r-input` trae `width: 100%`, y un 100% del área de
     la retícula IGNORA el margen: medido, el campo se salía 26px del canto de
     la tarjeta. Estirado por la retícula, el margen sí lo encoge. No es un
     override de `.r-` —es geometría de este sitio, no del componente. */
  width: auto;
}

/* El error de la puerta. Palabras completas y en `--crit`: elegir mal dónde
   viven los datos no es un estado que se pueda decir con un punto. */
.bien__err {
  margin: 0;
  color: var(--crit);
  font-size: var(--t-body-sm);
}

/* Un renglón de lección: el atajo, y lo que pasa cuando lo aprietas. */
.bien__gesto {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: 0;
}
.bien__tecla {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: var(--t-body-sm);
}
.bien__dice { margin: 0; }

/* Un renglón que NO pide nada baja de tinta, y son dos casos con el mismo
   significado: el gesto que ya se hizo (dejó de ser instrucción y pasó a
   ser un hecho) y el que solo se dice porque no se puede ensayar aquí
   (⌥Space). El renglón no desaparece —quitarlo movería el resto de la
   tarjeta— nada más deja de llamar. */
.bien__gesto[data-listo] .bien__tecla { color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  /* Corte seco: la tarjeta y los pasos siguen apareciendo y cambiando, nada
     más que llegan puestos. Hay que nombrar los dos lados —la entrada es
     `animation` y el swap es `transition`— porque se apagan distinto. */
  .bien__card { animation: none; }
  .bien,
  .bien[data-bien-va] .bien__card,
  .bien__cuerpo, .bien__q, .bien__paso { transition: none; }
}