:root {
  /* Palette */
  --color-navy: #043546;
  --color-teal: #02937A;
  --color-magenta: #BA0E73;
  --color-danger: #C62828;
  --color-dangerHover: #A01F1F;
  --color-hotPink: #F5009B;
  --color-amber: #FFA71A;
  --color-brightTeal: #00D282;
  --color-nearBlack: #01161E;
  --color-dark: #1A1A1A;
  --color-darkGray: #333333;
  --color-mediumGray: #4D4D4D;
  --color-slate: #69788C;
  --color-lightGray: #E6E6E6;
  --color-offWhite: #F2F2F2;
  --color-white: #FFFFFF;
  --color-petrol: #185243;
  --color-petrolDeep: #0F392E;
  --color-slate100: #F1F5F9;
  --color-slate200: #E2E8F0;
  --color-slate500: #64748B;
  --color-slate600: #475569;
  --color-criticalTint: #FEE2E2;
  --color-criticalStrong: #991B1B;
  --color-warningTint: #FEF3C7;
  --color-warningStrong: #92400E;
  --color-successTint: #DCFCE7;
  --color-successStrong: #166534;

  /* Semantic */
  --color-bg-primary: var(--color-white);
  --color-bg-subtle: var(--color-offWhite);
  --color-bg-dark: var(--color-nearBlack);
  --color-text-primary: var(--color-dark);
  --color-text-secondary: var(--color-darkGray);
  --color-text-muted: var(--color-slate);
  --color-text-inverse: var(--color-white);
  --color-border-subtle: var(--color-lightGray);

  /* Action: petrol primário (magenta NÃO é mais ação) */
  --color-action-primary: var(--color-petrol);
  --color-action-secondary: var(--color-navy);
  --color-action-accent: var(--color-teal);

  --color-status-success: var(--color-brightTeal);
  --color-status-warning: var(--color-amber);
  --color-status-danger: var(--color-danger);
  --color-status-info: var(--color-navy);
  --color-focus-ring: var(--color-teal);

  /* Typography */
  --font-family-base: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-ui: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-kpi: 3rem;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.15;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.75;

  --letter-spacing-wide: 0.04em;

  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(4, 53, 70, 0.06);
  --shadow-sm: 0 2px 8px rgba(4, 53, 70, 0.08);
  --shadow-md: 0 4px 16px rgba(4, 53, 70, 0.10);
  --shadow-lg: 0 8px 32px rgba(4, 53, 70, 0.12);
  --shadow-focus: 0 0 0 3px rgba(2, 147, 122, 0.25);

  /* Layout */
  --layout-contentMaxWidth: 1280px;
  --touch-target: 44px;
  --z-index-topbar: 50;
  --z-index-sidebar: 100;
  --z-index-modal: 200;
  --z-index-toast: 300;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  line-height: var(--line-height-normal);
}

body {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: 100%;
  max-width: var(--layout-contentMaxWidth);
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

/* Button (density default) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  min-height: 40px;
  padding: 0 var(--spacing-5);
  border-radius: var(--radius-md);
  transition: box-shadow 0.2s ease, transform 0.1s ease;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
}

.btn:hover {
  box-shadow: var(--shadow-sm);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn-primary {
  background-color: var(--color-action-primary);
  color: var(--color-text-inverse);
}

.btn-secondary {
  background-color: var(--color-action-secondary);
  color: var(--color-text-inverse);
}

.btn-outline {
  background-color: var(--color-bg-primary);
  color: var(--color-action-secondary);
  border-color: var(--color-action-secondary);
}

.btn-large {
  min-height: 48px;
  padding: 0 var(--spacing-4);
  font-size: var(--font-size-base);
}

.btn-small {
  min-height: 32px;
  padding: 0 var(--spacing-3);
  font-size: var(--font-size-sm);
}

/* Header / Nav */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-index-topbar);
  background-color: var(--color-bg-primary);
  box-shadow: var(--shadow-xs);
  padding: var(--spacing-4) 0;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xl);
  color: var(--color-action-secondary);
}

.nav-links {
  display: flex;
  gap: var(--spacing-10);
  list-style: none;
}

.nav-links a {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--color-action-primary);
}

/* Hero */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--spacing-12) 0;
  background: linear-gradient(135deg, var(--color-bg-subtle) 0%, var(--color-bg-primary) 100%);
}

