/* ================= Jornada (EN PRUEBA, 0.7.101) =================
   Vive en su propio archivo y no en estilos.css por dos razones: es un módulo
   de prueba —si no se queda, se borra un archivo y no un bloque perdido entre
   diez mil líneas— y estilos.css es el archivo que pisan todas las sesiones a
   la vez. Todos los colores salen de las variables de la casa, así que el modo
   claro, los ambientes y los mundos le llegan solos. */

:root {
  /* El descanso y el sueño escriben en «brasa». De noche es la luciérnaga; de
     día NO puede serlo: al escribir, el amarillo se vuelve #755c05 —un marrón
     que Eduardo paró en cuanto lo vio— y la arena del reloj sale mostaza. De
     día el descanso pasa al celeste, que además dice noche mejor que el ámbar.
     Son dos tonos porque son dos oficios: uno escribe y traza, el otro rellena
     (ver la tabla de la paleta en `estilos.css`). */
  --jor-brasa: var(--fire);
  --jor-brasa-grano: var(--fire-macizo);
  --jor-brasa-velo: var(--fire-soft);
  /* El velo del modo dormir. De noche basta hundir la app hacia su propio
     fondo; de día hace falta un velo OSCURO —uno claro sobre papel no atenúa,
     lava—, y ahí `--text` es justo el azul casi negro de la tinta. */
  --jor-velo: color-mix(in srgb, var(--bg) 66%, transparent);
  --jor-sueno: color-mix(in srgb, var(--muted) 38%, var(--bg));
  --jor-libre: color-mix(in srgb, var(--muted) 60%, var(--bg));
  /* Comer y Traslado: descanso como Dormir, un escalón más claros para que no
     se confundan con la noche en la rueda. */
  --jor-descanso: color-mix(in srgb, var(--muted) 50%, var(--bg));
}

/* ---- Seis botones en la barra del teléfono ----
   Con la Jornada encendida la barra pasa de cinco a seis círculos, y a 375 px
   no caben: 6 × 44 + separaciones + el ＋ son 357 px contra 339 libres. Se
   encogen a 40 y se aprietan un poco. Es el precio de un módulo aparte, y es
   justo lo que hay que juzgar al probarlo. */
@media (max-width: 899px) {
  html.con-jornada .thumb-cluster { padding: 0 12px; }
  html.con-jornada .thumb-cluster .nav-circles { gap: 5px; }
  html.con-jornada .thumb-cluster .c-nav { width: 40px; height: 40px; }
}

/* ---- Modo dormir: la app entera se atenúa (0.7.113) ----
   Lo pidió Eduardo: mientras duermes, la app no es para usarse, y eso tiene
   que verse en TODA la interfaz y no solo en el Pomodoro. El velo va por
   encima de la app y por debajo de la píldora —que es la que dice «Durmiendo»
   y lleva a «Buenos días», así que es lo único que se queda encendido—, de las
   ventanas y de los avisos. Y NO atrapa el puntero: atenuar no es desactivar;
   quien quiera usar la app a media noche puede, solo que la app no finge que
   es un día normal. */
html.durmiendo body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--piso-dormir);
  background: var(--jor-velo); pointer-events: none;
}
/* ---- El amanecer ----
   Al tocar «ya desperté», un círculo se abre DESDE EL BOTÓN y se lleva la
   penumbra. Es una máscara y no un desvanecido: el desvanecido no viene de
   ningún sitio, y esto sale de donde pusiste el dedo.
   `@property` es lo que permite animar una medida dentro de un gradiente —sin
   registrarla, el navegador la trata como texto y salta de golpe—. Donde no
   exista, la máscara no se aplica y queda el desvanecido del final, que sigue
   siendo un cierre decente. */
