/* ═══════════════════════════════════════════════════════════════════════
   PEESS Corretoras · Design System v1.0
   Linguagem visual única do ecossistema de ferramentas da PEESS Corretoras:
   Portal · Nosso Espaço · Cotador · Secretária Nicole · Painel.
   O prefixo `eco-` é apenas técnico (ECossistema espaÇO), escolhido para
   nunca colidir com o CSS já existente nas telas em produção.

   Sumário
   01 Tokens · 02 Base · 03 Tipografia · 04 Layout · 05 Botões
   06 Campos · 07 Cartões · 08 Etiquetas · 09 Avisos · 10 Toast
   11 Navbar · 12 Tabela · 13 Modal · 14 Carregamento · 15 Ícones
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 01 TOKENS ─────────────────────────────────────────────────────────
   Fonte única da verdade. Nenhum valor de cor, espaço, raio ou sombra
   deve ser escrito fora daqui.                                          */
:root{
  /* Superfícies — muito branco, cinza extremamente claro */
  --eco-bg:#ffffff;
  --eco-bg-sub:#fafbfc;      /* fundo de página / faixas               */
  --eco-surface:#ffffff;     /* cartões                                 */
  --eco-surface-2:#f4f7fa;   /* campos desabilitados, realces discretos */

  /* Texto — quase-preto com viés azul, nunca preto puro */
  --eco-ink:#0f2337;
  --eco-ink-2:#33475c;
  --eco-muted:#5d7288;       /* contraste 5.2:1 sobre branco (AA)       */

  /* Linhas */
  --eco-line:#e4eaf0;
  --eco-line-2:#d3dde7;

  /* ── A BARRA ESCURA ────────────────────────────────────────────────
     Cores tiradas do logo oficial, medidas no arquivo e não escolhidas
     a olho: o fundo #0C2D4F e o dourado #D39A23 do "SS" do nome.

     A barra tem tokens PRÓPRIOS, separados dos de superfície, porque
     ela é escura nos DOIS temas. Se usasse --eco-surface, clarearia
     junto com o resto no tema claro e o logo branco sumiria dentro
     dela.

     Contraste conferido sobre #0C2D4F: o texto inativo #A9BCCF dá
     7,1:1, o ativo #E8EEF5 dá 12,6:1 e o dourado #E0AC3E dá 6,3:1.
     Todos acima de 4,5:1, o mínimo para texto pequeno. */
  --eco-nav-bg:#0C2D4F;
  --eco-nav-ink:#E8EEF5;
  --eco-nav-ink-2:#A9BCCF;
  --eco-nav-line:#163C63;
  --eco-nav-hover:#123A61;
  --eco-nav-ouro:#E0AC3E;          /* o dourado do logo, um tom acima
                                      para aguentar o fundo escuro */
  --eco-nav-ouro-wash:rgba(224,172,62,.16);

  /* Marca — azul institucional PEESS Corretoras, acento único */
  --eco-brand:#1e73be;
  --eco-brand-hover:#1a63a4;
  --eco-brand-active:#155289;
  --eco-brand-wash:#eaf3fa;
  --eco-brand-ring:rgba(30,115,190,.32);

  /* Semânticas — exclusivas do seu significado */
  --eco-ok:#15803d;      --eco-ok-wash:#e9f6ee;
  --eco-warn:#b45309;    --eco-warn-wash:#fdf3e6;
  --eco-danger:#b3261e;  --eco-danger-wash:#fdedec;

  /* Tipografia */
  --eco-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --eco-font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --eco-t-display:28px;  /* título de página          */
  --eco-t-h1:22px;       /* título de seção principal */
  --eco-t-h2:17px;       /* título de bloco           */
  --eco-t-h3:15px;       /* título de cartão          */
  --eco-t-body:15px;     /* leitura                   */
  --eco-t-sm:13.5px;     /* apoio                     */
  --eco-t-xs:12px;       /* etiqueta, legenda         */

  /* Espaçamento — malha de 4px */
  --eco-s1:4px;  --eco-s2:8px;  --eco-s3:12px;
  --eco-s4:16px; --eco-s5:24px; --eco-s6:32px; --eco-s7:48px;

  /* Raio — três degraus, sem exceções */
  --eco-r-sm:8px;    /* campo, botão   */
  --eco-r-md:14px;   /* cartão, painel */
  --eco-r-full:999px;/* pílula, avatar */

  /* Elevação — três níveis, cada um em duas camadas.
     A primeira é curta e escura: é o contato com a superfície, o que
     diz "isto está apoiado". A segunda é longa e clara: dissolve na
     página e dá o volume. Uma camada só sempre parece adesivo.       */
  --eco-e1:0 1px 2px rgba(15,35,55,.05), 0 3px 8px -4px rgba(15,35,55,.10);
  --eco-e2:0 1px 2px rgba(15,35,55,.05), 0 8px 24px -12px rgba(15,35,55,.20);
  --eco-e3:0 2px 4px rgba(15,35,55,.06), 0 24px 56px -24px rgba(15,35,55,.32);

  /* Realce da marca — só o botão principal usa. A sombra dele é o
     próprio azul diluído, não cinza: é isso que o faz parecer aceso. */
  --eco-e-brand:0 1px 2px rgba(21,82,137,.28), 0 6px 16px -8px rgba(30,115,190,.55);
  --eco-e-brand-alta:0 2px 4px rgba(21,82,137,.30), 0 10px 22px -8px rgba(30,115,190,.62);

  /* Realce do ganho: mesma construcao do azul, no verde de
     sucesso. Vai UM por cartao — no botao que registra a venda
     fechada. Se dois botoes brilham, nenhum brilha.        */
  --eco-e-ganho:0 1px 2px rgba(12,74,40,.30), 0 6px 16px -8px rgba(21,128,61,.55);
  --eco-e-ganho-alta:0 2px 4px rgba(12,74,40,.32), 0 10px 22px -8px rgba(21,128,61,.62);

  /* Brilho embaixo da caixa: o azul da marca some por baixo, como se
     a peça estivesse acesa. Vai só no indicador e na ferramenta — o
     que brilha é o que merece o olho primeiro. Se tudo brilhasse,
     nada se destacaria.                                            */
  --eco-brilho:0 1px 2px rgba(15,35,55,.05), 0 6px 10px -4px rgba(30,115,190,.35), 0 16px 26px -10px rgba(30,115,190,.70);
  --eco-brilho-alto:0 1px 2px rgba(15,35,55,.05), 0 8px 14px -4px rgba(30,115,190,.42), 0 22px 34px -10px rgba(30,115,190,.82);

  /* Movimento — discreto por princípio */
  --eco-fast:120ms;
  --eco-base:200ms;
  --eco-slow:320ms;
  --eco-ease:cubic-bezier(.32,.72,.35,1);

  --eco-navbar-h:58px;

  /* Largura de leitura única do ecossistema. Antes cada tela tinha a sua
     (720, 880, 920, 1160) e a troca de módulo dava um solavanco. */
  --eco-w-leitura:860px;
  /* Telas com coluna lateral (Início, Nicole). Menor que a antiga 1120
     porque agora precisa caber ao lado da barra sem encostar nela. */
  --eco-w-painel:1060px;
}

