/* =====================================================================
   Réplica do design system do Streamlit 1.62 (Fase 03)
   Tokens extraídos do bundle (utils.Vs712G4Z.js) e dos estilos computados
   capturados em docs/baseline/{light,dark}/estilos.json.
   Três estados de tema, como no Streamlit: sistema (nada no <html>),
   claro e escuro (data-theme). Sem build: CSS puro.
   ===================================================================== */

:root {
  /* paleta clara (config.toml default) */
  --st-bg: #ffffff;
  --st-bg2: #f0f2f6;            /* secondaryBackgroundColor: inputs, plot area, tabelas */
  --st-text: #31333F;
  --st-primary: #ff4b4b;
  --st-link: #ff4b4b;
  --st-code: #09ab3b;           /* código inline (verde do Streamlit) */
  --st-text-rgb: 49, 51, 63;
  --st-faded-05: rgba(var(--st-text-rgb), .1);   /* fadedText05: divisores, grade dos gráficos */
  --st-faded-10: rgba(var(--st-text-rgb), .2);   /* fadedText10 = borderColor */
  --st-faded-20: rgba(var(--st-text-rgb), .3);
  --st-faded-40: rgba(var(--st-text-rgb), .4);
  --st-faded-60: rgba(var(--st-text-rgb), .6);   /* captions, rótulos de metric */
  --st-border: var(--st-faded-10);
  --st-widget-border: rgba(var(--st-text-rgb), .2);
  /* alertas e delta do metric: cor semântica a 10 % + texto da família (medidos no Streamlit 1.62) */
  --st-red: #ff2b2b;   --st-red-text: #bd4043;
  --st-green: #21c354; --st-green-text: #158237;
  --st-blue: #0068c9;  --st-blue-text: #0054a3;
  --st-yellow: #ffbd45; --st-yellow-text: #926c05;
  --st-alert-alpha: .1;
  --st-btn-bg: #ffffff;         /* fundo do botão secundário */
  --st-font: "Source Sans 3", "Source Sans", sans-serif;
  --st-heading-font: var(--st-font);
  --st-mono: "Source Code Pro", monospace;
  --st-emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  --st-radius: .5rem;
  --st-radius-sm: .375rem;
  --st-radius-full: 9999px;
  --st-gap: 1rem;               /* espaço vertical entre elementos (spacing.lg) */
  --st-header-h: 3.75rem;
  --st-metric-value: 2.25rem;
  --st-shadow-toast: 0 4px 16px rgba(0, 0, 0, .16);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --st-bg: #0e1117;
    --st-bg2: #262730;
    --st-text: #fafafa;
    --st-text-rgb: 250, 250, 250;
    --st-red: #ff6c6c;   --st-red-text: #ff6c6c;
    --st-green: #3dd56d; --st-green-text: #5ce488;
    --st-blue: #4a9eff;  --st-blue-text: #83c9ff;
    --st-yellow: #ffe312; --st-yellow-text: #ffffc2;
    --st-alert-alpha: .2;
    --st-btn-bg: #131720;
    --st-shadow-toast: 0 4px 16px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --st-bg: #0e1117;
  --st-bg2: #262730;
  --st-text: #fafafa;
  --st-text-rgb: 250, 250, 250;
  --st-red: #ff6c6c;   --st-red-text: #ff6c6c;
  --st-green: #3dd56d; --st-green-text: #5ce488;
  --st-blue: #4a9eff;  --st-blue-text: #83c9ff;
  --st-yellow: #ffe312; --st-yellow-text: #ffffc2;
  --st-alert-alpha: .2;
  --st-btn-bg: #131720;
  --st-shadow-toast: 0 4px 16px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  background: var(--st-bg);
  color: var(--st-text);
  font-family: var(--st-font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--st-link); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .st-code { font-family: var(--st-mono); font-size: .75em; color: var(--st-code); background: var(--st-bg2); border-radius: .25rem; padding: .2em .4em; }
strong, b { font-weight: 600; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1rem; padding-left: 1.5rem; }
hr, .st-divider { border: 0; border-bottom: 1px solid var(--st-faded-05); margin: 2rem 0; } /* st.divider: hr margin 32px 0 (medido) */
:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 2px; }