.hero-content {
  flex: 1;
  max-width: 600px;
}

.hero-title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-6);
}

.highlight {
  color: var(--color-action-primary);
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-10);
}

.hero-cta {
  display: flex;
  gap: var(--spacing-5);
  flex-wrap: wrap;
}

.hero-image {
  flex: 1;
  max-width: 600px;
  margin-left: var(--spacing-10);
}

.image-placeholder {
  width: 100%;
  height: 400px;
  background: linear-gradient(135deg, var(--color-petrol) 0%, var(--color-teal) 100%);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* Sections */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-12);
}

.section-tag {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-action-primary);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--spacing-3);
}

.section-title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-primary);
}

.about-section {
  padding: var(--spacing-16) 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-10);
  align-items: center;
}

.about-image .image-placeholder {
  height: 500px;
}

.about-text {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-8);
}

.about-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  list-style: none;
  margin-bottom: var(--spacing-10);
}

.about-features li {
  background-color: var(--color-bg-subtle);
  padding: var(--spacing-4) var(--spacing-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.projects-section,
.services-section {
  padding: var(--spacing-16) 0;
  background-color: var(--color-bg-subtle);
}

.projects-grid,
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-5);
}

/* Card canônico (design system) */
.project-card,
.service-card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--spacing-5);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.project-card:hover,
.service-card:hover {
  box-shadow: var(--shadow-sm);
}

.project-image,
.service-card .service-icon {
  height: 200px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-petrol) 0%, var(--color-teal) 100%);
}

.project-info {
  padding: var(--spacing-5) 0 0;
}

.project-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-2);
}

.project-desc {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.service-card h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-3);
}

.service-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-white);
}

/* Contact */
.contact-section {
  padding: var(--spacing-16) 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-10);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.form-group label {
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-semibold);
  color: var(--color-action-secondary);
}

.form-group input,
.form-group textarea {
  min-height: 40px;
  padding: var(--spacing-3) var(--spacing-3);
  border: 2px solid var(--color-mediumGray);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease;
  font-size: var(--font-size-ui);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-focus-ring);
  box-shadow: var(--shadow-focus);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-list {
  list-style: none;
  margin-bottom: var(--spacing-8);
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.contact-list .icon {
  width: 20px;
  height: 20px;
  background-color: var(--color-action-secondary);
}

.social-links {
  display: flex;
  gap: var(--spacing-5);
}

.social-link {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  transition: color 0.2s ease;
}

.social-link:hover {
  color: var(--color-action-primary);
}

/* Footer */
footer {
  background-color: var(--color-bg-primary);
  padding: var(--spacing-6) 0;
  margin-top: var(--spacing-16);
}

.footer-text {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-3);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: var(--spacing-8);
  list-style: none;
}

.footer-links a {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--color-action-primary);
}

/* Responsive */
@media (max-width: 768px) {
  .hero {
    flex-direction: column-reverse;
    text-align: center;
  }

  .hero-content {
    max-width: none;
  }

  .hero-image {
    margin-left: 0;
    margin-top: var(--spacing-10);
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .nav-links {
    display: none;
  }
}

/* ==========================================================================
   WP-04 — Área de gestão /admin (Design System 0.5.2: petrol primário,
   Open Sans, densidade default 40px, chips semânticos, WCAG 2.2 AA)
   ========================================================================== */

.admin-body {
  background-color: var(--color-bg-subtle);
  min-height: 100vh;
}

.admin-header {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border-subtle);
  position: sticky;
  top: 0;
  z-index: 50;
}

.admin-header-inner {
  max-width: 1794px; /* layout.stage.fluid — estação operacional */
  margin: 0 auto;
  padding: var(--spacing-3) var(--spacing-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
}

/* Exceção DS aprovada pelo operador (2026-09-26): logo horizontal completo no
   header do /admin em tamanho legível — DS recomenda identidade textual em
   headers; decisão do owner registrada no WP-04. */
.admin-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.admin-logo {
  height: 32px;
  width: auto;
  display: block;
}

.admin-brand-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  line-height: var(--line-height-tight);
  color: var(--color-action-primary);
  white-space: nowrap;
}