/* O bloco @media (prefers-color-scheme: dark) foi REMOVIDO em
   02/09/2026. Ele existia para seguir o tema do sistema operacional;
   agora o escuro e o padrao do portal, definido logo abaixo sem
   media query. Manter os dois seria ter duas paletas escuras
   diferentes disputando a mesma tela conforme a configuracao do
   aparelho — e a antiga era cinza-ardosia, nao o azul da marca. */
/* ── O ESCURO É O PADRÃO DO PORTAL ──────────────────────────────────
   02/09/2026, a pedido do Tiago: o escuro deixou de seguir o sistema
   operacional e passou a ser o visual do produto, em todas as telas.

   Está feito no seletor, e não em JavaScript, de propósito. Ligar o
   tema por script faria a página abrir branca e piscar para escuro a
   cada carregamento — o "flash of unstyled content". No CSS, ela já
   nasce escura.

   `data-eco-theme="light"` continua valendo como saída: quem puser
   esse atributo na raiz volta ao claro. É por ali que entraria um botão
   de tema, se um dia houver.

   AS CORES SAÍRAM DO LOGO. O escuro que estava aqui era um cinza-ardósia
   neutro (#0e1721), bonito e de ninguém. Agora é a família do azul-
   marinho da marca, o mesmo #0C2D4F da barra: a página é o tom mais
   fundo, os cartões vêm um degrau acima, e a barra fica entre os dois. */
:root[data-eco-theme="dark"],
:root:not([data-eco-theme="light"]){
  --eco-bg:#071B31;      --eco-bg-sub:#051527;
  --eco-surface:#0E2B48; --eco-surface-2:#16395C;
  --eco-ink:#EAF1F8;     --eco-ink-2:#C0D0E0;  --eco-muted:#8CA3BA;
  --eco-line:#1B4066;    --eco-line-2:#245079;
  --eco-brand:#59a5e2;   --eco-brand-hover:#7ab8ea; --eco-brand-active:#95c7ef;
  --eco-brand-wash:#15283a; --eco-brand-ring:rgba(89,165,226,.36);
  --eco-ok:#4ade80;      --eco-ok-wash:#12291d;
  --eco-warn:#fbbf24;    --eco-warn-wash:#2a2012;
  --eco-danger:#f87171;  --eco-danger-wash:#2b1717;
  --eco-e1:0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  --eco-e2:0 6px 18px -8px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06);
  --eco-e3:0 22px 50px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07);
  --eco-e-brand:0 1px 2px rgba(0,0,0,.5), 0 6px 16px -8px rgba(89,165,226,.45);
  --eco-e-brand-alta:0 2px 4px rgba(0,0,0,.55), 0 10px 22px -8px rgba(89,165,226,.55);
  --eco-e-ganho:0 1px 2px rgba(0,0,0,.5), 0 6px 16px -8px rgba(74,222,128,.40);
  --eco-e-ganho-alta:0 2px 4px rgba(0,0,0,.55), 0 10px 22px -8px rgba(74,222,128,.50);
  --eco-brilho:0 1px 2px rgba(0,0,0,.5), 0 6px 10px -4px rgba(89,165,226,.28), 0 16px 26px -10px rgba(89,165,226,.55);
  --eco-brilho-alto:0 1px 2px rgba(0,0,0,.5), 0 8px 14px -4px rgba(89,165,226,.34), 0 22px 34px -10px rgba(89,165,226,.68);
}

/* ── 02 BASE ─────────────────────────────────────────────────────────── */
.eco *,.eco *::before,.eco *::after{box-sizing:border-box}
.eco{font-family:var(--eco-font);font-size:var(--eco-t-body);line-height:1.55;
  color:var(--eco-ink);background:var(--eco-bg-sub);-webkit-font-smoothing:antialiased}

/* "hidden" precisa esconder de verdade: vários componentes daqui definem
   display (flex, grid, inline-flex), e isso venceria o padrão do navegador. */
[hidden]{display:none !important}