/* ---------- estrutura da página (layout="wide") ---------- */
.st-header {
  position: sticky; top: 0; z-index: 30;
  height: var(--st-header-h);
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
  padding: 0 1rem;
  background: var(--st-bg);
}
.st-main { padding: 6rem 5rem 10rem; max-width: initial; margin-top: calc(-1 * var(--st-header-h)); }
@media (max-width: 900px) { .st-main { padding: 5rem 1rem 6rem; } }
.st-block { display: flex; flex-direction: column; gap: var(--st-gap); }
.st-block > * { margin: 0; }
/* st.divider dentro de qualquer bloco (precisa vir depois do reset acima). Medido no original: 48px entre o
   elemento anterior e a linha (gap 16 + 32) e 32px da linha ao elemento seguinte (16 + gap 16). */
.st-block > .st-divider, .st-col > .st-divider, .st-form > .st-divider, .st-container > .st-divider, .st-expander__body > .st-divider { margin: 2rem 0 1rem; }

/* ---------- tipografia (st.title / header / subheader / markdown) ---------- */
/* medidos: h1 44px/700; h2 36px/600 ls -0.005em; h3 28px/600; h4 24px/600; h5 20px/600 — line-height 1.2 */
.st-h1, .st-h2, .st-h3, .st-h4, .st-h5 { font-family: var(--st-heading-font); font-weight: 600; margin: 0; line-height: 1.2; scroll-margin-top: 4.5rem; }
/* No Streamlit o contêiner do heading é 1rem mais baixo que o próprio heading (medido: h1 88.8px em 73px),
   ou seja, o padding inferior do título faz as vezes do gap do bloco: o elemento seguinte encosta nele. */
.st-h1, .st-h2, .st-h3, .st-h4, .st-h5 { margin-bottom: calc(-1 * var(--st-gap)); }
.st-h1 { font-size: 2.75rem; font-weight: 700; padding: 1.25rem 0 1rem; }
.st-h2 { font-size: 2.25rem; padding: 1rem 0; letter-spacing: -.005em; }
.st-h3 { font-size: 1.75rem; padding: .75rem 0 1rem; letter-spacing: -.005em; }
.st-h4 { font-size: 1.5rem; padding: .5rem 0 1rem; }
.st-h5 { font-size: 1.25rem; padding: .375rem 0 1rem; }
.st-h1 .st-anchor, .st-h2 .st-anchor, .st-h3 .st-anchor { color: var(--st-primary); opacity: 0; margin-left: .5rem; font-size: .75em; }
.st-h1:hover .st-anchor, .st-h2:hover .st-anchor, .st-h3:hover .st-anchor { opacity: 1; }
.st-caption { font-size: .875rem; color: var(--st-faded-60); }
.st-caption p { margin: 0; }
.st-md p { margin: 0 0 1rem; } .st-md p:last-child { margin: 0; }
.st-md ul, .st-md ol { margin: 0 0 1rem; padding-left: 1.5rem; } .st-md ul:last-child, .st-md ol:last-child { margin-bottom: 0; }
.st-write { font-size: 1rem; }
.st-label { font-size: .875rem; display: block; min-height: 1.5rem; margin-bottom: .25rem; line-height: 1.6; }
.st-help { font-size: .875rem; color: var(--st-faded-60); }

/* ---------- barra de abas (st.tabs) ---------- */
.st-tabs { display: flex; gap: 1rem; border-bottom: 1px solid var(--st-faded-05); overflow-x: auto; }
.st-tab {
  font-size: .875rem; line-height: 1.6; color: var(--st-text);
  padding: .5rem .25rem; margin-bottom: -1px;
  border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none;
  background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit;
}
.st-tab:hover { color: var(--st-primary); text-decoration: none; }
.st-tab.is-active { color: var(--st-primary); border-bottom-color: var(--st-primary); }
.st-tabpanel { padding-top: var(--st-gap); }

