/* ═══ tour.css — Recorrido (first-login welcome tour) · RODECA Labs Ops Console ═══
   Depends on app.css tokens. No new colors: only tokens plus two alpha overlays (dim, ring).
   Layers (inside .tour, z-index 70 — above the Chief panel 60, below the toast 100):
     .tour-dim      full-viewport dim with an evenodd clip-path hole (the spotlight)
     .tour-catcher  transparent, swallows every pointer/wheel event: the page is inert during the tour
     .tour-ring     1px hairline on the hole edge (needed in dark; kept in light for one rule)
     .tour-card     role=dialog. Floating card >=768px; bottom sheet <768px
   Motion: transform/opacity/clip-path only. Enter 200ms --ease-out, exit 120ms. Sheet 260/200ms --ease-drawer.
   All step-to-step changes are CSS transitions (retargetable), never keyframes. */

:root{
  --tour-dim:rgba(17,17,68,.55);        /* Marino at 55% over Marfil -> #777690 ; surface -> #7C7C98 (hole vs dim 4.0:1). Dark: black 65% */
  --tour-ring:rgba(17,17,68,.2);
  --tour-pad:8px;                        /* breathing room around the target inside the hole */
  --tour-gap:12px;                       /* hole edge -> card edge (desktop) */
  --tour-enter:200ms;
  --tour-exit:120ms;
  --tour-sheet-in:260ms;
  --tour-sheet-out:200ms;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tour-dim:rgba(0,0,0,.65);--tour-ring:rgba(155,172,216,.5)}}
:root[data-theme="dark"]{--tour-dim:rgba(0,0,0,.65);--tour-ring:rgba(155,172,216,.5)}

/* ── Root ── */
.tour{position:fixed;inset:0;z-index:70;pointer-events:none}
.tour[hidden]{display:none}
.tour.instant *{transition-duration:0ms!important}       /* resize / orientation: re-place without motion */

/* ── Dim + spotlight hole (evenodd clip-path set inline by JS) ── */
.tour-dim{position:fixed;inset:0;background:var(--tour-dim);opacity:0;
  transition:opacity var(--tour-enter) var(--ease-out),clip-path var(--tour-enter) var(--ease-out)}
.tour.open .tour-dim{opacity:1}
.tour.closing .tour-dim{opacity:0;transition-duration:var(--tour-exit)}
.tour.out .tour-dim{transition-duration:var(--tour-exit)}   /* hole contracts 8px while the card fades out */

/* ── Catcher: keeps the target inert; a tap on the scrim is a no-op (never skips) ── */
.tour-catcher{position:fixed;inset:0;pointer-events:auto;touch-action:none;z-index:1}

/* ── Ring: the hole edge. Fades, never moves (position snaps under the crossfade) ── */
.tour-ring{position:fixed;z-index:2;box-sizing:border-box;border:1px solid var(--tour-ring);border-radius:var(--r1);
  opacity:0;pointer-events:none;transition:opacity var(--tour-enter) var(--ease-out)}
.tour-ring.on{opacity:1}
.tour.out .tour-ring,.tour.closing .tour-ring{opacity:0;transition-duration:var(--tour-exit)}

/* ── Card (desktop: floating, anchored to the hole) ── */
.tour-card{position:fixed;z-index:3;width:320px;max-width:calc(100vw - 32px);
  background:var(--surface);color:var(--text-1);border:1px solid var(--border);padding:var(--s5);
  pointer-events:auto;opacity:0;transform:var(--tour-from,translateY(8px));
  transition:opacity var(--tour-enter) var(--ease-out),transform var(--tour-enter) var(--ease-out)}
.tour-card.in{opacity:1;transform:none}
.tour.out .tour-card,.tour.closing .tour-card{opacity:0;transform:none;transition-duration:var(--tour-exit)}  /* exit: fade only, faster */

.tour-content{transition:opacity var(--tour-enter) var(--ease-out)}
.tour.out .tour-content{opacity:0;transition-duration:var(--tour-exit)}