/* Foco visível e único em toda a plataforma */
.eco :focus-visible{outline:2px solid var(--eco-brand);outline-offset:2px;border-radius:var(--eco-r-sm)}

/* Atalho para leitores de tela e teclado */
.eco-skip{position:absolute;left:-9999px;top:0;background:var(--eco-brand);color:var(--eco-bg);
  padding:var(--eco-s2) var(--eco-s4);border-radius:0 0 var(--eco-r-sm) 0;z-index:100;font-weight:600}
.eco-skip:focus{left:0}
.eco-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .eco *,.eco *::before,.eco *::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ── 03 TIPOGRAFIA ───────────────────────────────────────────────────── */
.eco-display{font-size:var(--eco-t-display);line-height:1.2;letter-spacing:-.022em;font-weight:700;margin:0;text-wrap:balance}
.eco-h1{font-size:var(--eco-t-h1);line-height:1.28;letter-spacing:-.016em;font-weight:700;margin:0}
.eco-h2{font-size:var(--eco-t-h2);line-height:1.35;letter-spacing:-.01em;font-weight:700;margin:0}
.eco-h3{font-size:var(--eco-t-h3);line-height:1.4;font-weight:700;margin:0}
.eco-body{font-size:var(--eco-t-body);margin:0}
.eco-sm{font-size:var(--eco-t-sm);margin:0}
.eco-xs{font-size:var(--eco-t-xs);margin:0}
.eco-muted{color:var(--eco-muted)}
.eco-label{font-size:var(--eco-t-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--eco-muted)}
.eco-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.eco-mono{font-family:var(--eco-font-mono)}

/* ── 04 LAYOUT ───────────────────────────────────────────────────────── */
.eco-page{max-width:var(--eco-w-painel);margin:0 auto;padding:var(--eco-s5) var(--eco-s4) var(--eco-s7)}
.eco-page--narrow{max-width:var(--eco-w-leitura)}
.eco-stack{display:flex;flex-direction:column;gap:var(--eco-s4)}
.eco-stack--sm{gap:var(--eco-s2)}
.eco-row{display:flex;align-items:center;gap:var(--eco-s3);flex-wrap:wrap}
.eco-row--between{justify-content:space-between}
.eco-grid{display:grid;gap:var(--eco-s4)}
.eco-grid--2{grid-template-columns:repeat(2,1fr)}
.eco-grid--3{grid-template-columns:repeat(3,1fr)}
.eco-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.eco-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.eco-grid--3{grid-template-columns:1fr}}
@media(max-width:600px){.eco-grid--2,.eco-grid--4{grid-template-columns:1fr}}
.eco-divider{height:1px;background:var(--eco-line);border:0;margin:var(--eco-s5) 0}

/* ── 05 BOTÕES ───────────────────────────────────────────────────────── */
.eco-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--eco-s2);
  font-family:inherit;font-size:var(--eco-t-sm);font-weight:600;line-height:1;
  padding:0 var(--eco-s4);height:40px;border-radius:var(--eco-r-sm);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;text-decoration:none;position:relative;
  transition:background var(--eco-fast) var(--eco-ease),border-color var(--eco-fast) var(--eco-ease),
             color var(--eco-fast) var(--eco-ease),box-shadow var(--eco-fast) var(--eco-ease),
             transform var(--eco-fast) var(--eco-ease)}
.eco-btn:disabled,.eco-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

/* O texto sobre fundo cheio é --eco-bg, nunca #fff cravado. No tema claro
   dá exatamente branco, então nada muda. No escuro, as cores de fundo
   clareiam (o azul vira #59a5e2, o verde #4ade80) e texto branco em cima
   delas cai para 2,6:1 — ilegível. O caso pior era o aviso flutuante:
   fundo --eco-ink, que no escuro é quase branco, com texto branco.
   Amarrar no token faz a cor virar sozinha junto com o tema.          */
.eco-btn--primary{background:var(--eco-brand);color:var(--eco-bg);box-shadow:var(--eco-e-brand)}
.eco-btn--primary:hover:not(:disabled){background:var(--eco-brand-hover);
  box-shadow:var(--eco-e-brand-alta);transform:translateY(-1px)}
.eco-btn--primary:active:not(:disabled){background:var(--eco-brand-active);
  box-shadow:var(--eco-e1);transform:translateY(0)}

.eco-btn--secondary{background:var(--eco-surface);color:var(--eco-ink);border-color:var(--eco-line-2)}
.eco-btn--secondary:hover:not(:disabled){background:var(--eco-surface-2);border-color:var(--eco-muted)}

.eco-btn--ghost{background:transparent;color:var(--eco-ink-2)}
.eco-btn--ghost:hover:not(:disabled){background:var(--eco-surface-2);color:var(--eco-ink)}

/* GANHO — o desfecho que se comemora. Verde cheio, com brilho. */
.eco-btn--ganho{background:var(--eco-ok);color:var(--eco-bg);box-shadow:var(--eco-e-ganho)}
.eco-btn--ganho:hover:not(:disabled){filter:brightness(1.08);
  box-shadow:var(--eco-e-ganho-alta);transform:translateY(-1px)}
.eco-btn--ganho:active:not(:disabled){filter:brightness(.95);
  box-shadow:var(--eco-e1);transform:translateY(0)}

/* PERDA — registrar que nao fechou. Vermelho suave, contornado, sem
   preenchimento: e acao legitima do dia a dia, nao acidente. Botao
   vermelho cheio pertence a --danger, que significa outra coisa. */
.eco-btn--perda{background:var(--eco-danger-wash);color:var(--eco-danger);
  border-color:color-mix(in srgb, var(--eco-danger) 28%, transparent)}
