:root {
  --bg: #010364;
  --text: #0c091a;
  --title: #ffff;
  --shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 10px 18px rgba(0, 0, 0, 0.14);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

body {
  background-image: url('capa.png');
  background-size: cover;
  background-attachment: fixed;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
}

.top {
  text-align: center;
  padding: 24px 16px 8px;
  color: var(--title);
}

.title {
  margin: 0;
  font-size: 30px;
}

.subtitle {
  margin: 8px 0 0;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 16px;
}

/* Card genérico (reaproveita pra administrativo e filhos) */
.card {
  background-image: linear-gradient(0deg, rgba(255,255,255,0.65), rgba(255,255,255,0.65));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 0;
  width: min(260px, 90vw);
  text-align: center;
  padding: 20px;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.card:focus-visible {
  outline: 3px solid rgba(14, 24, 168, 0.35);
  outline-offset: 4px;
}

/* Administrativo separado visualmente */
.card--adm {
  margin: 20px auto 10px;
  display: block;
}

#admCard {
 background-color: #ffff;
}


.hint {
  margin: 10px 0 0;
  font-size: 0.9rem;
  opacity: 0.75;
}

.logo {
  max-width: 50px;
  margin-bottom: 16px;
}

#rh {
  background-color: #F6C9C9;
}

#ti {
  background-color:#F7E6B5;
}

#financeiro {
  background-color: #CBEFCE;
}

#compras {
  background-color: #D6D6D6;
}


.divider {
  display: block;
  text-align: center;
  margin: 48px auto 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  opacity: 0.9;
  font-size: 20px;
}


.container.outros {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}


.card--outros { min-height: 130px; }
.card h2 { margin: 0 0 10px;}
.card p { margin: 0; opacity: .85; }


.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}



#comercial {
    background-color: #C9DDF6;
  }

#marketing {
    background-color: #F2C7E7;
  }

#diretoria {
    background-color: #C9F1DF;
  }

#engenharia {
    background-color: #F2D3B8;
  }

#producao {
    background-color: #E6D6F6;
  }

#qualidade {
    background-color: #F6C9D0;
  }

.logo {
  max-width: 50px;
  margin-bottom: 16px;

}

.is-hidden {
  display: none;
}


.top-actions {
display: flex;
  justify-content: flex-start; /* Alinha o conteúdo à direita */
  margin-right: 2px;
}


.btnLogout, .btnAdm{
      background:#0e256e; color:#ffffff; border:0; border-radius:10px;
      padding:15px; cursor:pointer; font-weight:600; margin-right: 15px; 
    }
    .btn:hover{background: #6576ad;}
    .brand-logo{width:34px; object-fit:cover; background:#fff}
    .page{max-width:1080px; margin:18px auto; padding:0 14px 40px}
    .breadcrumb{margin:0 0 10px; color:#e2e8f0; font-size:13px;}
    .card{
      background:var(--card);
      border:1px solid rgba(255,255,255,.35);
      border-radius:16px;
      padding:16px;
      box-shadow:0 16px 40px rgba(0,0,0,.25);
      margin-bottom:14px;
    }