/* FIT100 Running — compartilhamento claro final.
   O Dialog usa portal fora do #root, então os seletores precisam atingir o body diretamente. */

html body [data-fit100-share-screen="true"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #071426 !important;
}

html body [data-fit100-share-screen="true"] > header {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

html body [data-fit100-share-screen="true"] > header h2 {
  color: #071426 !important;
}

html body [data-fit100-share-screen="true"] > header p {
  color: #74859b !important;
}

html body [data-fit100-share-screen="true"] > header button:first-child,
html body [data-fit100-share-screen="true"] > header button:last-child {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0b4f91 !important;
  border: 1px solid #b9d8f5 !important;
  box-shadow: 0 4px 12px rgba(7,20,38,.05) !important;
}

html body [data-fit100-share-screen="true"] > header button svg {
  color: #168cff !important;
  stroke: #168cff !important;
}

html body [data-fit100-share-screen="true"] > main {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

html body [data-fit100-share-screen="true"] > main > section {
  background: #ffffff !important;
  border-color: #d7e5f3 !important;
  box-shadow: 0 8px 24px rgba(7,20,38,.045) !important;
}

html body [data-fit100-share-screen="true"] > main > section > div {
  background: #f4f7fb !important;
}

html body [data-fit100-share-screen="true"] > footer {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-top: 1px solid #dce7f2 !important;
  box-shadow: 0 -6px 18px rgba(7,20,38,.035) !important;
}

html body [data-fit100-share-screen="true"] > footer button:first-child {
  background: #168cff !important;
  background-color: #168cff !important;
  color: #ffffff !important;
  border-color: #168cff !important;
  box-shadow: 0 8px 20px rgba(22,140,255,.18) !important;
}

html body [data-fit100-share-screen="true"] > footer button:first-child svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

html body [data-fit100-share-screen="true"] > footer button:last-child {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0b3b6d !important;
  border: 1px solid #b9d8f5 !important;
  box-shadow: none !important;
}

html body [data-fit100-share-screen="true"] > footer button:last-child svg {
  color: #168cff !important;
  stroke: #168cff !important;
}

/* Corrida ao vivo — card principal alinhado com a linha dos botões.
   Números maiores e card 10px mais alto para melhorar leitura. */
html body [data-fit100-running-live="true"] > div[class*="bottom-[calc"] {
  left: 12px !important;
  right: 12px !important;
  bottom: calc(max(env(safe-area-inset-bottom,0px),8px) + 76px) !important;
}

html body [data-fit100-running-live="true"] > div[class*="bottom-[calc"] > div {
  border-radius: 22px !important;
  box-shadow: 0 14px 32px rgba(4,27,57,.20) !important;
}

html body [data-fit100-running-live="true"] > div[class*="bottom-[calc"] > div > div:first-child {
  padding: 18px 4px 16px !important;
  grid-template-columns: 1.3fr .85fr .85fr !important;
}

html body [data-fit100-running-live="true"] > div[class*="bottom-[calc"] > div > div:first-child > div > div:first-child {
  color: #168cff !important;
  -webkit-text-fill-color: #168cff !important;
  font-size: 10px !important;
}

html body [data-fit100-running-live="true"] > div[class*="bottom-[calc"] > div > div:first-child > div > div:nth-child(2) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(29px,7.4vw,34px) !important;
  font-weight: 650 !important;
  text-shadow: none !important;
}

/* O tempo tem 8 caracteres (00:00:00), então recebe coluna maior e nunca usa reticências. */
html body [data-fit100-running-live="true"] > div[class*="bottom-[calc"] > div > div:first-child > div:first-child > div:nth-child(2) {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: clamp(27px,7vw,32px) !important;
}

html body [data-fit100-running-live="true"] > div[class*="bottom-[calc"] > div > div:first-child > div > div:nth-child(3) {
  color: #168cff !important;
  -webkit-text-fill-color: #168cff !important;
  font-size: 10px !important;
}

html body [data-fit100-running-live="true"] > div[class*="bottom-[calc"] > div > div:nth-child(2) {
  min-height: 40px !important;
  padding: 10px 10px 9px !important;
}

html body [data-fit100-running-live="true"] > div[class*="bottom-[calc"] > div > div:nth-child(2) > span:first-child,
html body [data-fit100-running-live="true"] > div[class*="bottom-[calc"] > div > div:nth-child(2) > span:nth-child(3) {
  font-size: 10px !important;
}

html body [data-fit100-running-live="true"] > div[class*="bottom-[calc"] > div > div:nth-child(2) > span:nth-child(2) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 16px !important;
}

html body [data-fit100-running-live="true"] > div[class*="bottom-[calc"] > div > div:last-child {
  gap: 7px !important;
  padding: 4px 14px 13px !important;
}

html body [data-fit100-running-live="true"] > div[class*="bottom-[calc"] > div > div:last-child > div:first-child {
  font-size: 12px !important;
}

html body [data-fit100-running-live="true"] > div[class*="bottom-[calc"] > div > div:last-child > div:last-child {
  height: 5px !important;
}