/* =========================================================
   Opala Design System – Piauí
   Tokens e componentes baseados na identidade visual
   oficial do Governo do Estado do Piauí / ETIPI
   ========================================================= */

/* Google Fonts removido: usar fonte do sistema para compatibilidade com redes internas */

/* ---------------------------------------------------------
   1. DESIGN TOKENS (Opala Design Layers)
   Brand → Base → Theme → Scheme → Pattern → Opacity
   --------------------------------------------------------- */
:root {
  /* -- Brand (Identidade Piauí) -- */
  --brand-green:   #007932;
  --brand-blue:    #034EA2;
  --brand-yellow:  #F6B419;
  --brand-red:     #EF4123;
  --brand-dark:    #231F20;

  /* -- Base Colors -- */
  --green-900: #004d1f;
  --green-800: #005e27;
  --green-700: #006f2e;
  --green-600: #007932;   /* brand */
  --green-500: #009c3e;
  --green-400: #00b849;
  --green-300: #3dca74;
  --green-200: #7ddeaa;
  --green-100: #c2f0d5;
  --green-050: #e8faf0;

  --blue-900:  #012d5e;
  --blue-800:  #023a7a;
  --blue-700:  #034391;
  --blue-600:  #034EA2;   /* brand */
  --blue-500:  #1666c0;
  --blue-400:  #4183d7;
  --blue-300:  #7aaeea;
  --blue-200:  #b2d0f5;
  --blue-100:  #d9e9fc;
  --blue-050:  #eef4fd;

  --yellow-700: #9e7300;
  --yellow-600: #c48f00;
  --yellow-500: #F6B419;  /* brand */
  --yellow-400: #ffc93b;
  --yellow-100: #fff3cc;
  --yellow-050: #fffae8;

  --red-700:   #9c1d0d;
  --red-600:   #c62614;
  --red-500:   #EF4123;   /* brand */
  --red-400:   #f4684e;
  --red-100:   #fce4df;
  --red-050:   #fef4f2;

  --neutral-950: #0f0d0d;
  --neutral-900: #231F20;  /* brand-dark */
  --neutral-800: #3a3637;
  --neutral-700: #524e4f;
  --neutral-600: #6b6768;
  --neutral-500: #857f80;
  --neutral-400: #a09a9b;
  --neutral-300: #bcb6b7;
  --neutral-200: #d7d2d3;
  --neutral-100: #edebeb;
  --neutral-050: #f5f4f4;
  --neutral-000: #ffffff;

  /* -- Scheme Colors (Pattern Layer) -- */
  /* Primary (green) */
  --color-primary:          var(--green-600);
  --color-primary-hover:    var(--green-700);
  --color-primary-press:    var(--green-800);
  --color-primary-disabled: var(--green-300);
  --color-primary-subtle:   var(--green-050);
  --color-primary-border:   var(--green-400);

  /* Secondary (blue) */
  --color-secondary:          var(--blue-600);
  --color-secondary-hover:    var(--blue-700);
  --color-secondary-press:    var(--blue-800);
  --color-secondary-subtle:   var(--blue-050);

  /* Semantic */
  --color-success:        var(--green-600);
  --color-success-bg:     var(--green-050);
  --color-success-border: var(--green-400);
  --color-success-text:   var(--green-800);

  --color-warning:        var(--yellow-500);
  --color-warning-bg:     var(--yellow-050);
  --color-warning-border: var(--yellow-400);
  --color-warning-text:   var(--yellow-700);

  --color-error:          var(--red-600);
  --color-error-bg:       var(--red-050);
  --color-error-border:   var(--red-400);
  --color-error-text:     var(--red-700);

  --color-info:           var(--blue-600);
  --color-info-bg:        var(--blue-050);
  --color-info-border:    var(--blue-300);
  --color-info-text:      var(--blue-800);

  /* Foreground / Text */
  --color-text-primary:    var(--neutral-900);
  --color-text-secondary:  var(--neutral-600);
  --color-text-disabled:   var(--neutral-400);
  --color-text-inverse:    var(--neutral-000);
  --color-text-link:       var(--blue-600);
  --color-text-link-hover: var(--blue-700);

  /* Background */
  --color-bg-page:     var(--neutral-050);
  --color-bg-surface:  var(--neutral-000);
  --color-bg-overlay:  rgba(35, 31, 32, 0.55);

  /* Border */
  --color-border:        var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-border-focus:  var(--green-600);

  /* -- Opacity States -- */
  --opacity-disabled: 0.4;
  --opacity-hover:    0.08;
  --opacity-focus:    0.16;

  /* -- Typography -- */
  --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --text-display-lg: 3.5rem;    /* 56px */
  --text-display-md: 2.8rem;    /* 45px */
  --text-headline-lg: 2.25rem;  /* 36px */
  --text-headline-md: 2rem;     /* 32px */
  --text-headline-sm: 1.75rem;  /* 28px */
  --text-title-lg:   1.375rem;  /* 22px */
  --text-title-md:   1rem;      /* 16px */
  --text-title-sm:   0.875rem;  /* 14px */
  --text-body-lg:    1rem;      /* 16px */
  --text-body-md:    0.875rem;  /* 14px */
  --text-body-sm:    0.75rem;   /* 12px */
  --text-label-lg:   0.875rem;  /* 14px */
  --text-label-md:   0.75rem;   /* 12px */
  --text-label-sm:   0.6875rem; /* 11px */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

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

  /* -- Border Radius -- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 999px;

  /* -- Shadow (elevation) -- */
  --shadow-1: 0 1px 2px rgba(35,31,32,.06), 0 1px 3px rgba(35,31,32,.10);
  --shadow-2: 0 2px 4px rgba(35,31,32,.08), 0 4px 8px rgba(35,31,32,.10);
  --shadow-3: 0 4px 8px rgba(35,31,32,.10), 0 8px 24px rgba(35,31,32,.10);

  /* -- Transition -- */
  --transition-fast:   100ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;
}