.admin-header nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.admin-header nav a {
  color: var(--color-action-secondary);
  text-decoration: none;
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-semibold);
}

.admin-header nav a:hover {
  text-decoration: underline;
}

.admin-clock {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Seletor de idioma (formato padrão do ecossistema: app.studiolog.com.br) --- */
/* Botão-ícone 36×36 offWhite raio 8px com bandeira; menu branco com bandeira+código */

.admin-lang {
  position: relative;
}

.admin-lang-btn {
  appearance: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-offWhite);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.admin-lang-btn:hover {
  background-color: var(--color-slate200);
}

.admin-lang-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.admin-lang-menu {
  position: absolute;
  top: calc(100% + var(--spacing-2));
  right: 0;
  z-index: 200;
  min-width: 112px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-1);
  display: flex;
  flex-direction: column;
}

.admin-lang-option {
  appearance: none;
  border: none;
  background: none;
  min-height: 36px;
  padding: var(--spacing-1) var(--spacing-3);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: left;
}

.admin-lang-option:hover {
  background-color: var(--color-slate100);
}

.admin-lang-option.active {
  background-color: var(--color-slate100);
  color: var(--color-action-primary);
}

.admin-lang-option:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

.admin-main {
  max-width: 1794px;
  margin: 0 auto;
  padding: var(--spacing-6) var(--spacing-5) var(--spacing-10);
}

/* --- Login --- */

.admin-login {
  display: flex;
  justify-content: center;
  padding-top: var(--spacing-10);
}

.admin-login-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--spacing-6);
  width: 100%;
  max-width: 420px;
}

.admin-login-card h1 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-1);
}

.admin-muted {
  color: var(--color-text-muted);
  font-size: var(--font-size-ui);
  margin-bottom: var(--spacing-5);
}

.admin-field-error {
  color: var(--color-criticalStrong);
  background-color: var(--color-criticalTint);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-3);
}

.btn-block {
  width: 100%;
}

/* --- Tabs --- */

.admin-tabs {
  display: flex;
  gap: var(--spacing-1);
  border-bottom: 2px solid var(--color-border-subtle);
  margin-bottom: var(--spacing-5);
}

.admin-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: var(--spacing-3) var(--spacing-4);
  min-height: 44px; /* touch target aprimorado StudioLog */
  font-family: var(--font-family-base);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  cursor: pointer;
}

.admin-tab:hover {
  color: var(--color-action-secondary);
}

.admin-tab:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.admin-tab.active {
  color: var(--color-action-primary);
  border-bottom-color: var(--color-action-primary);
}

/* --- Toolbar --- */

.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  flex-wrap: wrap;
}

.admin-toolbar h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* --- Tabela --- */

.admin-table-wrap {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-ui);
}

.admin-table th {
  text-align: left;
  padding: var(--spacing-3) var(--spacing-4);
  background-color: var(--color-slate100);
  color: var(--color-slate600);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.admin-table td {
  padding: var(--spacing-3) var(--spacing-4);
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  vertical-align: middle;
}

.admin-table tbody tr:hover {
  background-color: var(--color-slate100);
}

.admin-cell-actions {
  white-space: nowrap;
}

.admin-cell-actions .btn {
  margin-right: var(--spacing-2);
}

/* --- Chips (pill denso: 2px/8px, radius full, 12px) --- */

.admin-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.admin-chip-success {
  background-color: var(--color-successTint);
  color: var(--color-successStrong);
}

.admin-chip-neutral {
  background-color: var(--color-slate100);
  color: var(--color-slate600);
}

.admin-chip-critical {
  background-color: var(--color-criticalTint);
  color: var(--color-criticalStrong);
}

/* --- Modal (z-index 200) --- */

.admin-modal {
  position: fixed;
  inset: 0;
  background-color: rgba(1, 22, 30, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--spacing-8) var(--spacing-4);
  z-index: 200;
  overflow-y: auto;
}

.admin-modal-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-6);
  width: 100%;
  max-width: 560px;
}

.admin-modal-card h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-4);
}

.admin-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-3);
  margin-top: var(--spacing-5);
}

/* --- Toast / Feedback (z-index 300) --- */

.admin-toast {
  position: fixed;
  bottom: var(--spacing-5);
  right: var(--spacing-5);
  z-index: 300;
  max-width: 380px;
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-md);
}

