/* DataFlow · demonstração pública. Paleta e medidas da interface homologada
   (.streamlit/config.toml e app/aparencia.py). */
:root {
  --barra: #5fa8d3;
  --texto-na-barra: #082436;
  --menu: #245574;
  --menu-texto: #f5f9ff;
  --menu-secundario: #c8dceb;
  --menu-ativo: #36769a;
  --fundo: #082436;
  --cartao: #293d58;
  --cartao-2: #344c63;
  --texto: #f5f9ff;
  --texto-2: #c8d8e6;
  --legenda: #a7b6c6;
  --destaque: #168ef0;
  --ciano: #13c8e5;
  --verde: #20d6a0;
  --vermelho: #ff5b69;
  --borda: #47617a;
  --largura-menu: 300px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px; line-height: 1.6;
}
a { color: #6cc0ff; }
:focus-visible { outline: 2px solid var(--barra); outline-offset: 2px; }
.pular { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--texto);
  color: var(--fundo); padding: .5rem 1rem; }
.pular:focus { left: 1rem; }

/* ---------------------------------------------------------------- menu */
.menu {
  position: fixed; inset: 0 auto 0 0; width: var(--largura-menu); background: var(--menu);
  border-right: 1px solid var(--borda); padding: 5.5rem 1.25rem 2rem; overflow-y: auto; z-index: 20;
  color: var(--menu-texto);
}
.menu-titulo { font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--menu-secundario); margin: .4rem 0 .5rem; }
.menu nav a, .menu nav span {
  display: flex; align-items: center; gap: .45rem; padding: .4rem .75rem; margin-bottom: .45rem;
  border-radius: 9px; font-weight: 600; text-decoration: none; color: var(--menu-texto);
}
.menu nav a:hover, .menu nav a:focus-visible, .menu nav a:active {
  background: var(--menu-ativo); outline: 2px solid var(--menu-texto); outline-offset: -2px;
}
.menu nav .sub { margin-left: 1rem; }
.menu nav svg { width: 1rem; height: 1rem; flex: none; }
.menu-divisor { border: 0; border-top: 1px solid var(--menu-ativo); margin: 1.5rem 0; }
.menu-nota { font-size: 1rem; margin: 0; }
.menu-nota .secundario, .secundario-menu { color: var(--menu-secundario); }
.icone-info { display: inline-grid; place-items: center; width: 1rem; height: 1rem;
  border: 1.5px solid currentColor; border-radius: 50%; font-size: .7rem; font-weight: 700;
  margin-right: .3rem; vertical-align: -.1rem; }