.eco-btn--perda:hover:not(:disabled){
  background:color-mix(in srgb, var(--eco-danger) 12%, var(--eco-danger-wash));
  border-color:color-mix(in srgb, var(--eco-danger) 45%, transparent)}

.eco-btn--danger{background:var(--eco-danger);color:var(--eco-bg)}
.eco-btn--danger:hover:not(:disabled){filter:brightness(.93)}

.eco-btn--sm{height:32px;font-size:var(--eco-t-xs);padding:0 var(--eco-s3)}
.eco-btn--lg{height:48px;font-size:var(--eco-t-body);padding:0 var(--eco-s5)}
.eco-btn--block{width:100%}
.eco-btn--icon{width:40px;padding:0}
.eco-btn--icon.eco-btn--sm{width:32px}

/* Abaixo de 16px o Safari do iPhone amplia a tela sozinho quando o dedo toca
   num campo, e nao desfaz o zoom depois. Vale para os campos das paginas
   tambem, por isso o !important: nao existe caso em que uma letra menor
   que 16px num campo seja desejavel no celular. */
@media(max-width:640px){
  input,select,textarea,
  .eco-input,.eco-select,.eco-textarea{font-size:16px !important}
  .eco-input,.eco-select{height:46px}
}

/* No celular todo botao chega aos 44px do alvo de toque confortavel.
   Os compactos (--sm) ficavam em 32px e o dedo pegava o vizinho. */
@media(max-width:640px){
  .eco-btn{height:44px}
  .eco-btn--sm{height:44px;font-size:var(--eco-t-sm);padding:0 var(--eco-s4)}
  .eco-btn--icon{width:44px;padding:0}
  .eco-btn--icon.eco-btn--sm{width:44px;padding:0}
}

/* Estado carregando: rótulo some, roda gira. Largura não muda. */
.eco-btn.is-loading{color:transparent!important;pointer-events:none}
.eco-btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  color:var(--eco-bg);animation:eco-spin .6s linear infinite}
.eco-btn--secondary.is-loading::after,.eco-btn--ghost.is-loading::after{color:var(--eco-brand)}
@keyframes eco-spin{to{transform:rotate(360deg)}}

/* ── 06 CAMPOS ───────────────────────────────────────────────────────── */
.eco-field{display:flex;flex-direction:column;gap:var(--eco-s1)}
.eco-field > label{font-size:var(--eco-t-sm);font-weight:600;color:var(--eco-ink)}
.eco-field .eco-hint{font-size:var(--eco-t-xs);color:var(--eco-muted)}
.eco-field .eco-error{font-size:var(--eco-t-xs);color:var(--eco-danger);display:flex;align-items:center;gap:var(--eco-s1)}

.eco-input,.eco-select,.eco-textarea{width:100%;font-family:inherit;font-size:var(--eco-t-body);
  color:var(--eco-ink);background:var(--eco-surface);border:1px solid var(--eco-line-2);
  border-radius:var(--eco-r-sm);padding:0 var(--eco-s3);height:42px;
  transition:border-color var(--eco-fast) var(--eco-ease),box-shadow var(--eco-fast) var(--eco-ease)}
.eco-textarea{height:auto;min-height:104px;padding:var(--eco-s3);resize:vertical;line-height:1.55}
.eco-input::placeholder,.eco-textarea::placeholder{color:var(--eco-muted);opacity:.75}
.eco-input:hover,.eco-select:hover,.eco-textarea:hover{border-color:var(--eco-muted)}
.eco-input:focus,.eco-select:focus,.eco-textarea:focus{outline:none;border-color:var(--eco-brand);
  box-shadow:0 0 0 3px var(--eco-brand-ring)}
.eco-input:disabled,.eco-select:disabled,.eco-textarea:disabled{background:var(--eco-surface-2);
  color:var(--eco-muted);cursor:not-allowed}
.eco-input.is-invalid,.eco-select.is-invalid,.eco-textarea.is-invalid{border-color:var(--eco-danger)}
.eco-input.is-invalid:focus{box-shadow:0 0 0 3px rgba(179,38,30,.22)}

.eco-select{appearance:none;padding-right:var(--eco-s6);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d7288' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px}

/* Campo com elemento à direita (ex.: exibir senha) */
.eco-input-group{position:relative;display:flex;align-items:center}
.eco-input-group .eco-input{padding-right:44px}
.eco-input-group .eco-input-action{position:absolute;right:4px;height:34px;width:34px;
  display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;
  color:var(--eco-muted);border-radius:var(--eco-r-sm)}
.eco-input-group .eco-input-action:hover{color:var(--eco-ink);background:var(--eco-surface-2)}

/* Marcação: caixa e opção */
.eco-check,.eco-radio{display:flex;align-items:flex-start;gap:var(--eco-s2);cursor:pointer;font-size:var(--eco-t-sm)}
.eco-check input,.eco-radio input{appearance:none;width:18px;height:18px;margin:1px 0 0;flex:none;
  border:1.5px solid var(--eco-line-2);background:var(--eco-surface);cursor:pointer;
  transition:border-color var(--eco-fast),background var(--eco-fast)}
.eco-check input{border-radius:5px}
.eco-radio input{border-radius:50%}
.eco-check input:hover,.eco-radio input:hover{border-color:var(--eco-brand)}
.eco-check input:checked,.eco-radio input:checked{background:var(--eco-brand);border-color:var(--eco-brand)}
.eco-check input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat}
.eco-radio input:checked{box-shadow:inset 0 0 0 3.5px var(--eco-surface)}