/* ---------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-family);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-text-link-hover); text-decoration: underline; }

/* ---------------------------------------------------------
   3. BARRA DE IDENTIFICAÇÃO GOVERNAMENTAL
   --------------------------------------------------------- */
.gov-bar {
  background: var(--brand-dark);
  color: var(--neutral-200);
  font-size: var(--text-label-md);
  font-weight: var(--weight-medium);
  letter-spacing: .3px;
}
.gov-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  height: 36px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.gov-bar__logo {
  height: 20px;
  display: block;
}
.gov-bar__name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gov-bar__link {
  color: var(--neutral-300);
  font-size: var(--text-label-sm);
  border: 1px solid var(--neutral-700);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  transition: all var(--transition-fast);
}
.gov-bar__link:hover {
  color: #fff;
  border-color: var(--neutral-500);
  text-decoration: none;
}
/* Faixa verde abaixo do gov-bar */
.gov-bar::after {
  content: '';
  display: block;
  height: 4px;
  background: var(--brand-green);
}

/* ---------------------------------------------------------
   4. CABEÇALHO DO SERVIÇO
   --------------------------------------------------------- */
.service-header {
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-1);
}
.service-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.service-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}
.service-header__logo {
  height: 40px;
}
.service-header__brand-text {}
.service-header__brand-name {
  font-size: var(--text-title-lg);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  letter-spacing: .5px;
  line-height: var(--leading-tight);
}
.service-header__brand-sub {
  font-size: var(--text-label-sm);
  color: var(--color-text-secondary);
  line-height: 1;
}
.service-header__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---------------------------------------------------------
   5. NAVBAR ADMIN
   --------------------------------------------------------- */
.opala-navbar {
  background: var(--brand-green);
}
.opala-navbar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  gap: 2px;
}
.opala-navbar__link {
  color: rgba(255,255,255,.80);
  text-decoration: none;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-body-md);
  font-weight: var(--weight-medium);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 3px solid transparent;
  transition: all var(--transition-fast);
}
.opala-navbar__link:hover,
.opala-navbar__link.active {
  color: #fff;
  border-bottom-color: rgba(255,255,255,.7);
  background: rgba(0,0,0,.12);
  text-decoration: none;
}
.opala-navbar__spacer { flex: 1; }
.opala-navbar__user {
  font-size: var(--text-label-md);
  color: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

/* ---------------------------------------------------------
   6. LAYOUT
   --------------------------------------------------------- */
.page-container {
  max-width: 860px;
  margin: var(--space-8) auto;
  padding: 0 var(--space-6);
}
.page-container--wide {
  max-width: 1200px;
  margin: var(--space-8) auto;
  padding: 0 var(--space-6);
}
.page-container--narrow {
  max-width: 560px;
  margin: var(--space-8) auto;
  padding: 0 var(--space-6);
}

/* ---------------------------------------------------------
   7. CARD / SURFACE
   --------------------------------------------------------- */
.opala-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--space-8);
}
.opala-card + .opala-card { margin-top: var(--space-5); }