/* ---------- colunas (st.columns) ---------- */
.st-columns { display: grid; gap: var(--st-col-gap, 1rem); align-items: start; }
.st-columns--medium { --st-col-gap: 2rem; }
.st-columns--large { --st-col-gap: 4rem; }
.st-col { min-width: 0; display: flex; flex-direction: column; gap: var(--st-gap); }
.st-col--bottom { justify-content: flex-end; }
@media (max-width: 640px) { .st-columns { grid-template-columns: 1fr !important; } }

/* ---------- container(border=True) e expander ---------- */
.st-container { border: 1px solid var(--st-border); border-radius: var(--st-radius); padding: calc(1rem - 1px); display: flex; flex-direction: column; gap: var(--st-gap); }
.st-expander { border: 1px solid var(--st-border); border-radius: var(--st-radius); }
.st-expander > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem;
  padding: .25rem .75rem; min-height: 2.375rem; font-size: 1rem; border-radius: var(--st-radius);
}
.st-expander > summary::-webkit-details-marker { display: none; }
/* chevron à esquerda do rótulo, como o Streamlit (› fechado, ˅ aberto) */
.st-expander > summary::before { content: "chevron_right"; font-family: "Material Symbols Rounded"; font-size: 1.25rem; color: var(--st-text); transition: transform .15s; }
.st-expander[open] > summary::before { transform: rotate(90deg); }
.st-expander > summary:hover { color: var(--st-primary); }
.st-expander > summary:hover::before { color: var(--st-primary); }
.st-expander__body { padding: 0 1rem 1rem 1rem; display: flex; flex-direction: column; gap: var(--st-gap); }
.st-form { border: 1px solid var(--st-border); border-radius: var(--st-radius); padding: calc(1rem - 1px); display: flex; flex-direction: column; gap: var(--st-gap); }

/* ---------- inputs ---------- */
.st-input-wrap { display: flex; flex-direction: column; }
/* medidos: input 14px, padding 8px 8px 8px 12px, wrapper 40px, fundo secundário, sem borda visível */
.st-input, .st-select, .st-textarea {
  width: 100%; min-height: 2.5rem; padding: .5rem .5rem .5rem .75rem;
  font: inherit; font-size: .875rem; line-height: 1.4; color: var(--st-text);
  background: var(--st-bg2); border: 1px solid transparent; border-radius: var(--st-radius);
  transition: border-color .1s;
}
.st-input::placeholder, .st-textarea::placeholder { color: var(--st-faded-60); }
.st-input:focus, .st-select:focus, .st-textarea:focus { outline: none; border-color: var(--st-primary); }
.st-textarea { min-height: 6rem; resize: vertical; }
.st-select { appearance: none; -webkit-appearance: none; padding-right: 2.25rem; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23808495'><path d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/></svg>");
  background-repeat: no-repeat; background-position: right .6rem center; }
.st-input[type="time"], .st-input[type="date"] { cursor: text; }

/* multiselect (chips) e selectbox com busca */
.st-ms { position: relative; }
.st-ms__box { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; min-height: 2.5rem; padding: .25rem 2.25rem .25rem .5rem; background: var(--st-bg2); border: 1px solid transparent; border-radius: var(--st-radius); cursor: text; }
.st-ms__box:focus-within { border-color: var(--st-primary); }
.st-ms__tag { display: inline-flex; align-items: center; gap: .25rem; background: var(--st-primary); color: #fff; font-size: .75rem; line-height: 1; padding: .3rem .5rem; border-radius: .25rem; max-width: 100%; }
.st-ms__tag button { all: unset; cursor: pointer; font-size: .875rem; line-height: 1; opacity: .85; }
.st-ms__tag button:hover { opacity: 1; }
.st-ms__input { flex: 1; min-width: 6rem; border: 0; background: transparent; font: inherit; font-size: .875rem; color: var(--st-text); padding: .25rem; }
.st-ms__input:focus { outline: none; }
.st-ms__placeholder { color: var(--st-faded-60); padding-left: .25rem; }
.st-ms__caret { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); color: var(--st-faded-60); pointer-events: none; }
.st-ms__clear { position: absolute; right: 2.1rem; top: 50%; transform: translateY(-50%); font-size: 1.125rem; color: var(--st-faded-60); cursor: pointer; } /* ícone "limpar tudo" do st.multiselect */
.st-ms__list { position: absolute; z-index: 20; left: 0; right: 0; margin-top: .25rem; max-height: 18rem; overflow: auto; background: var(--st-bg); border-radius: var(--st-radius); box-shadow: 0 4px 16px rgba(0,0,0,.16); padding: .25rem 0; }
.st-ms__opt { padding: .5rem .75rem; cursor: pointer; font-size: .875rem; }
.st-ms__opt:hover, .st-ms__opt.is-active { background: var(--st-bg2); }
.st-ms__opt.is-selected { color: var(--st-primary); }
.st-ms__empty { padding: .5rem .75rem; color: var(--st-faded-60); }

