/*
 * Enodex — design system (tokens + componentes + movimento)
 * ----------------------------------------------------------
 * Fonte da identidade: Manual de Identidade Visual ENOPS Engenharia
 *   - Azul ENOPS  #007AC9 (RGB 0/122/201): água, tecnologia, confiança
 *   - Preto: racionalidade; aqui um preto-azulado (petróleo) para o conjunto ficar frio e coerente
 *   - Conceitos do manual: força, robustez, fluidez, transparência, crescimento (horizontalidade)
 *
 * Ideia visual: a ENOPS trabalha com sistemas de água e esgoto. O "momento" de identidade do
 * sistema é a ÁGUA: o nível do reservatório nos indicadores (.eno-tanque), as ondas no login
 * e no menu, e o ripple ao clicar nos botões principais. Todo o resto fica quieto de propósito.
 *
 * Como o Tailwind (via CDN) já cuida das utilidades, este arquivo só traz o que ele não tem:
 * tokens, componentes próprios e animações. Tudo respeita "reduzir movimento".
 */

/* ========== 1. TOKENS ========== */
:root {
  /* Marca */
  --azul: #007AC9;
  --azul-600: #0067AB;       /* texto azul sobre fundos claros (contraste 5,9:1 no branco) */
  --azul-800: #0A4A7A;
  --agua: #2FC0E8;           /* realce de "água limpa", só sobre fundos escuros */
  --agua-200: #BFEAF8;

  /* Estrutura (preto-azulado / petróleo) */
  --petroleo-950: #041823;
  --petroleo-900: #06202F;
  --petroleo-800: #0A3047;
  --petroleo-700: #0F4466;

  /* Superfícies e linhas (neutros com tinta azul, nunca cinza puro) */
  --fundo: #EEF5FA;
  --fundo-2: #E4EEF6;
  --linha: #D3E2EE;
  --linha-forte: #B9CFE0;
  --texto: #12212D;
  --texto-suave: #5E7587;

  /* Semântica (sempre acompanhada de texto/ícone, nunca só cor) */
  --sucesso: #0A765A;
  --atencao: #B5373A;
  --alerta: #8F6209;

  /* Forma */
  --raio: 16px;
  --sombra-1: 0 1px 2px rgba(6, 32, 47, .05), 0 8px 20px -10px rgba(6, 70, 120, .16);
  --sombra-2: 0 2px 4px rgba(6, 32, 47, .06), 0 18px 34px -14px rgba(0, 100, 170, .32);

  /* Movimento */
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);

  /* Onda (máscara reutilizada em todos os efeitos de água): um período completo de seno,
     começa e termina com a mesma inclinação, então o laço da animação não "pula". */
  --onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C200 0 400 0 600 60 S1000 120 1200 60 V120 H0Z'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }
body {
  font-family: "Figtree", ui-sans-serif, system-ui, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { text-wrap: balance; }
::selection { background: rgba(0, 122, 201, .22); }

/* Texto azul sobre fundo claro usa o tom mais escuro (a cor da marca pura dá 4,1:1 no fundo
   tingido). Sobre o branco puro ela passa, mas manter um só tom evita dois azuis na tela. */
html .text-eno-azul { color: var(--azul-600); }
html .hover\:text-eno-azul:hover { color: var(--azul-600); }

/* Foco visível, sempre: anel duplo (claro + escuro) legível em qualquer fundo */
:focus-visible {
  outline: 2px solid var(--azul-600);
  outline-offset: 2px;
  border-radius: 6px;
}
.eno-escuro :focus-visible { outline-color: var(--agua); }

/* ========== 2. CAMADAS DE FUNDO ========== */

/* Malha construtiva: referência ao papel milimetrado de projeto de engenharia
   (o manual da ENOPS tem uma página inteira de "malha construtiva"). Quase invisível. */
.eno-malha {
  position: relative;
  background-image:
    linear-gradient(rgba(0, 122, 201, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 122, 201, .055) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}
.eno-malha::before {
  /* esmaece a malha para baixo e para a direita, deixando o conteúdo respirar */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(238, 245, 250, 0) 0%, var(--fundo) 85%);
  pointer-events: none;
}

/* ========== 3. COMPONENTES BASE (retoque dos cards e controles existentes) ========== */

/* Todo card branco arredondado do sistema ganha borda azulada e profundidade, sem mexer no HTML */
main .rounded-2xl.bg-white {
  border-color: var(--linha);
  box-shadow: var(--sombra-1);
  border-radius: var(--raio);
}
/* Cards que são links: sobem e ganham brilho azul na borda */
main a.rounded-2xl.bg-white {
  transition: transform .28s var(--ease-out-quart), box-shadow .28s var(--ease-out-quart), border-color .2s;
}
main a.rounded-2xl.bg-white:hover {
  border-color: rgba(0, 122, 201, .45);
  box-shadow: var(--sombra-2);
}

/* Botão principal (preto-azulado que vira azul): feedback de toque e elevação.
   '~=' casa só a classe exata (bg-eno-preto), nunca variantes como hover:/focus:bg-eno-preto. */
a[class~="bg-eno-preto"][class~="text-white"],
button[class~="bg-eno-preto"][class~="text-white"] {
  position: relative;
  overflow: hidden;
  transition: background-color .22s ease, transform .18s var(--ease-out-quart), box-shadow .22s ease;
  box-shadow: 0 1px 2px rgba(6, 32, 47, .18);
}
a[class~="bg-eno-preto"][class~="text-white"]:hover,
button[class~="bg-eno-preto"][class~="text-white"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -8px rgba(0, 100, 170, .55);
}
a[class~="bg-eno-preto"][class~="text-white"]:active,
button[class~="bg-eno-preto"][class~="text-white"]:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 1px 2px rgba(6, 32, 47, .18);
}