.opala-card__title {
  font-size: var(--text-title-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.opala-card__title-icon {
  color: var(--color-primary);
}

/* ---------------------------------------------------------
   8. TIPOGRAFIA
   --------------------------------------------------------- */
.text-display  { font-size: var(--text-display-md);  font-weight: var(--weight-bold);    line-height: var(--leading-tight); }
.text-headline { font-size: var(--text-headline-sm); font-weight: var(--weight-bold);    line-height: var(--leading-tight); }
.text-title    { font-size: var(--text-title-lg);    font-weight: var(--weight-semibold); line-height: var(--leading-snug);  }
.text-body     { font-size: var(--text-body-lg);     font-weight: var(--weight-regular);  line-height: var(--leading-normal);}
.text-label    { font-size: var(--text-label-md);    font-weight: var(--weight-medium);   line-height: 1;                    }

.text-primary   { color: var(--color-text-primary);   }
.text-secondary { color: var(--color-text-secondary); }
.text-inverse   { color: var(--color-text-inverse);   }
.text-link      { color: var(--color-text-link);      }
.text-success   { color: var(--color-success-text);   }
.text-warning   { color: var(--color-warning-text);   }
.text-error     { color: var(--color-error-text);     }

/* ---------------------------------------------------------
   9. BOTÕES
   --------------------------------------------------------- */
.opala-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-6);
  font-family: var(--font-family);
  font-size: var(--text-body-md);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}
.opala-btn:active { transform: scale(.98); }
.opala-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,121,50,.28);
}
.opala-btn:disabled, .opala-btn[disabled] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary */
.opala-btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--neutral-000);
}
.opala-btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  text-decoration: none;
  color: var(--neutral-000);
}
.opala-btn--primary:active {
  background: var(--color-primary-press);
  border-color: var(--color-primary-press);
}

/* Secondary (outlined) */
.opala-btn--secondary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.opala-btn--secondary:hover {
  background: var(--color-primary-subtle);
  text-decoration: none;
}

/* Blue */
.opala-btn--blue {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--neutral-000);
}
.opala-btn--blue:hover {
  background: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
  text-decoration: none;
  color: var(--neutral-000);
}

/* Danger */
.opala-btn--danger {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--neutral-000);
}
.opala-btn--danger:hover {
  background: var(--red-700);
  border-color: var(--red-700);
  text-decoration: none;
  color: var(--neutral-000);
}

/* Ghost */
.opala-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-primary);
}
.opala-btn--ghost:hover {
  background: var(--color-primary-subtle);
  text-decoration: none;
}

/* Sizes */
.opala-btn--sm  { padding: 6px var(--space-4); font-size: var(--text-label-lg); }
.opala-btn--lg  { padding: 14px var(--space-8); font-size: var(--text-body-lg); }
.opala-btn--full { width: 100%; }

/* ---------------------------------------------------------
   10. FORMULÁRIO
   --------------------------------------------------------- */
.opala-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.opala-form-grid .span-full { grid-column: 1 / -1; }

.opala-field { display: flex; flex-direction: column; gap: var(--space-1); }

.opala-label {
  font-size: var(--text-label-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.opala-label .required { color: var(--color-error); margin-left: 2px; }

.opala-input,
.opala-select,
.opala-textarea {
  width: 100%;
  padding: 10px var(--space-4);
  font-family: var(--font-family);
  font-size: var(--text-body-md);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}
.opala-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6768' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.opala-input:focus,
.opala-select:focus,
.opala-textarea:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(0,121,50,.18);
}
.opala-input::placeholder { color: var(--neutral-400); }
.opala-input[readonly], .opala-input:disabled {
  background: var(--neutral-050);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

.opala-input--error,
.opala-select--error { border-color: var(--color-error); }
.opala-input--error:focus,
.opala-select--error:focus { box-shadow: 0 0 0 3px rgba(198,38,20,.18); }

.opala-hint {
  font-size: var(--text-label-md);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}
.opala-error-msg {
  font-size: var(--text-label-md);
  color: var(--color-error-text);
  display: none;
}
.opala-field.is-error .opala-error-msg { display: block; }

/* Checkbox / Radio */
.opala-checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  background: var(--color-bg-surface);
}
.opala-checkbox-item:hover {
  border-color: var(--color-primary-border);
  background: var(--color-primary-subtle);
}
.opala-checkbox-item.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}
.opala-checkbox-item input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}
.opala-checkbox-item__label { font-size: var(--text-body-md); font-weight: var(--weight-medium); }
.opala-checkbox-item__sub   { font-size: var(--text-label-md); color: var(--color-text-secondary); }

