/* Clonk theme for the driver.js product tour (schedule grid).
 * Loaded AFTER content/driverjs/driver-*.css so these rules win by cascade order.
 * Scoped to .driver-popover.clonk-tour (double class beats driver.js defaults
 * without !important) — other driver.js tours, if any, keep the default look.
 * Visual source of truth: tour-cuadro-turnos-v1.html */

:root {
  /* clonk-ui-standard doesn't expose the palette as CSS variables, so the
     tour tokens are declared here and used only by this file */
  --clonk-magenta-700: #BF11C2;
  --clonk-magenta-800: #8E0D90;
  --clonk-turquesa-700: #199F88;
  --clonk-turquesa-800: #116A5B;
  --clonk-gris-50:  #E8E9EA;
  --clonk-gris-100: #D1D2D5;
  --clonk-gris-200: #A4A6AB;
  --clonk-gris-300: #8D9095;
  --clonk-gris-500: #4D4F53;
  --clonk-gris-700: #393A3E;
  --clonk-gris-900: #1C1D1F;
}

/* ═══ Popover ═══════════════════════════════════════════════ */
.driver-popover.clonk-tour {
  --driver-popover-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  width: 328px;
  max-width: calc(100vw - 24px);
  padding: 0;                 /* each section brings its own padding */
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(28, 29, 31, .28), 0 2px 6px rgba(28, 29, 31, .10);
  /* No overflow:hidden here — it would clip the arrow, which is a child of the
     wrapper positioned outside it. The top rounding is done by the rail. */
}

/* ═══ Progress rail (injected in onPopoverRender) ═══════════ */
.clonk-tour .clonk-tour-rail {
  display: flex;
  gap: 2px;
  height: 3px;
  background: var(--clonk-gris-50);
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}
.clonk-tour .clonk-tour-rail i { flex: 1; background: var(--clonk-gris-100); }
.clonk-tour .clonk-tour-rail i.is-done { background: var(--clonk-magenta-700); }

/* ═══ Eyebrow "Paso 1 de 3" (injected) ═════════════════════ */
.clonk-tour .clonk-tour-eyebrow {
  padding: 15px 34px 0 18px;   /* 34px right: reserves the ✕ button space */
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--clonk-gris-300);
}
.clonk-tour .clonk-tour-eyebrow b { color: var(--clonk-magenta-700); }
/* The native progress span is relocated inside the eyebrow; driver.css gives it
   its own size/color, so force it to inherit the eyebrow's */
.clonk-tour .clonk-tour-eyebrow .driver-popover-progress-text {
  font-size: inherit;
  color: inherit;
}

/* ═══ Title and description ════════════════════════════════ */
/* driver.js renders the title as <header> and the footer as <footer>. The app's
   template css styles those bare elements for the page shell (red header,
   dark 100px footer), so every property it sets is explicitly neutralized here. */
.clonk-tour .driver-popover-title {
  margin: 9px 0 7px;
  padding: 0 18px;
  background: none;      /* template: background #f54359 */
  width: auto;           /* template: width 100% */
  min-height: 0;         /* template: min-height 70px */
  transition: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.005em;
  color: var(--clonk-gris-900);
}
.clonk-tour .driver-popover-description {
  margin: 0;
  padding: 0 18px;
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--clonk-gris-500);
}
.clonk-tour .driver-popover-description b,
.clonk-tour .driver-popover-description strong {
  font-weight: 600;
  color: var(--clonk-gris-700);
}

/* ═══ Media block (injected, optional per step) ════════════ */
.clonk-tour .clonk-tour-media {
  margin: 14px 18px 0;
  border: 1px solid var(--clonk-gris-50);
  border-radius: 4px;
  background: #FAFAFA;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.clonk-tour .clonk-tour-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ═══ Close ════════════════════════════════════════════════ */
.clonk-tour .driver-popover-close-btn {
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  font-size: 15px;
  line-height: 1;
  color: var(--clonk-gris-200);
  background: none;
  transition: color .15s, background .15s;
}
.clonk-tour .driver-popover-close-btn:hover {
  color: var(--clonk-gris-700);
  background: var(--clonk-gris-50);
}

/* ═══ Footer ═══════════════════════════════════════════════ */
.clonk-tour .driver-popover-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
  padding: 11px 18px;
  border-top: 1px solid var(--clonk-gris-50);
  background: none;      /* template: background rgb(77,79,83) */
  width: auto;           /* template: width 100% */
  height: auto;          /* template: height 100px */
  color: inherit;        /* template: color #fff */
  text-align: left;      /* template: text-align center */
  font-size: 12px;       /* style.css: font-size 18px */
}
.clonk-tour .driver-popover-navigation-btns {
  margin-left: auto;
  gap: 7px;
}
.clonk-tour .driver-popover-navigation-btns button {
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: none;         /* driver.js sets a text-shadow by default */
  transition: background .15s, border-color .15s, color .15s;
}
.clonk-tour .driver-popover-prev-btn {
  background: #fff;
  border-color: var(--clonk-gris-100);
  color: var(--clonk-gris-500);
}
.clonk-tour .driver-popover-prev-btn:hover {
  border-color: var(--clonk-gris-300);
  color: var(--clonk-gris-700);
}
.clonk-tour .driver-popover-next-btn {
  background: var(--clonk-magenta-700);
  color: #fff;
}
.clonk-tour .driver-popover-next-btn:hover { background: var(--clonk-magenta-800); }

/* Last step ("Entendido") in turquoise. This driver.js build doesn't add a
   done-btn class, so .is-done-step is added in onPopoverRender. */
.clonk-tour .driver-popover-next-btn.driver-popover-done-btn,
.clonk-tour .driver-popover-next-btn.is-done-step {
  background: var(--clonk-turquesa-700);
}
.clonk-tour .driver-popover-next-btn.driver-popover-done-btn:hover,
.clonk-tour .driver-popover-next-btn.is-done-step:hover {
  background: var(--clonk-turquesa-800);
}

/* ═══ Visible focus (accessibility) ════════════════════════ */
.clonk-tour button:focus-visible {
  outline: 2px solid var(--clonk-magenta-700);
  outline-offset: 2px;
}

/* ═══ Ring over the highlighted element ════════════════════ */
/* Never target a <td>/<th> with a tour step: the shadow gets clipped by the
   collapsed table borders. Target the inner element instead. */
.driver-active-element {
  border-radius: 3px;
  box-shadow: 0 0 0 2px var(--clonk-magenta-700),
              0 0 0 6px rgba(191, 17, 194, .22);
}

/* ═══ Reduced motion ═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .driver-popover.clonk-tour,
  .driver-overlay,
  .driver-active-element { transition: none !important; animation: none !important; }
}