/* seat-time-ui.patch.v1.css — CLEAN v2 (Seat-Time only)
   Goals:
   - Light: visible outlines
   - Slate/Blue/Dark: readable text + slightly lifted bar
   - Paused pill: ALWAYS yellow (all themes)
   - Progress: subtle glow that increases with time (driven by JS vars)
*/

/* ---------------------------
   Base bar look (all themes)
---------------------------- */
.sd-seat-time-bar{
  background: var(--bg, #f5f7fa) !important;
  color: var(--ink, #222) !important;
  border-bottom: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.06) !important;
}
.sd-seat-time-bar *{ color: inherit; }

/* Layout/pills/buttons – ensure outlines exist */
.sd-seat-time-bar .ct-status{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.03);
  font-weight: 800;
}
.sd-seat-time-bar .ct-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(0,0,0,.04);
  font-weight: 900;
  cursor: pointer;
}

/* ---------------------------
   Progress bar + glow
   (JS sets --sd-progress and --sd-glow)
---------------------------- */
.sd-seat-time-bar .ct-progress{
  margin-top: 10px;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(127,127,127,.22);
}
.sd-seat-time-bar .ct-progress-fill{
  height: 100%;
  width: var(--sd-progress, 0%);
  border-radius: 999px;
  background: rgba(30,136,229,.90);
  box-shadow:
    0 0 14px rgba(30,136,229, var(--sd-glow, .10)),
    0 0 30px rgba(30,136,229, calc(var(--sd-glow, .10) * .80));
  transition: width .35s ease;
}

/* ---------------------------
   CRITICAL: Paused status pill = yellow (ALL themes)
   This must win, so we use specificity + !important.
---------------------------- */
.sd-seat-time-bar.is-paused .ct-status{
  border-color: rgba(255,193,7,.80) !important;
  background: rgba(255,193,7,.42) !important;
  color: #0b0f14 !important;
}

/* Keep Resume/Pause button distinct from the yellow pill */
.sd-seat-time-bar.is-paused .ct-btn{
  /* stays neutral; do NOT match yellow */
}

/* ---------------------------
   Theme overrides
---------------------------- */

/* Slate (your actual theme flag) */
html[data-theme="slate"] .sd-seat-time-bar{
  background: rgba(255,255,255,.08) !important;  /* lifted from body */
  color: #ffffff !important;
  border-bottom-color: rgba(255,255,255,.14) !important;
}
html[data-theme="slate"] .sd-seat-time-bar .ct-status{
  border-color: rgba(255,255,255,.20) !important;
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
}
html[data-theme="slate"] .sd-seat-time-bar .ct-btn{
  border-color: rgba(255,255,255,.24) !important;
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
}
/* Paused pill still yellow */
html[data-theme="slate"] .sd-seat-time-bar.is-paused .ct-status{
  border-color: rgba(255,193,7,.85) !important;
  background: rgba(255,193,7,.46) !important;
  color: #0b0f14 !important;
}

/* Dark */
html[data-theme="dark"] .sd-seat-time-bar{
  background: rgba(255,255,255,.06) !important;
  color: #ffffff !important;
  border-bottom-color: rgba(255,255,255,.14) !important;
}
html[data-theme="dark"] .sd-seat-time-bar .ct-status{
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .sd-seat-time-bar .ct-btn{
  border-color: rgba(255,255,255,.24) !important;
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
}
/* Paused pill still yellow */
html[data-theme="dark"] .sd-seat-time-bar.is-paused .ct-status{
  border-color: rgba(255,193,7,.85) !important;
  background: rgba(255,193,7,.46) !important;
  color: #0b0f14 !important;
}

/* Blue */
html[data-theme="blue"] .sd-seat-time-bar{
  background: rgba(255,255,255,.07) !important;
  color: #ffffff !important;
  border-bottom-color: rgba(255,255,255,.18) !important;
}
html[data-theme="blue"] .sd-seat-time-bar .ct-status{
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
}
html[data-theme="blue"] .sd-seat-time-bar .ct-btn{
  border-color: rgba(255,255,255,.24) !important;
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
}
/* Paused pill still yellow */
html[data-theme="blue"] .sd-seat-time-bar.is-paused .ct-status{
  border-color: rgba(255,193,7,.85) !important;
  background: rgba(255,193,7,.46) !important;
  color: #0b0f14 !important;
}

/* ---------------------------
   Gate note (keep readable)
---------------------------- */
.sd-ct-gate-note{
  position: fixed !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 99999 !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,193,7,.60) !important;
  background: rgba(255,193,7,.92) !important;
  color: #0b0f14 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
}
.is-gated{ opacity:.55 !important; pointer-events:none !important; cursor:not-allowed !important; }
/* =========================================================
   Seat-Time Fix Pack — Light + Slate (buttons + readability)
   Add this at the VERY END of seat-time-ui.patch.v1.css
   ========================================================= */

