/* brand.css — identidade visual placeholder inspirada na paleta índigo da Park Indigo.
   ATENÇÃO: cores aproximadas por não termos acesso aos ativos oficiais de marca (hex/tipografia).
   Antes de qualquer uso além desta POC, validar com Comunicação/Marketing da empresa. */
:root {
  --indigo-900: #1f1a4d;
  --indigo-800: #2b2470;
  --indigo-700: #352c8c;
  --indigo-600: #4338a8;
  --indigo-500: #5b4fd1;
  --indigo-400: #7b70e0;
  --indigo-100: #ece9fb;
  --indigo-50: #f5f4fd;
  --gold-500: #c9a24b;
  --ink: #171427;
  --muted: #6b6684;
  --bg: #f7f7fb;
  --card: #ffffff;
  --border: #e5e2f3;
  --danger: #c0392b;
  --success: #1e8e5a;
  --warning: #b9770e;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(31, 26, 77, 0.08);
  --font: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--font); background: var(--bg); color: var(--ink); }
a { color: var(--indigo-600); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 10px; border: none;
  font-weight: 600; font-size: 14px; transition: transform .05s ease, opacity .15s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--indigo-600); color: #fff; }
.btn-primary:hover { background: var(--indigo-700); }
.btn-secondary { background: var(--indigo-100); color: var(--indigo-700); }
.btn-ghost { background: transparent; color: var(--indigo-600); }
.btn-danger { background: #fdecea; color: var(--danger); }
.btn-sm { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.input, select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  font-size: 14px; font-family: inherit; background: #fff; color: var(--ink);
}
.input:focus, select:focus, textarea:focus { outline: 2px solid var(--indigo-400); border-color: var(--indigo-400); }
label.field-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em; }
.field { margin-bottom: 14px; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.badge-demo { background: #fff3cd; color: #8a6400; }
.badge-pendente { background: #fdecea; color: var(--danger); }
.badge-simulado { background: #fff3cd; color: var(--warning); }
.badge-conectado { background: #e3f6ec; color: var(--success); }
.badge-admin { background: var(--indigo-900); color: #fff; }
.badge-rh { background: var(--indigo-500); color: #fff; }
.badge-colab { background: var(--indigo-100); color: var(--indigo-700); }

.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }
.loading-state { text-align: center; padding: 40px 20px; color: var(--muted); }
.error-state { text-align: center; padding: 20px; color: var(--danger); background: #fdecea; border-radius: var(--radius); }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 14px; z-index: 999; box-shadow: var(--shadow); }
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }

.modal-backdrop { position: fixed; inset: 0; background: rgba(23,20,39,.45); display: flex; align-items: center; justify-content: center; z-index: 500; padding: 16px; }
.modal { background: #fff; border-radius: var(--radius); padding: 24px; max-width: 560px; width: 100%; max-height: 86vh; overflow: auto; }
.modal h3 { margin-top: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.muted { color: var(--muted); font-size: 13px; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }