/* Marques — Shell compartilhado (header + menu + gaveta) v1, 28/09/2026.
   Servido por hub.autopecasmarques.com.br/shell.css pra qualquer app do ecossistema incluir. */

.shell-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 24px; background: #0a0a0a; color: #fff;
  border-bottom: 1px solid rgba(255,192,0,0.35);
  position: sticky; top: 0; z-index: 30; height: 64px; flex-shrink: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.shell-header .brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.shell-header .brand-logo { width: 140px; height: 40px; flex: 0 0 140px; }
.shell-header .brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shell-header .brand-sep { width: 1px; height: 24px; background: rgba(255,255,255,0.14); flex: 0 0 auto; }
.shell-header h1 { font-size: 15.5px; font-weight: 600; margin: 0; color: #fff; letter-spacing: 0.1px; white-space: nowrap; }
.shell-papel-badge { font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; color: #9aa1ad; white-space: nowrap; }
.shell-papel-badge.admin { color: #ffc000; }
.shell-header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.shell-user-email { font-size: 12.5px; color: #9aa1ad; white-space: nowrap; }
.shell-menu { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.shell-btn {
  background: none; border: 1px solid rgba(255,255,255,0.2); color: #cfd6e0;
  border-radius: 6px; padding: 6px 12px; font-size: 12.5px; font-family: inherit; cursor: pointer;
  white-space: nowrap;
}
.shell-btn:hover { border-color: rgba(255,255,255,0.4); color: #fff; }

.shell-btn svg { display: block; flex-shrink: 0; }
.shell-menu .shell-btn { display: flex; align-items: center; gap: 6px; }

@media (max-width: 900px) {
  .shell-papel-badge { display: none; }
}
@media (max-width: 760px) {
  .shell-user-email { display: none; }
  .shell-header { padding: 0 14px; gap: 12px; }
}

/* ---------- Tela de login compartilhada ---------- */
.shell-login {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; text-align: center; padding: 24px; gap: 20px;
  background: radial-gradient(circle at 50% 15%, rgba(255,192,0,0.10), transparent 55%), #0a0a0a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.shell-login-logo { width: 220px; }
.shell-login h1 { font-size: 21px; margin: 0; color: #fff; font-weight: 600; letter-spacing: 0.3px; }
.shell-login-rule { width: 36px; height: 3px; border-radius: 2px; background: #ffc000; }
.shell-login-sub { color: #9aa1ad; max-width: 400px; margin: -6px 0 0; font-size: 13.5px; line-height: 1.5; }
.shell-btn-google {
  display: flex; align-items: center; gap: 12px; background: #fff; color: #3c4043; border: none;
  border-radius: 8px; padding: 13px 26px; font-size: 14.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.35); transition: box-shadow .15s ease, transform .15s ease;
}
.shell-btn-google:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.45); transform: translateY(-1px); }
.shell-btn-google svg { flex-shrink: 0; }

/* ---------- Gaveta (drawer) compartilhada ---------- */
.shell-gaveta-overlay {
  display: none; position: fixed; inset: 0; background: rgba(9,14,26,0.45); z-index: 90;
}
.shell-gaveta-overlay.aberta { display: block; }
.shell-gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw);
  background: #fff; z-index: 91; box-shadow: -8px 0 24px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .18s ease;
}
.shell-gaveta-overlay.aberta .shell-gaveta { transform: translateX(0); }
.shell-gaveta-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid #e4e7ec; flex-shrink: 0;
}
.shell-gaveta-cabecalho h2 { font-size: 15.5px; margin: 0; color: #172b4d; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.shell-gaveta-fechar {
  background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: #6b7688; padding: 4px 8px;
}
.shell-gaveta-fechar:hover { color: #172b4d; }
.shell-gaveta-corpo {
  padding: 18px 20px; overflow-y: auto; flex: 1; color: #172b4d;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.shell-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.shell-tabela th { text-align: left; padding: 8px 10px; font-size: 10.5px; color: #6b7688; text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid #e4e7ec; }
.shell-tabela td { padding: 8px 10px; border-bottom: 1px solid #e4e7ec; vertical-align: top; }
.shell-badge-papel { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #f0f1f4; color: #5e6c84; text-transform: uppercase; display: inline-block; }
.shell-badge-papel.admin { background: rgba(255,192,0,0.16); color: #8a6600; }