/* arlem-nucleo front/recorrido @ b2f7cb1 — no editar acá, editar en el núcleo */
/* arlem-nucleo · front/recorrido.css — el tutorial adentro de la app (03/11/2026). La app pisa los --rc-* con sus tokens. */
.rc {
  --rc-fondo: var(--surface, #fff); --rc-tinta: var(--ink, #17201b); --rc-tinta-2: var(--ink-2, #3d4a43); --rc-tinta-3: var(--ink-3, #6b7770);
  --rc-acento: var(--accent, #1f7a4d); --rc-acento-tinta: #fff; --rc-linea: var(--line, #dfe3df);
  --rc-velo: rgba(12, 16, 14, .62); --rc-radio: 14px; --rc-ancho: 340px;
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  font: 14px/1.45 var(--font, system-ui, -apple-system, 'Segoe UI', sans-serif); color: var(--rc-tinta);
}
@media (prefers-color-scheme: dark) {
  .rc { --rc-fondo: var(--surface, #1c2320); --rc-tinta: var(--ink, #eef2ef); --rc-tinta-2: var(--ink-2, #c9d2cc); --rc-tinta-3: var(--ink-3, #93a09a); --rc-linea: var(--line, #2e3833); --rc-velo: rgba(0, 0, 0, .7); }
}
/* se come los clics de afuera (transparente: el oscuro lo pone la sombra del foco) */
.rc-tapa { position: fixed; inset: 0; pointer-events: auto; background: transparent; }
/* el foco: un hueco con borde claro; su sombra gigante oscurece todo lo demás */
.rc-foco {
  position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 200vmax var(--rc-velo);
  transition: left .35s cubic-bezier(.2, .8, .2, 1), top .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1), opacity .2s;
}
.rc-foco.rc-sin { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; box-shadow: 0 0 0 200vmax var(--rc-velo); }
/* la nube */
.rc-nube {
  position: fixed; width: var(--rc-ancho); max-width: calc(100vw - 24px); box-sizing: border-box; pointer-events: auto;
  background: var(--rc-fondo); color: var(--rc-tinta); border-radius: var(--rc-radio); padding: 16px 18px 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .12);
  transition: left .35s cubic-bezier(.2, .8, .2, 1), top .35s cubic-bezier(.2, .8, .2, 1), opacity .18s, transform .18s;
}
.rc.rc-moviendo .rc-nube { opacity: .0; transform: translateY(4px); }
.rc-nube[data-lado="centro"] { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.rc.rc-moviendo .rc-nube[data-lado="centro"] { transform: translate(-50%, calc(-50% + 4px)); }
.rc-flecha { position: absolute; width: 14px; height: 14px; background: var(--rc-fondo); transform: rotate(45deg); border-radius: 2px; }
.rc-nube[data-lado="derecha"] .rc-flecha { left: -6px; top: calc(var(--rc-flecha, 24px) - 7px); }
.rc-nube[data-lado="izquierda"] .rc-flecha { right: -6px; top: calc(var(--rc-flecha, 24px) - 7px); }
.rc-nube[data-lado="abajo"] .rc-flecha { top: -6px; left: calc(var(--rc-flecha, 24px) - 7px); }
.rc-nube[data-lado="arriba"] .rc-flecha { bottom: -6px; left: calc(var(--rc-flecha, 24px) - 7px); }
.rc-nube[data-lado="centro"] .rc-flecha, .rc-nube[data-lado="encima"] .rc-flecha, .rc-nube.rc-celu .rc-flecha { display: none; }
.rc-cab { display: flex; align-items: center; min-height: 18px; margin-bottom: 4px; }
.rc-n { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--rc-acento); }
.rc-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--rc-tinta-3); font: 20px/1 system-ui, sans-serif; cursor: pointer; }
.rc-x:hover { background: rgba(127, 127, 127, .14); color: var(--rc-tinta); }
.rc-tit { margin: 0 24px 6px 0; font-size: 16px; line-height: 1.3; font-weight: 650; color: var(--rc-tinta); }
.rc-txt p { margin: 0 0 6px; color: var(--rc-tinta-2); }
.rc-txt p:last-child { margin-bottom: 0; }
.rc-barra { height: 3px; border-radius: 3px; background: var(--rc-linea); margin: 14px 0 12px; overflow: hidden; }
.rc-barra i { display: block; height: 100%; background: var(--rc-acento); border-radius: 3px; transition: width .35s; }
.rc-pie { display: flex; gap: 8px; justify-content: flex-end; }
.rc-pie button { height: 34px; padding: 0 14px; border-radius: 9px; font: inherit; font-weight: 600; cursor: pointer; }
.rc-ant { border: 1px solid var(--rc-linea); background: none; color: var(--rc-tinta-2); margin-right: auto; }
.rc-ant:hover { color: var(--rc-tinta); border-color: var(--rc-tinta-3); }
.rc-sig { border: 0; background: var(--rc-acento); color: var(--rc-acento-tinta); min-width: 104px; }
.rc-sig:hover { filter: brightness(1.08); }
.rc-pie button:focus-visible, .rc-x:focus-visible { outline: 2px solid var(--rc-acento); outline-offset: 2px; }
/* celu: la nube a lo ancho, abajo (o arriba si el foco está abajo) */
.rc-nube.rc-celu { left: 12px !important; right: 12px; width: auto; max-width: none; transform: none; }
.rc-nube.rc-celu[data-lado="celu-abajo"], .rc-nube.rc-celu[data-lado="centro"] { top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.rc-nube.rc-celu[data-lado="celu-arriba"] { top: calc(12px + env(safe-area-inset-top, 0px)) !important; bottom: auto; }
@media (prefers-reduced-motion: reduce) { .rc-foco, .rc-nube, .rc-barra i { transition: none; } }