.admin-toast-success {
  background-color: var(--color-successTint);
  color: var(--color-successStrong);
}

.admin-toast-critical {
  background-color: var(--color-criticalTint);
  color: var(--color-criticalStrong);
}

/* --- Detalhes do usuário (vínculos e grants) --- */

.admin-subsection {
  position: relative;
  margin-top: var(--spacing-5);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--spacing-4);
}

.admin-subsection h3 {
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-bold);
  color: var(--color-action-secondary);
  margin-bottom: var(--spacing-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-inline-form {
  display: flex;
  gap: var(--spacing-2);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-3);
}

.admin-inline-form .form-group {
  min-width: 160px;
}

.admin-list {
  list-style: none;
}

.admin-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-ui);
}

.admin-list li:last-child {
  border-bottom: none;
}

.sistemas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-4);
}

.sys-card {
  background: var(--color-bg-container, #fff);
  border: 1px solid var(--color-border-subtle, #e6e6e6);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(1, 22, 30, .06));
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.sys-card h3 {
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-bold);
  color: var(--color-action-primary);
}

.sys-card dl {
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-muted, #69788c);
}

.sys-card dt { font-weight: var(--font-weight-bold); }

.sys-card dd { margin: 0 0 var(--spacing-2); }

.sys-card dl dt { position: relative; }

.sys-card-actions {
  position: relative;
  display: flex;
  gap: var(--spacing-2);
  margin-top: auto;
  flex-wrap: wrap;
}

.sys-acao { display: inline-flex; align-items: center; gap: var(--spacing-1, 4px); white-space: nowrap; }

.sys-danger { border-color: var(--color-danger); color: var(--color-danger); }

.sys-danger-btn:hover { background: var(--color-dangerHover); border-color: var(--color-dangerHover); }
.sys-danger-btn { background: var(--color-danger); border-color: var(--color-danger); }

.sys-alerta {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: var(--radius-sm, 4px);
  padding: var(--spacing-3);
  font-size: var(--font-size-sm, 13px);
  margin-bottom: var(--spacing-3);
}

.keybox {
  font-family: ui-monospace, Consolas, monospace;
  background: var(--color-navy, #043546);
  color: var(--color-text-inverse, #fff);
  border-radius: var(--radius-md, 8px);
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-sm, 13px);
  word-break: break-all;
  margin-bottom: var(--spacing-3);
}

.admin-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
}

.admin-empty {
  text-align: center;
  color: var(--color-slate500, #69788c);
  padding: var(--spacing-5) 0;
}

.admin-check-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) 0;
  font-size: var(--font-size-ui);
}

.admin-check-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-action-primary);
}

.admin-system-group {
  margin-bottom: var(--spacing-4);
}

/* --- Botões de linha (compact 32px — desktop denso) --- */

.btn-row {
  min-height: 32px;
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-sm);
}

.hidden {
  display: none !important;
}
/* ==========================================================================
   WP-05 — Login único (PRT-002, A6)
   ========================================================================== */

.form-group {
  position: relative;
}

/* Tooltips — Opção B (padrão SPF/SLPM): affordance "i" petrol, bolha navy */
.tt {
  background: var(--color-slate100);
  border: none;
  border-radius: 9999px;
  padding: 0 6px;
  margin-left: 4px;
  cursor: pointer;
  color: var(--color-action-primary);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
  font-family: var(--font-family-base);
  min-height: 0;
}

.tt:hover, .tt:focus-visible {
  background: var(--color-action-primary);
  color: var(--color-text-inverse);
}

.ttb {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 300;
  background: var(--color-navy);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-width: 260px;
  width: max-content;
  pointer-events: none;
  font-weight: var(--font-weight-regular);
}

.tt:hover + .ttb, .tt:focus-visible + .ttb {
  display: block;
}

/* Ação alternativa do login: "Não possui acesso? Solicitar cadastro" */
.admin-alt-action {
  display: block;
  text-align: center;
  margin-top: var(--spacing-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-ui);
  text-decoration: none;
}

.admin-alt-action:hover {
  color: var(--color-action-secondary);
}

.admin-alt-action strong {
  color: var(--color-action-secondary);
  font-weight: var(--font-weight-semibold);
}

.admin-alt-action:hover strong {
  text-decoration: underline;
}

