/* ═══════════════════════════════════════════════════════════════════════════════
   VALORE — COMPONENTES (arquivo compartilhado entre TODOS os portais)

   Cópia mestre: Projetos Valore/_padrao_valore/valore-ui.css
   Carregar DEPOIS de valore-tokens.css e ANTES de valore-sidebar.css.

   O que este arquivo faz, em duas partes:

   1) CORREÇÕES — cores azuis que ficaram escritas à mão dentro dos
      componentes do Auditoria e que os tokens sozinhos não alcançam.
      Sem isto, sobra o azul-índigo #1d4ed8 antigo em alguns cantos.

   2) COMPONENTES — o cartão de indicador (KPI), que não existe em nenhum
      portal hoje, e a versão padrão de painel, tabela, selo e botão, escrita
      sobre os tokens. Os seletores aparecem em grupo (ex.: `.tabela-container,
      .vl-panel, .card`) porque os portais nasceram com vocabulários de classe
      diferentes — o arquivo é o mesmo em todos, só reconhece os vários nomes.

   NÃO mexe em: logo, ícone, marca d'água, comportamento de JavaScript.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1) CORREÇÕES DE AZUIS ESCRITOS À MÃO
   ─────────────────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-entrar { box-shadow: 0 8px 16px rgba(26, 111, 204, .16); }

.btn-outline-primary { border-color: var(--vl-blue-line); }

.alert-info { border-color: var(--vl-blue-line); }

/* Selos de perfil: o azul vira o da marca e o antigo ciano-petróleo (#0891b2)
   vira o ciano oficial. */
.badge-perfil-administrador { background: var(--vl-blue)  !important; }
.badge-perfil-auditor       { background: var(--vl-cyan)  !important; }
.badge-perfil-consulta      { background: var(--vl-text-3) !important; }

/* ───────────────────────────────────────────────────────────────────────────
   2a) CARTÃO DE INDICADOR (KPI) — componente novo

   É o único componente do padrão que não existia em nenhum portal. Use no
   topo das telas de dashboard, em grade de 4.

       <div class="vl-kpis">
         <div class="vl-kpi">
           <div class="vl-kpi__rotulo"><i class="bi bi-building"></i>Empresas ativas</div>
           <div class="vl-kpi__valor">48</div>
           <div class="vl-kpi__nota"><span class="vl-sobe">+3</span> no mês</div>
         </div>
       </div>
   ─────────────────────────────────────────────────────────────────────────── */
.vl-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.vl-kpi {
  background: var(--vl-surface);
  border: 1px solid var(--vl-border);
  border-radius: var(--vl-radius);
  box-shadow: var(--vl-shadow-sm);
  padding: 16px 17px;
}
.vl-kpi__rotulo {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--vl-text-3);
}
.vl-kpi__rotulo > i,
.vl-kpi__rotulo > svg { width: 14px; height: 14px; font-size: 14px; color: var(--vl-blue); flex-shrink: 0; }
.vl-kpi__valor {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--vl-text);
  font-variant-numeric: tabular-nums;
}
.vl-kpi__nota { margin-top: 6px; font-size: 11.5px; font-weight: 500; color: var(--vl-text-3); }
.vl-sobe { color: var(--vl-success); font-weight: 700; }
.vl-desce { color: var(--vl-danger);  font-weight: 700; }

/* ───────────────────────────────────────────────────────────────────────────
   2b) PAINEL / CARTÃO
   ─────────────────────────────────────────────────────────────────────────── */
.vl-panel,
.tabela-container,
.form-card,
.card,
.vl-card {
  background: var(--vl-surface);
  border: 1px solid var(--vl-border);
  border-radius: var(--vl-radius-lg);
  box-shadow: var(--vl-shadow-sm);
}
.vl-panel, .tabela-container { overflow: hidden; }

.vl-panel__head,
.tabela-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  background: var(--vl-surface);
  border-bottom: 1px solid var(--vl-border);
}
.vl-panel__titulo,
.tabela-titulo {
  margin: 0;
  color: var(--vl-text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ───────────────────────────────────────────────────────────────────────────
   2c) TABELA
   ─────────────────────────────────────────────────────────────────────────── */
.vl-table,
.table { margin: 0; width: 100%; border-collapse: collapse; }
.vl-table thead th,
.table thead th {
  text-align: left;
  padding: 11px 16px;
  background: var(--vl-surface-2);
  border-bottom: 1px solid var(--vl-border);
  color: var(--vl-text-3);
  font-size: 10.8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vl-table tbody td,
.table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--vl-border);
  color: var(--vl-text-2);
  font-size: 13px;
}
.vl-table tbody tr:last-child td,
.table tbody tr:last-child td { border-bottom: 0; }
/* Coluna de número: alinhada à direita e com dígitos de mesma largura, para
   os valores baterem coluna a coluna. */