/* Campos de formulário: foco com brilho de água */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 4px rgba(0, 122, 201, .16);
}
input::placeholder, textarea::placeholder { color: #7D93A5; }

/* Linhas de tabela e itens de lista */
.eno-realce { transition: background-color .2s ease, box-shadow .2s ease; }
.eno-realce:hover { background-color: rgba(0, 122, 201, .06); box-shadow: inset 3px 0 0 var(--azul); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #B9CFE0; border-radius: 6px; border: 2px solid var(--fundo); }
::-webkit-scrollbar-thumb:hover { background: #8FB0CA; }

/* ========== 4. ÁGUA ========== */

/* 4.1 Onda decorativa (menu lateral, login). A cor vem de --onda-cor. */
.eno-onda {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--onda-altura, 72px);
  overflow: hidden;
  pointer-events: none;
}
.eno-onda::before,
.eno-onda::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 200%; height: 100%;
  background: var(--onda-cor, rgba(47, 192, 232, .35));
  -webkit-mask: var(--onda) repeat-x 0 100% / 50% 100%;
          mask: var(--onda) repeat-x 0 100% / 50% 100%;
  animation: eno-onda 16s linear infinite;
  will-change: transform;
}
.eno-onda::after {
  height: 78%;
  background: var(--onda-cor-2, rgba(0, 122, 201, .55));
  animation-duration: 24s;
  animation-direction: reverse;
}
@keyframes eno-onda { to { transform: translateX(-50%); } }

/* 4.2 Reservatório: card escuro cuja "água" sobe até o nível do indicador.
   Uso: <div class="eno-tanque" style="--nivel: 72"> ... conteúdo ... </div>
   --nivel vai de 0 a 100 (%). O conteúdo fica na frente (z-index), a água atrás. */
.eno-tanque {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--raio);
  color: #fff;
  background: linear-gradient(180deg, var(--petroleo-800) 0%, var(--petroleo-950) 100%);
  box-shadow: var(--sombra-2);
}
.eno-tanque__agua {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 100%;
  z-index: -1;
  transform: translateY(calc(100% - var(--nivel, 0) * 1%));
  background: linear-gradient(180deg, #0B87D2 0%, #0A5F9A 55%, var(--azul-800) 100%);
  animation: eno-enche 2s var(--ease-out-expo) .2s both;
}
/* duas cristas de onda na superfície da água, em velocidades diferentes */
.eno-tanque__agua::before,
.eno-tanque__agua::after {
  content: "";
  position: absolute; left: 0;
  width: 200%; height: 22px; top: -20px;
  background: #0B87D2;
  -webkit-mask: var(--onda) repeat-x 0 100% / 50% 100%;
          mask: var(--onda) repeat-x 0 100% / 50% 100%;
  animation: eno-onda 9s linear infinite;
  will-change: transform;
}
.eno-tanque__agua::after {
  top: -26px; height: 24px;
  background: rgba(47, 192, 232, .55);
  animation-duration: 13s;
  animation-direction: reverse;
}
@keyframes eno-enche {
  from { transform: translateY(100%); }
  to   { transform: translateY(calc(100% - var(--nivel, 0) * 1%)); }
}
/* texto sempre em branco pleno sobre a água (contraste mínimo 4,2:1 sobre o azul mais claro) */
.eno-tanque__rotulo { color: rgba(255, 255, 255, .88); text-shadow: 0 1px 2px rgba(4, 24, 35, .45); }

/* 4.3 Ripple: onda que nasce no ponto do clique, nos botões principais */
.eno-ripple-host { position: relative; overflow: hidden; }
.eno-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .38);
  transform: scale(0);
  animation: eno-ripple .65s var(--ease-out-quart) forwards;
  pointer-events: none;
}
@keyframes eno-ripple { to { transform: scale(1); opacity: 0; } }