/* Interruptor */
.eco-switch{display:inline-flex;align-items:center;gap:var(--eco-s2);cursor:pointer;font-size:var(--eco-t-sm)}
.eco-switch input{appearance:none;width:38px;height:22px;border-radius:var(--eco-r-full);
  background:var(--eco-line-2);position:relative;cursor:pointer;transition:background var(--eco-base) var(--eco-ease)}
.eco-switch input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:var(--eco-e1);transition:transform var(--eco-base) var(--eco-ease)}
.eco-switch input:checked{background:var(--eco-brand)}
.eco-switch input:checked::after{transform:translateX(16px)}

/* Levantar e afundar são enfeite: quem pediu menos movimento no
   sistema operacional continua vendo só a mudança de sombra. */
@media (prefers-reduced-motion:reduce){
  .eco-btn--primary:hover:not(:disabled),.eco-btn--ganho:hover:not(:disabled),
  .eco-tile:hover{transform:none}
}

/* ── 07 CARTÕES ──────────────────────────────────────────────────────── */
.eco-card{background:var(--eco-surface);border:1px solid var(--eco-line);border-radius:var(--eco-r-md);
  box-shadow:var(--eco-e2);padding:var(--eco-s5)}
.eco-card--flat{box-shadow:none}
.eco-card--pad-sm{padding:var(--eco-s4)}
.eco-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--eco-s3);
  margin-bottom:var(--eco-s3)}
.eco-card__title{font-size:var(--eco-t-h3);font-weight:700;margin:0}
.eco-card__sub{font-size:var(--eco-t-sm);color:var(--eco-muted);margin:2px 0 0}

/* Cartão acionável — a ferramenta no hub */
.eco-tile{display:flex;align-items:flex-start;gap:var(--eco-s3);text-decoration:none;color:inherit;
  background:var(--eco-surface);border:1px solid var(--eco-line);border-radius:var(--eco-r-md);
  padding:var(--eco-s4);box-shadow:var(--eco-brilho);position:relative;
  transition:border-color var(--eco-base) var(--eco-ease),box-shadow var(--eco-base) var(--eco-ease),
             transform var(--eco-base) var(--eco-ease)}
.eco-tile:hover{border-color:var(--eco-brand);box-shadow:var(--eco-brilho-alto);transform:translateY(-2px)}
.eco-tile:active{box-shadow:var(--eco-e1);transform:translateY(0)}
.eco-tile__icon{width:40px;height:40px;flex:none;border-radius:var(--eco-r-sm);
  background:var(--eco-brand-wash);color:var(--eco-brand);display:flex;align-items:center;justify-content:center}
.eco-tile__title{font-size:var(--eco-t-h3);font-weight:700;margin:0 0 2px}
.eco-tile__desc{font-size:var(--eco-t-sm);color:var(--eco-muted);margin:0}

/* Indicador (métrica) */
.eco-stat{background:var(--eco-surface);border:1px solid var(--eco-line);border-radius:var(--eco-r-md);
  padding:var(--eco-s4);box-shadow:var(--eco-brilho)}
.eco-stat__label{font-size:var(--eco-t-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--eco-muted);margin:0 0 var(--eco-s2)}
.eco-stat__value{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1;margin:0;
  font-variant-numeric:tabular-nums}
.eco-stat__foot{font-size:var(--eco-t-xs);color:var(--eco-muted);margin:var(--eco-s2) 0 0;
  display:flex;align-items:center;gap:var(--eco-s1)}
.eco-stat__foot .up{color:var(--eco-ok);font-weight:600}
/* um link no pe do indicador tinha 19px de altura; agora cabe o dedo */
.eco-stat__foot a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--eco-brand);font-weight:600;text-decoration:none}
.eco-stat__foot a:hover{text-decoration:underline}
.eco-stat__foot .down{color:var(--eco-danger);font-weight:600}

/* ── 08 ETIQUETAS ────────────────────────────────────────────────────── */
.eco-badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--eco-t-xs);font-weight:600;
  padding:3px 9px;border-radius:var(--eco-r-full);background:var(--eco-surface-2);color:var(--eco-ink-2);
  white-space:nowrap;line-height:1.5}
.eco-badge--brand{background:var(--eco-brand-wash);color:var(--eco-brand)}
.eco-badge--ok{background:var(--eco-ok-wash);color:var(--eco-ok)}
.eco-badge--warn{background:var(--eco-warn-wash);color:var(--eco-warn)}
.eco-badge--danger{background:var(--eco-danger-wash);color:var(--eco-danger)}
.eco-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* Etiquetas de situação em curso — a régua da intensidade.
   CHEIA  = precisa de você agora (rara, por isso pode gritar)
   LINHA  = está andando, sem urgência (é a maioria: tem de ser calma)
   NEUTRA = saiu da sua mão, não há o que fazer
   As lavadas (--ok, --danger) ficam para o que já teve desfecho: são
   história e não devem competir com o que ainda dá para virar.

   O contorno vem de box-shadow inset, não de border: assim a etiqueta
   não muda de tamanho ao lado das irmãs sem contorno.
   A cor do texto na cheia é --eco-bg, não #fff: no tema escuro o azul
   da marca clareia, e texto branco sobre ele ficaria ilegível.        */
.eco-badge--cheia{background:var(--eco-brand);color:var(--eco-bg)}
.eco-badge--linha{background:var(--eco-warn-wash);color:var(--eco-warn);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--eco-warn) 30%, transparent)}
.eco-badge--neutra{background:var(--eco-surface-2);color:var(--eco-muted);
  box-shadow:inset 0 0 0 1px var(--eco-line-2)}

/* Contador de novidades */
.eco-count{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 5px;border-radius:var(--eco-r-full);background:var(--eco-danger);color:var(--eco-bg);
  font-size:11px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}

