/* ==========================================================================
   Global Design System — Microsoft Fluent UI foundation
   Carregado em todas as páginas do portal operacional.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografia — Segoe UI Variable (Fluent 2)
   -------------------------------------------------------------------------- */
:root {
  /* Fluent 2 design tokens mapeados às variáveis da plataforma */

  /* Superfícies */
  --colorNeutralBackground1: #ffffff;
  --colorNeutralBackground2: #f5f5f5;
  --colorNeutralBackground3: #f0f0f0;
  --colorNeutralBackground4: #ebebeb;

  /* Texto */
  --colorNeutralForeground1: #242424;
  --colorNeutralForeground2: #424242;
  --colorNeutralForeground3: #616161;
  --colorNeutralForeground4: #707070;
  --colorNeutralForegroundDisabled: #bdbdbd;

  /* Cor de destaque (accent) — alinhada com o azul cívico da plataforma */
  --colorBrandBackground: #0f6cbd;
  --colorBrandBackgroundHover: #115ea3;
  --colorBrandBackgroundPressed: #0e4775;
  --colorBrandForeground1: #0f6cbd;
  --colorBrandForeground2: #115ea3;

  /* Bordas */
  --colorNeutralStroke1: #d1d1d1;
  --colorNeutralStroke2: #e0e0e0;
  --colorNeutralStrokeAccessible: #616161;

  /* Estado */
  --colorStatusSuccessBackground1: #f1faf1;
  --colorStatusSuccessForeground1: #107c10;
  --colorStatusWarningBackground1: #fff9f0;
  --colorStatusWarningForeground1: #835b00;
  --colorStatusDangerBackground1: #fdf3f4;
  --colorStatusDangerForeground1: #c50f1f;

  /* Sombras */
  --shadow2: 0px 1px 2px rgba(0, 0, 0, 0.12), 0px 0px 2px rgba(0, 0, 0, 0.14);
  --shadow4: 0px 2px 4px rgba(0, 0, 0, 0.12), 0px 0px 2px rgba(0, 0, 0, 0.14);
  --shadow8: 0px 4px 8px rgba(0, 0, 0, 0.12), 0px 0px 2px rgba(0, 0, 0, 0.14);
  --shadow16: 0px 8px 16px rgba(0, 0, 0, 0.12), 0px 0px 2px rgba(0, 0, 0, 0.14);

  /* Raios */
  --borderRadiusNone: 0;
  --borderRadiusSmall: 2px;
  --borderRadiusMedium: 4px;
  --borderRadiusLarge: 6px;
  --borderRadiusXLarge: 8px;
  --borderRadiusCircular: 10000px;

  /* Tipografia */
  --fontFamilyBase: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --fontSizeBase100: 10px;
  --fontSizeBase200: 12px;
  --fontSizeBase300: 14px;
  --fontSizeBase400: 16px;
  --fontSizeBase500: 20px;
  --fontSizeBase600: 24px;
  --fontWeightRegular: 400;
  --fontWeightMedium: 500;
  --fontWeightSemibold: 600;
  --fontWeightBold: 700;
  --lineHeightBase100: 14px;
  --lineHeightBase200: 16px;
  --lineHeightBase300: 20px;
  --lineHeightBase400: 22px;
  --lineHeightBase500: 28px;
  --lineHeightBase600: 32px;

  /* Espaçamentos */
  --spacingHorizontalXS: 4px;
  --spacingHorizontalS: 8px;
  --spacingHorizontalM: 12px;
  --spacingHorizontalL: 16px;
  --spacingHorizontalXL: 20px;
  --spacingHorizontalXXL: 24px;
  --spacingVerticalXS: 4px;
  --spacingVerticalS: 8px;
  --spacingVerticalM: 12px;
  --spacingVerticalL: 16px;
  --spacingVerticalXL: 20px;
  --spacingVerticalXXL: 24px;

  /* Aliases para compatibilidade com variáveis existentes da plataforma */
  --bg: var(--colorNeutralBackground2);
  --surface: var(--colorNeutralBackground1);
  --surface-2: var(--colorNeutralBackground3);
  --line: var(--colorNeutralStroke2);
  --text: var(--colorNeutralForeground1);
  --muted: var(--colorNeutralForeground3);
  --accent: var(--colorBrandForeground1);
  --accent-strong: var(--colorBrandBackgroundPressed);
  --shadow-1: var(--shadow4);
  --shadow-2: var(--shadow16);
  --radius-xl: var(--borderRadiusXLarge);
  --radius-lg: var(--borderRadiusLarge);
}

/* --------------------------------------------------------------------------
   Base global
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  color: var(--colorNeutralForeground1);
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background: var(--colorNeutralBackground2);
}

/* --------------------------------------------------------------------------
   Mock-aligned layout system
   -------------------------------------------------------------------------- */
:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --line: #d8e0ea;
  --line-soft: #edf1f6;
  --text: #0f172a;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --brand: #0f6cbd;
  --brand-2: #115ea3;
  --brand-soft: #eaf4ff;
  --nav: #1b2638;
  --nav-2: #142033;
  --nav-text: #b9c8de;
  --nav-active: #0f6cbd;
  --radius: 16px;
  --radius-control: 10px;
  --shadow: 0 8px 28px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.09);
  --focus: 0 0 0 4px rgba(19, 119, 201, 0.14);
  font-family: "Segoe UI", "Segoe UI Variable", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html,
body {
  min-height: 100%;
  background: var(--bg);
}

body {
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

::selection {
  background: #bde2ff;
}

.card,
fluent-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.btn,
fluent-button::part(control) {
  border-radius: var(--radius-control);
}

.btn:hover {
  transform: translateY(-1px);
}

.grid {
  display: grid;
  gap: 18px;
}

.grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.public-wrap {
  width: min(1030px, 100%);
  margin: 0 auto;
}

.public-header {
  margin: 0 0 24px 6px;
}

.public-header h1 {
  font-size: 44px;
  line-height: 1;
  margin: 0;
  color: var(--brand);
  font-weight: 850;
}

.public-header p {
  margin: 8px 0 0;
  color: #526174;
}

.public-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.public-nav a {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: white;
  color: #475569;
  font-weight: 700;
}

.public-nav a.active {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}

.auth-card {
  width: min(620px, calc(100vw - 40px));
  margin: 15vh auto 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.auth-card header {
  padding: 36px 32px 28px;
  background: linear-gradient(180deg, #f5fbfd, #fff);
  border-bottom: 1px solid var(--line);
}

.auth-card header .eyebrow {
  font-weight: 850;
  letter-spacing: .16em;
  color: #35606f;
  font-size: 13px;
}

.auth-card header h1 {
  font-size: 30px;
  margin: 4px 0 4px;
  line-height: 1.05;
}

@media (max-width: 1000px) {
  .grid.cols-4,
  .grid.cols-3,
  .grid.cols-2 {
    grid-template-columns: 1fr;
  }

  .public-header h1 {
    font-size: 36px;
  }
}