/* Tutoriales Luuk — entrada en la topbar + panel anclado + player.
   Design system: grises neutros, verde solo como acento, radios compactos
   (docs/design-guide.md).

   Escala de z-index (local, anclada a la realidad del dashboard):
   el tema Remark fuerza `.dropdown-menu, .site-menubar { z-index: 100000 }`
   en MyCss.css, y Luukitas usa 1.099.000 (burbuja) / 1.5e9 (stage). Los
   valores de abajo se eligen respecto de esos, no como números arbitrarios. */

:root {
  --luuk-tut-z-spotlight: 100030; /* sobre navbar y menubar (100000) */
  --luuk-tut-z-burbuja: 100040;   /* sobre el spotlight */
  --luuk-tut-z-panel: 100050;     /* sobre la burbuja */
  --luuk-tut-z-player: 1500000030; /* sobre el stage de Luukitas (1.5e9) */
}

/* ── Entrada en la topbar ──
   Píldora con borde, mismo lenguaje que #version-toggle en menu.html: sin
   fondo propio el ícono se pierde contra la navbar.

   OJO con los colores: el fondo de la navbar ES `--color` (el color del
   cliente; lo confirma ColoresCache.js, que mide su luminancia). Por eso nada
   de este botón puede pintarse con `--color` — quedaría invisible. El tema ya
   calcula `--header-text-color` como el contraste de la navbar: ese es el
   único color seguro para destacar, sea la navbar clara u oscura. */