.tour-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:-10px 0 6px}
.tour-count{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-variant-numeric:tabular-nums}
.tour-skip{height:44px;padding:0 var(--s2);margin-right:calc(-1 * var(--s2))}   /* 44px hit area, text optically flush with the card edge */

.tour-card h2{font-size:17px;line-height:24px;font-weight:600;letter-spacing:0;margin:0 0 6px;color:var(--text-1)}
.tour-card p{font-size:15px;line-height:24px;color:var(--text-1);min-height:72px;margin:0}      /* reserve 3 lines: the sheet does not jump between steps */
.tour-card p b{font-weight:600}
.tour-card p code{font-family:var(--mono);font-size:13px;background:var(--surface2);padding:1px 4px;border-radius:var(--r1)}

.tour-foot{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s5)}
.tour-foot .btn{min-width:44px}
.tour-back.ghosted{visibility:hidden}     /* step 1: keeps Siguiente in place */

/* ── Sheet (<768px): persistent; only .tour-content crossfades between steps ── */
@media (max-width:767px){
  .tour-card{left:0;right:0;bottom:0;top:auto!important;width:auto;max-width:none;
    border-left:0;border-right:0;border-bottom:0;
    padding:var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
    opacity:1;transform:translateY(100%);
    transition:transform var(--tour-sheet-in) var(--ease-drawer)}
  .tour-card.in{transform:none}
  .tour.out .tour-card{opacity:1;transform:none}                                    /* sheet stays; content fades */
  .tour.closing .tour-card{opacity:1;transform:translateY(100%);transition-duration:var(--tour-sheet-out)}
  .tour-head{margin-top:-8px}
  .tour-foot .tour-next{flex:1}
}

/* ── Reduced motion: keep the fades (<=120ms), drop every translate/scale and the hole breathing ── */
@media (prefers-reduced-motion:reduce){
  .tour-dim,.tour-ring,.tour-card,.tour-content{transition-duration:120ms!important;transition-property:opacity!important}
  .tour-card{transform:none!important}
  .tour-card.in{opacity:1}
  .tour.closing .tour-card{opacity:0}
}
html.rm .tour-dim,html.rm .tour-ring,html.rm .tour-card,html.rm .tour-content{transition-duration:120ms!important;transition-property:opacity!important}
html.rm .tour-card{transform:none!important}
html.rm .tour-card.in{opacity:1}
html.rm .tour.closing .tour-card{opacity:0}
@media (max-width:767px){
  html.rm .tour-card:not(.in){opacity:0}
}
@media (prefers-reduced-motion:reduce) and (max-width:767px){
  .tour-card:not(.in){opacity:0}
}

/* ═══ User menu (avatar) — prerequisite of step 7. Same tokens; popover scales from its trigger ═══ */
.umenu{position:fixed;top:calc(var(--top-h) + 4px);right:var(--s3);z-index:30;min-width:220px;
  background:var(--surface);border:1px solid var(--border);padding:var(--s1) 0;
  transform-origin:top right;opacity:0;transform:translateY(-4px) scale(.98);visibility:hidden;
  transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out),visibility 0s linear 150ms}
.umenu.open{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.umenu .who{padding:var(--s2) var(--s4) var(--s2);border-bottom:1px solid var(--border);margin-bottom:var(--s1)}
.umenu .who .n{font-size:13px;font-weight:600}
.umenu .who .r{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.umenu [role="menuitem"]{display:flex;align-items:center;gap:var(--s3);width:100%;height:44px;padding:0 var(--s4);text-align:left;font-size:14px;color:var(--text-1);transition:background-color 120ms ease}
.umenu [role="menuitem"].danger{border-top:1px solid var(--border);margin-top:var(--s1);color:var(--err-c)}
@media(hover:hover) and (pointer:fine){.umenu [role="menuitem"]:hover{background:var(--surface2)}}
@media (prefers-reduced-motion:reduce){.umenu{transform:none!important;transition-property:opacity,visibility!important}}