@property --jor-abre { syntax: "<length>"; inherits: false; initial-value: 0px; }
html.despertando body::after {
  -webkit-mask-image: radial-gradient(circle at var(--jor-x, 50%) var(--jor-y, 70%), transparent var(--jor-abre), #000 calc(var(--jor-abre) + 3px));
  mask-image: radial-gradient(circle at var(--jor-x, 50%) var(--jor-y, 70%), transparent var(--jor-abre), #000 calc(var(--jor-abre) + 3px));
  animation: jor-amanece .92s cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes jor-amanece {
  0% { --jor-abre: 0px; opacity: 1; }
  78% { opacity: 1; }
  100% { --jor-abre: 160vmax; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { html.despertando body::after { animation: none; opacity: 0; } }
html.claro {
  --jor-velo: color-mix(in srgb, var(--text) 34%, transparent);
  --jor-brasa: var(--celeste);
  --jor-brasa-grano: color-mix(in srgb, var(--celeste) 66%, white);
  --jor-brasa-velo: color-mix(in srgb, var(--celeste) 13%, white);
  /* Y los gajos de descanso, un escalón más oscuros de día: con la mezcla de
     noche se perdían contra la tarjeta clara. Lo pidió Eduardo — «que
     destaquen también en modo claro». */
  --jor-sueno: color-mix(in srgb, var(--muted) 56%, var(--bg));
  --jor-descanso: color-mix(in srgb, var(--muted) 70%, var(--bg));
  --jor-libre: color-mix(in srgb, var(--muted) 78%, var(--bg));
}

.jor-prueba {
  display: inline-block; vertical-align: middle; margin-left: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 9px; border-radius: var(--r-pastilla);
  background: var(--jor-brasa-velo); color: var(--jor-brasa);
}

/* ---- Mi día / Solo enfocar (0.7.104) ---- */
.jor-modos {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  max-width: 340px; margin: 0 auto 18px; padding: 4px;
  border-radius: var(--r-tarjeta); background: var(--sup-tarjeta); border: 1px solid var(--line);
}
.jor-modos button { border: 0; background: none; padding: 9px 8px; border-radius: var(--r-chico); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.jor-modos button[aria-selected="true"] { background: var(--mint-soft); color: var(--mint); }

/* «Solo enfocar»: el reloj grande en el medio y nada más. */
.jor-lite { display: grid; justify-items: center; gap: 4px; max-width: 420px; margin: 0 auto; padding: 18px 0 120px; text-align: center; }
.jor-lite .jor-reloj-caja { height: 186px; margin-bottom: 14px; }
/* Y lo de abajo, igual: los ajustes de una Travesía son tres filas y los de
   Inmersión o Respiro una, y al iniciar los controles se reducen a dos
   botones. Con un alto mínimo fijo, cambiar de modo o empezar no mueve nada. */
.jor-lite .jor-controles { min-height: 300px; align-content: start; }
.jor-hf-ajustes-caja { min-height: 136px; }
.jor-lite .jor-arena.t-chico { --jor-alto: 132px; }
.jor-lite .jor-arena.t-mediano { --jor-alto: 150px; }
.jor-lite .jor-arena.t-grande { --jor-alto: 186px; }
.jor-lite #jor-tiempo { font-size: 64px; }
.jor-lite #jor-fase { font-size: 14px; margin-top: 6px; }
.jor-lite #jor-sub { font-size: 13px; }
.jor-lite #jor-fin { font-size: 12px; }
/* El aire antes de los controles lo pone AHORA el bloque de abajo y no el
   margen del subtítulo: con la hora de fin debajo, el subtítulo dejó de ser el
   último renglón y ese margen quedaba en medio de los dos. */
.jor-lite .jor-controles { margin-top: 14px; }
.jor-lite .jor-controles { max-width: 420px; }
.jor-pild[aria-pressed="true"] { border-color: var(--mint); background: var(--mint-soft); color: var(--mint); }

/* Las tres maneras del Hiperfoco (0.7.105): tres tarjetas en fila, cada una
   con su lápiz en la esquina para cambiarle el nombre. */
.jor-hf-modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.jor-hf { position: relative; }
.jor-hf-sel {
  width: 100%; height: 100%; display: grid; gap: 2px; align-content: start; text-align: left;
  padding: 10px 26px 10px 12px; border-radius: var(--r-tarjeta); border: 1px solid var(--line);
  background: var(--sup-tarjeta); color: var(--text); font: inherit; cursor: pointer;
}
.jor-hf-sel b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jor-hf-sel span { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
/* Cada modo tiene su color, y es de Eduardo: Travesía en verde, Inmersión en
   coral y Respiro en violeta. Salen de los ocho tonos del usuario
   (`--paleta-N`) y no de `--mint`, `--coral` o `--lila`: esos tres los
   recolorea cada mundo —en Averno el acento es rojo y Travesía e Inmersión
   saldrían casi iguales—, y la paleta del usuario es la misma en todos y ya
   trae sus dos caras, la de noche y la de día. El borde es una línea (pide 3
   sobre 1) y el nombre es texto (pide 4,5): por eso uno usa `-linea` y el
   otro se hunde hacia la tinta, igual que `trazo()` y `tinta()` en
   js/01-base.js. */
.jor-hf-sel[data-v="travesia"],  #jornada-content[data-hf="travesia"]  { --hf: var(--paleta-1); --hf-linea: var(--paleta-1-linea); }
.jor-hf-sel[data-v="inmersion"], #jornada-content[data-hf="inmersion"] { --hf: var(--paleta-3); --hf-linea: var(--paleta-3-linea); }
.jor-hf-sel[data-v="respiro"],   #jornada-content[data-hf="respiro"]   { --hf: var(--paleta-4); --hf-linea: var(--paleta-4-linea); }
/* El modo puesto tiñe además la arena del reloj y el botón de empezar
   (`jPintarControles` apunta cuál es en `data-hf`). La arena en pausa o en la
   brasa conserva su tono: son estados, y un estado manda sobre el modo.
   Menos en Respiro, que ES un descanso de principio a fin: su reloj va
   siempre en brasa, y sin la segunda regla saldría amarillo y nunca violeta.
   El botón NO se pinta con `background`: se le cambia la variable de la que
   ya sale su fondo, así que sigue siendo el `btn-primary` de cada mundo con
   su material. Averno y Catedral lo hacen de `--relleno-sangre`, que se
   calcula arriba, en `<html>`, y por eso se vuelve a calcular aquí. */
#jornada-content[data-hf] .jor-arena:not(.brasa):not(.pausa),
#jornada-content[data-hf="respiro"] .jor-arena:not(.pausa) { --jor-grano: var(--hf); }
/* Y el rótulo de debajo del contador, por lo mismo: el de Respiro salía en
   el amarillo de la brasa encima de un reloj violeta. Es texto, así que se
   hunde hacia la tinta como el nombre de la tarjeta. En pausa sigue en coral. */
#jornada-content[data-hf] #jor-fase.foco,
#jornada-content[data-hf="respiro"] #jor-fase.brasa { color: color-mix(in srgb, var(--hf), var(--tinta-fondo) var(--hundir)); }
#jornada-content[data-hf] .btn-primary[data-a="lite-go"] {
  --mint-macizo: var(--hf);
  --sobre-macizo: var(--sobre-vivo);
  --relleno-sangre: color-mix(in srgb, var(--hf) 42%, var(--card));
  --relleno-sangre-hover: color-mix(in srgb, var(--hf) 55%, var(--card));
}
html.claro #jornada-content[data-hf] .btn-primary[data-a="lite-go"] {
  --relleno-sangre: color-mix(in srgb, var(--hf) 20%, var(--card));
  --relleno-sangre-hover: color-mix(in srgb, var(--hf) 30%, var(--card));
  --tinta-sangre: color-mix(in srgb, var(--hf), var(--tinta-fondo) var(--hundir));
}
.jor-hf-sel[aria-pressed="true"] {
  border-color: var(--hf-linea, var(--mint));
  background: color-mix(in srgb, var(--hf, var(--mint)) 13%, transparent);
}
.jor-hf-sel[aria-pressed="true"] b { color: color-mix(in srgb, var(--hf, var(--mint)), var(--tinta-fondo) var(--hundir)); }
/* Con piso: el lápiz queda por encima de las copias que el motor de
   interruptores pone un momento sobre las tarjetas al cambiar de modo. Sin
   él, la copia tapaba el lápiz y volvía a aparecer al acabar: un parpadeo. */
.jor-hf-lapiz {
  z-index: var(--piso-sobre-desliza);
  position: absolute; top: 6px; right: 5px; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: var(--r-redondo); background: transparent; color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
}
.jor-hf-lapiz:hover { color: var(--text); background: var(--carril); }
.jor-hf-lapiz svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jor-hf-ajustes { width: 100%; border: 1px solid var(--line); border-radius: var(--r-tarjeta); }
.jor-hf-paso { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 12px; font-size: 14px; }
.jor-hf-paso + .jor-hf-paso { border-top: 1px solid var(--line); }

/* «2 de 4 con foco», al lado de «Hoy»: lo planeado contra lo hecho. */
.jor-rot-dato { margin-left: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mint); }
.jor-al-informe { justify-self: start; padding-left: 0; }

.jor { display: flex; flex-direction: column; gap: 20px; padding-bottom: 110px; }
.jor-reloj { display: grid; gap: 16px; }

/* ---- El selector de días (0.7.115) ----
   Siete botones, un interruptor y un renglón que dice qué pasa al tocar. El
   punto debajo de la letra es HOY; el fondo marca el día que se está editando,
   y vinculado se marca el grupo entero. */
.jor-dias { display: grid; gap: 8px; background: var(--sup-tarjeta); border: 1px solid var(--line); border-radius: var(--r-tarjeta); padding: 8px; }
/* La presentación del módulo: la misma caja vacía de las otras pantallas, con
   menos aire —aquí debajo hay una rueda que también quiere sitio—. */
.jor-bienvenida { padding: 18px 16px 20px; margin-bottom: 4px; }
.jor-dias-fila { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: stretch; }
.jor-dias-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jor-dias-cab .jor-rot { margin: 0; }
/* El chevron que abre lo de vincular. Del alto de los días para que la fila se
   lea como una sola pieza. */
.jor-dias-mas {
  width: 28px; height: 28px; flex: none; border-radius: var(--r-chico); border: 1px solid var(--line);
  background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer;
}
.jor-dias-mas svg { width: 16px; height: 16px; transition: transform var(--dur-corta, .15s) ease; }
.jor-dias-mas[aria-expanded="true"] { color: var(--text); }
.jor-dias-mas[aria-expanded="true"] svg { transform: rotate(180deg); }
.jor-dia {
  position: relative; padding: 6px 0 9px; border-radius: var(--r-chico);
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.jor-dia[aria-pressed="true"] { background: var(--mint-soft); border-color: var(--mint); color: var(--mint); }
.jor-dia.hoy::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: var(--r-redondo); background: currentColor;
}
.jor-vinculo { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 2px; color: var(--text); font: inherit; cursor: pointer; }
.jor-palanca { position: relative; flex: none; width: 38px; height: 22px; border-radius: var(--r-pastilla); background: var(--carril); border: 1px solid var(--line); }
.jor-palanca::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: var(--r-redondo); background: var(--muted);
}
.jor-vinculo[aria-checked="true"] .jor-palanca { background: var(--mint-soft); border-color: var(--mint); }
.jor-vinculo[aria-checked="true"] .jor-palanca::after { transform: translateX(16px); background: var(--mint); }
.jor-vinculo-tx { display: grid; gap: 1px; min-width: 0; }
.jor-vinculo-tx b { font-size: 13.5px; font-weight: 700; }
.jor-vinculo-tx small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
/* El punto de «hoy» es del DÍA, no de la selección: no viaja con la pastilla
   cuando un interruptor se desliza (ver `instalarDesliza`), y el rótulo que
   se funde encima lo conserva, o desaparecería medio segundo y volvería. */
.jor-dia.hoy[data-desliza-copia="pastilla"]::after { content: none !important; }
.jor-dia.hoy[data-desliza-copia="rotulo"]::after { background: currentColor !important; }
.jor-dias-nota { margin: 0; font-size: 12px; color: var(--faint); line-height: 1.4; }

/* ---------- La rueda ---------- */
.jor-rueda { position: relative; width: 100%; max-width: 340px; margin: 0 auto; aspect-ratio: 1; --jor-sep: var(--bg); }
#jor-svg { width: 100%; height: 100%; display: block; overflow: visible; touch-action: none; user-select: none; -webkit-user-select: none; }
/* El fondo del aro ya no se pinta (0.7.114): quedan los dos hilos que lo
   enmarcan, los puntos de las medias horas y el arco de lo que va del día. */
.jor-guia { fill: none; stroke: var(--muted); opacity: .2; stroke-width: 1; }
.jor-media { fill: var(--muted); opacity: .3; }
.jor-transcurrido { fill: none; stroke: var(--mint); opacity: .3; stroke-width: 1.6; stroke-linecap: round; }
.jor-destino { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: .75; }
.jor-tick { stroke: var(--faint); stroke-width: 1; }
.jor-tick.mayor { stroke: var(--muted); stroke-width: 1.6; }
/* Las horas del aro. Van como `text.jor-num` y NO como `.jor-num` a secas, y
   esa palabra de más es el arreglo de un fallo que duró ocho versiones: la
   0.7.119 añadió una casilla para escribir los minutos a mano y la llamó
   `.jor-num` también. Esa regla vive más abajo en este archivo, tiene la misma
   especificidad y lleva `font: inherit`, así que GANABA — y las horas llevaban
   desde entonces a 16 px y en negrita todas, cuando su diseño son 10 px y solo
   las de las seis en punto marcadas. Se veía como «los números salen demasiado
   grandes», que es exactamente como lo dijo Eduardo. */
text.jor-num { fill: var(--muted); font-family: inherit; font-size: 10px; font-weight: 500; text-anchor: middle; dominant-baseline: central; }
text.jor-num.mayor { fill: var(--text); font-weight: 700; }
.jor-blq { stroke: var(--jor-borde, var(--jor-sep)); stroke-width: 2; cursor: grab; }
/* Con la rueda quieta —durmiendo, o con un tramo en curso— los bloques no
   se arrastran, y el cursor lo dice antes de intentarlo. */
.jor-quieta .jor-blq { cursor: default; }
.jor-blq.sel { stroke: var(--text); stroke-width: 2.2; }
/* Mientras vuela por encima de otros (0.7.109): en el aire, y en coral cuando
   está pisando algo — ahí no se queda, al soltarlo se va al hueco más cercano. */
.jor-blq.volando { opacity: .95; }
/* ---- Lo que está ocupado se TAPA ----
   El bloque que estás pisando lleva línea coral continua, una malla diagonal
   encima y, en lugar de su icono, el símbolo de prohibido: tres señales que
   dicen lo mismo —ahí no cabe— sin que haya que adivinarlo. Con el borde
   cortado solo se veía «pasa algo»; con la malla se ve QUÉ pasa. El resto del
   día se apaga mientras tanto, para que se lean los dos que importan. */
.jor-blq.bloqueado { stroke: var(--coral); stroke-width: 2.6; }
.jor-blq.apagado { opacity: .55; }
.jor-veda { fill: url(#jor-veda); stroke: none; pointer-events: none; }
/* La malla trae SU propio fondo y no se fía del color del bloque: sobre un
   gajo coral, unas rayas coral no se veían —lo cazó Eduardo de noche—. El
   fondo hunde el gajo hacia el suelo de la app (oscurece de noche, aclara de
   día) y encima van las rayas a plena fuerza. Así la prohibición se lee igual
   encima de cualquiera de los ocho colores. */
.jor-veda-fondo { fill: var(--bg); opacity: .66; }
.jor-veda-raya { stroke: var(--coral); stroke-width: 2.8; }
.jor-blq-ic.vedado { color: var(--coral); }
/* Fuera del aro mientras pisa a otro: la sombra es lo que lo levanta. De día
   no hay resplandor, pero una sombra sí —no es luz, es peso—. */
.jor-blq.orbita { filter: drop-shadow(0 3px 9px rgba(0, 0, 0, .45)); cursor: grabbing; }
html.claro .jor-blq.orbita { filter: drop-shadow(0 3px 7px rgba(22, 32, 43, .22)); }
/* El gajo en curso brilla con su color: el mismo halo que `.barra-viva i`
   (10 px al 55%) más uno corto que lo pega al borde. Sin animación: el color
   sale de una variable, y animado se queda congelado en Chrome. */
.jor-blq.ahora {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--jor-brillo) 70%, transparent))
          drop-shadow(0 0 10px color-mix(in srgb, var(--jor-brillo) 55%, transparent));
}
/* De día no hay resplandor: sobre papel un halo es una mancha. */
html.claro .jor-blq.ahora { filter: none; }
.jor-blq-ic { color: var(--sobre-vivo); pointer-events: none; }
.jor-blq-ic.descanso { color: var(--text); }
.jor-aguja { pointer-events: none; }
.jor-aguja line { stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.jor-aguja circle { fill: var(--text); }
.jor-asa-g { cursor: grab; }
.jor-asa { fill: var(--card2, var(--card)); stroke: var(--text); stroke-width: 1.6; }
.jor-asa-g { animation: jor-asoma .16s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes jor-asoma { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }

.jor-centro {
  position: absolute; inset: 24%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 1px; pointer-events: none;
}
#jor-tiempo { font-size: 32px; font-weight: 300; letter-spacing: -.02em; line-height: 1; font-family: var(--tipo-cifra); font-variant-numeric: tabular-nums; }
#jor-fase { font-size: 12px; font-weight: 700; color: var(--text); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
#jor-fase.foco { color: var(--mint); }
#jor-fase.brasa { color: var(--jor-brasa); }
#jor-fase.pausa { color: var(--coral); }
#jor-sub { font-size: 11px; color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La hora a la que acaba la fase. Un peldaño por debajo del subtítulo —más
   pequeña y en el gris más apagado—: es un dato para mirar de reojo, no algo
   que haya que leer. Con cifras tabulares, que cambia cada segundo y sin ellas
   el renglón baila. */
#jor-fin {
  font-size: 10.5px; color: var(--faint); margin-top: 2px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- El reloj de arena ---------- */
/* Tres relojes (0.7.106): el alto dice cuánto tiempo mide, así que manda el
   ALTO y no el ancho — cada dibujo tiene sus proporciones. */
.jor-arena { height: var(--jor-alto, 60px); width: auto; overflow: visible; --jor-grano: var(--mint-macizo); }
/* ---- La caja del reloj: siempre del alto del más grande (0.7.106.3) ----
   Cada reloj mide distinto, y sin caja la ventana entera subía y bajaba al
   cambiar de uno a otro —«baila mucho», dijo Eduardo—. Se CENTRA, no se apoya
   abajo (0.7.108.2): apoyado, todo el sobrante se juntaba arriba y cantaba la
   diferencia de alto; centrado se reparte en dos mitades y casi no se nota. */
.jor-reloj-caja { height: 74px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.jor-arena.t-chico { --jor-alto: 55px; }
.jor-arena.t-mediano { --jor-alto: 62px; }
.jor-arena.t-grande { --jor-alto: 74px; }
.jor-arena.brasa { --jor-grano: var(--jor-brasa-grano); }
.jor-arena.pausa { --jor-grano: var(--coral-macizo); }
/* ---- El volteo: una vuelta de verdad, no un estirón ----
   Media vuelta sobre el centro de SU cuello, que es el punto de giro que cada
   reloj escribe en línea. En 0.7.106 se cambió por un `scaleY(-1)` para que el
   vidrio no se saliera por los lados a media vuelta, y el remedio fue peor que
   la enfermedad: un estiramiento no se lee como voltear un reloj, se lee como
   arena subiendo y bajando. Lo paró Eduardo — «debe ser rotatorio en circular,
   como cuando se pone de cabeza el reloj».

   Y lo de salirse por los lados se arregla donde estaba: a mitad de la vuelta
   el vidrio se encoge un poco, como cuando lo levantas para darle la vuelta, y
   así pasa entre los postes sin desbordar.

   Es una ANIMACIÓN y no una transición, y esa parte no es de adorno: al acabar
   vuelve sola a `rotate(0)`, que es justo el estado en el que hay que redibujar
   la arena, y avisa con `animationend` en vez de con un cronómetro que puede
   desfasarse. Nada de esto sale de una variable, así que no cae en la trampa de
   Chrome con las transiciones.

   Gira el RELOJ ENTERO desde 0.7.108.1 —marco incluido—, y eso se pudo porque
   los tres dibujos se rehicieron simétricos respecto al cuello (ver
   `J_RELOJES`): con un arco arriba y un pedestal abajo, media vuelta dejaba el
   reloj apoyado del revés, y por eso hasta entonces giraba solo el vidrio.
   Siendo simétrico, a media vuelta el pie se ve igual que derecho, y al acabar
   «abajo lleno, girado» y «arriba lleno, derecho» son el mismo dibujo. */
#jor-giro { transform-box: view-box; }
#jor-giro.girando { animation: jor-voltear .9s cubic-bezier(.3, .7, .2, 1); }
@keyframes jor-voltear {
  from { transform: rotate(0deg); }
  50% { transform: rotate(90deg) scale(.86); }
  to { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) { #jor-giro.girando { animation: none; } }
/* Las tapas y los postes iban en `--card` y `--line`, casi el mismo tono que
   la tarjeta de detrás: a 56 px de alto las tapas no se veían y el reloj
   parecía un vaso suelto. Lo cazó Eduardo en la 0.7.101. Van un escalón más
   claras y más gruesas, que es lo que dice «esto es un reloj de arena». */
.jor-madera { fill: var(--faint); stroke: var(--muted); stroke-width: 2.5; }
.jor-poste { stroke: var(--faint); stroke-width: 7; stroke-linecap: round; }
.jor-poste.delgado { stroke-width: 5; }
.jor-poste.fino { stroke-width: 3; }
.jor-vidrio { fill: color-mix(in srgb, var(--celeste) 8%, transparent); }
.jor-vidrio-borde { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linejoin: round; }
.jor-arena-g { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--jor-grano) 50%, transparent)); }
.jor-arena-g rect { fill: var(--jor-grano); }
#jor-chorro { stroke: var(--jor-grano); stroke-width: 4; stroke-dasharray: 6 8; animation: jor-caer .5s linear infinite; }
@keyframes jor-caer { to { stroke-dashoffset: -14; } }
/* De día no hay resplandor: sobre papel un halo es una mancha. */
html.claro .jor-arena-g { filter: none; }

/* ---------- Los controles ---------- */
.jor-controles { display: grid; gap: 10px; width: 100%; max-width: 360px; margin: 0 auto; }
.jor-pildoras { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.jor-pild {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  padding: 8px 12px 8px 10px; border-radius: var(--r-pastilla);
  border: 1px solid var(--line); background: var(--sup-tarjeta); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.jor-pild:disabled { cursor: default; opacity: 1; }
.jor-pild .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; font-variant-numeric: tabular-nums; }
.jor-pild svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jor-punto { width: 10px; height: 10px; border-radius: var(--r-micro); flex: none; }
.jor-acc { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.jor-acc.dos { grid-template-columns: 1fr 1fr; }
.jor-acc.una { grid-template-columns: 1fr; }
.jor-grande { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 14px 18px; font-size: 16px; }
.jor-grande svg, .jor-icono svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jor-grande svg.lleno { fill: currentColor; stroke: none; }
.jor-icono { width: 50px; height: 50px; padding: 0; border-radius: var(--r-redondo); display: grid; place-items: center; }
.jor-chico { padding: 8px 12px; font-size: 13px; }
/* La fila que aparece al pausar. Separada de los dos botones grandes y más
   pequeña que ellos: son salidas, no la acción. */
.jor-mas { margin-top: 2px; }
.btn.seguro { background: var(--coral-soft); }
.jor-regla { margin: 0; text-align: center; font-size: 12.5px; color: var(--muted); }
/* ---- Despertar, con la app atenuada (0.7.113.1) ----
   El botón y su renglón se levantan POR ENCIMA del velo: son la única salida
   y tienen que leerse sin pelear con la penumbra. El halo respira para que el
   ojo lo encuentre al abrir la app medio dormido. De día no hay resplandor
   —regla de la casa—, así que ahí late un aro en vez de un halo: dice lo mismo
   sin manchar el papel. */
/* `.app` lleva `z-index: 1`, o sea que es su PROPIO contexto de apilamiento:
   cualquier z-index de dentro se compara solo contra sus hermanos, nunca
   contra el velo, que cuelga de `body`. Por eso el botón seguía atenuado por
   mucho piso que se le pusiera. Mientras se duerme, `.app` deja de crear
   contexto y entonces sí: 106 le gana a 105. */
html.durmiendo .app { z-index: auto; }
html.durmiendo .jor-despertar,
html.durmiendo #jor-controles .jor-regla { position: relative; z-index: var(--piso-despertar); }
html.durmiendo #jor-controles .jor-regla { color: var(--text); font-size: 13px; }
.jor-despertar .btn { position: relative; overflow: hidden; animation: jor-respira 2.8s ease-in-out infinite; }
/* Dentro del botón late una luz, no solo el halo de fuera: es lo que lo hace
   parecer encendido y no solo enmarcado. */
.jor-despertar .btn::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 150% at 50% 130%, rgba(255, 255, 255, .55), transparent 62%);
  animation: jor-late 2.8s ease-in-out infinite;
}
@keyframes jor-late { 0%, 100% { opacity: .18; } 50% { opacity: .5; } }
/* Y al pasar el cursor, un destello lo barre de izquierda a derecha. Es el
   mismo gesto que `.ncel-fulgor` en la carta de subir de nivel: una pasada,
   no un bucle — en bucle sería un anuncio. El blanco aquí es LUZ y no un tono
   de la paleta, que es la única razón por la que va escrito a mano. */
.jor-despertar .btn::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 55%;
  background: linear-gradient(74deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%);
  pointer-events: none; opacity: 0;
}
.jor-despertar .btn:hover::after,
.jor-despertar .btn:focus-visible::after { animation: jor-fulgor .9s ease-out; }
@keyframes jor-fulgor {
  0% { transform: translateX(-120%); opacity: 0; }
  22% { opacity: 1; }
  100% { transform: translateX(220%); opacity: 0; }
}
@keyframes jor-respira {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 50%, transparent); }
  50% { box-shadow: 0 0 24px 5px color-mix(in srgb, var(--mint) 50%, transparent); }
}
html.claro .jor-despertar .btn { animation: jor-respira-dia 2.8s ease-in-out infinite; }
@keyframes jor-respira-dia {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 34%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--mint) 26%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .jor-despertar .btn, .jor-despertar .btn::before, .jor-despertar .btn::after { animation: none; }
}
/* Las salidas secundarias van como enlace y no como botón: «Enfocar de todos
   modos» dentro de un descanso y «Abandonar» en el modo Libre. Un tercer botón
   grande competiría con los dos que sí son la acción. */
