/* =====================================================================
   Vesper — casca: trilho de navegação, palco, ciclo de 24 h, login,
   início, painéis, campos e botões das páginas de sistema.
   ===================================================================== */

/* ── moldura ──────────────────────────────────────────────────────────── */
.vesper-app {
  display: grid;
  grid-template-columns: var(--vesper-trilho-largura) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns .18s ease;
}
.vesper-app.is-trilho-recolhido { grid-template-columns: var(--vesper-trilho-recolhido) minmax(0, 1fr); }

.vesper-pular {
  position: absolute; left: 12px; top: -48px; z-index: 4000;
  background: var(--vesper-tinta); color: var(--vesper-painel);
  padding: 8px 14px; border-radius: var(--vesper-raio-controle); text-decoration: none;
}
.vesper-pular:focus { top: 12px; color: var(--vesper-painel); }

.vesper-palco { min-width: 0; outline: none; }
.vesper-palco-corpo { padding: 22px 26px 40px; }

/* ── trilho ───────────────────────────────────────────────────────────── */
.vesper-trilho {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px 12px 14px;
  /* Moldura viva: tinta da marca nos DOIS temas. Os tokens de texto e filete são
     redefinidos neste escopo (névoa sobre tinta), então tudo que está dentro
     do trilho herda o esquema sem regra por item. */
  --vesper-tinta: var(--vesper-moldura-texto);
  --vesper-tinta-2: var(--vesper-moldura-texto-2);
  --vesper-tinta-3: var(--vesper-moldura-texto-2);
  --vesper-linha: var(--vesper-moldura-linha);
  --vesper-linha-forte: var(--vesper-moldura-linha);
  background: var(--vesper-moldura); color: var(--vesper-moldura-texto);
  border-right: 1px solid var(--vesper-moldura-linha);
  overflow-y: auto; overflow-x: hidden;
}
/* Foco no trilho: o anel verde padrão (--focus-ring, 4E7A00 no claro) mede ~2:1
   sobre a moldura; o sol mede 10,45:1. Offset negativo: o trilho corta o que
   passa da borda (overflow). */
.vesper-trilho :focus-visible { outline: 2px solid var(--vesper-moldura-estrela); outline-offset: -2px; }
.vesper-marca {
  display: flex; align-items: center;
  padding: 4px 8px 6px; text-decoration: none; color: var(--vesper-tinta);
}
.vesper-marca:hover { color: var(--vesper-tinta); }
.vesper-trilho .vesper-wordmark { color: var(--vesper-moldura-texto); }

/* ── assinatura: logo Ciclo + palavra (components/simbolo.py) ───────────
   O tamanho sai do font-size: logo com 1,1 em de lado e espaço de 0,3 em
   (docs/identidade/ESPEC.md). Sobre fundo escuro o quadrado de tinta ganha um
   anel fino para não sumir. */
.vesper-assinatura { display: inline-flex; align-items: center; gap: .3em; line-height: 1; }
.vesper-logo-ciclo { display: block; flex: none; width: 1.1em; height: 1.1em; border-radius: 22%; }
html[data-theme="dark"] .vesper-logo-ciclo,
.vesper-trilho .vesper-logo-ciclo,
.vesper-login-hero .vesper-logo-ciclo { box-shadow: 0 0 0 1px var(--vesper-moldura-anel); }
.vesper-wordmark {
  font-family: var(--vesper-fonte-titulo); font-weight: 800; letter-spacing: -0.02em;
  color: var(--vesper-tinta); line-height: 1; padding-bottom: .06em;
}
.vesper-assinatura--trilho { font-size: 30px; }

.vesper-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vesper-nav-link {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--vesper-raio-controle);
  background: transparent; color: var(--vesper-tinta-2);
  font: inherit; font-size: var(--vesper-t-m); font-weight: 560; text-align: left;
  text-decoration: none; cursor: pointer; position: relative;
}
.vesper-nav-link:hover { background: color-mix(in srgb, var(--vesper-moldura-ativo) 55%, transparent); color: var(--vesper-tinta); }
.vesper-nav-link.is-ativo { background: var(--vesper-moldura-ativo); color: var(--vesper-tinta); font-weight: 700; }
/* página atual: a estrela de 4 pontas do símbolo, em sol, ao lado do rótulo
   (mais o peso e o texto oculto: a cor nunca é o único canal). Mesma geometria
   da estrela do ciclo. */
