/* ================================================
   MODULAÇÃO GERADORES — escopo .gcl-page
   paginas/comercial/clientes_geracao.py
   Tokens do tema (--theme-*), acento verde via --brand-text.
   Assinatura: o mapa de calor hora × mês ("assinatura horária") ao lado do
   perfil do mês contra o PLD da hora. Todo o resto é quieto: sem gradiente,
   sem sombra repetida, sem caixa alta espaçada.
   Seleção livre: caixa nativa por linha + bandeja (aside) ao lado da lista, com a
   mesma borda verde do cabeçalho do gerador; pílulas removíveis; nada novo de cor.
   Sinal do Δ modulação = cor + seta/sinal + texto (nunca só cor):
     positivo azul · negativo laranja · zero/indefinido cinza
   (mesma semântica da Conferência de Modulação).
   ================================================ */

.gcl-page {
  --gcl-pos: #2166ac;
  --gcl-neg: #b35806;
  --gcl-cinza: var(--theme-mut);
  --gcl-raio: 10px;
  color: var(--theme-ink);
  padding: 1.25rem 1.5rem 2.5rem;
  max-width: 1480px;
  margin: 0 auto;
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .gcl-page {
  --gcl-pos: #79b8ec;
  --gcl-neg: #f1a340;
}

.gcl-page :focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
  border-radius: 4px;
}

.gcl-page .gcl-corpo:not([hidden]),
.gcl-page .gcl-detalhe:not([hidden]) { display: flex; flex-direction: column; gap: 1rem; }
.gcl-page .gcl-corpo { margin-top: .75rem; }

/* botões: frase normal e cor lisa (o global usa caixa alta espaçada e gradiente) */
.gcl-page .comerc-btn {
  text-transform: none; letter-spacing: 0;
  background: var(--comerc-green); box-shadow: none;
}
.gcl-page .comerc-btn:hover { background: var(--comerc-green-light); box-shadow: none; }

/* ---------- texto de apoio ---------- */
.gcl-page .gcl-nota { color: var(--theme-mut); font-size: .88rem; margin: 0 0 .5rem; max-width: 80ch; }
.gcl-page .gcl-nota strong { color: var(--theme-ink); }
.gcl-page .gcl-origem {
  margin: .6rem 0 0; font-size: .8rem; color: var(--theme-mut); max-width: 100ch;
  border-top: 1px dashed var(--theme-line); padding-top: .45rem;
}
.gcl-page .gcl-origem-k { color: var(--theme-ink); font-weight: 600; }
.gcl-page .gcl-frescor { margin: 0; font-size: .85rem; color: var(--theme-mut); }
.gcl-page .gcl-aviso {
  display: flex; gap: .5rem; align-items: baseline; margin: 0 0 .6rem;
  font-size: .88rem; color: var(--theme-ink); max-width: 90ch;
}
.gcl-page .gcl-aviso .fas { color: var(--gcl-neg); }
.gcl-page .gcl-h4 { font-size: .95rem; font-weight: 700; margin: 0 0 .4rem; min-height: 1.4em; }
.gcl-page .gcl-lista-notas { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .85rem;
                             color: var(--theme-mut); }

