/* =============================================================================
   Componentes de UI del dashboard que no se pueden expresar solo con utilidades
   de Tailwind: necesitan estado (abierto/activo) alternado desde JavaScript,
   posicionamiento calculado o animaciones propias.

   1. Ayuda contextual  -> componente cotton <c-ayuda> + setupAyuda() en project.js
   2. Pestañas          -> componentes <c-tabs>/<c-tab>/<c-tab-panel> + setupTabs()
   3. Historial         -> <c-historial> + modal único + setupHistorial()
   4. Correcciones de base (el cursor de los botones en Tailwind 4)
   5. Tutorial          -> components/tutorial_modal.html + setupTutorial()

   Los colores salen de los tokens `@theme` de Tailwind 4 (project/theme/…/styles.css),
   así que la marca se sigue cambiando en un único sitio.
   ============================================================================= */

/* == 1. Ayuda contextual =====================================================
   Un icono "?" junto a aquello que explica; al pulsarlo abre una burbuja
   flotante. La burbuja va en `position: fixed` y la coloca el JS: si fuese
   absoluta la recortarían los `overflow-hidden` de las tarjetas de sección.
   ========================================================================== */

.ayuda {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  line-height: 0;
}

.ayuda-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-oluxblue-500, #556aeb);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.ayuda-trigger:hover { color: var(--color-oluxblue-700, #1d2f99); }