.vl-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--vl-text); }
.vl-chave { color: var(--vl-text); font-weight: 650; }
/* Tabela larga rola dentro do próprio painel — a página nunca rola de lado. */
.vl-table-wrap,
.table-responsive { overflow-x: auto; }

/* ───────────────────────────────────────────────────────────────────────────
   2d) SELOS DE SITUAÇÃO
   ─────────────────────────────────────────────────────────────────────────── */
.vl-selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
  white-space: nowrap;
}
.vl-selo--ok     { background: var(--vl-success-bg); color: var(--vl-success-ink); }
.vl-selo--erro   { background: var(--vl-danger-bg);  color: var(--vl-danger-ink); }
.vl-selo--atencao{ background: var(--vl-warning-bg); color: var(--vl-warning-ink); }
.vl-selo--info   { background: var(--vl-blue-soft);  color: var(--vl-blue); }
.vl-selo--ciano  { background: #E0F7FC;              color: #0E7C90; }

/* ───────────────────────────────────────────────────────────────────────────
   2e) TELA DE CARREGAMENTO

   Era azul-marinho (#0f1729) e passa a ser o mesmo preto da sidebar. A logo
   dentro dela não muda — só o fundo.
   ─────────────────────────────────────────────────────────────────────────── */
#app-loading,
.vl-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vl-dark-grad);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3) MODELO DE LOGIN VALORE

   Um só modelo para todos os portais: fundo preto com degradê, marca d'água ao
   centro, e um card com o formulário à esquerda e uma ilustração à direita.
   A ILUSTRAÇÃO É A ÚNICA COISA QUE MUDA DE PORTAL PARA PORTAL — ela mora no CSS
   do próprio portal, não aqui.

   Marcação mínima:

     <main class="vl-login">
       <img class="vl-login__marca" src="…marca-dagua.png" alt="" aria-hidden="true">
       <div class="vl-login__wrapper">
         <section class="vl-login__card">
           <div class="vl-login__col">
             <img class="vl-login__logo" src="…logo.png" alt="Grupo Valore">
             <h1 class="vl-login__h1">…</h1>
             <p  class="vl-login__sub">…</p>
             <!-- o formulário do portal entra aqui, com as classes que ele já usa -->
             <div class="vl-login__selos">
               <span class="vl-login__selo">…</span>
             </div>
           </div>
           <div class="vl-login__ilustra"> … ilustração do portal … </div>
         </section>
       </div>
     </main>

   Os campos, rótulos e botões são estilizados POR ELEMENTO dentro de
   `.vl-login__col`, de propósito: assim o formulário que cada portal já tem
   (com as classes dele, seus ids e sua lógica) recebe o visual do padrão sem
   precisar ser reescrito.
   ═══════════════════════════════════════════════════════════════════════════════ */

