/* ══ LA RESPIRACIÓN GUIADA · Parte 4 del plan de construcción ══════════════════
   Portado desde la especificación congelada: `docs/prototipo-s106/pantallas/
   respiracion.html` (elegir) y `respiracion-curso.html` (respirar). Los nombres
   de clase pierden el prefijo `p-` del prototipo y conservan el resto tal cual,
   para que las dos superficies se puedan comparar de un vistazo — que es la
   misma disciplina que ya siguen `unguided-*` y `home-practice-*`.

   ⚠️ LO QUE NO SE COPIÓ, Y ES A PROPÓSITO: el `<style>` del prototipo clava la
   cuenta regresiva a Calma 4·2·6 con porcentajes escritos a mano. Acá el inflado
   del círculo NO es un @keyframes: lo escribe `js/breathing.js` en cada cuadro,
   porque con cuatro ritmos de largos distintos —y uno con un tramo en CERO— unos
   porcentajes fijos solo pueden cuadrar con uno. Está razonado en la pantalla del
   prototipo y en DUDAS-ABIERTAS §«Lo que abrió la cuenta regresiva». */

/* ── 1 · ELEGIR: ¿qué necesitas ahora? ────────────────────────────────────── */

.br-wrap {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
}

.br-title {
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 10px;
}

.br-lead {
  font-family: var(--font-sans);
  margin: 0 0 24px;
  max-width: 310px;
}

/* La duración va ARRIBA porque las tarjetas de abajo arrancan la práctica:
   cualquier cosa que quede debajo de ellas es inalcanzable en el flujo.
   Viene contestada de fábrica para que nadie tenga que decidirla. */
.br-dur {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.br-dur-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.br-dur-row { margin: 0; }

/* Las tarjetas del SOS: grandes, sin nada que leer antes de tocarlas. */
.br-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.br-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-card);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .12s ease;
}
.br-opt:active { transform: scale(.99); }
@media (hover: hover) {
  .br-opt:hover { border-color: var(--accent); }
}
/* La marca se conserva al volver: dice con cuál se respiró la última vez. No es
   una casilla que haya que encender antes de arrancar — tocar la tarjeta YA
   empieza la práctica. */
.br-opt.active { border-color: var(--ink); }

.br-opt-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.br-opt-name {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.br-opt-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.br-opt-go {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
}

.br-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.br-fact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--faint);
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
}
.br-fact-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
  flex-shrink: 0;
}

.br-note {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 12px 0 0;
}

.br-legal {
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  opacity: .85;
  text-align: center;
  margin: 26px auto 0;
  max-width: 320px;
}

/* ── 2 · RESPIRAR: la práctica corriendo ──────────────────────────────────── */

/* Pantalla de noche. Cubre todo para que no se cuele el fondo claro del canvas. */
.brc-night {
  position: absolute;
  inset: 0;
  min-height: 100%;
  background: var(--night);
  color: var(--night-fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 24px calc(env(safe-area-inset-bottom, 0px) + 28px);
  overflow: hidden;
}

.brc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 340px;
}
.brc-close {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: none;
  background: rgba(243, 228, 209, .08);
  color: var(--night-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.brc-night .brc-eyebrow {
  color: rgba(243, 228, 209, .58);
  letter-spacing: 1.6px;
}
.brc-spacer { width: 44px; height: 44px; flex-shrink: 0; }

/* El círculo y el texto viven juntos, pero solo el círculo respira: así la
   palabra no crece ni se encoge y siempre se lee igual. */
.brc-stage {
  position: relative;
  width: 288px;
  height: 288px;
  margin: auto 0;
  flex-shrink: 0;
}
.brc-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.brc-track {
  fill: none;
  stroke: rgba(243, 228, 209, .14);
  stroke-width: .7;
}
/* La escala la escribe el motor en cada cuadro. El halo va un pelo por detrás
   de la bola (RETARDO en el JS), que es lo que antes hacía el animation-delay. */
.brc-halo,
.brc-ball {
  transform-box: view-box;
  transform-origin: 50px 50px;
  transform: scale(var(--brc-escala, .58));
}
.brc-halo {
  fill: rgba(176, 140, 77, .10);
  stroke: none;
  transform: scale(var(--brc-escala-halo, .58));
}
.brc-ball {
  fill: rgba(176, 140, 77, .16);
  stroke: rgba(232, 203, 184, .55);
  stroke-width: .6;
}

.brc-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
}

.brc-words {
  position: relative;
  width: 100%;
  height: 46px;
}
/* Una sola capa de palabra: el texto lo cambia el motor. En el prototipo eran
   tres capas superpuestas con porcentajes fijos, que es justo lo que no se puede
   hacer si los tramos cambian de largo — y con «Despertar 6·0·2» ni siquiera hay
   tres. El desvanecido corto tapa el cambio sin llamar la atención. */
.brc-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 38px;
  letter-spacing: -0.02em;
  color: var(--night-fg);
  opacity: 1;
  transition: opacity .22s ease-in-out;
}
.brc-word.is-cambiando { opacity: 0; }

/* El conteo es CUENTA REGRESIVA: dice cuánto FALTA para el próximo cambio, no
   cuánto llevas. Baja hasta 1 y ahí el cuerpo ya sabe que viene el cambio.
   El número lo escribe el JavaScript porque el largo de cada tramo cambia con el
   ritmo: un rollo de celdas fijo solo puede cuadrar con uno de los cuatro. */
.brc-count {
  height: 34px;
  overflow: hidden;
}
.brc-count span {
  display: block;
  height: 34px;
  line-height: 34px;
  font-family: var(--font-mono);
  font-size: 22px;
  color: rgba(243, 228, 209, .5);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.brc-meta {
  width: 100%;
  max-width: 260px;
  text-align: center;
  margin-bottom: 28px;
}
.brc-left {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(243, 228, 209, .55);
  margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}
.brc-bar {
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: rgba(243, 228, 209, .14);
  overflow: hidden;
}
.brc-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: rgba(232, 203, 184, .8);
}

.brc-stop {
  width: 190px;
  background: transparent;
  border: 1.5px solid rgba(243, 228, 209, .38);
  color: var(--night-fg);
  flex-shrink: 0;
}

.brc-hint {
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.55;
  text-align: center;
  color: rgba(243, 228, 209, .42);
  margin: 16px 0 0;
  max-width: 300px;
}

/* Pantallas chicas: el círculo cede primero, el texto no. */
@media (max-height: 720px) {
  .brc-stage { width: 236px; height: 236px; }
  .brc-word { font-size: 32px; }
}

/* Con el movimiento reducido el círculo se queda quieto, pero la palabra y el
   número SIGUEN cambiando: son la instrucción, no la decoración. Quitarlos
   dejaría la pantalla sin nada que seguir. */
@media (prefers-reduced-motion: reduce) {
  .brc-halo,
  .brc-ball { transform: scale(1.1) !important; }
  .brc-word { transition: none; }
}