/* Ajustes base que o Tailwind (CDN) não cobre por classe. Sem regras de layout aqui: layout fica nas views. */

/* IBM Plex (OFL), servida do próprio site — a CSP não permite fontes externas. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/plex-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/plex-mono-500.woff2') format('woff2'); }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* Números alinhados em colunas (kWh, R$, %): todos os dígitos com a mesma largura. */
table,
.tabular {
  font-variant-numeric: tabular-nums;
}

/* Foco visível consistente para navegação por teclado (links e botões sem estilo próprio de foco). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.tip:focus-visible {
  outline: 2px solid #225e43;
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* <details> sem o triângulo padrão quando usado como "Detalhes"/"Lançar" (o texto já indica a ação). */
details > summary {
  list-style: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker {
  display: none;
}
/* Seta que gira ao abrir: <span class="details-seta"> dentro do summary. */
details > summary .details-seta {
  transition: transform 0.15s ease;
}
details[open] > summary .details-seta {
  transform: rotate(90deg);
}

/* Cabeçalho de tabela fixo ao rolar listas longas dentro de cartões com overflow. */
.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/*
 * Balão de valor: <div class="tip" tabindex="0" data-tip="09/2026 — 40.120 kWh">.
 * Usado nas colunas dos gráficos e em marcas visuais (faixas de barra, quadradinhos de UC).
 * Abre ao passar o mouse, focar (Tab) ou tocar; Esc fecha (app.js).
 */
.tip {
  position: relative;
}
.tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 50;
  width: max-content;
  max-width: min(16rem, calc(100vw - 2rem));
  transform: translate(-50%, 4px);
  padding: 0.4rem 0.6rem;
  border-radius: 0.375rem;
  background: #1d1c19;
  color: #f7f6f2;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease, transform 0.1s ease, visibility 0.1s;
}
.tip:hover::after,
.tip:focus::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.tip.tip-fechado::after {
  opacity: 0;
  visibility: hidden;
}
/* Balão perto da borda direita não pode criar rolagem horizontal na página. */
[data-app-main] {
  overflow-x: clip;
}

/* Painel lateral (<dialog class="painel">): formulários abrem por cima da tela, sem trocar de página. */
dialog.painel {
  margin: 0 0 0 auto;
  height: 100dvh;
  max-height: 100dvh;
  width: min(30rem, 100vw);
  max-width: 100vw;
  padding: 0;
  border: 0;
  background: #fff;
  box-shadow: -12px 0 32px -12px rgb(29 28 25 / 0.25);
}
dialog.painel[open] {
  animation: painel-entra 0.18s ease-out;
}
dialog.painel::backdrop {
  background: rgb(18 18 16 / 0.45);
}
@keyframes painel-entra {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Avisos rápidos (flash) no canto da tela. */
.toast-sai {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Controle deslizante com a cor da marca. */
input[type='range'].deslizante {
  accent-color: #1b4c37;
  height: 1.25rem;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media print {
  aside,
  header,
  [data-no-print] {
    display: none !important;
  }
  main {
    max-width: none !important;
    padding: 0 !important;
  }
  body {
    background: #fff !important;
  }
}