/* ── 09 AVISOS ───────────────────────────────────────────────────────── */
.eco-alert{display:flex;gap:var(--eco-s3);padding:var(--eco-s3) var(--eco-s4);border-radius:var(--eco-r-sm);
  border:1px solid var(--eco-line);border-left-width:3px;background:var(--eco-surface);font-size:var(--eco-t-sm)}
.eco-alert__icon{flex:none;margin-top:1px}
.eco-alert__title{font-weight:700;margin:0 0 2px;font-size:var(--eco-t-sm)}
.eco-alert p{margin:0;color:var(--eco-ink-2)}
.eco-alert--info{border-left-color:var(--eco-brand);background:var(--eco-brand-wash)}
.eco-alert--info .eco-alert__icon{color:var(--eco-brand)}
.eco-alert--ok{border-left-color:var(--eco-ok);background:var(--eco-ok-wash)}
.eco-alert--ok .eco-alert__icon{color:var(--eco-ok)}
.eco-alert--warn{border-left-color:var(--eco-warn);background:var(--eco-warn-wash)}
.eco-alert--warn .eco-alert__icon{color:var(--eco-warn)}
.eco-alert--danger{border-left-color:var(--eco-danger);background:var(--eco-danger-wash)}
.eco-alert--danger .eco-alert__icon{color:var(--eco-danger)}

/* ── 10 TOAST ────────────────────────────────────────────────────────── */
.eco-toasts{position:fixed;bottom:var(--eco-s4);right:var(--eco-s4);z-index:80;
  display:flex;flex-direction:column;gap:var(--eco-s2);pointer-events:none;max-width:calc(100vw - 32px)}
.eco-toast{display:flex;align-items:center;gap:var(--eco-s2);background:var(--eco-ink);color:var(--eco-bg);
  padding:var(--eco-s3) var(--eco-s4);border-radius:var(--eco-r-sm);box-shadow:var(--eco-e3);
  font-size:var(--eco-t-sm);font-weight:500;pointer-events:auto;
  animation:eco-toast-in var(--eco-base) var(--eco-ease) both}
.eco-toast--ok .eco-toast__icon{color:#6ee7a0}
.eco-toast--danger .eco-toast__icon{color:#fca5a5}
.eco-toast.is-out{animation:eco-toast-out var(--eco-fast) var(--eco-ease) both}
@keyframes eco-toast-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes eco-toast-out{to{opacity:0;transform:translateY(4px) scale(.98)}}
@media(max-width:600px){.eco-toasts{left:var(--eco-s4);right:var(--eco-s4)}}

/* ── 11 NAVBAR ───────────────────────────────────────────────────────── */
.eco-navbar{position:sticky;top:0;z-index:60;height:var(--eco-navbar-h);background:var(--eco-nav-bg);
  border-bottom:1px solid var(--eco-nav-line);display:flex;align-items:center;gap:var(--eco-s4);
  padding:0 var(--eco-s4)}
.eco-navbar__brand{display:flex;align-items:center;gap:var(--eco-s2);text-decoration:none;color:inherit;flex:none}
/* proporcao real do arquivo (626x185): reserva o espaco e a barra para de pular */
.eco-navbar__brand img{height:26px;width:auto;aspect-ratio:626/185;display:block}
.eco-navbar__nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;
  scrollbar-width:none}
.eco-navbar__nav::-webkit-scrollbar{display:none}
.eco-navbar__link{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 var(--eco-s3);
  border-radius:var(--eco-r-sm);text-decoration:none;color:var(--eco-nav-ink-2);font-size:var(--eco-t-sm);
  font-weight:600;white-space:nowrap;transition:background var(--eco-fast),color var(--eco-fast)}
.eco-navbar__link:hover{background:var(--eco-nav-hover);color:var(--eco-nav-ink)}
/* O modulo aberto marca em DOURADO, nao no azul da marca: sobre o fundo
   escuro o azul institucional quase desaparece. */
.eco-navbar__link[aria-current="page"]{background:var(--eco-nav-ouro-wash);color:var(--eco-nav-ouro)}
.eco-navbar__end{display:flex;align-items:center;gap:var(--eco-s2);flex:none}
.eco-avatar{width:32px;height:32px;border-radius:50%;background:var(--eco-brand);color:var(--eco-bg);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--eco-t-xs);
  background-size:cover;background-position:center;flex:none;overflow:hidden}
.eco-avatar--lg{width:52px;height:52px;font-size:var(--eco-t-h3)}
.eco-avatar--sm{width:26px;height:26px;font-size:11px}

/* Menu de conta (aberto pelo avatar na barra) */
.eco-menu{position:relative}
.eco-menu__trigger{display:flex;align-items:center;gap:var(--eco-s2);background:none;border:0;
  cursor:pointer;padding:3px;border-radius:var(--eco-r-full);font:inherit;color:inherit;
  transition:background var(--eco-fast)}
.eco-menu__trigger:hover{background:var(--eco-nav-hover)}
.eco-menu__panel{position:absolute;top:calc(100% + 8px);right:0;min-width:230px;background:var(--eco-surface);
  border:1px solid var(--eco-line);border-radius:var(--eco-r-md);box-shadow:var(--eco-e3);
  padding:var(--eco-s2);z-index:70;display:none;animation:eco-menu-in var(--eco-fast) var(--eco-ease) both}
.eco-menu.is-open .eco-menu__panel{display:block}
.eco-menu__head{padding:var(--eco-s2) var(--eco-s3) var(--eco-s3);border-bottom:1px solid var(--eco-line);
  margin-bottom:var(--eco-s2)}