.vesper-nav-estrela {
  flex: none; margin-left: auto; width: 14px; height: 14px; background: var(--vesper-moldura-estrela);
  clip-path: polygon(50% 0, 63.6% 36.4%, 100% 50%, 63.6% 63.6%, 50% 100%, 36.4% 63.6%, 0 50%, 36.4% 36.4%);
}
.vesper-nav-icone { width: 20px; text-align: center; font-size: 16px; flex: 0 0 20px; }
.vesper-nav-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vesper-trilho-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.vesper-usuario {
  display: flex; flex-direction: column; padding: 10px 10px 8px;
  border-top: 1px solid var(--vesper-linha);
}
.vesper-usuario-nome { font-weight: 650; font-size: var(--vesper-t-s); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.vesper-usuario-perfil { font-size: var(--vesper-t-xs); color: var(--vesper-tinta-3); font-variation-settings: "wdth" var(--vesper-estreito); }
.vesper-nav--rodape .vesper-nav-link { font-size: var(--vesper-t-s); padding: 7px 10px; }
.vesper-trilho-toggle {
  align-self: flex-end; width: 34px; height: 30px;
  border: 1px solid var(--vesper-moldura-linha); border-radius: var(--vesper-raio-controle);
  background: transparent; color: var(--vesper-tinta-2); cursor: pointer;
}
.vesper-trilho-toggle:hover { color: var(--vesper-tinta); border-color: var(--vesper-moldura-texto-2); }

/* recolhido: só ícones (o rótulo segue no title/aria do link) */
.is-trilho-recolhido .vesper-trilho { padding-left: 8px; padding-right: 8px; }
.is-trilho-recolhido .vesper-wordmark { display: none; }
.is-trilho-recolhido .vesper-marca { justify-content: center; padding-left: 0; padding-right: 0; }
.is-trilho-recolhido .vesper-assinatura--trilho { font-size: 36px; }
.is-trilho-recolhido .vesper-nav-rotulo,
.is-trilho-recolhido .vesper-usuario { display: none; }
.is-trilho-recolhido .vesper-nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
.is-trilho-recolhido .vesper-nav-estrela { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; margin: 0; }
.is-trilho-recolhido .vesper-trilho-toggle { align-self: center; transform: scaleX(-1); }

/* ── ciclo de 24 h (a marca) ──────────────────────────────────────────── */
.ciclo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(24, 1fr); }
.ciclo-celula { background: var(--vesper-ociosa); }
.ciclo-celula.is-carga { background: var(--vesper-carga); }
.ciclo-celula.is-descarga { background: var(--vesper-descarga); }
.ciclo--mini { gap: 1px; width: 100%; max-width: 150px; height: 9px; }
.ciclo--mini .ciclo-celula { border-radius: 1px; }
.ciclo--grande { gap: 4px; height: 64px; }
.ciclo--grande .ciclo-celula { border-radius: var(--vesper-raio-celula); position: relative; }
.ciclo-hora {
  position: absolute; left: 0; top: calc(100% + 8px);
  font-size: var(--vesper-t-xs); color: var(--vesper-tinta-3); white-space: nowrap;
  font-variation-settings: "wdth" var(--vesper-estreito);
}
/* A estrela do símbolo sobre a 1ª hora da descarga (mesma geometria: pontas
   a 50 %, cintura a 13,6 % do centro). */
.ciclo-estrela {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: 18px; height: 18px; background: var(--vesper-estrela);
  clip-path: polygon(50% 0, 63.6% 36.4%, 100% 50%, 63.6% 63.6%, 50% 100%, 36.4% 63.6%, 0 50%, 36.4% 36.4%);
}
.ciclo-legenda {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: var(--vesper-t-s); color: var(--vesper-tinta-2);
}
.ciclo-legenda li { display: flex; align-items: center; gap: 8px; }
.ciclo-amostra { width: 14px; height: 14px; border-radius: 3px; background: var(--vesper-ociosa); }
.ciclo-amostra.is-carga { background: var(--vesper-carga); }
.ciclo-amostra.is-descarga { background: var(--vesper-descarga); }