/* Range slider */
.opala-range-wrap { display: flex; flex-direction: column; gap: var(--space-1); }
.opala-range-value {
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  line-height: 1;
}
.opala-range-wrap input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--neutral-200);
  outline: none;
  padding: 0;
  border: none;
  box-shadow: none;
  cursor: pointer;
}
.opala-range-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--neutral-000);
  box-shadow: 0 0 0 2px var(--color-primary);
  cursor: pointer;
}
.opala-range-wrap input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(0,121,50,.28);
}

/* ---------------------------------------------------------
   11. ALERTAS / MENSAGENS
   --------------------------------------------------------- */
.opala-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  border-left: 4px solid;
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
}
.opala-alert--success {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success-text);
}
.opala-alert--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
  color: var(--color-warning-text);
}
.opala-alert--error {
  background: var(--color-error-bg);
  border-color: var(--color-error);
  color: var(--color-error-text);
}
.opala-alert--info {
  background: var(--color-info-bg);
  border-color: var(--color-info);
  color: var(--color-info-text);
}
.opala-alert__icon { font-size: 1.1em; flex-shrink: 0; margin-top: 1px; }

/* ---------------------------------------------------------
   12. BADGE / TAG
   --------------------------------------------------------- */
.opala-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: .3px;
  text-transform: uppercase;
}
.opala-badge--success { background: var(--green-100);  color: var(--green-800);  }
.opala-badge--error   { background: var(--red-100);    color: var(--red-700);    }
.opala-badge--warning { background: var(--yellow-100); color: var(--yellow-700); }
.opala-badge--info    { background: var(--blue-100);   color: var(--blue-800);   }
.opala-badge--neutral { background: var(--neutral-100);color: var(--neutral-700);}

/* ---------------------------------------------------------
   13. TABELA
   --------------------------------------------------------- */
.opala-table-wrap { overflow-x: auto; }
.opala-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-md);
}
.opala-table thead tr {
  background: var(--color-bg-page);
  border-bottom: 2px solid var(--color-primary);
}
.opala-table thead th {
  padding: var(--space-2) var(--space-4);
  text-align: left;
  font-weight: var(--weight-semibold);
  font-size: var(--text-label-lg);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}
.opala-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}
.opala-table tbody tr:hover { background: var(--neutral-050); }
.opala-table tbody td {
  padding: var(--space-2) var(--space-4);
  vertical-align: middle;
  color: var(--color-text-primary);
  font-size: var(--text-body-md);
}

/* ---------------------------------------------------------
   14. MODAL
   --------------------------------------------------------- */
.opala-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-6);
  animation: fadeOverlay var(--transition-fast);
}
@keyframes fadeOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.opala-modal {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: var(--space-8);
  animation: slideModal var(--transition-normal);
}
@keyframes slideModal {
  from { opacity: 0; transform: translateY(-12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.opala-modal__title {
  font-size: var(--text-title-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-border);
}
.opala-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* ---------------------------------------------------------
   15. TOAST
   --------------------------------------------------------- */
.opala-toast-container {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}
.opala-toast {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-body-md);
  font-weight: var(--weight-medium);
  color: var(--neutral-000);
  box-shadow: var(--shadow-3);
  min-width: 280px;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  animation: toastIn var(--transition-normal);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0);    }
}
.opala-toast--success { background: var(--color-success); }
.opala-toast--error   { background: var(--color-error);   }
.opala-toast--warning { background: var(--yellow-700);    }
.opala-toast--info    { background: var(--color-secondary);}

/* ---------------------------------------------------------
   16. SPINNER
   --------------------------------------------------------- */