.eco-menu__name{font-weight:700;font-size:var(--eco-t-sm);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eco-menu__role{font-size:var(--eco-t-xs);color:var(--eco-muted);margin:1px 0 0}
.eco-menu__item{display:flex;align-items:center;gap:var(--eco-s2);width:100%;padding:9px var(--eco-s3);
  border:0;background:none;font:inherit;font-size:var(--eco-t-sm);color:var(--eco-ink-2);cursor:pointer;
  border-radius:var(--eco-r-sm);text-align:left;text-decoration:none;transition:background var(--eco-fast)}
.eco-menu__item:hover{background:var(--eco-surface-2);color:var(--eco-ink)}
.eco-menu__item--danger{color:var(--eco-danger)}
.eco-menu__item--danger:hover{background:var(--eco-danger-wash);color:var(--eco-danger)}
@keyframes eco-menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Contador sobre o link do módulo na barra */
.eco-navbar__link .eco-count{margin-left:2px}
.eco-navbar__txt--curto{display:none}

/* No celular a barra se parte em duas: a marca e a conta ficam no topo, e as
   ferramentas descem para a faixa do polegar, com o nome embaixo do icone.
   Antes eram quatro icones sem nome de 39x36px, com rolagem lateral escondida. */
@media(max-width:640px){
  .eco-navbar{padding:0 var(--eco-s3);gap:var(--eco-s2);justify-content:space-between}
  /* a marca tambem leva para o Inicio: precisa de altura de dedo */
  .eco-navbar__brand{min-height:44px}
  .eco-navbar__brand img{height:22px}

  .eco-navbar__nav{position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--eco-nav-bg);border-top:1px solid var(--eco-nav-line);
    box-shadow:0 -1px 3px rgba(15,35,55,.07);
    display:flex;gap:0;overflow:visible;flex:none;align-items:stretch;
    padding:5px var(--eco-s2) calc(5px + env(safe-area-inset-bottom,0px))}

  .eco-navbar__link{position:relative;flex:1 1 0;min-width:0;
    flex-direction:column;justify-content:center;gap:3px;
    height:auto;min-height:52px;padding:5px 3px;
    font-size:12px;font-weight:600;line-height:1.15;text-align:center;white-space:normal}
  .eco-navbar__link .eco-icon{width:22px;height:22px;flex:none}
  .eco-navbar__link.tem-curto .eco-navbar__txt--longo{display:none}
  .eco-navbar__link.tem-curto .eco-navbar__txt--curto{display:block}
  /* o contador de novidades passa a marcar o icone, nao a linha do texto */
  .eco-navbar__link .eco-count{position:absolute;top:2px;left:calc(50% + 5px);margin:0}

  /* a bolinha da conta, por onde se sai do sistema, tinha 38px */
  .eco-menu__trigger{min-width:44px;min-height:44px;justify-content:center;padding:0}
  .eco-menu__item{min-height:44px}

  /* o conteudo da pagina nao pode terminar embaixo da barra */
  body.eco,body.eco-com-navbar{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
}

/* Com sete ferramentas (Matriz e gestor) a faixa de baixo fica apertada.
   Medido com a fonte real: a 375px cada coluna sobra 45px para o texto,
   e "Contatos" ocupa 47px — estoura por dois pixels e invade a vizinha.
   Abaixo de 400px o rotulo encolhe um ponto, o que resolve ate 360px;
   e a quebra de palavra fica liberada para o caso extremo de 320px,
   onde e melhor o rotulo cair em duas linhas do que cobrir o vizinho. */
@media(max-width:400px){
  .eco-navbar__nav{padding-left:var(--eco-s1);padding-right:var(--eco-s1)}
  .eco-navbar__link{font-size:11px;padding:5px 2px}
  .eco-navbar__txt{overflow-wrap:anywhere}
}

/* No computador a mesma barra vira coluna da esquerda. Tres formatos do
   mesmo componente: faixa de baixo no celular, barra no topo no tablet,
   coluna lateral no monitor — sem duplicar navegacao. */
@media(min-width:1024px){
  .eco-navbar{position:fixed;top:0;left:0;bottom:0;width:236px;height:auto;z-index:60;
    flex-direction:column;align-items:stretch;gap:var(--eco-s4);
    padding:var(--eco-s5) var(--eco-s3);
    border-right:1px solid var(--eco-nav-line);border-bottom:0}
  .eco-navbar__brand{padding:0 var(--eco-s2);min-height:0}
  .eco-navbar__brand img{height:28px}
  .eco-navbar__nav{flex-direction:column;align-items:stretch;gap:2px;flex:1;overflow:visible}
  .eco-navbar__link{justify-content:flex-start;height:42px;padding:0 var(--eco-s3);
    font-size:var(--eco-t-sm);gap:var(--eco-s3)}
  .eco-navbar__link .eco-icon{width:19px;height:19px;flex:none}
  .eco-navbar__link .eco-count{margin-left:auto}
  .eco-navbar__end{margin-top:auto;padding:0 var(--eco-s2)}
  .eco-menu{width:100%}
  .eco-menu__trigger{width:100%;justify-content:flex-start;padding:var(--eco-s2)}
  .eco-menu__panel{left:0;right:auto;bottom:calc(100% + 8px);top:auto}
  /* Vale para toda página que tem a barra, não só as que usam .eco.
     Antes o Cotador, o Painel e a Nicole ficavam embaixo da coluna. */
  body.eco-com-navbar{padding-left:236px}
  .nav-reserva{display:none}
}

/* ── 12 TABELA ───────────────────────────────────────────────────────── */
.eco-tablewrap{overflow-x:auto;border:1px solid var(--eco-line);border-radius:var(--eco-r-md);
  background:var(--eco-surface)}
.eco-table{width:100%;border-collapse:collapse;font-size:var(--eco-t-sm)}
.eco-table th{text-align:left;font-size:var(--eco-t-xs);font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--eco-muted);padding:var(--eco-s3) var(--eco-s4);
  background:var(--eco-bg-sub);border-bottom:1px solid var(--eco-line);white-space:nowrap}