/* O único movimento automático do app: no login, as horas acendem uma vez
   em sequência (o dia passando). Some com prefers-reduced-motion. */
.vesper-login .ciclo--grande .ciclo-celula {
  animation: vesper-hora .5s ease-out both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes vesper-hora { from { opacity: .15; transform: scaleY(.55); } to { opacity: 1; transform: none; } }

/* ── login ────────────────────────────────────────────────────────────── */
.vesper-login {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr);
  min-height: 100vh;
}
/* Painel da marca: sempre a tinta da Comerc, nos dois temas. Os tokens são
   redefinidos AQUI para a paleta sobre tinta (texto névoa, carga e descarga
   do tema escuro, estrela sol). */
.vesper-login-hero {
  --vesper-tinta: var(--vesper-nevoa); --vesper-tinta-2: #A9BDB3; --vesper-tinta-3: #A9BDB3;
  --vesper-carga: #B5E856; --vesper-descarga: #E04A12; --vesper-ociosa: #2A3F38;
  --vesper-estrela: var(--vesper-sol);
  position: relative; background: var(--vesper-marca-fundo); color: var(--vesper-tinta);
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: 64px clamp(28px, 6vw, 96px) 56px;
}
.vesper-horizonte { position: absolute; top: 0; left: 0; right: 0; height: 10px; display: flex; }
.vesper-horizonte-degrau { flex: 1; }
.vesper-horizonte-degrau.is-0 { background: var(--vesper-verde-comerc); }
.vesper-horizonte-degrau.is-1 { background: var(--vesper-horizonte-2); }
.vesper-horizonte-degrau.is-2 { background: var(--vesper-sol); }
.vesper-horizonte-degrau.is-3 { background: var(--vesper-ambar); }
.vesper-horizonte-degrau.is-4 { background: var(--vesper-brasa); }
.vesper-login-marca { margin: 0; }
.vesper-assinatura--login { font-size: clamp(56px, 7vw, 96px); }
.vesper-login-titulo { margin: 0; font-size: var(--vesper-t-3xl); max-width: 20ch; line-height: 1.12;
  text-wrap: balance; }  /* sem palavra sozinha na 2ª linha ("… vale a / pena.") */
.vesper-login-ciclo { margin: 34px 0 0; max-width: 640px; }
.vesper-login-rodape { margin: 12px 0 0; font-size: var(--vesper-t-s); color: var(--vesper-tinta-3); }

.vesper-login-lado {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 28px; background: var(--vesper-painel);
  border-left: 1px solid var(--vesper-linha);
}
.vesper-login-cartao { width: 100%; max-width: 380px; }
.vesper-login-form-titulo { font-size: var(--vesper-t-xl); margin: 0 0 22px; }
.vesper-login-form { display: flex; flex-direction: column; gap: 4px; }
.vesper-login-form .vesper-btn { margin-top: 8px; padding-top: 11px; padding-bottom: 11px; }
.vesper-login-cartao .vesper-nota { margin-top: 22px; }

/* ── campos, botões, painéis (páginas de sistema) ─────────────────────── */
.vesper-rotulo {
  display: block; margin-bottom: 6px;
  font-size: var(--vesper-t-s); font-weight: 620; color: var(--vesper-tinta-2);
  font-variation-settings: "wdth" var(--vesper-estreito);
}
.vesper-campo { margin-bottom: 14px; }
.vesper-campo .form-control, .vesper-campo .form-select {
  border-radius: var(--vesper-raio-controle); border-color: var(--vesper-linha-forte);
  background: var(--vesper-painel); color: var(--vesper-tinta); padding: 9px 12px;
}
.vesper-nota { font-size: var(--vesper-t-s); color: var(--vesper-tinta-3); margin: 10px 0 0; }
.vesper-texto-mudo { color: var(--vesper-tinta-3); }

.btn.vesper-btn, a.vesper-btn, button.vesper-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--vesper-raio-controle);
  border: 1px solid var(--vesper-linha-forte); background: var(--vesper-painel);
  color: var(--vesper-tinta); font-weight: 620; font-size: var(--vesper-t-m);
  text-decoration: none; box-shadow: none;
}
.btn.vesper-btn:hover, a.vesper-btn:hover { background: var(--vesper-painel-2); color: var(--vesper-tinta); border-color: var(--vesper-tinta-3); }
/* Regra de cor do Vesper: verde é carga, brasa é descarga, AÇÃO é tinta.
   O primário inverte com o tema (tinta escura no claro, clara no escuro). */
