/* ==========================================================================================================
   Plataforma Lean — sistema de design (v2, 12/10/2026)
   Referências do dono: apresentação "Modelo" (azul-marinho #154193, títulos pesados, ícones planos) e quadro QGD (banner
   azul-marinho com faixas, células azul pálido, destaque laranja sobre creme). Para mudar as cores do site inteiro, mude só
   as variáveis do :root — nada de cor "solta" nos outros arquivos (exceto os SVG dos gráficos, que têm as constantes deles).
   ========================================================================================================== */

@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.68c477c4c76b.woff2") format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.0627ec86dfad.woff2") format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.cfdce67a2e07.woff2") format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.8d7a3f034881.woff2") format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-latin-700-normal.f0b3206d02a2.woff2") format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-latin-800-normal.47adf1610f40.woff2") format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 900; font-display: swap; src: url("../fonts/montserrat-latin-900-normal.2f0591f47be6.woff2") format('woff2'); }

:root {
  color-scheme: light;
  /* Azuis */
  --navy-950: #0A1F4D;
  --navy-900: #0F2F73;
  --navy: #154193;          /* cor principal e Estado Presente */
  --royal: #1C46F2;         /* foco e links */
  --azure: #3B8EE0;
  --azure-200: #B9D2F3;
  --azure-100: #D9E6F8;
  --azure-50: #EEF4FD;
  /* Laranjas */
  --orange: #E67E22;        /* destaque, Kaizen e Estado Futuro (decorativo) */
  --orange-700: #B9560A;    /* laranja para texto/fundo com letra branca (contraste AA) */
  --orange-200: #F6CFA6;
  --orange-50: #FDF2E3;     /* creme */
  /* Neutros (tons de azul — nada de preto) */
  --ink: #10264F;
  --ink-2: #394B73;
  --muted: #667799;
  --line: #D5DDEB;
  --line-soft: #E6ECF5;
  --paper: #F3F6FB;
  --card: #FFFFFF;
  --calc: #E9EDF4;          /* campo calculado: cinza-azulado chapado */
  /* Semânticas */
  --pos: #1B8A4B;
  --pos-50: #E3F4EA;
  --neg: #D6322B;
  --neg-50: #FCE8E6;
  --warn-50: #FFF4D6;

  --shadow-sm: 0 1px 2px rgba(15, 47, 115, .06), 0 1px 3px rgba(15, 47, 115, .08);
  --shadow-md: 0 4px 14px rgba(15, 47, 115, .10);
  --shadow-lg: 0 10px 28px rgba(15, 47, 115, .24);
  --radius: 14px;
  --side-w: 248px;
  --topbar-h: 0px;          /* sem barra no topo: a navegação fica na barra lateral */

  --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Inter', 'Segoe UI', system-ui, sans-serif;     /* números: Inter com algarismos tabulares */
  --font-code: ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Aliases dos nomes antigos (o resto do CSS ainda os usa) */
  --blueprint: var(--navy);
  --blueprint-dark: var(--navy-900);
  --kaizen: var(--orange);
  --panel: var(--card);
  --ink-muted: var(--muted);
  --sidebar: #fff;

  /* Cor de destaque do estado: Presente = azul; o Futuro troca para laranja (ver .ef-mode) */
  --accent: var(--navy);
  --accent-dark: var(--navy-900);
  --accent-soft: var(--azure-50);
  --accent-line: var(--azure-200);
}
.ef-mode { --accent: var(--orange-700); --accent-dark: #8F4208; --accent-soft: var(--orange-50); --accent-line: var(--orange-200); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
a { color: var(--royal); }
/* Toque: sem o atraso de ~300 ms nem o zoom por toque duplo em botões, links e campos */
button, a, input, select, label { touch-action: manipulation; }
:focus-visible { outline: 3px solid rgba(28, 70, 242, .35); outline-offset: 2px; }

/* ---------------- Ícones (estilo "emoji plano" do modelo: contorno azul-marinho + acento laranja) ---------------- */
.ico { width: 20px; height: 20px; flex: none; color: var(--navy); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-lg { width: 28px; height: 28px; }

/* ---------------- Estrutura: barra lateral clara + conteúdo ---------------- */
.app { display: flex; min-height: 100vh; }
.side {
  width: var(--side-w); flex: none; background: #fff; border-right: 1px solid var(--line);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; z-index: 30;
}
.side-brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px 16px; text-decoration: none; }
.side-brand .logo { width: 42px; height: 42px; flex: none; }
.side-brand .mark { font: 900 20px/1 var(--font-display); color: var(--navy); letter-spacing: .01em; display: block; }
.side-brand .sub { font-size: 10.5px; font-weight: 600; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; display: block; }
.side-nav { padding: 4px 12px 16px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.navgroup-label { padding: 18px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.navlink {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500;
  color: var(--ink-2); text-decoration: none; transition: background .12s, color .12s;
}
.navlink:hover { background: var(--azure-50); color: var(--navy); }
.navlink.active { background: var(--navy); color: #fff; font-weight: 600; box-shadow: var(--shadow-sm); }
.navlink.active .ico { color: #fff; }
.side-project { margin: 6px 0 2px; padding: 12px 14px; background: var(--azure-50); border: 1px solid var(--azure-100); border-radius: 12px; line-height: 1.35; }
.side-project strong { display: block; font: 800 14px var(--font-display); color: var(--navy); }
.side-project span { font-size: 12px; color: var(--muted); }
.side-user { border-top: 1px solid var(--line); padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.side-user .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: 800 14px var(--font-display); text-transform: uppercase; flex: none; }
.side-user .who { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user form { margin: 0; }
.side-user button { font: 600 12px var(--font-body); color: var(--ink-2); background: #fff; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.side-user button:hover { border-color: var(--navy); color: var(--navy); }

.side-version { padding: 0 18px 14px; font-size: 11.5px; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lang-switch { margin: 0; }
.lang-btn { font: 700 12px var(--font-body); letter-spacing: .06em; color: var(--navy); background: #fff; border: 1.5px solid var(--azure-200); border-radius: 8px; padding: 5px 11px; cursor: pointer; }
.lang-btn:hover { border-color: var(--navy); background: var(--azure-50); }
.lang-floating { position: fixed; top: 16px; right: 18px; z-index: 40; }
.lang-floating .lang-btn { box-shadow: var(--shadow-sm); }

.app-main { flex: 1; min-width: 0; }
.page { max-width: 76rem; margin: 0 auto; padding: 28px 32px 64px; }
.page.page-flush { max-width: none; padding: 0; }
.page-flush > .messages { margin: 18px 40px 0; }

/* ---------------- Banner de título (azul-marinho com faixas diagonais, como no QGD) ---------------- */
.page-head, .banner {
  position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--navy-900), var(--navy)); color: #fff; border-radius: var(--radius);
  padding: 24px 30px; margin-bottom: 22px; box-shadow: var(--shadow-md);
}
.ef-mode .banner { background: linear-gradient(135deg, #A64B07, #D9701A); }
.page-head::before, .banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(105deg, rgba(255, 255, 255, .055) 0 42px, rgba(255, 255, 255, 0) 42px 84px);
}
.page-head > *, .banner > * { position: relative; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--azure-200); }
/* a marca "EnxSol" mantém maiúsculas e minúsculas (não vira "ENXSOL") */
.kicker.brand-name { text-transform: none; letter-spacing: .02em; font-size: 14px; }
.ef-mode .banner .kicker { color: #FCE3C6; }
h1.page-title, .banner h1 { font: 900 clamp(26px, 3.2vw, 38px)/1.05 var(--font-display); margin: 6px 0 0; color: #fff; letter-spacing: -.01em; }
.page-head .muted, .banner .muted { color: var(--azure-200); margin: 8px 0 0; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.crumbs a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.crumbs a:hover { color: var(--navy); text-decoration: underline; }
.muted { color: var(--muted); }
.tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--azure-100); color: var(--navy); border-radius: 6px; padding: 2px 8px; }
.tool-soon { opacity: .7; }                                /* ferramenta em construção: visível, mas sem link */
.tool-soon .btn[aria-disabled="true"] { cursor: not-allowed; box-shadow: none; }
.page-head .tag { background: rgba(255, 255, 255, .18); color: #fff; }

/* ---------------- Botões ---------------- */
.btn, button.btn {
  font: 600 14px var(--font-body); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border-radius: 10px; padding: 9px 16px; color: var(--navy); background: #fff; border: 1.5px solid var(--azure-200); transition: all .12s;
}
.btn:hover { border-color: var(--navy); background: var(--azure-50); }
.btn-primary, button.btn-primary { color: #fff; background: var(--navy); border-color: var(--navy); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--navy-900); border-color: var(--navy-900); }
.btn-small, button.btn-small { font-size: 12.5px; padding: 5px 11px; font-weight: 600; }
form.inline { display: inline; margin: 0; }
/* No banner (fundo escuro): botão translúcido; o principal vira laranja */
.page-head .btn, .banner .btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .38); color: #fff; box-shadow: none; }
.page-head .btn:hover, .banner .btn:hover { background: rgba(255, 255, 255, .22); border-color: #fff; }
.page-head .btn-primary, .banner .btn-primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.page-head .btn-primary:hover, .banner .btn-primary:hover { background: #D56E12; border-color: #D56E12; }

/* ---------------- Mensagens, erros ---------------- */
.messages { list-style: none; margin: 0 0 1rem; padding: 0; }
.messages li { background: var(--pos-50); color: var(--pos); border: 1px solid #9ED3B4; border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.messages li.error { background: var(--neg-50); color: var(--neg); border-color: #F0B3AE; }
.errorlist { list-style: none; margin: 6px 0 0; padding: 0; color: var(--neg); font-size: 13px; }
.form-errors { background: var(--neg-50); border: 1px solid #F0B3AE; border-radius: 10px; padding: 8px 14px; margin-bottom: 8px; }
.form-errors .errorlist { margin: 0; }

/* ---------------- Cartões e formulários ---------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 22px; box-shadow: var(--shadow-sm); }
/* Campo EDITÁVEL = fundo azul pálido + borda azul + sombra suave (como as células a preencher do QGD) */
form.stacked label { display: block; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); margin: 18px 0 6px; }
form.stacked input[type=text], form.stacked select {
  width: 100%; font: 500 16px var(--font-body); color: var(--ink); min-height: 44px; padding: 8px 14px;
  background: var(--azure-50); border: 1.5px solid var(--azure-200); border-radius: 10px; box-shadow: var(--shadow-sm);
}
form.stacked input:focus, form.stacked select:focus { outline: none; border-color: var(--royal); box-shadow: 0 0 0 3px rgba(28, 70, 242, .16); background: #fff; }
form.stacked .helptext { font-size: 13px; color: var(--muted); margin-top: 6px; }
form.stacked .actions { display: flex; gap: 10px; align-items: center; margin-top: 26px; }

/* ---------------- Cartão de ferramenta/atalho (página do projeto) ---------------- */
.tool-card { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tool-card .tool-ico { width: 54px; height: 54px; border-radius: 14px; background: var(--azure-50); border: 1px solid var(--azure-100); display: grid; place-items: center; flex: none; }
.tool-card .tool-ico .ico { width: 30px; height: 30px; }
.tool-card .tool-body { flex: 1; min-width: 14rem; }
.tool-card .tool-body strong { font: 800 17px var(--font-display); color: var(--navy); }
.tool-card .tool-body p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.tool-card .tool-actions { display: flex; gap: 10px; flex-wrap: wrap; }
h2.group-title { font: 800 12px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 28px 0 12px; }

/* ---------------- Tablet (toque): alvos de 44 px e campos a 16 px — o iPad dá zoom ao tocar em campo com texto menor ---------------- */
@media (pointer: coarse) {
  .btn, button.btn, .btn-small, button.btn-small { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .btn-small, button.btn-small { padding-left: 14px; padding-right: 14px; font-size: 14px; }
  .side-user button { min-height: 44px; min-width: 64px; }
  .lang-btn { min-height: 44px; min-width: 52px; }
  .navlink { min-height: 44px; }
  form.stacked input[type=text], form.stacked input[type=password], form.stacked select { min-height: 46px; font-size: 16px; }
  .login input:not([type=hidden]) { min-height: 48px; font-size: 16px; }
}

/* ---------------- Responsivo (depois das regras base: em CSS a regra mais tarde vence) ---------------- */
@media (max-width: 1439px) {
  :root { --side-w: 216px; }
  .page { padding: 22px 24px 56px; }
  .page-flush > .messages { margin: 14px 24px 0; }
}
@media (max-width: 1199px) {
  :root { --side-w: 196px; }
  .side-brand { padding: 20px 14px 14px; gap: 10px; }
  .navlink { padding: 10px; gap: 9px; }
}
@media (max-width: 900px) {
  .app { flex-direction: column; }
  .side { width: auto; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .side-brand { padding: 12px 16px; }
  .side-nav { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; order: 3; padding: 4px 12px 10px; }
  .side-project { display: none; }
  .navgroup-label { display: none; }
  .side-user { border-top: 0; margin-left: auto; padding: 10px 16px; }
  .page { padding: 18px 16px 48px; }
}