.eco-table td{padding:var(--eco-s3) var(--eco-s4);border-bottom:1px solid var(--eco-line);color:var(--eco-ink-2)}
.eco-table tbody tr:last-child td{border-bottom:0}
.eco-table tbody tr:hover td{background:var(--eco-bg-sub)}
.eco-table td.eco-num,.eco-table th.eco-num{text-align:right;font-variant-numeric:tabular-nums}

.eco-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--eco-s3);
  padding:var(--eco-s3) var(--eco-s4);border-top:1px solid var(--eco-line);font-size:var(--eco-t-sm);
  color:var(--eco-muted);flex-wrap:wrap}
.eco-pagination__pages{display:flex;gap:2px}

/* ── 13 MODAL ────────────────────────────────────────────────────────── */
.eco-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:var(--eco-s4)}
.eco-modal__backdrop{position:absolute;inset:0;background:rgba(15,35,55,.42);backdrop-filter:blur(2px);
  animation:eco-fade var(--eco-base) var(--eco-ease) both}
/* A janela NUNCA pode passar da tela. Sem o teto e a rolagem abaixo,
   um formulário alto crescia para fora do visível e o botão de salvar
   ficava inalcançável — a pessoa preenchia tudo e não conseguia gravar.
   Aconteceu em 14/08/2026, e valia para TODAS as janelas do sistema:
   só apareceu quando um formulário ficou alto o bastante.
   `dvh` em vez de `vh` porque no celular a barra do navegador entra e
   sai, e `vh` mede a tela como se ela nunca estivesse lá. */
.eco-modal__box{position:relative;background:var(--eco-surface);border-radius:var(--eco-r-md);
  box-shadow:var(--eco-e3);width:100%;max-width:460px;padding:var(--eco-s5);
  max-height:calc(100vh - var(--eco-s4) * 2);
  max-height:calc(100dvh - var(--eco-s4) * 2);
  overflow-y:auto;overscroll-behavior:contain;
  animation:eco-modal-in var(--eco-base) var(--eco-ease) both}
.eco-modal__box--larga{max-width:600px}
.eco-modal__title{font-size:var(--eco-t-h2);font-weight:700;margin:0 0 var(--eco-s2)}
/* O rodapé gruda embaixo: com formulário longo, salvar deixa de exigir
   uma viagem de rolagem até o fim. */
.eco-modal__foot{display:flex;justify-content:flex-end;gap:var(--eco-s2);
  position:sticky;bottom:calc(var(--eco-s5) * -1);background:var(--eco-surface);
  margin:var(--eco-s5) calc(var(--eco-s5) * -1) calc(var(--eco-s5) * -1);
  padding:var(--eco-s3) var(--eco-s5);border-top:1px solid var(--eco-line)}
@keyframes eco-fade{from{opacity:0}to{opacity:1}}
@keyframes eco-modal-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* ── 14 CARREGAMENTO ─────────────────────────────────────────────────── */
.eco-spinner{width:18px;height:18px;border:2px solid var(--eco-line-2);border-top-color:var(--eco-brand);
  border-radius:50%;animation:eco-spin .6s linear infinite;display:inline-block}
.eco-spinner--lg{width:30px;height:30px;border-width:3px}

.eco-skel{background:linear-gradient(90deg,var(--eco-surface-2) 25%,var(--eco-line) 37%,var(--eco-surface-2) 63%);
  background-size:400% 100%;animation:eco-shimmer 1.3s ease-in-out infinite;border-radius:var(--eco-r-sm)}
.eco-skel--text{height:12px;margin:6px 0}
.eco-skel--title{height:20px;width:45%;margin:0 0 var(--eco-s3)}
.eco-skel--circle{border-radius:50%}
.eco-skel--card{height:96px;border-radius:var(--eco-r-md)}
@keyframes eco-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* Estado vazio */
.eco-empty{text-align:center;padding:var(--eco-s7) var(--eco-s4);color:var(--eco-muted)}
.eco-empty__icon{color:var(--eco-line-2);margin-bottom:var(--eco-s3)}
.eco-empty__title{font-size:var(--eco-t-h3);font-weight:700;color:var(--eco-ink);margin:0 0 var(--eco-s1)}
.eco-empty p{margin:0 auto;max-width:42ch;font-size:var(--eco-t-sm)}

/* Barra de progresso */
.eco-progress{height:6px;background:var(--eco-surface-2);border-radius:var(--eco-r-full);overflow:hidden}
.eco-progress__bar{height:100%;background:var(--eco-brand);border-radius:var(--eco-r-full);
  transition:width var(--eco-slow) var(--eco-ease)}

/* ── 15 ÍCONES ───────────────────────────────────────────────────────── */
.eco-icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.eco-icon--sm{width:16px;height:16px}
.eco-icon--lg{width:24px;height:24px}
.eco-icon--xl{width:40px;height:40px;stroke-width:1.4}

/* ── Animações de entrada (uso pontual) ──────────────────────────────── */
.eco-in{animation:eco-in var(--eco-base) var(--eco-ease) both}
.eco-in-up{animation:eco-in-up var(--eco-slow) var(--eco-ease) both}
@keyframes eco-in{from{opacity:0}to{opacity:1}}
@keyframes eco-in-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}