/* Motor de Contenido · tutorial guiado visual (Fase 1)
   Capa deliberadamente independiente de los temas del panel. */
.mc-tour-root {
  --mc-tour-z: 2147483000;
  position: fixed;
  inset: 0;
  z-index: var(--mc-tour-z);
  pointer-events: none;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

.mc-tour-root[hidden] { display: none !important; }

.mc-tour-blocker {
  position: fixed;
  inset: 0;
  z-index: calc(var(--mc-tour-z) + 1);
  pointer-events: auto;
  background: transparent;
  cursor: default;
  touch-action: none;
}

.mc-tour-root.is-preparing .mc-tour-blocker { background: rgba(0, 0, 0, .62); }
.mc-tour-root.is-inviting .mc-tour-blocker { background: rgba(0, 0, 0, .62); }

.mc-tutorial-button {
  width: 100%;
  min-height: 40px;
  margin: 0 0 9px;
  border: 1px solid rgba(212, 175, 55, .34);
  border-radius: 11px;
  padding: 9px 12px;
  background: rgba(212, 175, 55, .08);
  color: var(--ink, #f7f3e9);
  font: inherit;
  font-size: 12.5px;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
}
.mc-tutorial-button:hover { border-color: rgba(212, 175, 55, .72); background: rgba(212, 175, 55, .14); }
.mc-tutorial-button:focus-visible { outline: 2px solid #d4af37; outline-offset: 2px; }

.mc-tour-spotlight {
  position: fixed;
  z-index: calc(var(--mc-tour-z) + 2);
  pointer-events: none;
  border: 2px solid rgba(244, 193, 91, .96);
  border-radius: 14px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, .62),
    0 0 0 5px rgba(244, 193, 91, .16),
    0 12px 38px rgba(0, 0, 0, .34);
  transition: none;
}

.mc-tour-arrow {
  position: fixed;
  inset: 0;
  z-index: calc(var(--mc-tour-z) + 3);
  width: 100vw;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
}

.mc-tour-arrow line {
  stroke: #f4c15b;
  stroke-width: 2.25;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .42));
}

.mc-tour-card {
  position: fixed;
  z-index: calc(var(--mc-tour-z) + 4);
  width: min(390px, calc(100vw - 28px));
  max-height: min(520px, calc(100vh - 28px));
  overflow: auto;
  pointer-events: auto;
  border: 1px solid rgba(244, 193, 91, .38);
  border-radius: 18px;
  padding: 20px;
  background: #131416;
  color: #f7f3e9;
  box-shadow: 0 24px 75px rgba(0, 0, 0, .52);
  outline: none;
}

.mc-tour-card:focus-visible { box-shadow: 0 0 0 3px #f4c15b, 0 24px 75px rgba(0, 0, 0, .52); }

.mc-tour-eyebrow {
  margin: 0 0 8px;
  color: #f4c15b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mc-tour-title {
  margin: 0;
  color: #fffaf0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -.02em;
}

.mc-tour-text {
  margin: 10px 0 18px;
  color: #d6d1c7;
  font-size: 14px;
  line-height: 1.58;
}

.mc-tour-footer,
.mc-tour-actions,
.mc-tour-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mc-tour-footer { justify-content: space-between; flex-wrap: wrap; }
.mc-tour-actions { flex: 1; justify-content: space-between; min-width: 100%; }
.mc-tour-nav { margin-left: auto; }

.mc-tour-count {
  color: #aaa398;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mc-tour-button {
  min-height: 38px;
  border: 1px solid #3b3c40;
  border-radius: 10px;
  padding: 8px 12px;
  background: #202125;
  color: #f7f3e9;
  font: inherit;
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
}

.mc-tour-button:hover { border-color: #777066; }
.mc-tour-button:focus-visible { outline: 2px solid #f4c15b; outline-offset: 2px; }
.mc-tour-button:disabled { opacity: .38; cursor: not-allowed; }
.mc-tour-button-primary { border-color: #f4c15b; background: #f4c15b; color: #17130b; }
.mc-tour-button-finish { border-color: transparent; padding-left: 0; background: transparent; color: #bbb4a8; }
.mc-tour-button-finish:hover { color: #fffaf0; }

.mc-tour-preparing {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: calc(var(--mc-tour-z) + 4);
  transform: translate(-50%, -50%);
  width: min(330px, calc(100vw - 30px));
  pointer-events: auto;
  border: 1px solid rgba(244, 193, 91, .34);
  border-radius: 16px;
  padding: 20px;
  background: #131416;
  color: #f7f3e9;
  box-shadow: 0 24px 75px rgba(0, 0, 0, .52);
  text-align: center;
}

.mc-tour-invitation {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: calc(var(--mc-tour-z) + 4);
  transform: translate(-50%, -50%);
  width: min(430px, calc(100vw - 28px));
  pointer-events: auto;
  border: 1px solid rgba(244, 193, 91, .38);
  border-radius: 18px;
  padding: 23px;
  background: #131416;
  color: #f7f3e9;
  box-shadow: 0 24px 75px rgba(0, 0, 0, .58);
  outline: none;
}
.mc-tour-invitation h2 { margin: 0 0 9px; color: #fffaf0; font: 700 22px/1.2 "Space Grotesk", Inter, sans-serif; }
.mc-tour-invitation p { margin: 0 0 20px; color: #d6d1c7; font-size: 14px; line-height: 1.58; }
.mc-tour-invitation-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.mc-admin-tour-progress { margin: 26px 0 8px; }
.mc-admin-tour-row { margin: 8px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); }
.mc-admin-tour-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: 12.5px; }
.mc-admin-tour-head span { color: var(--muted); }
.mc-admin-tour-bar { height: 7px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--card2); }
.mc-admin-tour-bar i { display: block; height: 100%; border-radius: inherit; background: #d4af37; }
.mc-admin-tour-row.done .mc-admin-tour-bar i { background: #7cb86b; }

.mc-tour-preparing::before {
  content: "";
  display: block;
  width: 25px;
  height: 25px;
  margin: 0 auto 12px;
  border: 2px solid rgba(244, 193, 91, .25);
  border-top-color: #f4c15b;
  border-radius: 50%;
  animation: mc-tour-spin .8s linear infinite;
}

@keyframes mc-tour-spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .mc-tour-card {
    width: calc(100vw - 20px);
    max-height: min(46vh, 430px);
    padding: 17px;
    border-radius: 15px;
  }
  .mc-tour-title { font-size: 18px; }
  .mc-tour-text { font-size: 13.5px; }
  .mc-tour-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-tour-spotlight { transition: none; }
  .mc-tour-preparing::before { animation-duration: 1.8s; }
}