/*
 * Identidade visual do painelufrj-utils
 * ======================================
 *
 * Duas referências, ambas obrigatórias (ver .ai_docs/DECISOES.md, ADR-010 e ADR-012):
 *
 *   1. DSGov (@govbr-ds/core@3.7.0) — componentes, grid, acessibilidade. Nada é
 *      reimplementado aqui: só os *tokens de cor* do DS são retintados.
 *   2. Painel Orçamentário-Financeiro da UFRJ (Power BI) — a identidade. Toda cor
 *      abaixo é rastreável até um arquivo do `../painelufrj/Painel UFRJ.Report`,
 *      nunca "escolhida a olho". Ver docs/identidade-visual.md para a extração
 *      completa (arquivo de origem, coordenada amostrada, captura de tela).
 *
 * Procedência das cores
 * ---------------------
 *   #126973  StaticResources/RegisteredResources/IconesDSBR<hash>.json → dataColors[0]
 *   #253E5C  idem → dataColors[1]        (azul-marinho institucional)
 *   #00BFC2  idem → dataColors[2]        (ciano de destaque)
 *   #ED6167  idem → dataColors[3]        (coral — alerta)
 *   #4BA6A6  idem → dataColors[6]        (teal claro)
 *   #F29F05  idem → dataColors[7]        (âmbar — estado ativo/seleção)
 *   #41707D  R1_PR3_VISUAL_INTERNO_GRADIENT<hash>.png → moldura das páginas internas
 *   #C9DCE2  FRONT_PAGE_NOVA_PAINEL_CARLOS_<hash>.jpg → lavagem do topo da capa
 *   faixa    idem, amostrada na banda de blocos da capa (y = 50% da altura):
 *            #5A8886 #40707E #639298 #8AABB2 #97B8BF
 *
 * Os degraus intermediários da rampa teal (60/50/30) são interpolações entre esses
 * ancoradouros — não são cores novas de outro matiz.
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */

:root {
  /* A rampa "blue-warm-vivid" é de onde o DSGov deriva TUDO que é interativo:
     --interactive-light (botão primário, links), --selected, --info, --active,
     --visited, --on. Retintá-la aqui recolore o design system inteiro de forma
     coerente, num ponto só. Sobrescrever --color-primary-* não funcionava: esse
     token aparece uma única vez no core.min.css e não alimenta componente algum
     (era o bug silencioso da primeira versão desta folha). */
  --blue-warm-vivid-5: #f2f9f9;
  --blue-warm-vivid-10: #e3f2f1;
  --blue-warm-vivid-20: #cde8e6;
  --blue-warm-vivid-30: #7fc4c6;
  --blue-warm-vivid-40: #4ba6a6;
  --blue-warm-vivid-50: #1e96a3;
  --blue-warm-vivid-60: #15808c;
  --blue-warm-vivid-70: #126973;
  --blue-warm-vivid-80: #0d4f57;
  --blue-warm-vivid-90: #082f35;

  --blue-warm-vivid-5-rgb: 242, 249, 249;
  --blue-warm-vivid-10-rgb: 227, 242, 241;
  --blue-warm-vivid-20-rgb: 205, 232, 230;
  --blue-warm-vivid-30-rgb: 127, 196, 198;
  --blue-warm-vivid-40-rgb: 75, 166, 166;
  --blue-warm-vivid-50-rgb: 30, 150, 163;
  --blue-warm-vivid-60-rgb: 21, 128, 140;
  --blue-warm-vivid-70-rgb: 18, 105, 115;
  --blue-warm-vivid-80-rgb: 13, 79, 87;
  --blue-warm-vivid-90-rgb: 8, 47, 53;

  /* Aliases do DSGov que não derivam da rampa acima. */
  --interactive-light: var(--blue-warm-vivid-70);
  --interactive-dark: var(--blue-warm-vivid-70);
  --interactive: var(--blue-warm-vivid-70);
  --color-primary-default: #126973;
  --color-primary-darken-01: #0d4f57;
  --color-primary-darken-02: #082f35;
  --color-primary-lighten-01: #4ba6a6;
  --color-primary-pastel-01: #e3f2f1;
  --color-primary-pastel-02: #cde8e6;

  /* Tokens próprios do painel, prefixados: não existem no DSGov e não devem
     colidir com nada dele. */
  --painel-teal: #126973;
  --painel-teal-escuro: #0d4f57;
  --painel-teal-claro: #4ba6a6;
  --painel-ciano: #00bfc2;
  --painel-marinho: #253e5c;
  --painel-coral: #ed6167;
  --painel-ativo: #f29f05;
  --painel-ativo-escuro: #b97900;
  --painel-moldura: #41707d;
  --painel-lavagem: #c9dce2;
  --painel-sheet: #ffffff;

  /* A faixa da capa: blocos de cor com corte seco, não gradiente. */
  --painel-faixa-1: #5a8886;
  --painel-faixa-2: #40707e;
  --painel-faixa-3: #639298;
  --painel-faixa-4: #8aabb2;
  --painel-faixa-5: #97b8bf;
}