/* WP-05 — PRT-003: caixa de sucesso da solicitação */
.ok-box {
  color: var(--color-successStrong);
  background-color: var(--color-successTint);
  border-radius: var(--radius-sm);
  padding: var(--spacing-3);
  font-size: var(--font-size-ui);
  margin-bottom: var(--spacing-3);
}

/* WP-05 — ADM-105: fieldset do escopo no modal de papéis */
.admin-fieldset {
  position: relative; /* ancora a bolha .ttb do legend */
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--spacing-3) var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.admin-fieldset legend {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-action-secondary);
  padding: 0 var(--spacing-2);
}

/* WP-05 — ADM-104: badge de pendentes na aba Solicitações */
.admin-tab {
  position: relative;
}

.admin-tab-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: var(--color-warningStrong);
  color: var(--color-text-inverse);
  border-radius: 9999px;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  padding: 1px 6px;
  line-height: 1.4;
}

/* ==========================================================================
   WP-05 — Shell do Atrium (PRT-004): rail + topbar + workspace
   Herda o Eximius (app-rail/topbar) e o DS Side Navigation v0.2 —
   mockup aprovado atrium-shell-v7.
   ========================================================================== */

.app-rail{position:fixed;left:0;top:0;bottom:0;width:64px;
  background:linear-gradient(180deg,#011e29,#043546);z-index:100;
  display:flex;flex-direction:column;align-items:center;padding:16px 0;
  overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.25) transparent;transition:width .18s ease}
.app-rail-logo-btn{background:none;border:none;padding:0;margin:0 0 20px;cursor:pointer;
  display:grid;place-items:center;width:100%;height:28px}
.app-rail:hover .app-rail-logo-btn,.app-rail.pinned .app-rail-logo-btn{height:auto}
.app-rail-logo{width:28px;flex:none;transition:width .18s ease}
.app-rail:hover .app-rail-logo,.app-rail.pinned .app-rail-logo{width:110px}
.app-rail-items{display:flex;flex-direction:column;gap:2px;width:100%;align-items:center}
.app-rail.expanded .app-rail-items{align-items:stretch}
.app-rail-item{position:relative;font:inherit;width:44px;height:44px;
  border-radius:var(--radius-lg);display:flex;align-items:center;gap:12px;
  color:#bfd8cd;cursor:pointer;white-space:nowrap;padding:0 10px;text-align:left;
  flex:none;text-decoration:none;border:0;background:transparent}
