/* Cabeçalho simples */
.app-header{
  background:#0d6efd;
  color:#fff;
  padding:.6rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.app-header .brand{font-weight:800;font-size:1.1rem;letter-spacing:.3px}
.app-header .user small{opacity:.9}

/* Faixa cinza do aviso */
.banner{
  background:#6c6c6c;
  color:#fff;
  padding:.6rem 1rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:.6rem;
}

/* Grid de ícones */
.tiles{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(210px,1fr));
  gap:26px;
  margin-top:18px;
}
.tile{
  background:#eee;
  border:3px solid #000;
  border-radius:4px;
  padding:18px 12px;
  text-align:center;
  transition:transform .08s ease, box-shadow .08s ease, background .08s ease;
}
.tile:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.15); background:#f6f6f6; }
.tile a{ display:block; color:#000; text-decoration:none; }
.tile .ico{ font-size:64px; display:block; margin-bottom:6px; color:#000; }
.tile .label{ font-size:20px; font-weight:700; line-height:1.15; }

/* Linha superior (Início) */
.home-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.home-top .home-icon{ font-size:42px; color:#000; border:3px solid #000; padding:4px 8px; border-radius:4px; }
@media (max-width:640px){
  .tile .label{ font-size:18px; }
}