.luuk-tut-navbtn {
  display: flex !important;
  align-items: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  margin: 7px 6px;
  padding: 10px 14px !important;
  border-radius: 100px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--header-text-color, #1f2937) 25%, transparent);
  cursor: pointer;
  font-family: inherit;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.luuk-tut-navbtn:hover,
.luuk-tut-navbtn:focus,
.luuk-tut-navbtn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--header-text-color, #1f2937) 10%, transparent);
  border-color: color-mix(in srgb, var(--header-text-color, #1f2937) 45%, transparent);
}
/* El ícono lleva el acento del cliente; el texto hereda el contraste de la
   navbar. Si navbar y acento comparten color (navbar pintada con --color),
   el ícono cae al contraste como el resto — por eso el fallback en cascada. */
.luuk-tut-navbtn .luuk-tut-navbtn-ico {
  font-size: 18px;
  line-height: 1;
  color: inherit !important;
}
.luuk-tut-navbtn .luuk-tut-navbtn-txt {
  font-size: 13px;
  font-weight: 600;
  color: inherit;
}
/* Bajo 992px la topbar aprieta: solo el ícono (el aria-label lo nombra). */
@media (max-width: 991px) {
  .luuk-tut-navbtn .luuk-tut-navbtn-txt { display: none; }
}

/* Primera visita: el botón se rellena con el acento del cliente, con un anillo
   del color de contraste de la navbar por si navbar y acento coinciden. */
.luuk-tut-navbtn--destacado,
.luuk-tut-navbtn--destacado:hover,
.luuk-tut-navbtn--destacado:focus {
  background: var(--color, #29c178) !important;
  border-color: var(--color, #29c178) !important;
  color: var(--colort, #ffffff) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--header-text-color, #1f2937) 55%, transparent);
}

/* ── Spotlight de primera visita ──
   Oscurece toda la pantalla salvo un recorte sobre el botón. El truco del
   box-shadow gigante evita pelear z-index con la navbar: el recorte es un div
   fixed con sombra hacia afuera, y `pointer-events: none` deja el botón real
   clickeable a través suyo. Lo posiciona anclarSpotlight() en tutoriales.js. */
.luuk-tut-spotlight {
  position: fixed;
  z-index: var(--luuk-tut-z-spotlight);
  border-radius: 100px;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(9, 40, 37, 0.55);
  animation: luuk-tut-spot-in 300ms ease-out;
}
.luuk-tut-spotlight::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 100px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  animation: luuk-tut-anillo 1.8s ease-out 6;
}
@keyframes luuk-tut-spot-in {
  from { box-shadow: 0 0 0 9999px rgba(9, 40, 37, 0); }
  to { box-shadow: 0 0 0 9999px rgba(9, 40, 37, 0.55); }
}
@keyframes luuk-tut-anillo {
  0% { transform: scale(1); opacity: 1; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .luuk-tut-spotlight, .luuk-tut-spotlight::after { animation: none; }
}

/* ── Panel ── */
.luuk-tut-panel {
  position: fixed;
  z-index: var(--luuk-tut-z-panel);
  width: 330px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(9, 40, 37, 0.18);
  overflow: hidden;
  font-family: inherit;
}
.luuk-tut-header {
  padding: 12px 14px 8px;
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
}
.luuk-tut-tabs {
  display: flex;
  gap: 6px;
  padding: 0 14px 10px;
  border-bottom: 1px solid #f3f4f6;
}
.luuk-tut-tab {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  font-family: inherit;
}
.luuk-tut-tab.activa {
  color: #1f2937;
  border-left: 3px solid var(--color, #29c178);
  background: #f3f4f6;
}
.luuk-tut-cuerpo { overflow-y: auto; padding: 10px; }
.luuk-tut-grupo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9ca3af;
  padding: 8px 4px 4px;
}
.luuk-tut-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  font-family: inherit;
}
.luuk-tut-item:hover { background: #f3f4f6; border-color: var(--color, #29c178); }
.luuk-tut-thumb {
  flex: none;
  width: 74px;
  height: 42px;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(135deg, #092825, #14503f);
  display: flex;
  align-items: center;
  justify-content: center;
}
.luuk-tut-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.luuk-tut-thumb-play { color: #29c178; font-size: 13px; }
.luuk-tut-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.luuk-tut-item-txt strong {
  font-size: 12.5px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.25;
}
.luuk-tut-item-txt small { font-size: 11px; color: #9ca3af; }
.luuk-tut-vacio { padding: 14px; font-size: 12.5px; color: #6b7280; }

/* Pie: el resto de los caminos de ayuda, para que el panel sea la única
   puerta de entrada y el usuario no tenga que adivinar dónde preguntar. */
.luuk-tut-pie {
  display: flex;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px solid #f3f4f6;
  background: #f9fafb;
}
.luuk-tut-pie button {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  font-family: inherit;
}
.luuk-tut-pie button:hover { color: var(--color, #29c178); }

/* ── Burbuja de primera visita (anclada al mismo botón, con flecha) ── */
.luuk-tut-burbuja {
  position: fixed;
  z-index: var(--luuk-tut-z-burbuja);
  width: 320px;
  max-width: calc(100vw - 24px);
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 14px;
  color: #374151;
  box-shadow: 0 8px 30px rgba(9, 40, 37, 0.18);
  font-family: inherit;
}
/* Flecha hacia el botón. `--luuk-tut-flecha` la calcula anclar() con la
   posición real del botón: la navbar cambia de ancho con el logo del cliente. */
.luuk-tut-burbuja::before,
.luuk-tut-burbuja::after {
  content: '';
  position: absolute;
  right: var(--luuk-tut-flecha, 24px);
  border: 8px solid transparent;
  border-top: 0;
}
.luuk-tut-burbuja::before { top: -8px; border-bottom-color: #e5e7eb; }
.luuk-tut-burbuja::after { top: -7px; border-bottom-color: #ffffff; }

.luuk-tut-burbuja-txt { margin-bottom: 10px; }
.luuk-tut-burbuja-txt strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 3px;
}
.luuk-tut-burbuja-txt span { font-size: 12.5px; line-height: 1.45; }
.luuk-tut-burbuja-acciones { display: flex; align-items: center; gap: 10px; }
.luuk-tut-burbuja-ver {
  background: var(--color, #29c178);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.luuk-tut-burbuja-x {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 2px;
  font-family: inherit;
}
.luuk-tut-burbuja-x:hover { color: #374151; }

/* ── Player ── */
.luuk-tut-player-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--luuk-tut-z-player);
  background: rgba(9, 40, 37, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.luuk-tut-player {
  width: min(960px, 100%);
  background: #0b1f1b;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
/* Modal de bienvenida (primera visita): mismo contenedor que el player, con
   encabezado, pie con el CTA de salida, y un sidebar con la misma lista de
   videos del panel Ayuda — clic en un item cambia el video sin cerrar nada. */
.luuk-tut-bienvenida {
  width: min(1180px, 100%);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}
.luuk-tut-bienvenida-body {
  display: flex;
  min-height: 0;
}
/* En fila el alto lo manda el video (aspect-ratio); el sidebar se estira a
   ese alto y scrollea por dentro. */
.luuk-tut-bienvenida-body .luuk-tut-player-media {
  flex: 1 1 auto;
  min-width: 0;
}
.luuk-tut-bienvenida-side {
  flex: 0 0 300px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-left: 1px solid #e5e7eb;
}
.luuk-tut-bienvenida-menu {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid #f3f4f6;
}
.luuk-tut-bienvenida-lista {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
}
.luuk-tut-item.activa {
  border-color: var(--color, #29c178);
  background: #f3f4f6;
}
@media (max-width: 820px) {
  .luuk-tut-bienvenida-body { flex-direction: column; overflow-y: auto; }
  .luuk-tut-bienvenida-side {
    flex: none;
    width: auto;
    max-height: 38vh;
    border-left: none;
    border-top: 1px solid #e5e7eb;
  }
}

.luuk-tut-bienvenida-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  font-family: inherit;
}
.luuk-tut-bienvenida-head strong {
  display: block;
  color: #ffffff;
  font-size: 16.5px;
  font-weight: 700;
  margin-bottom: 3px;
}
.luuk-tut-bienvenida-head span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.45;
}
.luuk-tut-bienvenida-pie {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px 14px;
}
.luuk-tut-bienvenida-ok { padding: 8px 18px; font-size: 13px; }

.luuk-tut-player-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
}
.luuk-tut-x {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.luuk-tut-x:hover { color: #ffffff; }
.luuk-tut-player-media { position: relative; aspect-ratio: 16 / 9; background: #000; }
.luuk-tut-player-media iframe,
.luuk-tut-player-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}