.btn.vesper-btn--primario, .btn.vesper-btn--primario:focus, .btn.vesper-btn--primario:active {
  background: var(--vesper-tinta); border-color: var(--vesper-tinta); color: var(--vesper-painel);
}
.btn.vesper-btn--primario:hover { background: var(--vesper-acao-hover); border-color: var(--vesper-acao-hover); color: var(--vesper-painel); }
.btn.vesper-btn--perigo, .btn.vesper-btn--perigo:focus { color: var(--vesper-perigo); border-color: var(--vesper-perigo); background: transparent; }
.btn.vesper-btn--perigo:hover { background: var(--vesper-perigo-suave); color: var(--vesper-perigo); border-color: var(--vesper-perigo); }
.btn.vesper-btn:disabled { opacity: .55; }

.vesper-alerta { border-radius: var(--vesper-raio-controle); font-size: var(--vesper-t-m); }

.vesper-pagina { max-width: 1280px; }
.vesper-painel {
  background: var(--vesper-painel); border: 1px solid var(--vesper-linha);
  border-radius: var(--vesper-raio-painel); padding: 20px 22px; margin-top: 18px;
}
.vesper-painel--estreito { max-width: 520px; }
.vesper-painel--destaque { border-color: var(--vesper-tinta-3); }
.vesper-painel-titulo { display: flex; align-items: center; font-size: var(--vesper-t-l); margin: 0 0 16px; }
.vesper-grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 18px; }
.vesper-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.vesper-form-estreito { max-width: 420px; }