/* ------------------------------------------------------------------ *
 * 2. Base — a "lavagem" das páginas internas do painel
 * ------------------------------------------------------------------ */

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

/* A lavagem pálida das páginas internas do painel: forte no alto, dissolvida
   antes do conteúdo denso começar. Sem `background-attachment: fixed` — em
   página longa isso prende o gradiente à janela e cria uma emenda visível no
   meio da rolagem. */
body {
  background-color: #f4f9fa;
  background-image: linear-gradient(180deg, var(--painel-lavagem) 0, #e6f0f3 14rem, #f4f9fa 30rem);
  background-repeat: no-repeat;
  color: var(--color-secondary-08);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

a:not(.br-button):not(.br-sign-in):focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* ------------------------------------------------------------------ *
 * 3. Cabeçalho + faixa institucional
 * ------------------------------------------------------------------ */

.painel-header-brasao {
  height: 2.1rem;
  width: auto;
  vertical-align: middle;
  margin-right: var(--spacing-scale-base);
}

/* A banda de blocos de cor que atravessa a capa do painel, logo abaixo do
   título. Reproduzida com cortes secos em vez de gradiente, e esmaecida nas
   duas pontas como no original. */
.painel-faixa {
  --bloco: 3.5rem;
  height: 6px;
  width: 100%;
  background-image: repeating-linear-gradient(
    90deg,
    var(--painel-faixa-1) 0 var(--bloco),
    var(--painel-faixa-2) var(--bloco) calc(var(--bloco) * 1.6),
    var(--painel-faixa-3) calc(var(--bloco) * 1.6) calc(var(--bloco) * 2.3),
    var(--painel-faixa-2) calc(var(--bloco) * 2.3) calc(var(--bloco) * 3.1),
    var(--painel-faixa-4) calc(var(--bloco) * 3.1) calc(var(--bloco) * 3.7),
    var(--painel-faixa-5) calc(var(--bloco) * 3.7) calc(var(--bloco) * 4.4)
  );
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.br-header {
  background: var(--painel-sheet);
}

.painel-badge-perfil {
  background: var(--color-primary-pastel-01);
  border-radius: var(--surface-rounder-sm);
  color: var(--painel-teal-escuro);
  font-size: var(--font-size-scale-down-01);
  font-weight: var(--font-weight-semi-bold);
  letter-spacing: 0.04em;
  padding: 0.1em 0.6em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * 4. Lockup tipográfico da capa
 * ------------------------------------------------------------------ */

/* "PAINEL" fino e espaçado + o resto em teal pesado — a assinatura tipográfica
   da capa do painel, remontada com a Rawline (a própria fonte do DSGov). */
.painel-lockup {
  display: block;
  line-height: 1.12;
  text-transform: uppercase;
}

.painel-lockup .leve {
  color: var(--color-secondary-07);
  display: block;
  font-size: var(--font-size-scale-up-02);
  font-weight: 300;
  letter-spacing: 0.22em;
}

.painel-lockup .forte {
  color: var(--painel-teal);
  display: block;
  font-size: var(--font-size-scale-up-04);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* ------------------------------------------------------------------ *
 * 5. Layout do painel
 * ------------------------------------------------------------------ */

.painel-layout {
  display: flex;
  flex: 1 0 auto;
  gap: var(--spacing-scale-3x);
  padding-top: var(--spacing-scale-3x);
}

.painel-sidebar {
  flex-shrink: 0;
  width: 15rem;
}

.painel-main {
  flex-grow: 1;
  min-width: 0;
  padding-bottom: var(--spacing-scale-6x);
}

.painel-menu {
  display: none;
}

.painel-nav {
  background: var(--painel-sheet);
  border-radius: var(--surface-rounder-sm);
  overflow: hidden;
}

.painel-nav .br-item[aria-current="page"] {
  background: var(--painel-ativo);
  box-shadow: inset 4px 0 0 var(--painel-ativo-escuro);
  color: #1c1c1c;
  font-weight: var(--font-weight-semi-bold);
}

.painel-nav .content {
  align-items: center;
  display: flex;
  gap: var(--spacing-scale-base);
}

.painel-nav .content i {
  text-align: center;
  width: var(--icon-size-base);
}

/* ------------------------------------------------------------------ *
 * 6. Cabeçalhos de página, tabelas, formulários
 * ------------------------------------------------------------------ */

.painel-page-actions,
.painel-section-header,
.painel-form-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-scale-base);
  justify-content: space-between;
}

.painel-page-actions {
  margin-bottom: var(--spacing-scale-base);
}

.painel-page-actions h1 {
  border-left: 5px solid var(--painel-ativo);
  color: var(--painel-teal-escuro);
  margin: 0;
  padding-left: var(--spacing-scale-2x);
}

/* Título de seção dentro de uma página (Início) — abaixo do h1 na hierarquia,
   por isso régua fina em vez do bloco âmbar. */
.painel-secao {
  border-bottom: 2px solid var(--color-primary-pastel-02);
  color: var(--painel-teal-escuro);
  font-size: var(--font-size-scale-up-02);
  font-weight: var(--font-weight-semi-bold);
  margin: 0 0 var(--spacing-scale-2x);
  padding-bottom: var(--spacing-scale-half);
}

.painel-result-summary {
  color: var(--color-secondary-07);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--spacing-scale-2x);
}

/* As tabelas rolam dentro do próprio bloco — a página nunca rola na horizontal.
   As duas sombras presas às bordas (`scroll`) sobre as máscaras brancas
   (`local`) só aparecem quando ainda há conteúdo escondido para aquele lado:
   é a única pista de que a tabela continua fora da tela no celular. */
.painel-table-wrap {
  background-attachment: local, local, scroll, scroll;
  background-color: var(--painel-sheet);
  background-image:
    linear-gradient(to right, var(--painel-sheet), rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--painel-sheet), rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(18, 105, 115, 0.22), rgba(18, 105, 115, 0)),
    linear-gradient(to left, rgba(18, 105, 115, 0.22), rgba(18, 105, 115, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, 1rem 100%, 1rem 100%;
  max-width: 100%;
  overflow-x: auto;
}

.painel-table-wrap table {
  min-width: 36rem;
}

.painel-table-wrap thead th {
  background: var(--painel-teal);
  color: #fff;
  white-space: nowrap;
}

.painel-table-wrap tbody tr:hover {
  background: var(--color-primary-pastel-01);
}

.painel-table-wrap td code,
.painel-table-wrap th code {
  font-variant-numeric: tabular-nums;
}

.painel-table-wrap td.num,
.painel-table-wrap th.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.painel-table-action {
  white-space: nowrap;
}

.painel-empty {
  align-items: center;
  background: var(--color-primary-pastel-01);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scale-base);
  padding: var(--spacing-scale-4x);
  text-align: center;
  width: 100%;
}

.painel-empty i {
  color: var(--painel-teal);
  font-size: var(--icon-size-lg);
}

.painel-form-card {
  margin: 0 auto;
  max-width: 42rem;
}

.painel-form-field {
  margin-bottom: var(--spacing-scale-2x);
}

.painel-form-field label {
  display: block;
}

.painel-form-field input,
.painel-form-field select,
.painel-form-field textarea {
  min-height: 44px;
  width: 100%;
}

/* O DSGov só estiliza o `br-select` dele (input + lista + JS). Como os
   formulários usam `<select>` nativo do Django, o campo saía sem borda nem
   fundo, destoando dos `br-input` ao lado. Aqui ele recebe a mesma casca —
   com a seta desenhada em SVG embutido, sem arquivo externo. */
/* `.br-select` do DSGov é um combo próprio (input + lista + JS) e vem com
   `max-width: 400px`. Com um `<select>` nativo do Django dentro, isso deixava o
   campo estreito e desalinhado dos `br-input` vizinhos, que ocupam a linha toda. */
.painel-form-field.br-select {
  display: block;
  max-width: none;
}

.painel-form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--gray-2, #f8f8f8);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23126973' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-position: right 0.9rem center;
  background-repeat: no-repeat;
  background-size: 0.7rem;
  border: 1px solid var(--color-secondary-04);
  border-radius: var(--surface-rounder-sm);
  color: inherit;
  padding: 0 2.4rem 0 var(--spacing-scale-2x);
}

.painel-form-field select:focus {
  background-color: #fff;
  border-color: var(--painel-teal);
}

.painel-form-help {
  color: var(--color-secondary-07);
  font-size: var(--font-size-scale-down-01);
  margin: var(--spacing-scale-half) 0 0;
}

.painel-form-actions {
  border-top: 1px solid var(--color-secondary-03);
  justify-content: flex-end;
  margin-top: var(--spacing-scale-3x);
  padding-top: var(--spacing-scale-2x);
}

.painel-back-link {
  display: inline-flex;
  gap: var(--spacing-scale-base);
  margin-bottom: var(--spacing-scale-2x);
}

.painel-note {
  color: var(--color-secondary-07);
  font-size: var(--font-size-scale-down-01);
  max-width: 68ch;
}

/* O painel carimba "Dados atualizados em <data>" em toda página, em âmbar
   escuro sobre claro. Mesma função aqui: quando a tabela mudou pela última vez
   é o que o refresh do Power BI vai encontrar. */
.painel-carimbo {
  align-items: center;
  color: var(--painel-ativo-escuro);
  display: flex;
  font-size: var(--font-size-scale-down-01);
  font-weight: var(--font-weight-semi-bold);
  gap: var(--spacing-scale-half);
  margin: 0 0 var(--spacing-scale-2x);
}

.painel-rodape {
  color: var(--color-secondary-07);
  font-size: var(--font-size-scale-down-01);
  margin-top: var(--spacing-scale-2x);
}

/* ------------------------------------------------------------------ *
 * 7. Cartões de indicador (Início)
 * ------------------------------------------------------------------ */

/* Eco dos cartões de informação do painel: **número primeiro**, rótulo embaixo,
   borda fina inteira e um filete de cor no topo identificando a tabela. A ordem
   veio da captura ao vivo de uma página interna do painel (ver
   docs/identidade-visual.md) — lá o número é a primeira coisa que se lê, e o
   rótulo é a legenda dele. A primeira versão daqui tinha o inverso. */
.painel-kpis {
  display: grid;
  gap: var(--spacing-scale-2x);
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  margin-bottom: var(--spacing-scale-4x);
}

.painel-kpi {
  background: var(--painel-sheet);
  border: 1px solid var(--color-primary-pastel-02);
  border-radius: var(--surface-rounder-sm);
  border-top: 4px solid var(--painel-teal);
  box-shadow: var(--surface-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.12));
  color: inherit;
  display: block;
  padding: var(--spacing-scale-2x);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.painel-kpi:hover,
.painel-kpi:focus-visible {
  box-shadow: 0 4px 12px rgba(18, 105, 115, 0.22);
  transform: translateY(-2px);
}

.painel-kpi.secundario {
  border-top-color: var(--painel-teal-claro);
}

.painel-kpi .rotulo {
  align-items: center;
  color: var(--painel-teal-escuro);
  display: flex;
  font-size: var(--font-size-scale-down-01);
  font-weight: var(--font-weight-semi-bold);
  gap: var(--spacing-scale-half);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.painel-kpi .valor {
  color: var(--painel-teal-escuro);
  display: block;
  font-size: var(--font-size-scale-up-05);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
}

.painel-kpi .detalhe {
  color: var(--color-secondary-07);
  display: block;
  font-size: var(--font-size-scale-down-01);
}

/* ------------------------------------------------------------------ *
 * 8. Moldura — o enquadramento das páginas internas do painel
 * ------------------------------------------------------------------ */

/* No painel, o conteúdo das páginas internas é uma folha branca deslocada
   sobre um retângulo ardósia. Reservado aqui às duas portas de entrada
   (login e Início) — usar em toda tela viraria ruído. */
.painel-moldura {
  position: relative;
}

.painel-moldura::before {
  background: var(--painel-moldura);
  content: "";
  inset: -0.75rem -0.75rem 0.75rem 0.75rem;
  position: absolute;
  z-index: 0;
}

.painel-moldura > * {
  position: relative;
  z-index: 1;
}

.painel-hero {
  background: var(--painel-sheet);
  padding: var(--spacing-scale-4x);
}

.painel-hero .painel-lockup {
  margin-bottom: var(--spacing-scale-base);
}

/* ------------------------------------------------------------------ *
 * 9. Rodapé institucional
 * ------------------------------------------------------------------ */

/* Mesma assinatura do pé da capa do painel: PR3 · DataBR Science · UFRJ
   sobre branco. O PNG é recorte da própria capa (ver docs/identidade-visual.md). */
.painel-footer {
  background: var(--painel-sheet);
  margin-top: auto;
  padding: var(--spacing-scale-3x) 0;
}

.painel-footer .container-lg {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-scale-2x);
  justify-content: space-between;
}

.painel-footer-logos {
  height: 3rem;
  max-width: 100%;
  width: auto;
}

.painel-footer-texto {
  color: var(--color-secondary-07);
  font-size: var(--font-size-scale-down-01);
  margin: 0;
  max-width: 44ch;
}

/* ------------------------------------------------------------------ *
 * 10. Login / 403
 * ------------------------------------------------------------------ */

.painel-login-shell {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 27rem;
  padding: var(--spacing-scale-7x) var(--spacing-scale-2x) var(--spacing-scale-5x);
}

.painel-login-shell .br-card {
  margin: 0;
}

.painel-login-marca {
  margin-bottom: var(--spacing-scale-3x);
  text-align: center;
}

.painel-login-marca img {
  height: 4rem;
  width: auto;
}

/* ------------------------------------------------------------------ *
 * 11. Responsividade
 * ------------------------------------------------------------------ */

@media (max-width: 991px) {
  .painel-layout {
    flex-direction: column;
  }

  .painel-sidebar {
    width: 100%;
  }

  .painel-nav-desktop {
    display: none;
  }

  .painel-menu {
    background: var(--painel-sheet);
    border-radius: var(--surface-rounder-sm);
    display: block;
  }

  .painel-menu > summary {
    align-items: center;
    color: var(--painel-teal);
    cursor: pointer;
    display: flex;
    font-weight: var(--font-weight-semi-bold);
    gap: var(--spacing-scale-base);
    min-height: 44px;
    padding: var(--spacing-scale-base) var(--spacing-scale-2x);
  }

  .painel-menu:not([open]) > .painel-nav {
    display: none !important;
  }

  .painel-moldura::before {
    inset: -0.5rem -0.5rem 0.5rem 0.5rem;
  }

  /* Editar/excluir nas listagens usam `br-button circle small` = 32px, confortável
     de clicar com mouse e apertado demais no dedo. Nas larguras onde o layout já
     virou "de celular", vão para os mesmos 44px dos campos de formulário. */
  .painel-table-action .br-button.circle.small {
    height: 44px;
    width: 44px;
  }
}

@media (max-width: 575px) {
  .painel-page-actions,
  .painel-section-header {
    align-items: stretch;
    flex-direction: column;
  }

  .painel-page-actions .br-button,
  .painel-section-header .br-button {
    justify-content: center;
    width: 100%;
  }

  .painel-form-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .painel-form-actions .br-button {
    justify-content: center;
    width: 100%;
  }

  .painel-lockup .forte {
    font-size: var(--font-size-scale-up-02);
  }

  .painel-lockup .leve {
    font-size: var(--font-size-scale-base);
  }

  .painel-hero {
    padding: var(--spacing-scale-2x);
  }

  /* A moldura deslocada não sobra espaço em tela estreita. */
  .painel-moldura::before {
    display: none;
  }

  .painel-footer .container-lg {
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .painel-kpi {
    transition: none;
  }

  .painel-kpi:hover,
  .painel-kpi:focus-visible {
    transform: none;
  }
}