/* ══════════════════════════════════════════════════════════════════
   MSOFT GUIDE · la capa visual

   Cajón lateral, foco con recorte y globo, como pide el estándar (§18).
   Nada de un cuadro de ayuda viejo.

   Todo va con los tokens de GastroPro —`--accent`, `--bg-elev`, `--line`,
   `--ink`, `--muted`— así que en claro manda el verde de MSOFT y en oscuro
   el naranja, sin una sola línea de más (regla 8). Un token que no existe
   no avisa: sale sin estilo y parece que la pantalla se rompió, así que
   aquí sólo se usan los que existen de verdad.
   ══════════════════════════════════════════════════════════════════ */

/* ── El botón ─────────────────────────────────────────────────────
   Flotante y discreto. Abajo a la derecha y por encima de todo menos del
   propio tutorial: tiene que poder pulsarse desde cualquier pantalla sin
   tapar nada de lo que se está haciendo. */
.guia-btn {
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 940;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--accent);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.guia-btn svg { width: 22px; height: 22px; }
.guia-btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.guia-btn[hidden] { display: none; }

/* El aviso discreto de §16. Nunca agresivo: pequeño, al lado del botón y
   se va solo a los veinte segundos. */
.guia-nudge {
  position: fixed;
  right: 18px;
  bottom: 140px;
  z-index: 941;
  max-width: 260px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-elev);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}
.guia-nudge p { margin: 0 0 9px; font-size: 13px; }
.guia-nudge-acc { display: flex; gap: 6px; }
.guia-nudge[hidden] { display: none; }

/* ── El cajón ─────────────────────────────────────────────────────── */
.guia-velo {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(1.5px);
}
.guia-velo[hidden] { display: none; }

.guia-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 951;
  width: min(440px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 46px rgba(0, 0, 0, 0.22);
  animation: guia-entra 0.22s ease;
}
.guia-panel[hidden] { display: none; }
@keyframes guia-entra { from { transform: translateX(26px); opacity: 0; } }

/* En el móvil ocupa casi todo, pero deja ver que hay algo detrás: si lo
   tapara entero parecería otra pantalla y no una ayuda. */