.ayuda-trigger:focus-visible {
  outline: 2px solid var(--color-oluxblue-400, #6e82fe);
  outline-offset: 2px;
}

.ayuda-trigger[aria-expanded="true"] { color: var(--color-oluxblue-700, #1d2f99); }

.ayuda-icono {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

.ayuda-etiqueta {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

/* Variante para la barra de navegación (fondo azul, icono blanco y área de
   pulsación mayor, como el resto de botones del navbar). */
.ayuda-trigger--nav {
  width: 2rem;
  height: 2rem;
  justify-content: center;
  color: var(--color-oluxblue-100, #ebefff);
}
.ayuda-trigger--nav:hover,
.ayuda-trigger--nav[aria-expanded="true"] {
  color: #fff;
  background: rgb(255 255 255 / 0.1);
}
.ayuda-trigger--nav .ayuda-icono { width: 1.25rem; height: 1.25rem; }
.ayuda-trigger--nav:focus-visible { outline-color: #fff; }

/* Destello con el que el "?" del navbar señala dónde hay ayuda en la página. */
.ayuda-trigger.is-signaled {
  animation: ayuda-signal 1.1s ease-out 3;
  color: var(--color-oluxorange-500, #ff9500);
}

@keyframes ayuda-signal {
  0%   { box-shadow: 0 0 0 0 rgb(255 149 0 / 0.55); transform: scale(1); }
  45%  { box-shadow: 0 0 0 0.5rem rgb(255 149 0 / 0); transform: scale(1.25); }
  100% { box-shadow: 0 0 0 0 rgb(255 149 0 / 0); transform: scale(1); }
}

/* --- La burbuja --- */
.ayuda-pop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--color-oluxblue-100, #ebefff);
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgb(2 10 51 / 0.18), 0 2px 6px rgb(2 10 51 / 0.08);
  text-align: left;
  line-height: 1.5;
}

.ayuda[data-open="true"] .ayuda-pop {
  display: block;
  animation: ayuda-in 0.14s ease-out;
}

@keyframes ayuda-in {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Flecha: cuadrado girado que el JS alinea con el "?" vía --ayuda-flecha-x. */
.ayuda-flecha {
  position: absolute;
  left: var(--ayuda-flecha-x, 50%);
  width: 0.75rem;
  height: 0.75rem;
  margin-left: -0.375rem;
  background: #fff;
  border: 1px solid var(--color-oluxblue-100, #ebefff);
  transform: rotate(45deg);
}
.ayuda-pop[data-placement="bottom"] .ayuda-flecha {
  top: -0.4rem;
  border-right: 0;
  border-bottom: 0;
}
.ayuda-pop[data-placement="top"] .ayuda-flecha {
  bottom: -0.4rem;
  border-left: 0;
  border-top: 0;
}

.ayuda-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem 0.5rem;
}

.ayuda-titulo {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-oluxblue-700, #1d2f99);
}

.ayuda-cerrar {
  flex: none;
  display: inline-flex;
  padding: 0.25rem;
  margin: -0.25rem -0.25rem 0 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.ayuda-cerrar:hover { color: #374151; background: #f3f4f6; }
.ayuda-cerrar svg { width: 1rem; height: 1rem; }

.ayuda-cuerpo {
  padding: 0 1rem 1rem;
  font-size: 0.8125rem;
  color: #4b5563;
}

/* El contenido lo escribe cada página como HTML suelto (<p>, <ul>, <strong>):
   se le da tipografía aquí para no repetir clases en cada uso. */
.ayuda-cuerpo > * + * { margin-top: 0.5rem; }
.ayuda-cuerpo strong { color: #111827; font-weight: 600; }
.ayuda-cuerpo ul { list-style: disc; padding-left: 1.125rem; }
.ayuda-cuerpo ol { list-style: decimal; padding-left: 1.25rem; }
.ayuda-cuerpo li + li { margin-top: 0.25rem; }
.ayuda-cuerpo a { color: var(--color-oluxblue-600, #354acb); text-decoration: underline; }
.ayuda-cuerpo code {
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
  background: var(--color-oluxblue-50, #f5f7ff);
  font-size: 0.75rem;
}

/* Muestra del icono dentro del texto de una ayuda (lo usa el "?" del navbar
   al explicar cómo se reconocen las ayudas). */
.ayuda-muestra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: -0.25rem;
  border-radius: 9999px;
  background: var(--color-oluxblue-50, #f5f7ff);
  color: var(--color-oluxblue-500, #556aeb);
}
.ayuda-muestra svg { width: 0.875rem; height: 0.875rem; }

/* Fila de enlaces al pie de una burbuja: "y desde aquí puedes ir a…". Se usa
   como <p class="ayuda-enlaces"><a href="…">Pacientes</a>…</p> — píldoras
   compactas para que la ayuda pueda llevar a la pantalla que menciona sin
   convertirse en un párrafo de enlaces sueltos. */
.ayuda-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f3f4f6;
}
.ayuda-enlaces a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--color-oluxblue-100, #ebefff);
  border-radius: 9999px;
  background: var(--color-oluxblue-50, #f5f7ff);
  color: var(--color-oluxblue-700, #1d2f99);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ayuda-enlaces a::after { content: "→"; font-weight: 400; }
.ayuda-enlaces a:hover {
  background: var(--color-oluxblue-100, #ebefff);
  border-color: var(--color-oluxblue-200, #b9c4ff);
  text-decoration: none;
}

/* Acceso al tutorial desde la burbuja del navbar. Más grande que un enlace de
   `.ayuda-enlaces` porque es la puerta de vuelta al recorrido guiado. Va después
   de `.ayuda-cuerpo > * + *` y `.ayuda-cuerpo strong` para ganarles. */
.ayuda-tutorial {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-oluxblue-200, #b9c4ff);
  border-radius: 0.75rem;
  background: var(--color-oluxblue-50, #f5f7ff);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ayuda-tutorial:hover {
  background: var(--color-oluxblue-100, #ebefff);
  border-color: var(--color-oluxblue-300, #8fa0ff);
}
.ayuda-tutorial:focus-visible {
  outline: 2px solid var(--color-oluxblue-400, #6e82fe);
  outline-offset: 2px;
}
.ayuda-tutorial > svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--color-oluxblue-600, #354acb);
}
.ayuda-tutorial strong {
  display: block;
  color: var(--color-oluxblue-700, #1d2f99);
  font-weight: 600;
}
.ayuda-tutorial__texto {
  display: block;
  color: #6b7280;
  font-size: 0.75rem;
}

/* == 2. Pestañas =============================================================
   Compartimentan una página larga sin recargarla. El estado activo vive en la
   clase `is-active`, que pone y quita setupTabs().
   ========================================================================== */

/* Fila de la cabecera: el tablist ocupa el ancho y la ayuda queda a su derecha,
   FUERA del role="tablist" (dentro rompería el patrón ARIA de pestañas). */
.tabs-cabecera {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tabs-cabecera > .tabs-nav { flex: 1 1 auto; min-width: 0; }

.tabs-ayuda { flex: none; display: inline-flex; }

.tabs-nav {
  display: flex;
  gap: 0.375rem;
  padding: 0.375rem;
  border-radius: 1rem;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar { display: none; }

.tab-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  white-space: nowrap;
  padding: 0.625rem 1rem;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  color: #4b5563;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.tab-trigger:hover { color: var(--color-oluxblue-700, #1d2f99); }
.tab-trigger:focus-visible {
  outline: 2px solid var(--color-oluxblue-400, #6e82fe);
  outline-offset: -2px;
}
.tab-trigger svg { width: 1.125rem; height: 1.125rem; flex: none; }

.tab-trigger.is-active {
  background: #fff;
  color: var(--color-oluxblue-700, #1d2f99);
  box-shadow: 0 1px 3px rgb(2 10 51 / 0.12);
}

/* Contador opcional a la derecha del rótulo (p. ej. análisis pendientes). */
.tab-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  background: var(--color-oluxorange-500, #ff9500);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
}

.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: tab-in 0.18s ease-out; }

@keyframes tab-in {
  from { opacity: 0; transform: translateY(0.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* En pantallas pequeñas las pestañas se hacen scrollables y compactas. */
@media (max-width: 640px) {
  .tab-trigger { flex: 0 0 auto; padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ayuda[data-open="true"] .ayuda-pop,
  .tab-panel.is-active,
  .ayuda-trigger.is-signaled { animation: none; }
}

/* == 3. Historial de cambios =================================================
   El botón discreto que abre la ventana, y la ventana misma. Va aquí y no en
   Tailwind porque el estado abierto/cerrado lo alterna setupHistorial() con la
   clase `is-open`, y Tailwind 4 no genera clases que solo existen en el JS.
   ========================================================================== */

/* -- Disparador ------------------------------------------------------------ */
.historial-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 9999px;
  background: #fff;
  color: var(--color-gray-500, #6b7280);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.historial-trigger:hover {
  border-color: var(--color-oluxblue-300, #93a4f0);
  color: var(--color-oluxblue-700, #1d2f99);
  background: var(--color-oluxblue-50, #eef1fe);
}

.historial-trigger:focus-visible {
  outline: 2px solid var(--color-oluxblue-400, #6d83e8);
  outline-offset: 2px;
}

.historial-trigger__icono { width: 0.875rem; height: 0.875rem; flex: none; }

/* -- Ventana --------------------------------------------------------------- */
.modal-historial {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-historial.is-open { display: flex; }

.modal-historial__fondo {
  position: absolute;
  inset: 0;
  background: rgb(2 10 51 / 0.45);
}

.modal-historial__caja {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(42rem, 100%);
  max-height: min(80vh, 44rem);
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 20px 50px rgb(2 10 51 / 0.25);
  overflow: hidden;
  animation: historial-in 0.18s ease-out;
}

@keyframes historial-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-historial__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-gray-100, #f3f4f6);
}

.modal-historial__titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-gray-900, #111827);
}

.modal-historial__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 9999px;
  color: var(--color-gray-400, #9ca3af);
  background: transparent;
  border: 0;
}

.modal-historial__cerrar:hover {
  background: var(--color-gray-100, #f3f4f6);
  color: var(--color-gray-700, #374151);
}

.modal-historial__cerrar svg { width: 1.125rem; height: 1.125rem; }

.modal-historial__cuerpo {
  padding: 1.25rem;
  overflow-y: auto;
}

/* -- Contenido ------------------------------------------------------------- */
.historial-descripcion {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--color-gray-500, #6b7280);
}

.historial-filtro {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.historial-filtro label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-500, #6b7280);
}

.historial-filtro select {
  flex: 1;
  min-width: 0;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--color-gray-300, #d1d5db);
  border-radius: 0.625rem;
  background: #fff;
  font-size: 0.8125rem;
  color: var(--color-gray-700, #374151);
}

.historial-linea {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.historial-edicion {
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 0.875rem;
  padding: 0.875rem 1rem;
}

.historial-edicion[hidden] { display: none; }

.historial-edicion__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

.historial-edicion__fecha {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-gray-900, #111827);
}

.historial-edicion__autor {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-gray-500, #6b7280);
}

.historial-edicion__etiquetas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem;
}

.historial-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: var(--color-gray-100, #f3f4f6);
  color: var(--color-gray-600, #4b5563);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.historial-chip--analisis {
  background: var(--color-oluxblue-50, #eef1fe);
  color: var(--color-oluxblue-700, #1d2f99);
}

.historial-chip--alta {
  background: var(--color-oluxorange-100, #ffe8c2);
  color: var(--color-oluxorange-600, #cc7700);
}

.historial-cambios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.historial-cambio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  font-size: 0.8125rem;
}

.historial-cambio__campo {
  min-width: 9rem;
  color: var(--color-gray-500, #6b7280);
}

.historial-cambio__valores {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.historial-valor {
  padding: 0.0625rem 0.4375rem;
  border-radius: 0.375rem;
  word-break: break-word;
}

.historial-valor em { color: var(--color-gray-400, #9ca3af); font-style: normal; }

/* Rojo y verde suaves: se lee de un vistazo qué se fue y qué entró, sin que la
   ventana parezca un diff de código. */
.historial-valor--antes {
  background: #fef2f2;
  color: #9f1239;
  text-decoration: line-through;
  text-decoration-color: rgb(159 18 57 / 0.4);
}

.historial-valor--despues {
  background: #f0fdf4;
  color: #14532d;
  font-weight: 600;
}

.historial-flecha {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  color: var(--color-gray-300, #d1d5db);
}

.historial-alta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-gray-600, #4b5563);
}

.historial-motivo {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--color-oluxblue-200, #c3ccf7);
  background: var(--color-gray-50, #f9fafb);
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.8125rem;
  color: var(--color-gray-700, #374151);
}

.historial-motivo__rotulo {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-gray-400, #9ca3af);
}

.historial-vacio {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-gray-400, #9ca3af);
}

.historial-vacio svg { width: 2.5rem; height: 2.5rem; margin: 0 auto 0.75rem; }

.historial-vacio__titulo {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-600, #4b5563);
}

.historial-vacio__texto { margin: 0; font-size: 0.8125rem; }

.historial-cargando {
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-gray-400, #9ca3af);
}

/* El textarea del motivo, en los formularios de edición. */
.campo-motivo {
  margin-top: 0.25rem;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-gray-300, #d1d5db);
  border-radius: 0.75rem;
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  color: var(--color-gray-700, #374151);
  resize: vertical;
}

.campo-motivo:focus {
  outline: none;
  border-color: var(--color-oluxblue-400, #6d83e8);
  box-shadow: 0 0 0 2px var(--color-oluxblue-100, #dfe5fc);
}

@media (max-width: 640px) {
  .historial-cambio__campo { min-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-historial__caja { animation: none; }
}

/* == 4. Correcciones de base ==================================================
   Tailwind 4 cambió el preflight y ahora los <button> llevan `cursor: default`
   en vez de la mano. En esta app todos los botones son interactivos, así que se
   devuelve el puntero (y se marca el deshabilitado como tal) en un solo sitio
   en vez de acordarse de `cursor-pointer` en cada botón.
   ========================================================================== */

button:not(:disabled),
summary,
[role="button"]:not([aria-disabled="true"]),
label[for],
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="file"]:not(:disabled) { cursor: pointer; }

button:disabled,
input[type="submit"]:disabled { cursor: not-allowed; }

/* == 5. Tutorial de bienvenida ===============================================
   Ventana de cuatro pasos que se abre sola en el primer acceso de una cuenta y
   después a demanda. El paso activo (`is-active`), el progreso (`is-hecho`) y
   la ventana abierta (`is-open`) los alterna setupTutorial().
   ========================================================================== */

.tutorial {
  position: fixed;
  inset: 0;
  /* Por encima de las burbujas de ayuda y del modal del historial (60): se
     puede abrir desde la burbuja del navbar. */
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.tutorial.is-open { display: flex; }

.tutorial__fondo {
  position: absolute;
  inset: 0;
  background: rgb(2 10 51 / 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: tutorial-fondo-in 0.2s ease-out;
}

.tutorial__caja {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(36rem, 100%);
  max-height: min(46rem, calc(100vh - 2rem));
  max-height: min(46rem, calc(100dvh - 2rem));
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 32px 80px rgb(2 10 51 / 0.35), 0 4px 12px rgb(2 10 51 / 0.1);
  overflow: hidden;
  animation: tutorial-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.tutorial__form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: 0;
}

/* -- Cabecera: la banda azul de la marca con el progreso ------------------- */
.tutorial__cabecera {
  flex: none;
  padding: 1rem 1.25rem 1.125rem 1.75rem;
  background:
    radial-gradient(120% 160% at 100% 0%, rgb(110 130 254 / 0.55) 0%, transparent 55%),
    linear-gradient(135deg, var(--color-oluxblue-600, #354acb) 0%, var(--color-oluxblue-700, #1d2f99) 100%);
  color: #fff;
}

.tutorial__cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.tutorial__marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.tutorial__logo {
  width: auto;
  height: 1.375rem;
  flex: none;
}

.tutorial__etiqueta {
  padding-left: 0.75rem;
  border-left: 1px solid rgb(255 255 255 / 0.3);
  overflow: hidden;
  color: var(--color-oluxblue-100, #ebefff);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.tutorial__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: rgb(255 255 255 / 0.75);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tutorial__cerrar:hover { background: rgb(255 255 255 / 0.15); color: #fff; }
.tutorial__cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tutorial__cerrar svg { width: 1.125rem; height: 1.125rem; }

.tutorial__progreso {
  display: flex;
  gap: 0.375rem;
  margin: 1rem 0.5rem 0 0;
}

.tutorial__segmento {
  flex: 1 1 0;
  height: 0.25rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.25);
  transition: background-color 0.25s ease;
}
.tutorial__segmento.is-hecho { background: #fff; }

/* -- Pasos ----------------------------------------------------------------- */
.tutorial__pasos {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.75rem 1.75rem 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tutorial-paso { display: none; }
.tutorial-paso.is-active { display: block; animation: tutorial-paso-in 0.22s ease-out; }

.tutorial-paso__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-oluxblue-100, #ebefff);
  border-radius: 1rem;
  background: var(--color-oluxblue-50, #f5f7ff);
  color: var(--color-oluxblue-600, #354acb);
}
.tutorial-paso__icono svg { width: 1.5rem; height: 1.5rem; }

.tutorial-paso__contador {
  margin: 0 0 0.25rem;
  color: var(--color-oluxblue-500, #556aeb);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tutorial-paso__titulo {
  margin: 0;
  color: #111827;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
/* Recibe el foco al cambiar de paso (para el lector de pantalla), no por
   teclado: el anillo solo despistaría. */
.tutorial-paso__titulo:focus { outline: none; }

.tutorial-paso__texto {
  margin: 0.75rem 0 0;
  color: #4b5563;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.tutorial-paso__texto strong { color: #111827; font-weight: 600; }

/* Paso 1: garantías en píldoras */
.tutorial-claves {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.tutorial-claves li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-oluxblue-100, #ebefff);
  border-radius: 9999px;
  background: var(--color-oluxblue-50, #f5f7ff);
  color: var(--color-oluxblue-700, #1d2f99);
  font-size: 0.8125rem;
  font-weight: 600;
}
.tutorial-claves svg { width: 1rem; height: 1rem; flex: none; }

/* Paso 2: el flujo como línea de tiempo vertical (se lee igual en un móvil) */
.tutorial-flujo {
  margin: 1.125rem 0 0;
  padding: 0;
  list-style: none;
}
.tutorial-flujo li {
  position: relative;
  display: flex;
  gap: 0.875rem;
  padding-bottom: 1rem;
}
.tutorial-flujo li:last-child { padding-bottom: 0; }
/* El trazo que une un número con el siguiente. */
.tutorial-flujo li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 2.125rem;
  bottom: 0.25rem;
  left: 0.9375rem;
  width: 2px;
  margin-left: -1px;
  background: var(--color-oluxblue-100, #ebefff);
}

.tutorial-flujo__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  flex: none;
  border-radius: 9999px;
  background: var(--color-oluxblue-600, #354acb);
  box-shadow: 0 0 0 4px var(--color-oluxblue-50, #f5f7ff);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}

.tutorial-flujo__titulo {
  margin: 0.25rem 0 0;
  color: #111827;
  font-size: 0.9375rem;
  font-weight: 600;
}

.tutorial-flujo__texto {
  margin: 0.125rem 0 0;
  color: #6b7280;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.tutorial-flujo__texto strong { color: #374151; font-weight: 600; }

/* Paso 3: las secciones del navbar en tarjetas */
.tutorial-secciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin: 1.125rem 0 0;
  padding: 0;
  list-style: none;
}
.tutorial-secciones li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.875rem;
  background: #fff;
}
/* Con "Gestión" (staff) salen cinco: la última ocupa la fila entera. */
.tutorial-secciones li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.tutorial-secciones__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 0.75rem;
  background: var(--color-oluxblue-100, #ebefff);
  color: var(--color-oluxblue-600, #354acb);
}
.tutorial-secciones__icono svg { width: 1.125rem; height: 1.125rem; }
.tutorial-secciones__icono--gestion {
  background: var(--color-oluxorange-100, #fff8eb);
  color: var(--color-oluxorange-600, #cc7c00);
}

.tutorial-secciones__nombre {
  margin: 0;
  color: #111827;
  font-size: 0.875rem;
  font-weight: 700;
}

.tutorial-secciones__texto {
  margin: 0.125rem 0 0;
  color: #6b7280;
  font-size: 0.75rem;
  line-height: 1.45;
}

/* Paso 4: dónde está la ayuda */
.tutorial-consejos {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 1.125rem 0 0;
  padding: 0;
  list-style: none;
}
.tutorial-consejos li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.tutorial-consejos p {
  margin: 0;
  color: #4b5563;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.tutorial-consejos strong { color: #111827; font-weight: 600; }

/* Muestras de los dos "?" (el de la página y el del navbar), a tamaño de icono. */
.tutorial-consejos .ayuda-muestra,
.tutorial-consejos__barra {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  vertical-align: 0;
}
.tutorial-consejos__barra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--color-oluxblue-600, #354acb);
  color: #fff;
}
.tutorial-consejos .ayuda-muestra svg,
.tutorial-consejos__barra svg { width: 1.125rem; height: 1.125rem; }

.tutorial-nota {
  margin: 1.25rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-oluxorange-200, #ffe3b0);
  border-radius: 0.875rem;
  background: var(--color-oluxorange-50, #fffbf2);
  color: var(--color-oluxorange-800, #664200);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.tutorial-nota strong { font-weight: 700; }

/* -- Pie: saltar a la izquierda, avanzar a la derecha ---------------------- */
.tutorial__pie {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  border-top: 1px solid #f3f4f6;
  background: #f9fafb;
}

.tutorial__navegacion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.tutorial-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease;
}
/* `display: inline-flex` ganaría al `hidden` del navegador. */
.tutorial-btn[hidden] { display: none; }
.tutorial-btn svg { width: 1rem; height: 1rem; }
.tutorial-btn:focus-visible {
  outline: 2px solid var(--color-oluxblue-400, #6e82fe);
  outline-offset: 2px;
}

.tutorial-btn--primario {
  background: var(--color-oluxblue-600, #354acb);
  box-shadow: 0 1px 2px rgb(2 10 51 / 0.1);
  color: #fff;
}
.tutorial-btn--primario:hover {
  background: var(--color-oluxblue-700, #1d2f99);
  box-shadow: 0 4px 12px rgb(53 74 203 / 0.3);
}

.tutorial-btn--secundario {
  border-color: #d1d5db;
  background: #fff;
  color: #374151;
}
.tutorial-btn--secundario:hover { border-color: #9ca3af; background: #f9fafb; }

.tutorial-btn--texto {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  background: transparent;
  color: #6b7280;
}
.tutorial-btn--texto:hover { color: #111827; }

@keyframes tutorial-in {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tutorial-fondo-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes tutorial-paso-in {
  from { opacity: 0; transform: translateX(0.5rem); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 640px) {
  .tutorial { padding: 0.75rem; }
  .tutorial__cabecera { padding-left: 1.25rem; }
  .tutorial__pasos { padding: 1.25rem; }
  .tutorial__pie { padding: 0.875rem 1.25rem; }
  .tutorial-paso__titulo { font-size: 1.25rem; }
  .tutorial-secciones { grid-template-columns: minmax(0, 1fr); }
  .tutorial-btn { padding: 0.5rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial__caja,
  .tutorial__fondo,
  .tutorial-paso.is-active { animation: none; }
}