.jor-enlace {
  justify-self: center; border: 0; background: none; padding: 4px 8px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.jor-enlace.peligro { color: var(--coral); }
.jor-desc-tx { font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- La lista del día ---------- */
.jor-lista { display: grid; gap: 10px; align-content: start; }
.jor-rot { margin: 4px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.jor-bloques { display: grid; gap: 6px; }
.jor-fila {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--r-tarjeta); border: 1px solid var(--line);
  background: var(--sup-tarjeta); color: var(--text); font: inherit; cursor: pointer;
}
.jor-fila.sel { border-color: var(--text); }
.jor-tile { width: 38px; height: 38px; border-radius: var(--r-chico); display: grid; place-items: center; color: var(--sobre-vivo); flex: none; }
.jor-tile.descanso, .jor-tile.sin { color: var(--text); }
.jor-tile.sin { background: var(--sup-tarjeta); border: 1px solid var(--line); }
.jor-tile svg { width: 19px; height: 19px; }
.jor-tile.chico { width: 30px; height: 30px; }
.jor-tile.chico svg { width: 16px; height: 16px; }
.jor-fila-t { display: grid; min-width: 0; }
.jor-fila-t b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jor-fila-t span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jor-fila-d { display: grid; justify-items: end; gap: 3px; }
.jor-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pastilla); background: var(--carril); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.jor-chip.ahora { background: var(--mint-soft); color: var(--mint); }
.jor-acomodar { display: flex; flex-wrap: wrap; gap: 6px; }
.jor-acomodar button {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px;
  border-radius: var(--r-pastilla); border: 1px dashed var(--line); background: transparent;
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.jor-vacio, .jor-como { margin: 0; font-size: 13px; color: var(--muted); }
.jor-como { font-size: 12px; margin-top: 6px; }

/* ---------- La píldora que te sigue ---------- */
.jornada-pildora {
  position: fixed; z-index: var(--piso-reloj);
  left: 50%; transform: translateX(-50%);
  bottom: calc(92px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; text-align: left;
  min-width: 220px; max-width: calc(100vw - 40px);
  padding: 6px 16px 6px 6px; border-radius: var(--r-redondo);
  border: 1px solid var(--mint); background: var(--sup-flotante); backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px var(--sombra-m); color: var(--text); font: inherit; cursor: pointer;
}
.jornada-pildora[hidden] { display: none; }
.jornada-pildora .ic { width: 34px; height: 34px; border-radius: var(--r-redondo); display: grid; place-items: center; background: var(--mint-soft); color: var(--mint); }
/* La píldora REACCIONA al estado (0.7.102): en pausa se veía menta, como si
   siguiera corriendo. Borde, disco del icono y rótulo cambian juntos. */
.jornada-pildora.brasa { border-color: var(--jor-brasa); }
.jornada-pildora.brasa .ic { background: var(--jor-brasa-velo); color: var(--jor-brasa); }
.jornada-pildora.pausa { border-color: var(--coral); }
.jornada-pildora.pausa .ic { background: var(--coral-soft); color: var(--coral); }
/* Con `.jornada-pildora` delante a propósito: la regla de la cifra grande
   (`.jornada-pildora b`) también atrapa este `<b>`, y ganaba — lo dejaba en
   bloque y con peso 500, así que el estado no salía en negritas. */
.jornada-pildora .jor-pil-est { display: inline; font-size: inherit; font-family: inherit; line-height: inherit; font-weight: 700; color: var(--mint); }
.jornada-pildora.brasa .jor-pil-est { color: var(--jor-brasa); }
.jornada-pildora.pausa .jor-pil-est { color: var(--coral); }
.jornada-pildora .ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.jornada-pildora b { display: block; font-size: 17px; font-weight: 500; line-height: 1.1; font-family: var(--tipo-cifra); font-variant-numeric: tabular-nums; }
.jornada-pildora span span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }

/* ---------- Las hojas ---------- */
.jornada-card { display: grid; gap: 14px; max-height: 88vh; overflow-y: auto; }
.jor-hoja-cab { display: grid; gap: 2px; }
.jor-hoja-cab h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.jor-ceja { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.jor-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--r-tarjeta); background: var(--bg); border: 1px solid var(--line); }
.jor-seg button { border: 0; background: none; padding: 9px 6px; border-radius: var(--r-chico); font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.jor-seg button[aria-pressed="true"] { background: var(--sup-tarjeta); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.jor-filas { display: grid; border-radius: var(--r-tarjeta); border: 1px solid var(--line); }
.jor-fila-aj { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; min-height: 50px; font-size: 14px; }
.jor-fila-aj + .jor-fila-aj { border-top: 1px solid var(--line); }
.jor-fila-aj small { display: block; color: var(--muted); font-size: 12px; }
.jor-paso { display: flex; align-items: center; gap: 4px; }
.jor-paso button { width: 32px; height: 32px; border-radius: var(--r-chico); border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
/* El número escrito a mano (0.7.119): mismo hueco que el `output` para que la
   fila no salte al abrirlo, y el lápiz al lado de los botones. */
input.jor-num {
  width: 72px; text-align: center; font: inherit; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text);
  background: var(--bg); border: 1px solid var(--mint); border-radius: var(--r-chico);
  padding: 4px 6px;
}
input.jor-num::-webkit-outer-spin-button, input.jor-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jor-lapiz-num {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--r-redondo);
  background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer;
}
.jor-lapiz-num:hover { color: var(--text); background: var(--carril); }
.jor-lapiz-num svg { width: 14px; height: 14px; }
.jor-paso output { min-width: 80px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
/* Los interruptores de la hoja de ajustes del Pomodoro se deslizan más
   despacio que los del resto de la app: 4 veces la base (Eduardo, sobre el
   boceto). Va en la hoja y no en cada control, que la variable se hereda. */
#jornada-hoja { --desliza-lento: 4; }
.jor-sw { width: 44px; height: 26px; border-radius: var(--r-redondo); border: 1px solid var(--line); background: var(--carril); position: relative; padding: 0; flex: none; cursor: pointer; }
.jor-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); }
.jor-sw[aria-checked="true"] { background: var(--mint-macizo); border-color: var(--mint-macizo); }
.jor-sw[aria-checked="true"]::after { transform: translateX(18px); background: var(--sobre-macizo); }
/* El color propio de un bloque: «Automático» y los ocho de la app. */
.jor-colores { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jor-color { width: 30px; height: 30px; padding: 0; border-radius: var(--r-redondo); border: 0; cursor: pointer; }
.jor-color[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--sup-tarjeta), 0 0 0 4px var(--text); }
.jor-color.auto {
  width: auto; padding: 0 12px; border: 1px dashed var(--line); background: transparent;
  color: var(--muted); font: inherit; font-size: 12px; font-weight: 600;
}
.jor-color.auto[aria-pressed="true"] { color: var(--text); border-style: solid; box-shadow: none; border-color: var(--text); }
.jor-ops { display: grid; gap: 6px; }
.jor-ops.alto { max-height: 38vh; overflow-y: auto; padding-right: 2px; }
.jor-grupo { margin: 6px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.jor-op {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; text-align: left; width: 100%;
  padding: 9px 12px; border-radius: var(--r-tarjeta); border: 1px solid var(--line); background: transparent;
  color: var(--text); font: inherit; cursor: pointer;
}
.jor-op[aria-pressed="true"] { border-color: var(--mint); background: var(--mint-soft); }
.jor-op-t { font-size: 14px; }
.jor-op small { display: block; font-size: 12px; color: var(--muted); }
.jor-ok { color: var(--mint); display: inline-flex; }
.jor-ok svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
/* La rueda de la hoja (0.7.109): la misma, en pequeño y solo para mirar. */
/* La rueda de la hoja ya no es un dibujo: se arrastra dentro y se toca otro
   bloque para editarlo, así que necesita sitio y no puede hacer scroll al
   deslizar el dedo encima. */
.jor-previa { display: block; width: 100%; max-width: 236px; margin: 2px auto 10px; overflow: visible; touch-action: none; user-select: none; -webkit-user-select: none; }
.jor-previa .jor-blq.otro { opacity: .6; }
.jor-previa .jor-blq.nuevo { stroke: var(--text); stroke-width: 2.4; }
.jor-previa .jor-blq.bloqueado { opacity: 1; }
.jor-campo { display: grid; gap: 6px; }
.jor-campo label { font-size: 14px; }
.jor-campo input { width: 100%; }
.jor-nota { margin: 0; font-size: 13px; color: var(--muted); }
.jor-nota.error { color: var(--coral); }
.jor-efecto { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 12px; border-radius: var(--r-tarjeta); background: var(--mint-soft); font-size: 14px; }
.jor-efecto svg { width: 22px; height: 22px; fill: none; stroke: var(--mint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jor-efecto small { display: block; color: var(--muted); font-size: 12px; }
.jor-grupo-p { display: grid; gap: 8px; }
.jor-grupo-p p { margin: 0; font-size: 14px; }
.jor-animo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.jor-animo button { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: var(--r-chico); border: 1px solid var(--line); background: transparent; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
.jor-animo button[aria-pressed="true"] { border-color: var(--mint); color: var(--text); background: var(--mint-soft); }
.jor-animo .d { display: flex; gap: 3px; }
.jor-animo .d i { width: 7px; height: 7px; border-radius: 50%; background: var(--carril); }
.jor-animo .d i.on { background: var(--mint); }

/* ---------- En la computadora ---------- */
@media (min-width: 900px) {
  /* CENTRADO en la pantalla (0.7.102): pegado a la izquierda dejaba media
     ventana vacía a la derecha. Las dos columnas tienen tope y el conjunto va
     al medio; el título se alinea con él para que no se quede solo en la
     esquina. */
  /* El reloj a la IZQUIERDA y todo lo demás a la derecha (0.7.115.1): al meter
     el selector de días arriba, la reja lo puso de primero y el reloj se fue a
     la columna derecha. Con áreas con nombre el orden del HTML deja de mandar:
     el reloj ocupa la columna izquierda entera y a su lado se apilan el
     selector y la lista. */
  .jor {
    display: grid; grid-template-columns: minmax(380px, 460px) minmax(0, 560px);
    grid-template-areas: "reloj dias" "reloj lista";
    grid-template-rows: auto 1fr;
    justify-content: center; gap: 20px 28px; align-items: start;
    padding-bottom: 40px; max-width: 1048px; margin: 0 auto;
  }
  .jor-reloj { grid-area: reloj; }
  .jor-dias { grid-area: dias; }
  .jor-lista { grid-area: lista; }
  #view-jornada .page-head { max-width: 1048px; margin-left: auto; margin-right: auto; }
  .jor-reloj { background: var(--sup-tarjeta); border: 1px solid var(--line); border-radius: var(--r-grande); padding: 22px 22px 24px; }
  /* La lista no se estira a todo lo que sobra: una tira de 1.000 px con un
     nombre a la izquierda y la duración a la derecha no se lee como UNA cosa.
     Lo pidió Eduardo al probarla (0.7.101.1). */
  .jor-lista { max-width: 560px; }
  .jor-rueda { max-width: 400px; --jor-sep: var(--card); }
  .jor-centro .jor-reloj-caja { height: 88px; }
  .jor-lite .jor-reloj-caja { height: 216px; }
  .jor-centro .jor-arena.t-chico { --jor-alto: 66px; }
  .jor-centro .jor-arena.t-mediano { --jor-alto: 74px; }
  .jor-centro .jor-arena.t-grande { --jor-alto: 88px; }
  .jor-centro #jor-tiempo { font-size: 42px; }
  .jor-lite { background: var(--sup-tarjeta); border: 1px solid var(--line); border-radius: var(--r-grande); padding: 36px 32px 34px; }
  .jor-lite .jor-arena.t-chico { --jor-alto: 154px; }
  .jor-lite .jor-arena.t-mediano { --jor-alto: 176px; }
  .jor-lite .jor-arena.t-grande { --jor-alto: 216px; }
  .jor-lite #jor-tiempo { font-size: 80px; }
  /* Abajo a la derecha viven los avisos de la app; la píldora se va arriba. */
  .jornada-pildora { left: auto; right: 24px; transform: none; bottom: auto; top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  #jor-giro, .jor-sw::after { transition: none; }
  #jor-chorro { animation: none; }
}

/* ---------- Donde hay dedo, el dedo es primero de la página ----------
   Va al final del archivo a propósito: son dos reglas que PISAN a las de
   arriba, y una sola de ellas suelta en su sección se leería como un olvido.

   `#jor-svg` y `.jor-previa` nacen con `touch-action: none` porque son
   superficies de arrastre. Con el dedo eso costaba caro: apoyado en cualquier
   punto de la rueda —también sobre el hueco vacío, y también con la rueda
   quieta, donde no hay nada que mover— la pantalla dejaba de desplazarse. Así
   que se desplazan como cualquier otra cosa, y solo dejan de hacerlo mientras
   hay un bloque en la mano de verdad (`jor-arrastrando`, que pone el
   JavaScript al sostener; ver `jGuardia` en js/09d-jornada.js).

   **Y van SIN media query, que es el arreglo de la 0.7.128.1.** Salieron
   metidas en `max-width: 899px`, y eso deja fuera a la tableta en horizontal —
   que es una pantalla táctil de 1.024 px y se quedaba sin poder desplazar,
   igual que el teléfono antes—. Lo cazó Eduardo con una frase: «y tabletas
   también, ya que son pantallas táctiles».

   Preguntar por el ancho era la pregunta equivocada; preguntar por
   `any-pointer: coarse` sería la correcta, pero tampoco hace falta ninguna:
   **`touch-action` solo se lo mira el dedo y el lápiz.** Un ratón lo ignora, y
   quien decide si se arrastra al instante o hay que sostener es el
   `pointerType` del propio gesto, no la hoja de estilos. Sin condición no hay
   dispositivo que se quede fuera, ni un quinto sitio donde acordarse de esto.

   `pan-y` y no `auto`: de lado no hay nada que desplazar aquí, y dejarlo
   abierto invita a que la rueda se vaya con un deslizamiento torcido. */
#jor-svg, .jor-previa { touch-action: pan-y; }
#jor-svg.jor-arrastrando, .jor-previa.jor-arrastrando { touch-action: none; }

/* ---------- La salida «3, 2, 1» y la cuenta del descanso (0.7.132) ----------
   Las dos son de la app; un mundo solo las viste. Las cifras van en
   `--tipo-cifra` y el latido en `--curva-rebote`, así que Arcade las pone de
   píxel y a saltos sin una regla propia. */
.jor-salida {
  position: fixed; inset: 0; z-index: var(--piso-salida);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: var(--velo);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.jor-salida-n {
  font-family: var(--tipo-cifra); font-weight: 800; font-size: 132px; line-height: 1;
  color: var(--mint); font-variant-numeric: tabular-nums;
}
.jor-salida-n.late, .jor-cuenta-n.late { animation: jorLate 0.45s var(--curva-rebote); }
@keyframes jorLate { 0% { transform: scale(1.35); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } }
.jor-cuenta {
  position: fixed; left: 50%; top: calc(18px + env(safe-area-inset-top)); z-index: var(--piso-cuenta);
  transform: translateX(-50%); pointer-events: none;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-radius: var(--r-grande);
  background: var(--sup-tarjeta); border: var(--borde-tarjeta) solid var(--line);
  box-shadow: 0 10px 28px var(--sombra-m);
}
.jor-cuenta-t { font-size: 14px; font-weight: 600; color: var(--muted); }
.jor-cuenta-n {
  font-family: var(--tipo-cifra); font-weight: 800; font-size: 34px; line-height: 1;
  color: var(--mint); font-variant-numeric: tabular-nums; min-width: 1ch; text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .jor-salida-n.late, .jor-cuenta-n.late { animation: none; }
}