/* LIGHT: make Pause/Resume button outline clearly visible */
html:not([data-theme]) .sd-seat-time-bar .ct-btn,
html[data-theme="light"] .sd-seat-time-bar .ct-btn{
  border-color: rgba(0,0,0,.38) !important; /* medium gray outline */
  background: rgba(0,0,0,.04) !important;
}

/* LIGHT: status pill outline slightly stronger too */
html:not([data-theme]) .sd-seat-time-bar .ct-status,
html[data-theme="light"] .sd-seat-time-bar .ct-status{
  border-color: rgba(0,0,0,.28) !important;
  background: rgba(0,0,0,.03) !important;
}

/* SLATE: ensure the BAR text is readable (not washed out) */
html[data-theme="slate"] .sd-seat-time-bar{
  color: rgba(255,255,255,.96) !important;
}
html[data-theme="slate"] .sd-seat-time-bar .ct-title,
html[data-theme="slate"] .sd-seat-time-bar .ct-meta{
  color: rgba(255,255,255,.96) !important;
}

/* SLATE: make BOTH status + button outlines visible (medium gray) */
html[data-theme="slate"] .sd-seat-time-bar .ct-status{
  border-color: rgba(255,255,255,.42) !important; /* medium gray in slate context */
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.96) !important;
}
html[data-theme="slate"] .sd-seat-time-bar .ct-btn{
  border-color: rgba(255,255,255,.42) !important; /* medium gray outline */
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.96) !important;
}

/* SLATE: paused pill stays yellow + readable (re-assert) */
html[data-theme="slate"] .sd-seat-time-bar.is-paused .ct-status{
  border-color: rgba(255,193,7,.85) !important;
  background: rgba(255,193,7,.46) !important;
  color: #0b0f14 !important;
}
/* =========================================================
   Seat-Time OPAQUE BAR + SLATE BLACK TEXT + LIGHT PAUSED YELLOW
   Paste at VERY END of seat-time-ui.patch.v1.css
   ========================================================= */

/* 1) STOP SEE-THROUGH IN ALL THEMES (make bar opaque) */
.sd-seat-time-bar{
  background: var(--bg, #f5f7fa) !important;     /* default solid */
  opacity: 1 !important;
  isolation: isolate;
}

/* 2) LIGHT: force PAUSED pill to yellow (it’s being overridden) */
html:not([data-theme]) .sd-seat-time-bar.is-paused .ct-status,
html[data-theme="light"] .sd-seat-time-bar.is-paused .ct-status{
  background: rgba(255,193,7,.46) !important;
  border-color: rgba(255,193,7,.85) !important;
  color: #0b0f14 !important;
}

/* 3) SLATE: you want BLACK text + an OPAQUE bar (no transparency) */
html[data-theme="slate"] .sd-seat-time-bar{
  background: rgba(255,255,255,.96) !important;  /* solid-ish, not glass */
  color: #0b0f14 !important;
  border-bottom-color: rgba(0,0,0,.12) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.12) !important;
}
html[data-theme="slate"] .sd-seat-time-bar .ct-title,
html[data-theme="slate"] .sd-seat-time-bar .ct-meta{
  color: #0b0f14 !important;
}
html[data-theme="slate"] .sd-seat-time-bar .ct-status{
  border-color: rgba(0,0,0,.26) !important;
  background: rgba(0,0,0,.04) !important;
  color: #0b0f14 !important;
}
html[data-theme="slate"] .sd-seat-time-bar .ct-btn{
  border-color: rgba(0,0,0,.32) !important;
  background: rgba(0,0,0,.05) !important;
  color: #0b0f14 !important;
}

/* Keep SLATE paused pill yellow (already good, but lock it in) */
html[data-theme="slate"] .sd-seat-time-bar.is-paused .ct-status{
  background: rgba(255,193,7,.48) !important;
  border-color: rgba(255,193,7,.90) !important;
  color: #0b0f14 !important;
}

/* 4) BLUE + DARK: make bar OPAQUE so scrolling text can’t show through */
html[data-theme="blue"] .sd-seat-time-bar,
html[data-theme="dark"] .sd-seat-time-bar{
  background: rgba(12,18,28,.96) !important;     /* opaque dark strip */
  color: #ffffff !important;
  border-bottom-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.35) !important;
}

/* Ensure nested text stays white in BLUE/DARK */
html[data-theme="blue"] .sd-seat-time-bar .ct-title,
html[data-theme="blue"] .sd-seat-time-bar .ct-meta,
html[data-theme="dark"] .sd-seat-time-bar .ct-title,
html[data-theme="dark"] .sd-seat-time-bar .ct-meta{
  color: #ffffff !important;
}

/* BLUE/DARK controls readable */
html[data-theme="blue"] .sd-seat-time-bar .ct-status,
html[data-theme="dark"] .sd-seat-time-bar .ct-status{
  border-color: rgba(255,255,255,.24) !important;
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
}
html[data-theme="blue"] .sd-seat-time-bar .ct-btn,
html[data-theme="dark"] .sd-seat-time-bar .ct-btn{
  border-color: rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
}
/* =========================================================
   Seat-Time Final Fix Pack — Opaque Slate, Blue Bar Color,
   Equal Pill/Button Height, Dropdown Above Timer
   Paste at VERY END of seat-time-ui.patch.v1.css
   ========================================================= */