/* --------------------------------------------------------------- barra */
.principal { margin-left: var(--largura-menu); min-width: 0; }
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--barra); color: var(--texto-na-barra); min-height: 4.5rem;
  padding: .8rem 4.5rem .8rem 2.5rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.marca { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.nome { font-size: 1.9rem; font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.flow { color: var(--texto); }
.descricao { font-size: .98rem; font-weight: 500; padding-left: .9rem;
  border-left: 2px solid rgba(8, 36, 54, .35); }
.indicador { background: rgba(8, 36, 54, .12); border: 1px solid rgba(8, 36, 54, .25);
  border-radius: 10px; padding: .45rem .9rem; font-size: .86rem; line-height: 1.35; }
.indicador b { font-size: .98rem; }
.botao-menu { display: none; }

/* ------------------------------------------------------------ conteúdo */
main { padding: .4rem 2.5rem 3rem; outline: none; }
.aviso-demo {
  margin: .9rem 0 1rem; padding: .55rem .9rem; border: 1px dashed var(--borda); border-radius: 10px;
  color: var(--texto-2); font-size: .9rem;
}
.aviso-demo b { color: var(--texto); }
.cartao {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px;
  padding: 1.1rem 1.4rem 1.3rem; margin-bottom: 1rem; scroll-margin-top: 1rem;
}
h2 { font-size: 2.25rem; font-weight: 700; line-height: 1.2; margin: 1rem 0 .9rem; }
h3 { font-size: 1.75rem; font-weight: 600; line-height: 1.2; margin: .6rem 0 .7rem; overflow-wrap: anywhere; }
h4 { font-size: 1.5rem; font-weight: 600; margin: 1.6rem 0 .8rem; }
.legenda { color: var(--legenda); font-size: .875rem; margin: 0 0 1rem; }
.legenda.demo { margin: .9rem 0 0; }
.rotulo { display: block; font-size: .875rem; margin: 0 0 .4rem; }

.alerta { border-radius: .5rem; padding: 1rem; margin: 0 0 1rem; }
.alerta.info { background: #173e5e; color: #9fd4fb; }
.alerta.sucesso { background: #18493f; color: #20d6a0; }
.alerta.aviso { background: #45391c; color: #f7d58c; }
.alerta.erro { background: #4a2532; color: #ff8e98; }

.subcartao { background: var(--cartao-2); border: 1px solid var(--borda); border-radius: 12px;
  padding: 1rem 1rem .2rem; margin-bottom: 1rem; }

/* entrada de arquivos (somente leitura nesta demonstração) */
.zona {
  border: 1px dashed var(--borda); background: var(--cartao-2); border-radius: .5rem;
  padding: 1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.zona .texto { color: var(--texto-2); font-size: .9rem; }
.lista-arquivos { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.lista-arquivos li {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: .8rem; align-items: center;
  background: var(--cartao-2); border: 1px solid var(--borda); border-radius: 10px; padding: .55rem .8rem;
}
.formato { font-size: .72rem; font-weight: 700; letter-spacing: .05em; border-radius: 6px;
  padding: .15rem .45rem; background: #18493f; color: #20d6a0; }
.formato.xlsx { background: #173e5e; color: #9fd4fb; }
.arquivo-nome { font-weight: 600; overflow-wrap: anywhere; }
.arquivo-info { color: var(--legenda); font-size: .8rem; }
.selo { font-size: .8rem; border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; }
.selo.ok { background: #18493f; color: #20d6a0; }
.selo.recusado { background: #4a2532; color: #ff8e98; }

/* controles */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.5rem; padding: .25rem .9rem; border-radius: .5rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--borda); background: var(--fundo); color: var(--texto);
  cursor: pointer; text-decoration: none;
}
.botao:hover { border-color: var(--destaque); color: #9fd4fb; }
.botao.primario { background: var(--destaque); border-color: var(--destaque); color: var(--fundo);
  font-weight: 600; }
.botao.primario:hover { background: #2b9bf3; color: var(--fundo); }
.botao:disabled { background: transparent; border-color: var(--borda); color: #6f8296;
  cursor: not-allowed; font-weight: 400; }
.botao.discreto { background: transparent; font-size: .85rem; min-height: 2rem; }
.acoes { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }

.caixa { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; cursor: pointer;
  font-size: .95rem; width: fit-content; }
.caixa input { width: 1.1rem; height: 1.1rem; accent-color: var(--destaque); cursor: pointer; margin: 0; }
.caixa input:disabled, .caixa input:disabled + span { cursor: default; }

.campo {
  width: 100%; min-height: 2.5rem; background: var(--cartao-2); border: 1px solid var(--borda);
  border-radius: .5rem; color: var(--texto); padding: .45rem .7rem; font: inherit; font-size: .9rem;
}
.campo[readonly] { cursor: default; }
select.campo { appearance: auto; }
.subcartao select.campo { margin-bottom: 1rem; }
.grade-parametros { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem; }

details.expansor { border: 1px solid var(--borda); border-radius: .5rem; margin: 0 0 1rem; }
details.expansor summary { cursor: pointer; padding: .55rem .9rem; font-size: .9rem; }
details.expansor div { padding: 0 .9rem .6rem; font-size: .9rem; }
details.expansor p { margin: .3rem 0; }

/* ------------------------------------------------------------ resultados */
.metricas { display: grid; gap: 1rem; margin-bottom: 1rem; }
.metricas.tres { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.metricas.cinco { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.metrica { background: var(--cartao-2); border: 1px solid var(--borda); border-radius: 10px;
  padding: .7rem 1rem; }
.metrica .r { font-size: .875rem; }
.metrica .v { font-size: 2.25rem; line-height: 1.25; }

.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem; align-items: stretch; margin-bottom: 1rem; }
.grafico { background: var(--cartao-2); border: 1px solid var(--borda); border-radius: 12px;
  padding: 1rem 1rem .8rem; display: flex; flex-direction: column; }
.grafico .titulo { font-weight: 700; margin: 0 0 .6rem; }
.grafico .legenda { margin: auto 0 0; }
.rosca { display: block; margin: 0 auto .8rem; width: 220px; height: 210px; }
.rosca text { font-family: inherit; }
.df-legenda { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); column-gap: 1.2rem; }
.df-legenda li { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .3rem;
  font-size: .88rem; line-height: 1.35; }
.df-ponto { width: .7rem; height: .7rem; border-radius: 50%; flex: none; transform: translateY(.05rem); }
.df-arquivo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.df-legenda small { color: var(--texto-2); font-size: .82rem; white-space: nowrap; }
.barras { display: grid; grid-template-columns: max-content 1fr; gap: .7rem .6rem;
  align-items: center; margin: .4rem 0 1rem; font-size: .82rem; }
.barras .rot { color: var(--texto-2); text-align: right; }
.barras .trilho { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.barras .barra-v { height: 18px; border-radius: 0 4px 4px 0; min-width: 3px; }
.barras b { font-size: .82rem; }

.tabela-moldura { border: 1px solid var(--borda); border-radius: .5rem; overflow: auto;
  max-height: 25rem; margin-bottom: 1rem; }
table { border-collapse: collapse; width: 100%; font-size: .875rem; }
th, td { border-bottom: 1px solid var(--borda); border-right: 1px solid var(--borda);
  padding: .4rem .55rem; text-align: left; white-space: nowrap; }
th:last-child, td:last-child { border-right: 0; }
th { background: var(--cartao); color: var(--texto-2); font-weight: 400; position: sticky; top: 0; }
td { background: var(--fundo); }
td.n { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }

.filtros { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(12rem, 1fr);
  gap: 1rem; margin-bottom: 1rem; }
.abas { display: flex; gap: 1.2rem; border-bottom: 1px solid var(--borda); margin-bottom: 1rem;
  overflow-x: auto; }
.abas button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--texto);
  font: inherit; font-size: .9rem; padding: .4rem 0; cursor: pointer; white-space: nowrap; }
.abas button[aria-selected="true"] { color: var(--destaque); border-bottom-color: var(--destaque); }
.contagem { color: var(--legenda); font-size: .8rem; margin: -.5rem 0 .6rem; }
.noscript { padding: 2rem; }

/* ------------------------------------------------------------ telas menores */
@media (max-width: 760px) {
  :root { --largura-menu: 270px; }
  .menu { transform: translateX(-100%); transition: transform .2s; padding-top: 1.5rem; }
  .menu.aberto { transform: none; box-shadow: 4px 0 18px rgba(0, 0, 0, .45); }
  .principal { margin-left: 0; }
  .barra { padding: .7rem 1rem; }
  .botao-menu { display: inline-flex; background: var(--texto-na-barra); color: var(--texto);
    border: 0; border-radius: 8px; padding: .4rem .8rem; font: inherit; font-weight: 600; cursor: pointer; }
  .descricao { border-left: 0; padding-left: 0; }
  main { padding: .4rem 1rem 2rem; }
  .cartao { padding: 1rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.3rem; }
  .lista-arquivos li { grid-template-columns: auto 1fr; }
  .lista-arquivos li .selo, .lista-arquivos li .botao { grid-column: 2; justify-self: start; }
  .filtros { grid-template-columns: 1fr; }
  .graficos { grid-template-columns: 1fr; }
}