/* checkbox / radio */
.st-check { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; cursor: pointer; min-height: 1.5rem; }
.st-check > span { font-size: .875rem; line-height: 1.5; } /* texto do st.checkbox: p de 14px/21px dentro do label de 16px (medido) */
.st-check input { appearance: none; width: 1rem; height: 1rem; margin: 0; border: 1px solid var(--st-faded-40); border-radius: .25rem; background: var(--st-bg); display: grid; place-content: center; cursor: pointer; }
.st-check input:checked { background: var(--st-primary); border-color: var(--st-primary); }
.st-check input:checked::before { content: ""; width: .6rem; height: .35rem; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.st-radio { display: flex; gap: 1rem; flex-wrap: wrap; } /* radiogroup gap 16px (medido) */
.st-radio--vertical { flex-direction: column; gap: .5rem; }
.st-radio__item { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-size: 1rem; }
.st-radio__item > span { font-size: .875rem; line-height: 1.6; } /* opções do st.radio: mesmo markdown de 14px */
.st-radio__item input { appearance: none; width: 1rem; height: 1rem; margin: 0; border: 1px solid var(--st-faded-40); border-radius: 50%; display: grid; place-content: center; background: var(--st-bg); }
/* selecionado: círculo preenchido em primary com miolo claro (BaseWeb radio do Streamlit) */
.st-radio__item input:checked { border-color: var(--st-primary); background: var(--st-primary); }
.st-radio__item input:checked::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: #fff; }

/* number input (− / +) */
.st-number { display: flex; align-items: stretch; background: var(--st-bg2); border: 1px solid transparent; border-radius: var(--st-radius); min-height: 2.5rem; }
.st-number:focus-within { border-color: var(--st-primary); }
.st-number input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: .875rem; color: var(--st-text); padding: .5rem .75rem; }
.st-number input:focus { outline: none; }
.st-number button { all: unset; cursor: pointer; width: 2rem; display: grid; place-content: center; color: var(--st-faded-60); border-left: 1px solid var(--st-faded-05); }
.st-number button:hover { color: var(--st-primary); }

/* slider */
.st-slider { padding: .5rem 0 .25rem; }
.st-slider__value { font-size: .875rem; margin-bottom: .25rem; color: var(--st-primary); }
.st-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: linear-gradient(to right, var(--st-primary) var(--st-fill, 0%), var(--st-faded-10) var(--st-fill, 0%)); border-radius: 2px; outline: none; }
.st-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--st-primary); border: 0; cursor: pointer; }
.st-slider input[type="range"]::-moz-range-thumb { width: 1rem; height: 1rem; border-radius: 50%; background: var(--st-primary); border: 0; cursor: pointer; }
.st-slider__ticks { display: flex; justify-content: space-between; font-size: .875rem; color: var(--st-faded-60); margin-top: .25rem; }