/* ---------- A) Make the timer bar NEVER translucent ---------- */
.sd-seat-time-bar{
  background: var(--bg, #f5f7fa) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Slate: force TRUE opaque */
html[data-theme="slate"] .sd-seat-time-bar{
  background: #f3f4f6 !important;                 /* solid (no alpha) */
  color: #0b0f14 !important;
  border-bottom-color: rgba(0,0,0,.12) !important;
}

/* ---------- B) Blue mode: make bar BLUE (not black), lighter than body ---------- */
/* Pick a clean readable blue tint */
html[data-theme="blue"] .sd-seat-time-bar{
  background: #163a63 !important;                 /* blue bar */
  color: #ffffff !important;
  border-bottom-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.32) !important;
}

/* Keep blue button/pill readable on the blue bar */
html[data-theme="blue"] .sd-seat-time-bar .ct-status{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.26) !important;
  color: #ffffff !important;
}
html[data-theme="blue"] .sd-seat-time-bar .ct-btn{
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #ffffff !important;
}

/* ---------- C) Make Paused pill and Resume/Pause button SAME HEIGHT ---------- */
/* Force consistent sizing for BOTH .ct-status (span) and .ct-btn (button) */
.sd-seat-time-bar .ct-status,
.sd-seat-time-bar .ct-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;                        /* unified height */
  padding: 0 14px !important;
  line-height: 40px !important;                   /* for safety */
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-sizing: border-box !important;
}

/* Remove any inherited weirdness */
.sd-seat-time-bar .ct-btn{
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Light mode: visible outlines */
html:not([data-theme]) .sd-seat-time-bar .ct-status,
html[data-theme="light"] .sd-seat-time-bar .ct-status,
html:not([data-theme]) .sd-seat-time-bar .ct-btn,
html[data-theme="light"] .sd-seat-time-bar .ct-btn{
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(0,0,0,.32) !important;        /* medium gray outline */
}

/* Keep paused pill yellow in ALL themes (re-assert after sizing rules) */
.sd-seat-time-bar.is-paused .ct-status{
  background: rgba(255,193,7,.48) !important;
  border-color: rgba(255,193,7,.90) !important;
  color: #0b0f14 !important;
}

/* ---------- D) Fix "More" dropdown going behind timer ---------- */
/* Ensure header sits above timer, and dropdown menu sits above everything */
.site-header{ position: sticky; top: 0; z-index: 99990 !important; }
.sd-seat-time-bar{ position: sticky; top: var(--sd-header-h, 72px); z-index: 99970 !important; }

/* If your dropdown menu element uses .menu, force it to the top */
.site-header .dropdown .menu{
  position: absolute;
  z-index: 99999 !important;
}
/* Course page only: restore timer bar breathing room */
body.page-course .sd-seat-time-bar,
body.page-course #sd-seat-time,
body.page-course .sd-seat-time,
body.page-course .course-time-bar,
body.page-course .timer-bar{
  padding: 14px 12px !important;
}

/* Optional: keep right side vertically centered */
body.page-course .sd-seat-time-bar .ct-right,
body.page-course #sd-seat-time .ct-right{
  align-items: center !important;
}
/* Seat-time bar: NEVER allow status/button text to wrap (fixes ES “En curso” splitting) */
.sd-seat-time-bar .ct-right,
#sd-seat-time .ct-right,
.sd-seat-time .ct-right,
.course-time-bar .ct-right,
.timer-bar .ct-right {
  flex-wrap: nowrap !important;
}

.sd-seat-time-bar .ct-status,
#sd-seat-time .ct-status,
.sd-seat-time .ct-status,
.course-time-bar .ct-status,
.timer-bar .ct-status,
.sd-seat-time-bar .ct-right button,
#sd-seat-time .ct-right button,
.sd-seat-time .ct-right button,
.course-time-bar .ct-right button,
.timer-bar .ct-right button {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
/* ===== Seat-time gate note (yellow ribbon) — mobile-friendly ===== */
.sd-ct-gate-note{
  max-width: 100%;
}

/* Phone: stop covering content */
@media (max-width: 520px){
  .sd-ct-gate-note{
    position: sticky !important; /* stays visible without overlaying content */
    top: calc(var(--sd-header-h, 72px) + 62px) !important; /* under header + timer bar */
    bottom: auto !important;

    margin: 10px 12px 12px !important;
    border-radius: 14px !important;

    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;

    z-index: 20 !important; /* below the timer bar if needed */
  }
}

/* Course page: remove footer clearance when ribbon is NOT bottom-fixed */
@media (max-width: 520px){
  body.page-course{
    --sd-bottom-ribbon-clearance: 0px;
  }
  body.page-course footer,
  body.page-course .site-footer{
    margin-bottom: 0 !important;
  }
}