/* 4.4 Bolhas do login (sobem devagar, uma por vez, bem discretas) */
.eno-bolha {
  position: absolute; bottom: -24px;
  border-radius: 50%;
  border: 1.5px solid rgba(191, 234, 248, .55);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 60%);
  animation: eno-bolha 14s ease-in infinite;
  opacity: 0;
}
@keyframes eno-bolha {
  0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  12%  { opacity: .9; }
  85%  { opacity: .5; }
  100% { transform: translate3d(var(--deriva, 18px), -70vh, 0) scale(1); opacity: 0; }
}

/* 4.5 Traço de fluxo: pulso de luz percorrendo uma linha fina (separador de identidade) */
.eno-fluxo { position: relative; height: 2px; background: var(--linha); border-radius: 2px; overflow: hidden; }
.eno-fluxo::after {
  content: ""; position: absolute; top: 0; left: -35%;
  width: 35%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--azul), var(--agua), transparent);
  animation: eno-fluxo-anim 3.4s ease-in-out infinite;
}
@keyframes eno-fluxo-anim { 0% { left: -35%; } 100% { left: 100%; } }

/* ========== 5. ENTRADAS ========== */

/* Cascata: cada card sobe e aparece em sequência, uma vez, ao carregar (delay vem inline) */
@keyframes eno-subida {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 'backwards' (e não 'forwards'): o estado inicial vale só durante o atraso; depois a animação
   solta o elemento, e os efeitos de hover (subir, sombra) voltam a funcionar normalmente. */
.eno-cascata { animation: eno-subida .55s var(--ease-out-expo) backwards; }

/* Revelação ao rolar: só entra em ação se o JS estiver ligado (html.js), para nunca esconder conteúdo */
html.js .eno-revela { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out-expo), transform .6s var(--ease-out-expo); }
html.js .eno-revela.is-visivel { opacity: 1; transform: none; }

/* Transição entre páginas (navegadores que suportam): o conteúdo faz um fade curto e o
   menu lateral fica parado, sem piscar. Nos demais navegadores, a navegação é normal. */
@view-transition { navigation: auto; }
.eno-lateral { view-transition-name: eno-lateral; }
::view-transition-old(root) { animation: eno-vt-sai .16s ease both; }
::view-transition-new(root) { animation: eno-vt-entra .28s var(--ease-out-quart) both; }
@keyframes eno-vt-sai { to { opacity: 0; } }
@keyframes eno-vt-entra { from { opacity: 0; transform: translateY(6px); } }

/* ========== 6. MENU LATERAL ========== */

.eno-lateral {
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(0, 122, 201, .32) 0%, transparent 60%),
    linear-gradient(180deg, var(--petroleo-900) 0%, var(--petroleo-950) 100%);
}
.eno-nav a {
  position: relative;
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .75rem;
  border-radius: 12px;
  color: rgba(255, 255, 255, .74);
  font-weight: 500;
  transition: color .2s ease, background-color .2s ease, transform .25s var(--ease-out-quart);
}
.eno-nav a svg { width: 18px; height: 18px; flex: none; opacity: .8; transition: opacity .2s, transform .25s var(--ease-out-quart); }
.eno-nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); transform: translateX(3px); }
.eno-nav a:hover svg { opacity: 1; transform: scale(1.08); }
.eno-nav a[aria-current="page"] {
  color: #fff;
  background: linear-gradient(90deg, rgba(0, 122, 201, .5), rgba(0, 122, 201, .08));
  box-shadow: inset 3px 0 0 var(--agua);
}
.eno-nav a[aria-current="page"] svg { opacity: 1; color: var(--agua); }

/* Menu como gaveta em telas pequenas */
.eno-fundo-gaveta {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(4, 24, 35, .55);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
@media (max-width: 1023px) {
  .eno-lateral {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
    width: min(18rem, 86vw);
    transform: translateX(-100%);
    visibility: hidden; /* fora da tela não recebe foco do teclado */
    transition: transform .35s var(--ease-out-expo), visibility 0s linear .35s;
  }
  body[data-menu="aberto"] .eno-lateral { transform: none; visibility: visible; transition-delay: 0s; }
  body[data-menu="aberto"] .eno-fundo-gaveta { opacity: 1; pointer-events: auto; }
  body[data-menu="aberto"] { overflow: hidden; }
}

/* Cabeçalho fixo com vidro fosco */
.eno-topo {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linha);
}

/* ========== 7. TIPOGRAFIA DE MARCA ========== */
.eno-marca {
  font-family: "Bricolage Grotesque", "Figtree", sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}
/* "engenharia" espaçado, serifado, como na assinatura visual da ENOPS (manual: fonte Cambria) */
.eno-assinatura {
  font-family: Cambria, "Roboto Slab", Georgia, serif;
  letter-spacing: .32em;
  text-transform: lowercase;
}

/* ========== 8. MOVIMENTO REDUZIDO ========== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .eno-cascata { animation: none; }
  html.js .eno-revela { opacity: 1; transform: none; }
  .eno-bolha, .eno-fluxo::after { display: none; }
  .eno-tanque__agua { animation: none; }
  @view-transition { navigation: none; }
}