/* ---------- filtros ---------- */
.gcl-page .ui-filtro:has(#gcl-busca) { min-width: 300px; flex: 2 1 300px; }
.gcl-page .ui-filtro:has(#gcl-fonte) { min-width: 220px; }
.gcl-page .ui-filtro:has(#gcl-agrupar) { min-width: 200px; }
.gcl-page .ui-filtro:has(#gcl-ordem) { min-width: 190px; }
.gcl-page .ui-filtro:has(#gcl-de), .gcl-page .ui-filtro:has(#gcl-ate) { min-width: 130px; }
.gcl-page .gcl-input {
  width: 100%; min-height: 38px; border: 1px solid var(--theme-line); border-radius: 6px;
  background: var(--theme-panel); color: var(--theme-ink); padding: .35rem .6rem; font-size: .92rem;
}
.gcl-page .gcl-input--curto { width: 6.5rem; }
.gcl-page .gcl-input--mes { width: 100%; }
.gcl-page .gcl-faixa { display: flex; align-items: center; gap: .4rem; }
.gcl-page .gcl-ate { color: var(--theme-mut); font-size: .85rem; }
.gcl-page .gcl-check label, .gcl-page .gcl-radio label {
  display: inline-flex; align-items: center; gap: .35rem; margin-right: 1rem; cursor: pointer;
  font-size: .9rem;
}
.gcl-page .ui-filtro:has(#gcl-opcoes) { flex: 1 1 100%; }
.gcl-page .gcl-check { display: flex; flex-wrap: wrap; gap: .15rem 0; }
.gcl-page .gcl-check-input { accent-color: var(--brand-text); width: 1rem; height: 1rem; }
.gcl-page .gcl-check input:disabled + * , .gcl-page .gcl-check label:has(input:disabled) {
  color: var(--theme-mut); cursor: not-allowed;
}
.gcl-page .gcl-nota-comerc { display: block; color: var(--theme-mut); font-size: .78rem;
                             margin-top: .15rem; }

/* ---------- lista ---------- */
.gcl-page .gcl-scroll .theme-tablewrap, .gcl-page .gcl-scroll.theme-tablewrap {
  max-height: 560px; overflow: auto;
}
.gcl-page .gcl-scroll thead th { position: sticky; top: 0; z-index: 2; }
.gcl-page .gcl-tabela-lista td.num, .gcl-page .gcl-tabela-lista th.num { text-align: right; }
.gcl-page .gcl-tabela-lista tbody th[scope="row"] { text-align: left; font-weight: 400; }
.gcl-page .gcl-abrir {
  background: none; border: 0; padding: 0; color: var(--brand-text); font-weight: 600;
  font-size: .92rem; text-align: left; cursor: pointer; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.gcl-page .gcl-abrir:hover { text-decoration-thickness: 2px; }
.gcl-page .gcl-lista-sub { display: block; color: var(--theme-mut); font-size: .78rem; }

/* ---------- seleção livre: caixa por linha + bandeja ao lado da lista ----------
   A caixa é um input checkbox nativo (dcc.Checklist) dentro da célula do nome,
   que segue fixa na rolagem horizontal. Linha marcada = fundo levemente verde
   (via :has, então acompanha o clique sem redesenhar a lista). */
.gcl-page .gcl-lista-grade {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 1rem; align-items: start;
}
.gcl-page .gcl-gerador { display: flex; align-items: flex-start; gap: .55rem; }
.gcl-page .gcl-col-marcar { flex: none; padding-top: .15rem; }
.gcl-page .gcl-marcar label { display: inline-flex; margin: 0; cursor: pointer; }
.gcl-page .gcl-tabela-lista tbody tr:has(.gcl-marcar input:checked) > * {
  background: color-mix(in srgb, var(--brand-text) 10%, var(--theme-panel));
}

.gcl-page .gcl-bandeja {
  position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto;
  display: flex; flex-direction: column; gap: .65rem;
  border: 1px solid var(--theme-line); border-top: 4px solid var(--brand-text);
  border-radius: var(--gcl-raio); background: var(--theme-panel); padding: 1rem 1.1rem 1.1rem;
}
.gcl-page .gcl-bandeja-titulo { font-size: 1rem; font-weight: 700; margin: 0; color: var(--theme-ink); }
.gcl-page .gcl-sel-resumo { display: flex; flex-direction: column; gap: .45rem; }
.gcl-page .gcl-sel-contagem { margin: 0; font-size: .9rem; color: var(--theme-mut); }
.gcl-page .gcl-sel-contagem strong {
  font-family: var(--theme-serif); font-size: 1.3rem; font-weight: 600; color: var(--theme-ink);
}
.gcl-page .gcl-dl--curta { font-size: .85rem; margin: 0; }
.gcl-page .gcl-sel-chips:empty, .gcl-page .gcl-sel-msg:empty { display: none; }
.gcl-page .gcl-chips-sel {
  list-style: none; margin: 0; padding: .1rem; display: flex; flex-wrap: wrap; gap: .3rem;
  max-height: 10.5rem; overflow: auto;
}
.gcl-page .gcl-chip-sel {
  display: inline-flex; align-items: center; gap: .1rem; max-width: 100%;
  border: 1px solid var(--theme-line); border-radius: 999px; background: var(--theme-panel2);
  padding: .05rem .15rem .05rem .6rem; font-size: .78rem; color: var(--theme-ink);
}
.gcl-page .gcl-chip-sel-rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.gcl-page .gcl-chip-sel-x {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--theme-mut); font-size: .72rem;
  cursor: pointer;
}
.gcl-page .gcl-chip-sel-x:hover { color: var(--theme-ink); background: var(--theme-line); }
.gcl-page .gcl-sel-msg-txt { margin: 0; font-size: .85rem; color: var(--theme-ink); }
.gcl-page .gcl-sel-msg--aviso { color: var(--gcl-neg); }
.gcl-page .gcl-sel-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }

/* botão secundário: contorno, sem preenchimento */
.gcl-page .gcl-btn-sec {
  min-height: 36px; padding: .35rem .8rem; border: 1px solid var(--theme-line); border-radius: 6px;
  background: transparent; color: var(--theme-ink); font-size: .88rem; cursor: pointer;
}
.gcl-page .gcl-btn-sec:hover:not(:disabled) { border-color: var(--brand-text); color: var(--brand-text); }
.gcl-page .gcl-btn-sec--perigo:hover:not(:disabled) { border-color: var(--gcl-neg); color: var(--gcl-neg); }
.gcl-page .gcl-btn-sec:disabled, .gcl-page .comerc-btn:disabled { opacity: .5; cursor: not-allowed; }

.gcl-page .gcl-carteiras { margin-top: 0; border-top: 1px dashed var(--theme-line); padding-top: .4rem; }
.gcl-page .gcl-carteira-campo { display: flex; flex-direction: column; gap: .3rem; margin-top: .55rem; }
.gcl-page .gcl-carteira-linha { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.gcl-page .gcl-carteira-linha .gcl-input { flex: 1 1 9rem; width: auto; }
.gcl-page .gcl-rot { margin: 0; font-size: .8rem; color: var(--theme-mut); }

/* tabela por parcela / por submercado: linha do conjunto fixa no rodapé */
.gcl-page .gcl-tabela-partes tfoot th, .gcl-page .gcl-tabela-partes tfoot td {
  position: sticky; bottom: 0; z-index: 1; font-weight: 700;
  background: var(--theme-panel2); border-top: 2px solid var(--theme-line);
}

/* sinal do Δ: cor + sinal explícito (+/−) no texto */
.gcl-page .gcl-sinal--pos { color: var(--gcl-pos); font-weight: 600; }
.gcl-page .gcl-sinal--neg { color: var(--gcl-neg); font-weight: 600; }
.gcl-page .gcl-sinal--zero, .gcl-page .gcl-sinal--nd { color: var(--gcl-cinza); }

/* ---------- cabeçalho do gerador aberto ---------- */
.gcl-page .gcl-cab {
  border: 1px solid var(--theme-line); border-left: 4px solid var(--brand-text);
  border-radius: var(--gcl-raio); background: var(--theme-panel); padding: 1rem 1.2rem;
}
.gcl-page .gcl-sel-nome {
  font-family: var(--theme-serif); font-size: 1.6rem; font-weight: 600; margin: 0 0 .5rem;
  line-height: 1.2; color: var(--theme-ink); overflow-wrap: anywhere;
}
.gcl-page .gcl-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.gcl-page .gcl-chip {
  display: inline-block; font-size: .8rem; color: var(--theme-mut);
  border: 1px solid var(--theme-line); border-radius: 999px; padding: .1rem .6rem;
  background: var(--theme-panel2); max-width: 100%; overflow-wrap: anywhere;
}
.gcl-page .gcl-dl {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem 1rem;
  margin: .25rem 0 .5rem; font-size: .88rem;
}
.gcl-page .gcl-dl dt { color: var(--theme-mut); font-weight: 400; }
.gcl-page .gcl-dl dd { margin: 0; overflow-wrap: anywhere; }

/* KPI: faixa lisa; números em tinta (a cor do Δ vai no detalhe, com seta e texto) */
.gcl-page .kpi-strip {
  background: var(--theme-panel) !important; border-color: var(--theme-line) !important;
  margin: 0; gap: 8px 36px;
}
.gcl-page .kpi-stat .v { font-size: 22px; color: var(--theme-ink) !important; }
.gcl-page .kpi-stat .k { max-width: 24ch; }

/* ---------- assinatura horária (o elemento memorável) ---------- */
.gcl-page .gcl-card-heroi .ui-card-titulo { font-size: 1.15rem; }
.gcl-page .gcl-mapa-grade {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.25rem;
  align-items: start; margin-top: .4rem;
}
.gcl-page .gcl-grafico { width: 100%; min-width: 0; }
.gcl-page .gcl-duas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1rem;
}

/* ---------- detalhes recolhíveis ---------- */
.gcl-page .gcl-detalhes { margin-top: .6rem; }
.gcl-page .gcl-detalhes summary {
  cursor: pointer; color: var(--brand-text); font-weight: 600; font-size: .9rem;
  padding: .25rem 0;
}
.gcl-page .gcl-detalhes[open] summary { margin-bottom: .4rem; }

/* ---------- simulador ---------- */
.gcl-page .gcl-sim-campos {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.25rem; margin: .4rem 0 .6rem;
}
.gcl-page .gcl-sim-campos .ui-filtro { min-width: 180px; }
.gcl-page .gcl-btn { font-size: .95rem; min-height: 38px; }
.gcl-page .gcl-saz {
  border: 1px solid var(--theme-line); border-radius: var(--gcl-raio); padding: .6rem .9rem .8rem;
  margin: 0 0 .8rem; background: var(--theme-panel2);
}
.gcl-page .gcl-saz legend { font-size: .88rem; color: var(--theme-mut); width: auto; padding: 0 .3rem;
                            margin: 0; float: none; }
.gcl-page .gcl-saz-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .5rem .75rem;
}
.gcl-page .gcl-saz-mes { display: flex; flex-direction: column; gap: .15rem; }
.gcl-page .gcl-saz-rot { font-size: .8rem; color: var(--theme-mut); margin: 0; }
.gcl-page .gcl-sim-resultado:not(:empty) { display: flex; flex-direction: column; gap: .6rem; }

/* ---------- responsivo ---------- */
@media (max-width: 1199px) {
  .gcl-page .gcl-lista-grade { grid-template-columns: minmax(0, 1fr); }
  .gcl-page .gcl-bandeja { position: static; max-height: none; }
}
@media (max-width: 1100px) {
  .gcl-page .gcl-mapa-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .gcl-page { padding: 1rem 16px 2rem; }
  .gcl-page .gcl-duas { grid-template-columns: minmax(0, 1fr); }
  .gcl-page .ui-filtro:has(#gcl-busca) { min-width: 0; flex-basis: 100%; }
  .gcl-page .gcl-dl { grid-template-columns: minmax(0, 1fr); }
  .gcl-page .gcl-dl dt { margin-top: .35rem; }
  .gcl-page .gcl-sel-nome { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gcl-page *, .gcl-page *::before, .gcl-page *::after {
    transition: none !important; animation: none !important;
  }
}