.opala-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: opalaSpinAnim .65s linear infinite;
  flex-shrink: 0;
}
.opala-spinner--green {
  border-color: rgba(0,121,50,.25);
  border-top-color: var(--color-primary);
}
@keyframes opalaSpinAnim { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------
   17. STEPPER (indicador de etapas)
   --------------------------------------------------------- */
.opala-steps {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-8);
  position: relative;
}
.opala-steps::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}
.opala-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  z-index: 1;
}
.opala-step__circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body-md);
  font-weight: var(--weight-bold);
  background: var(--color-bg-surface);
  border: 2.5px solid var(--color-border);
  color: var(--color-text-secondary);
  transition: all var(--transition-normal);
}
.opala-step__label {
  font-size: var(--text-label-md);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
  white-space: nowrap;
}
.opala-step.is-active   .opala-step__circle {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.opala-step.is-active   .opala-step__label { color: var(--color-primary); font-weight: var(--weight-semibold); }
.opala-step.is-done     .opala-step__circle {
  background: var(--green-050);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.opala-step.is-done     .opala-step__label { color: var(--color-success-text); }

/* ---------------------------------------------------------
   18. INFO TABLE (revisão)
   --------------------------------------------------------- */
.opala-info-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-md); }
.opala-info-table tr { border-bottom: 1px solid var(--color-border); }
.opala-info-table tr:last-child { border-bottom: none; }
.opala-info-table td { padding: var(--space-3) 0; vertical-align: top; }
.opala-info-table td:first-child {
  width: 180px;
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
  font-size: var(--text-label-lg);
  text-transform: uppercase;
  letter-spacing: .3px;
  padding-right: var(--space-4);
}

/* ---------------------------------------------------------
   19. RODAPÉ GOVERNAMENTAL
   --------------------------------------------------------- */
.opala-footer {
  background: var(--brand-dark);
  color: var(--neutral-400);
  padding: var(--space-8) var(--space-6) var(--space-6);
  margin-top: var(--space-12);
}
.opala-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: space-between;
}
.opala-footer__col { min-width: 160px; }
.opala-footer__col-title {
  font-size: var(--text-label-lg);
  font-weight: var(--weight-semibold);
  color: var(--neutral-200);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: var(--space-4);
}
.opala-footer__col a {
  display: block;
  font-size: var(--text-body-md);
  color: var(--neutral-400);
  margin-bottom: var(--space-2);
  transition: color var(--transition-fast);
}
.opala-footer__col a:hover { color: var(--neutral-000); text-decoration: none; }
.opala-footer__divider {
  border: none;
  border-top: 1px solid var(--neutral-800);
  margin: var(--space-6) 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.opala-footer__bottom {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-label-md);
  color: var(--neutral-600);
}
.opala-footer__bottom-logo { height: 28px; opacity: .6; }

/* ---------------------------------------------------------
   20. GRID DE MODELOS (checkboxes)
   --------------------------------------------------------- */
.opala-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ---------------------------------------------------------
   21. CARD DE MODELO (admin)
   --------------------------------------------------------- */
.opala-model-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.opala-model-card:hover { box-shadow: var(--shadow-2); border-color: var(--color-border-strong); }
.opala-model-card__name    { font-size: var(--text-body-lg); font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.opala-model-card__provider{
  display: inline-flex;
  align-items: center;
  background: var(--neutral-100);
  color: var(--neutral-700);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-semibold);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  margin: var(--space-1) 0 var(--space-3);
}
.opala-model-card__desc { font-size: var(--text-body-md); color: var(--color-text-secondary); }
.opala-model-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* ---------------------------------------------------------
   22. INPUT DE BUSCA
   --------------------------------------------------------- */
.opala-search {
  position: relative;
}
.opala-search__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
  font-size: 1rem;
}
.opala-search .opala-input { padding-left: 36px; }

/* ---------------------------------------------------------
   23. TICKET BADGE (confirmação)
   --------------------------------------------------------- */
.opala-ticket {
  display: inline-block;
  background: var(--color-primary);
  color: var(--neutral-000);
  font-size: 2rem;
  font-weight: var(--weight-bold);
  letter-spacing: 1px;
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-md);
  margin: var(--space-5) 0;
}

/* ---------------------------------------------------------
   24. RESPONSIVO
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .opala-form-grid { grid-template-columns: 1fr; }
  .opala-form-grid .span-full { grid-column: 1; }
  .page-container,
  .page-container--wide,
  .page-container--narrow { padding: 0 var(--space-4); }
  .opala-card { padding: var(--space-5); }
  .service-header__inner { padding: 0 var(--space-4); }
  .opala-steps::before { left: 12px; right: 12px; top: 15px; }
  .opala-step__circle { width: 30px; height: 30px; font-size: var(--text-label-md); }
  .opala-step__label { font-size: 10px; }
}
@media (max-width: 480px) {
  .gov-bar__inner { padding: 0 var(--space-4); }
  .opala-footer__inner { flex-direction: column; }
}