@media (max-width: 560px) {
  .guia-panel { width: 100vw; top: 10vh; border-radius: 18px 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .guia-btn { bottom: 76px; right: 12px; }
}

.guia-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.guia-head h2 { margin: 2px 0 0; font-size: 1.1rem; }
.guia-head p.muted { margin: 3px 0 0; font-size: 12px; }
.guia-kicker {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.guia-x {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.guia-x:hover { color: var(--ink); border-color: var(--accent); }

.guia-cuerpo { flex: 1; overflow: auto; padding: 16px 18px 28px; }
.guia-cuerpo > p { font-size: 13.5px; line-height: 1.55; }

.guia-sec { margin-bottom: 20px; }
.guia-sec h3 {
  margin: 0 0 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.guia-sec p { margin: 0; font-size: 13.5px; line-height: 1.55; }

/* Los pasos numerados. El número en su círculo: es lo que convierte un
   párrafo en algo que se puede seguir con el dedo. */
.guia-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.guia-pasos li { display: flex; gap: 10px; align-items: flex-start; }
.guia-pasos li > span {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 700;
}
.guia-pasos li > div { font-size: 13.5px; line-height: 1.5; }
.guia-flujo li > div strong { display: block; margin-bottom: 2px; }
.guia-flujo li > div p { margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.guia-ir {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}
.guia-ir:hover { text-decoration: underline; }

/* El «ojo»: lo que se aprende tarde y caro si nadie lo dice. */
.guia-ojo {
  margin: 0 0 20px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: 10px;
  background: var(--bg-soft);
}
.guia-ojo strong {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warn);
  margin-bottom: 3px;
}
.guia-ojo p { margin: 0; font-size: 13px; line-height: 1.5; }

.guia-acciones { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.guia-acciones em { font-style: normal; opacity: 0.7; font-size: 11px; }

.guia-faq { border-top: 1px solid var(--line); padding: 9px 0; }
.guia-faq summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.guia-faq p { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ── Centro de aprendizaje ────────────────────────────────────────── */
.guia-barra {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-soft);
  overflow: hidden;
  margin-bottom: 16px;
}
.guia-barra i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.guia-destacado,
.guia-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.guia-destacado { margin-bottom: 18px; border-left: 3px solid var(--accent); background: var(--bg-soft); }
.guia-destacado:hover,
.guia-item:hover { border-color: var(--accent); background: var(--bg-soft); }
.guia-destacado strong,
.guia-item > span { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.guia-destacado small,
.guia-item small { display: block; font-size: 12px; line-height: 1.45; color: var(--muted); }
.guia-items { display: grid; gap: 7px; }
.guia-ob { display: grid; gap: 9px; }
.guia-ob .guia-destacado { margin-bottom: 0; }

.guia-hecho, .guia-pend, .guia-nuevo {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 999px;
}
.guia-hecho { background: var(--ok-soft); color: var(--ok); }
.guia-pend { background: var(--bg-soft); color: var(--muted); }
.guia-nuevo { background: var(--accent-soft); color: var(--accent-ink); }

/* ── Preguntar ────────────────────────────────────────────────────── */
.guia-buscar { display: flex; gap: 6px; margin-bottom: 11px; }
.guia-buscar input { flex: 1; min-width: 0; }
.guia-resultados { display: grid; gap: 11px; }
.guia-res {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  background: var(--bg-soft);
}
.guia-res h4 { margin: 0 0 5px; font-size: 13.5px; }
.guia-res h4 small { font-weight: 400; color: var(--muted); font-size: 11px; margin-left: 5px; }
.guia-res p { margin: 0 0 7px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.guia-res ol { margin: 0 0 9px; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }
.guia-res-acc { display: flex; flex-wrap: wrap; gap: 6px; }
/* Cuando no se sabe, se dice. Sin color de error: no es un fallo del
   usuario, es ayuda que falta por escribir. */
.guia-nada {
  margin: 0;
  padding: 11px 13px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  font-size: 13px;
  color: var(--muted);
}

/* ── El foco del tutorial ──────────────────────────────────────────
   El agujero no se hace con un velo recortado sino con una sombra
   enorme hacia fuera: así el elemento señalado sigue vivo —se puede
   pulsar y se ve con sus colores— en vez de quedar debajo de una capa
   gris. Es la diferencia entre enseñar un botón y enseñar una foto. */
.guia-foco {
  position: fixed;
  z-index: 960;
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--accent) inset;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.guia-foco[hidden] { display: none; }
/* Mientras se desplaza, sin transición: la animación está para que el salto
   de un paso a otro se vea suave, pero siguiendo un scroll deja el agujero
   dos dedos por detrás del elemento. */
.guia-foco-pegado { transition: none; }

.guia-globo {
  position: fixed;
  z-index: 961;
  width: min(330px, calc(100vw - 28px));
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-elev);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}
.guia-globo[hidden] { display: none; }
.guia-globo-n {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.guia-globo h4 { margin: 0 0 5px; font-size: 14px; }
.guia-globo > p { margin: 0 0 11px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.guia-globo-barra {
  height: 4px;
  border-radius: 999px;
  background: var(--bg-soft);
  overflow: hidden;
  margin-bottom: 11px;
}
.guia-globo-barra i { display: block; height: 100%; background: var(--accent); }
.guia-globo-acc { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
/* «No volver a mostrar» existe y se respeta, pero no compite con
   Siguiente: va debajo y en pequeño. */
.guia-nomas {
  display: block;
  width: 100%;
  margin-top: 9px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  text-align: center;
}
.guia-nomas:hover { text-decoration: underline; }

/* Con la ayuda abierta no se desplaza lo de detrás: si se moviera, el
   foco del tutorial señalaría a donde el botón ya no está. */
body.guia-abierta { overflow: hidden; }