.vl-login {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;   /* com margin:auto no wrapper, centra quando sobra
                                espaço sem esconder o topo em telas baixas */
  justify-content: center;
  padding: 32px 16px;
  overflow-x: hidden;        /* só o eixo X: a marca d'água é larga de propósito */
  color: #fff;
  background-color: var(--vl-dark-bottom, #000);
  background-image: linear-gradient(180deg, #0A0A0A 0%, #0A0A0A 44%, #0B1A27 78%, #0E2942 100%);
  background-attachment: fixed;
  font-family: var(--vl-font);
}
.vl-login__marca {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw; max-width: 1100px;
  opacity: .13;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.vl-login__wrapper { width: 100%; max-width: 1080px; margin: auto; position: relative; z-index: 1; }

.vl-login__card {
  display: flex;
  align-items: center;
  gap: 48px;
  width: 100%;
  min-height: 580px;
  padding: 56px 48px;
  border: 1px solid #262626;
  border-radius: 24px;
  background: var(--vl-login-card, #0F0F0F);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  position: relative;
  z-index: 1;
}

.vl-login__col { flex: 1; min-width: 260px; max-width: 380px; display: flex; flex-direction: column; z-index: 2; }
.vl-login__logo { display: block; width: 118px; margin-bottom: 20px; opacity: .9; }
.vl-login__h1 {
  margin: 0 0 6px;
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}
.vl-login__sub { margin: 0 0 28px; font-size: .85rem; line-height: 1.55; color: var(--vl-text-3, #8AA3C4); }

/* ── formulário: por elemento, para servir a qualquer marcação ── */
.vl-login__col form { display: flex; flex-direction: column; gap: 12px; }
.vl-login__col label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: .75rem; font-weight: 500; letter-spacing: .02em;
  color: var(--vl-text-3, #8AA3C4);
}
.vl-login__col input[type="text"],
.vl-login__col input[type="email"],
.vl-login__col input[type="password"],
.vl-login__col input:not([type]) {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  background: #0D0D0D;
  color: #fff;
  font-family: inherit;
  font-size: .9rem;
  outline: none;
  transition: border-color var(--vl-transition), box-shadow var(--vl-transition);
}
.vl-login__col input::placeholder { color: #55606E; }
.vl-login__col input:focus {
  border-color: var(--vl-blue);
  box-shadow: 0 0 0 3px rgba(26, 111, 204, .18);
}
/* campo de código de 6 dígitos (Radar e Consultoria) */
.vl-login__col .code-input,
.vl-login__col #codigo {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .35em;
}

/* botão principal — cobre o vocabulário dos portais */
.vl-login__col button[type="submit"],
.vl-login__col .btn-principal,
.vl-login__col .primary,
.vl-login__btn {
  width: 100%;
  margin-top: 4px;
  padding: 13px;
  border: 0;
  border-radius: 10px;
  background: var(--vl-blue);
  color: #fff;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(26, 111, 204, .35);
  transition: transform var(--vl-transition), box-shadow var(--vl-transition), filter var(--vl-transition);
}
.vl-login__col button[type="submit"]:hover,
.vl-login__col .primary:hover,
.vl-login__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26, 111, 204, .5); filter: brightness(1.1); }
.vl-login__col button[type="submit"]:disabled { opacity: .55; cursor: default; transform: none; }

/* botões secundários (corrigir e-mail, entrar pelo Hub) */
.vl-login__col .text-button,
.vl-login__col .hub-entry,
.vl-login__col .staff-entry {
  background: transparent;
  border: 1px solid #2B2B2B;
  border-radius: 10px;
  color: var(--vl-cyan);
  font-family: inherit;
  font-size: .78rem;
  cursor: pointer;
  text-decoration: none;
}
.vl-login__col .hub-entry,
.vl-login__col .staff-entry { display: flex; align-items: center; gap: 12px; padding: 12px; text-align: left; }
.vl-login__col .hub-entry small,
.vl-login__col .staff-entry small { display: block; color: var(--vl-text-3, #8AA3C4); font-size: 11px; }
.vl-login__col .mini-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: rgba(26,111,204,.16); color: var(--vl-cyan); }

/* separador "ou entre com…" / "acesso protegido" */
.vl-login__col .divider,
.vl-login__div { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--vl-text-3, #8AA3C4); font-size: .75rem; }
.vl-login__col .divider::before, .vl-login__col .divider::after,
.vl-login__div::before, .vl-login__div::after { content: ""; flex: 1; height: 1px; background: #2B2B2B; }
.vl-login__col .divider span { background: none; padding: 0; }

/* avisos */
.vl-login__col .aviso-erro,
.vl-login__col .login-message { font-size: .72rem; color: #FF8A8A; }
.vl-login__col .aviso-otp,
.vl-login__col .dev-code,
.vl-login__col .codigo-desenvolvimento {
  font-size: .75rem; line-height: 1.5; color: var(--vl-text-3, #8AA3C4);
  background: rgba(26,111,204,.10); border: 1px solid rgba(26,111,204,.28);
  border-radius: 8px; padding: 9px 12px;
}
.vl-login__col .login-alt,
.vl-login__alt { margin: 15px 0 0; text-align: center; font-size: .72rem; line-height: 1.55; color: var(--vl-text-3, #8AA3C4); }
.vl-login__col .login-alt a,
.vl-login__alt a { color: var(--vl-cyan); font-weight: 650; text-decoration: none; }
.vl-login__col footer { margin-top: 24px; text-align: center; font-size: .66rem; color: var(--vl-text-3, #8AA3C4); }
.vl-login__col footer a { color: var(--vl-cyan); font-weight: 650; text-decoration: none; }

/* selos de rodapé */
.vl-login__selos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.vl-login__selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px; border: 1px solid #2B2B2B;
  font-size: .7rem; font-weight: 500; color: var(--vl-cyan); opacity: .72;
}
.vl-login__selo::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--vl-cyan); flex-shrink: 0; }

/* ── slot da ilustração ── */
.vl-login__ilustra {
  flex: 1; min-width: 340px; min-height: 440px;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
}

/* ── responsivo ── */
@media (max-height: 780px) {
  .vl-login { padding: 16px 12px; }
  .vl-login__card { min-height: 0; padding: 32px 40px; gap: 36px; }
  .vl-login__ilustra { min-height: 430px; }
}
@media (max-width: 900px) {
  .vl-login__card { flex-direction: column; padding: 48px 32px; min-height: auto; gap: 40px; }
  .vl-login__col { max-width: 100%; }
  .vl-login__ilustra { min-width: 0; min-height: auto; }
  .vl-login__marca { width: 130vw; }
}
@media (max-width: 600px) {
  .vl-login__card { padding: 36px 20px; border-radius: 16px; }
  .vl-login__marca { width: 180vw; }
}