.vesper-senha-linha { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.vesper-senha-temp {
  font-size: 20px; font-weight: 700; letter-spacing: .06em; color: var(--vesper-tinta);
  background: var(--vesper-painel-2); border: 1px dashed var(--vesper-linha-forte);
  border-radius: var(--vesper-raio-controle); padding: 8px 14px;
}
.vesper-copiar { cursor: pointer; font-size: 18px; color: var(--vesper-tinta-2); }

/* ── início ───────────────────────────────────────────────────────────── */
.vesper-inicio { max-width: 1080px; padding-top: 8px; }
.vesper-inicio-titulo { font-size: var(--vesper-t-3xl); margin: 0 0 6px; }
.vesper-inicio-sub { margin: 0; font-size: 18px; color: var(--vesper-tinta-2); }
.vesper-destinos {
  list-style: none; margin: 34px 0 0; padding: 0;
  border-top: 1px solid var(--vesper-linha);
}
.vesper-destinos li { border-bottom: 1px solid var(--vesper-linha); }
/* barra fina na cor da página (Simulador = o dia, Potencial = o entardecer) */
.vesper-destinos .vesper-destino-item { border-left: 3px solid var(--vesper-pagina-barra); }
.vesper-destino {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: 18px; align-items: baseline;
  padding: 22px 6px; color: var(--vesper-tinta); text-decoration: none;
}
.vesper-destino:hover { color: var(--vesper-tinta); background: var(--vesper-painel); }
.vesper-destino-icone.vesper-icone-secao {
  grid-row: 1 / span 2; align-self: center; justify-self: center; margin: 0;
  width: 40px; height: 40px; font-size: 20px; border-radius: var(--vesper-raio-painel);
}
.vesper-destino-titulo { font-family: var(--vesper-fonte-titulo); font-size: var(--vesper-t-xl); font-weight: 700; letter-spacing: -0.01em; }
.vesper-destino-pergunta { grid-column: 2; color: var(--vesper-tinta-2); font-size: 16px; max-width: 64ch; }
.vesper-destino-acao {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  font-weight: 650; font-size: var(--vesper-t-s); color: var(--vesper-tinta);
  border: 1px solid currentColor; border-radius: 999px; padding: 6px 14px; white-space: nowrap;
}
/* Ressalva do Início: mesma largura da lista de destinos e fundo de aviso (pedido
   do dono, 2026-10-06). É "atenção antes de usar o número", por isso os tokens de
   aviso, com ícone e título: a cor não é o único canal. Texto tinta-2 ≥ 5:1 no fundo. */
.vesper-ressalva {
  margin-top: 28px; padding: 16px 20px 16px 18px;
  border: 1px solid var(--vesper-aviso); border-left-width: 4px;
  background: var(--vesper-aviso-suave);
  border-radius: var(--vesper-raio-controle);
}
.vesper-ressalva-titulo {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; margin: 0 0 6px; color: var(--vesper-tinta);
}
.vesper-ressalva-titulo i { color: var(--vesper-aviso); }
.vesper-ressalva p { margin: 0; color: var(--vesper-tinta-2); font-size: var(--vesper-t-m); max-width: 110ch; }

/* ── telas estreitas: trilho vira barra no topo ───────────────────────── */
@media (max-width: 900px) {
  .vesper-app, .vesper-app.is-trilho-recolhido { grid-template-columns: minmax(0, 1fr); }
  .vesper-trilho {
    position: sticky; top: 0; z-index: 1000; height: auto;
    flex-direction: row; align-items: center; gap: 10px;
    padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--vesper-linha);
    overflow-x: auto;
  }
  .vesper-marca { padding: 0 6px 0 0; }
  .vesper-assinatura--trilho, .is-trilho-recolhido .vesper-assinatura--trilho { font-size: 24px; }
  .is-trilho-recolhido .vesper-wordmark { display: inline; }
  .vesper-nav { flex-direction: row; }
  .vesper-nav-link { padding: 8px 10px; }
  .vesper-nav-estrela { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; margin: 0; }
  .vesper-trilho-rodape { margin: 0 0 0 auto; flex-direction: row; align-items: center; }
  .vesper-usuario, .vesper-trilho-toggle { display: none; }
  .vesper-nav-rotulo { display: none; }
  .vesper-nav--rodape .vesper-nav-link { padding: 8px; }
  .vesper-palco-corpo { padding: 16px 16px 32px; }

  .vesper-login { grid-template-columns: minmax(0, 1fr); }
  .vesper-login-hero { padding: 40px 20px 28px; gap: 14px; }
  .vesper-login-titulo { font-size: var(--vesper-t-2xl); }
  .vesper-login-lado { border-left: 0; border-top: 1px solid var(--vesper-linha); padding: 28px 20px 40px; }
  .ciclo--grande { height: 40px; gap: 2px; }

  .vesper-destino { grid-template-columns: 40px minmax(0, 1fr); }
  .vesper-destino-acao { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 10px; }
}

/* ── logos oficiais (components/marcas.py) ───────────────────────────── */
.vesper-marcas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.vesper-logo { display: block; width: auto; height: 28px; }
/* versão de cada tema: texto escuro no claro, texto claro no escuro */
html[data-theme="dark"] .vesper-logo--tema-claro,
html:not([data-theme="dark"]) .vesper-logo--tema-escuro { display: none; }
.vesper-login-marcas { display: grid; gap: 10px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--vesper-linha); }
.vesper-marcas--login .vesper-logo { height: 26px; }
.vesper-login-marcas .vesper-login-rodape { margin: 0; }
/* trilho: as duas marcas numa linha só (Comerc 17 px ≈ 59 px de largura + Micropower
   11 px ≈ 105 px + vão de 10 px cabem nos ~184 px úteis do trilho aberto) */
.vesper-marcas--trilho { padding: 10px 10px 2px; border-top: 1px solid var(--vesper-moldura-linha); gap: 10px;
  flex-wrap: nowrap; }
.vesper-marcas--trilho .vesper-logo { height: 17px; }
.is-trilho-recolhido .vesper-marcas--trilho { display: none; }
@media (max-width: 900px) { .vesper-marcas--trilho { display: none; } }
/* equilíbrio óptico: o wordmark da Micropower (caixa alta, larga) pesa mais que o
   da Comerc (símbolo + duas linhas) na mesma altura; ~65% dela iguala o peso */
.vesper-marcas--login .vesper-marca--micropower .vesper-logo { height: 17px; }
.vesper-marcas--trilho .vesper-marca--micropower .vesper-logo { height: 11px; }