.app-rail.expanded .app-rail-item{width:100%;padding:0 12px}
.app-rail-item-ico{width:24px;flex:none;display:flex;align-items:center;justify-content:center}
.app-rail-item-ico svg{width:20px;height:20px}
.app-rail-item-lb{font-size:13px;font-weight:600;opacity:0;transition:opacity .12s}
.app-rail.expanded .app-rail-item-lb{opacity:1}
.app-rail-item:hover{color:#fff;background:#ffffff1f}
.app-rail-item[aria-current="page"]{color:#fff;background:#fff3}
.app-rail-item[aria-current="page"] .ico-reg{display:none}
.app-rail-item[aria-current="page"] .lb-fill{display:inline}
.app-rail-item:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.app-rail-group{display:none}
.app-rail.expanded .app-rail-group{display:block;font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:#8FA9B5;padding:10px 12px 4px}
.app-rail-footer{margin-top:auto;padding-top:16px;border-top:1px solid #ffffff14;
  width:100%;opacity:0;transition:opacity .12s}
.app-rail.expanded .app-rail-footer{opacity:1}
.app-rail-footer .tenant-name{font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:#b9d2d8;margin:0 10px 8px;white-space:nowrap}
.app-rail-footer .user-row{display:flex;align-items:center;gap:8px;padding:0 10px}
.app-rail-footer .avatar{width:28px;height:28px;border-radius:50%;background:var(--petrol);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;
  font-weight:800;flex:none}
.app-rail-footer .user-role{font-size:12px;font-weight:700;color:#fff;
  text-transform:capitalize;white-space:nowrap}
.app-rail:not(.expanded):hover{width:max-content;min-width:220px;max-width:340px;
  align-items:stretch;box-shadow:6px 0 24px rgba(1,30,41,.35)}
.app-rail:not(.expanded):hover .app-rail-item{width:100%;padding:0 12px}
.app-rail:not(.expanded):hover .app-rail-item-lb{opacity:1}
.app-rail:not(.expanded):hover .app-rail-group{display:block;font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:#8FA9B5;padding:10px 12px 4px}
.app-rail:not(.expanded):hover .app-rail-footer{opacity:1}
.app-rail:not(.expanded):hover .app-rail-logo{width:110px}
.app-rail:not(.expanded):hover .app-rail-items{align-items:stretch}

.app-shell-v2{margin-left:64px;min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;min-height:56px;
  padding:0 clamp(18px,3vw,32px);border-bottom:1px solid var(--color-border-subtle);
  box-shadow:var(--shadow-xs);background:var(--white);
  position:sticky;top:0;z-index:50}
.topbar-breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--color-slate500)}
.screen-alias{font-family:ui-monospace,Consolas,monospace;font-size:10px;font-weight:700;
  letter-spacing:.03em;color:#02937A;background:#e0f5f1;padding:2px 7px;
  border-radius:999px;line-height:1.4;flex:none}
.topbar .brand{color:var(--color-navy);font-weight:700}
.topbar .sep{color:var(--color-slate500);font-size:10px}
.topbar .cur{color:var(--color-dark);font-weight:600}
.topbar-actions{display:flex;align-items:center;gap:12px}
.workspace{width:calc(100% - 44px);max-width:1794px;margin:0 auto;
  padding:clamp(24px,3vw,40px);flex:1}
.workspace h1{color:var(--color-navy);font-size:24px;margin-bottom:4px}
.workspace .sub{color:var(--color-slate500);margin-bottom:20px}
.home-dashboard-grid{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:20px;margin-top:20px;grid-auto-rows:1fr}
.home-card{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);
  background:var(--white);box-shadow:var(--shadow-xs);padding:20px;
  display:flex;flex-direction:column;text-decoration:none;color:inherit}
.home-card:hover{border-color:var(--petrol,#185243)}
/* Ícone do card: arte "grafite romano" (SVG-arquivo, quadrada 336×336) — sem azulejo navy;
   96px, proporcional à arte (era 24px dentro de um azulejo 38px; a arte tem margem interna
   de ~25% do canvas e só reading bem a partir de ~96px). */
.home-card .ic{width:96px;height:96px;margin-bottom:12px}
.home-card .ic img{width:100%;height:100%;display:block}
.home-card h3{font-size:15px;margin-bottom:4px}
.home-card p{font-size:12.5px;color:var(--color-slate500)}
.hidden{display:none !important}

/* PRT-005 (WP-06): Banner do DS (INTERACTION_COMPONENTS > Feedback), estado de página, role=status.
   Tom neutro (slate100/slate600), o mesmo par do estado vazio. Nenhum token novo. */
.notice{display:flex;gap:12px;align-items:flex-start;background:var(--color-slate100);
  color:var(--color-slate600);border:1px solid var(--color-slate200);border-radius:var(--radius-md);
  padding:12px 16px;margin-bottom:20px}
.notice[hidden]{display:none}
.notice .ic{flex:none;width:20px;height:20px;color:var(--color-navy);margin-top:1px}
.notice strong{display:block;color:var(--color-navy);font-size:14px;margin-bottom:2px}
.notice p{font-size:13px;margin:0}
/* PRT-005 v2 / PRT-006 (aprovados 2026-09-29): banner com acao, chip e alvo de toque de 44px (regra do DS;
   32px fica so para acoes de linha em tabelas). */
.notice{align-items:center}
.notice .txt{flex:1;min-width:0}
.notice .act{flex:none}
.notice .btn{white-space:nowrap;min-height:44px}
.admin-login-card .notice{margin-bottom:16px}
.chip{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:9999px;
  font-size:12px;font-weight:600;line-height:1.4;background:var(--color-slate100);color:var(--color-slate600);
  border:1px solid var(--color-slate200);vertical-align:middle;white-space:nowrap}
@media (max-width:640px){.notice{flex-wrap:wrap}.notice .act{width:100%}.notice .btn{width:100%}}

/* itens/roupagem do rail que dependem de papel: hidden vence display de classe */
.app-rail [data-admin-only][hidden]{display:none !important}