/* =========================================================
   G8 Affiliates — assets/style.css (COMPLETO / IHUB-like)
   - Fonte: ARIAL em TUDO (sem matar ícones)
   - Login/Registro bonitos e proporcionais
   - Título roxo (G8 Affiliates) em Arial bold
   ========================================================= */

   :root{
    --bg:#ffffff;
    --card:#ffffff;
  
    --text:#0b1220;
    --muted: rgba(15,23,42,.55);
  
    --stroke: rgba(15,23,42,.08);
    --shadow: 0 18px 40px rgba(15,23,42,.14);
  
    --input-bg:#e8f0fe;
    --input-stroke: rgba(2,6,23,.12);
  
    --blue:#005791;
    --blue2:#004a7a;
    --link:#00a7ff;
  
    --purple:#7C5CFF;
    --purple2:#5B3DF5;
  
    --r16:16px;
    --r12:12px;
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  
  /* ===== ARIAL GLOBAL (SEM usar *{font-family} para não matar ícones) ===== */
  body{
    margin:0;
    * { font-family: 'Inter', sans-serif; }
    font-size:14px;
    color:var(--text);
  
    background:
      radial-gradient(1100px 520px at 50% 86%, rgba(124,92,255,.14), transparent 60%),
      linear-gradient(var(--bg), var(--bg));
  
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  button, input, select, textarea{
    * { font-family: 'Inter', sans-serif; }
  }
  
  a{ color:inherit; text-decoration:none; }
  a:hover{ text-decoration:underline; }
  
  i{ font-style: normal; } /* seguro p/ ícones e não atrapalha Flaticon */
  
  /* =========================================================
     AUTH LAYOUT (LOGIN/REGISTRO)
     ========================================================= */
  .auth-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:26px 14px;
  }
  
  .auth-wrap{
    width:100%;
    max-width:520px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  
  /* TOPO (G8 Affiliates / subtítulo) */
  .auth-brand{
    margin: 0 auto 18px;
    text-align:center;
  }
  
  /* Nome roxo (Arial) estilo “logo” */
  .auth-brand .brand-title{
    * { font-family: 'Inter', sans-serif; }
    font-size:40px;
    font-weight:900;
    letter-spacing:-1px;
    line-height:1;
    margin:0;
    color: var(--purple);
  }
  
  /* Subtítulo estilo IHUB */
  .auth-brand .brand-subtitle{
    margin-top:6px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.2px;
    color:var(--muted);
  }
  
  /* =========================================================
     CARD
     ========================================================= */
  .auth-card{
    width:min(420px, 100%);
    background:var(--card);
    border:1px solid var(--stroke);
    border-radius:var(--r16);
    box-shadow:var(--shadow);
    padding:22px 22px 18px;
    text-align:left;
  }
  
  .auth-card h2{
    margin:0 0 16px;
    font-size:22px;
    font-weight:900;
    letter-spacing:-.25px;
  }
  
  /* =========================================================
     FORM — bonito mesmo sem classes
     ========================================================= */
  .auth-card form{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:0;
  }
  
  /* Labels */
  .auth-card label{
    display:block;
    font-size:12px;
    font-weight:800;
    color: rgba(15,23,42,.70);
    margin:0 0 6px;
  }
  
  /* Linha label + link (esqueci) */
  .label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:6px;
  }
  
  .auth-card a.forgot,
  .auth-card .forgot{
    font-size:12px;
    font-weight:900;
    color:var(--link);
    white-space:nowrap;
  }
  
  /* Inputs (pega com e sem class="input") */
  .auth-card input[type="text"],
  .auth-card input[type="email"],
  .auth-card input[type="password"],
  .auth-card input[type="tel"],
  .auth-card input[type="number"],
  .auth-card .input{
    width:100%;
    height:44px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid var(--input-stroke);
    background:var(--input-bg);
    outline:none;
    font-size:14px;
    font-weight:700;
    transition:.15s ease;
  }
  
  .auth-card input::placeholder{
    color: rgba(15,23,42,.45);
    font-size:14px;
    font-weight:700;
  }
  
  .auth-card input:focus{
    background:#eef5ff;
    border-color: rgba(124,92,255,.55);
    box-shadow: 0 0 0 4px rgba(124,92,255,.14);
  }
  
  /* Botão (pega button e submit) */
  .auth-card button,
  .auth-card input[type="submit"],
  .auth-card .auth-btn,
  .auth-card .btn{
    width:100%;
    height:46px;
    border-radius:12px;
    border:0;
    cursor:pointer;
    background:var(--blue);
    color:#fff;
    font-weight:900;
    font-size:14px;
    letter-spacing:.2px;
    margin-top:6px;
    box-shadow: 0 16px 28px rgba(0,87,145,.20);
    transition:.15s ease;
  }
  
  .auth-card button:hover,
  .auth-card input[type="submit"]:hover,
  .auth-card .auth-btn:hover,
  .auth-card .btn:hover{
    background:var(--blue2);
  }
  
  /* Rodapé dentro do card */
  .auth-foot{
    text-align:center;
    color: rgba(15,23,42,.60);
    font-size:13px;
    font-weight:700;
    margin-top:2px;
  }
  
  .auth-foot a{
    color:var(--link);
    font-weight:900;
  }
  
  /* Footer geral */
  .auth-footer{
    margin-top:12px;
    text-align:center;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
  }
  
  /* =========================================================
     ALERTAS
     ========================================================= */
  .alert{
    margin:0 0 12px;
    padding:10px 12px;
    border-radius:12px;
    font-weight:800;
    border:1px solid transparent;
  }
  .alert.error{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.18); color:#b91c1c; }
  .alert.success{ background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.18); color:#15803d; }
  .alert.info{ background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.18); color:#1d4ed8; }
  
  /* =========================================================
     RESPONSIVO
     ========================================================= */
  @media (max-width:520px){
    .auth-brand .brand-title{ font-size:34px; }
    .auth-card{ padding:18px 16px 16px; }
  }
  
  /* =========================================================
     DASHBOARD (base mínima — não interfere nos ícones)
     ========================================================= */
  .g8-app{ display:flex; min-height:100vh; background:#f6f9ff; }
  .g8-sidebar{ width:270px; background:#fff; border-right:1px solid rgba(15,23,42,.06); }
  .g8-main{ flex:1; padding:22px 24px 34px; }
  /* tira o fundo branco do container do ícone */
.nav .ic{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;

  background: transparent !important;
  border: 0 !important;
}

/* mantém o svg certinho */
.nav .ic img{
  width: 18px;
  height: 18px;
  display:block;
  object-fit:contain;
}

/* se tiver algum “active” mexendo no icone, remove também */
.nav a.active .ic{
  background: transparent !important;
  border: 0 !important;
}