/* file uploader (dropzone) */
.st-uploader { display: flex; align-items: center; gap: .75rem; padding: .75rem; min-height: 4.25rem; background: var(--st-bg2); border-radius: var(--st-radius); }
.st-uploader__icon { font-size: 1.75rem; color: var(--st-faded-60); }
.st-uploader__text { flex: 1; }
.st-uploader__text small { display: block; font-size: .875rem; color: var(--st-faded-60); }
.st-uploader input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ---------- botões ---------- */
.st-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.5rem; padding: .25rem .75rem; font: inherit; font-size: 1rem; line-height: 1.6;
  border-radius: var(--st-radius); border: 1px solid var(--st-widget-border);
  background: var(--st-btn-bg); color: var(--st-text); cursor: pointer; text-decoration: none; user-select: none;
  transition: border-color .1s, color .1s, background .1s;
}
.st-btn:hover { border-color: var(--st-primary); color: var(--st-primary); text-decoration: none; }
.st-btn:active { background: var(--st-primary); color: #fff; }
.st-btn--primary { background: var(--st-primary); border-color: var(--st-primary); color: #fff; }
.st-btn--primary:hover { background: #ff6c6c; border-color: #ff6c6c; color: #fff; }
.st-btn--primary:active { background: #e03a3a; }
.st-btn--full { width: 100%; }
.st-block > .st-btn, .st-col > .st-btn, .st-form > .st-btn, .st-container > .st-btn, .st-expander__body > .st-btn { align-self: flex-start; }
.st-block > .st-btn--full, .st-col > .st-btn--full, .st-form > .st-btn--full, .st-container > .st-btn--full { align-self: stretch; }
.st-btn--tertiary { border-color: transparent; background: transparent; }

/* ---------- alertas (st.success / info / warning / error) ---------- */
.st-alert { border-radius: var(--st-radius); padding: 1rem; font-size: 1rem; line-height: 1.5; display: flex; gap: .75rem; }
.st-alert p { margin: 0 0 .5rem; } .st-alert p:last-child { margin: 0; }
.st-alert ul { margin: .25rem 0 0; }
.st-alert--success { background: color-mix(in srgb, var(--st-green) calc(var(--st-alert-alpha) * 100%), transparent); color: var(--st-green-text); }
.st-alert--info { background: color-mix(in srgb, var(--st-blue) calc(var(--st-alert-alpha) * 100%), transparent); color: var(--st-blue-text); }
.st-alert--warning { background: color-mix(in srgb, var(--st-yellow) calc(var(--st-alert-alpha) * 100%), transparent); color: var(--st-yellow-text); }
.st-alert--error { background: color-mix(in srgb, var(--st-red) calc(var(--st-alert-alpha) * 100%), transparent); color: var(--st-red-text); }

/* ---------- st.metric ---------- */
.st-metric { display: flex; flex-direction: column; }
.st-metric__label { font-size: .875rem; color: var(--st-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-metric__value { font-size: var(--st-metric-value); line-height: 1.2; font-weight: 400; padding-bottom: .25rem; color: var(--st-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* delta medido: 14px, pílula 9999px, padding 2px 6px 2px 4px, altura 24px, cor semântica a 10 % (20 % no escuro) */
.st-metric__delta { font-size: .875rem; line-height: 1.43; height: 1.5rem; display: inline-flex; align-items: center; gap: .125rem; max-width: 100%; padding: .125rem .375rem .125rem .25rem; border-radius: var(--st-radius-full); overflow: hidden; }
.st-metric__delta > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-metric__delta .st-icon { font-size: 1rem; flex: none; }
.st-metric__delta--up { color: var(--st-green-text); background: color-mix(in srgb, var(--st-green) calc(var(--st-alert-alpha) * 100%), transparent); }
.st-metric__delta--down { color: var(--st-red-text); background: color-mix(in srgb, var(--st-red) calc(var(--st-alert-alpha) * 100%), transparent); }
.st-metric__delta--off { color: var(--st-faded-60); background: var(--st-faded-05); }

/* ---------- st.dataframe ---------- */
.st-dataframe { border: 1px solid var(--st-faded-05); border-radius: var(--st-radius-sm); overflow: auto; max-height: var(--st-df-height, auto); background: var(--st-bg); font-size: .875rem; font-variant-numeric: tabular-nums; }
.st-dataframe table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 100%; }
.st-dataframe th, .st-dataframe td { padding: 0 .75rem; height: 35px; border-bottom: 1px solid var(--st-faded-05); border-right: 1px solid var(--st-faded-05); white-space: nowrap; text-align: left; vertical-align: middle; }
.st-dataframe th:last-child, .st-dataframe td:last-child { border-right: 0; }
.st-dataframe thead th { position: sticky; top: 0; z-index: 1; background: var(--st-bg2); font-weight: 600; cursor: pointer; user-select: none; }
.st-dataframe thead th .st-sort { color: var(--st-faded-60); margin-left: .25rem; font-size: .75rem; }
.st-dataframe td.is-num, .st-dataframe th.is-num { text-align: right; }
.st-dataframe tbody tr:hover td { background: var(--st-bg2); }
.st-progress-cell { display: flex; align-items: center; gap: .5rem; min-width: 8rem; }
.st-progress-cell__bar { flex: 1; height: .5rem; background: var(--st-faded-05); border-radius: 2px; overflow: hidden; }
.st-progress-cell__fill { height: 100%; background: var(--st-primary); }
.st-progress-cell__text { min-width: 3.5rem; text-align: right; }

/* ---------- HTML custom da aba 5 (cores fixas nos dois temas) ---------- */
.st-chip { display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: .85rem; line-height: 1.6; }
.st-chip--green { background: #1e3a2f; color: #4ade80; }
.st-chip--gray { background: #262626; color: #a3a3a3; }
.st-chip--blue { background: #1e293b; color: #38bdf8; }
.st-status-tip { cursor: help; border-bottom: 1px dotted #888; font-weight: 600; }

/* ---------- toast (st.toast) ---------- */
.st-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: flex; flex-direction: column; gap: .5rem; width: 21rem; max-width: calc(100vw - 2rem); }
.st-toast { display: flex; gap: .75rem; align-items: flex-start; background: var(--st-bg2); color: var(--st-text); padding: 1rem; border-radius: var(--st-radius); box-shadow: var(--st-shadow-toast); font-size: .875rem; opacity: 0; transform: translateY(.5rem); transition: opacity .25s, transform .25s; }
.st-toast.is-visible { opacity: 1; transform: none; }
.st-toast__icon { font-size: 1.25rem; line-height: 1; }

/* ---------- "Running…" ---------- */
.st-running-badge { display: none; align-items: center; gap: .5rem; font-size: .875rem; color: var(--st-faded-60); }
html.st-running .st-running-badge { display: inline-flex; }
html.st-running .st-main { opacity: .6; transition: opacity .2s; }
.st-spinner { width: 1.25rem; height: 1.25rem; border: 2px solid var(--st-faded-10); border-top-color: var(--st-primary); border-radius: 50%; animation: st-spin .8s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .st-spinner { animation: none; } .st-toast { transition: none; } }

/* ---------- seletor de tema (menu ⋮ → Settings do Streamlit) ---------- */
.st-menu { position: relative; }
.st-menu__btn { all: unset; cursor: pointer; width: 2.25rem; height: 2.25rem; display: grid; place-content: center; border-radius: var(--st-radius); color: var(--st-text); }
.st-menu__btn:hover { background: var(--st-bg2); }
.st-menu__panel { position: absolute; right: 0; top: 2.5rem; min-width: 14rem; background: var(--st-bg); border-radius: var(--st-radius); box-shadow: 0 4px 16px rgba(0,0,0,.16); padding: .5rem 0; z-index: 40; }
.st-menu__title { font-size: .75rem; color: var(--st-faded-60); padding: .25rem 1rem; text-transform: none; }
.st-menu__item { all: unset; display: flex; gap: .5rem; align-items: center; padding: .5rem 1rem; cursor: pointer; font-size: .875rem; width: calc(100% - 2rem); }
.st-menu__item:hover { background: var(--st-bg2); }
.st-menu__item.is-active { color: var(--st-primary); }

/* ---------- plotly ---------- */
.st-plotly { width: 100%; }
.st-plotly .js-plotly-plot .plotly .modebar { opacity: 0; transition: opacity .2s; }
.st-plotly:hover .js-plotly-plot .plotly .modebar { opacity: 1; }

/* ---------- utilidades ---------- */
.st-emoji { font-family: var(--st-emoji); }
.st-muted { color: var(--st-faded-60); }
.st-right { text-align: right; }
.st-nowrap { white-space: nowrap; }
.st-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* st.time_input do Streamlit não mostra ícone; o campo nativo continua aceitando digitação */
.st-input[type="time"]::-webkit-calendar-picker-indicator { display: none; }