/* ============================================================
   KONTIK DS — Design Tokens v1.0.0 (copiados para dentro do projeto,
   conforme orientação da skill: build não deve depender dela em runtime)
   ============================================================ */
:root {
  --kk-roxo-50:  #FAF3FC;
  --kk-roxo-100: #F3E3F8;
  --kk-roxo-300: #CF9CDE;
  --kk-roxo-600: #7D119C;
  --kk-roxo-700: #630080;
  --kk-roxo-800: #420055;
  --kk-roxo-900: #2E003B;
  --kk-roxo-950: #1E0026;

  --kk-verde-100: #EAFDEF;
  --kk-verde-300: #99F8BB;
  --kk-verde-400: #00F58C;
  --kk-verde-950: #006738;

  --kk-neutro-0:   #FFFFFF;
  --kk-neutro-50:  #F9F8F9;
  --kk-neutro-100: #F1F0F2;
  --kk-neutro-200: #E2E0E3;
  --kk-neutro-300: #CDCACE;
  --kk-neutro-400: #A7A0A9;
  --kk-neutro-500: #837A85;
  --kk-neutro-600: #655E67;
  --kk-neutro-900: #1E1C1F;

  --kk-success-bg: #EAFDEF; --kk-success-border: #99F8BB; --kk-success-text: #00864A;
  --kk-warning-bg: #FCF3E3; --kk-warning-border: #F5D9A8; --kk-warning-text: #9A5B00;
  --kk-error-bg:   #FDECEE; --kk-error-border:   #F5B8BE; --kk-error-base: #E5484D; --kk-error-text: #C81E3C;
  --kk-info-bg:    #EAF1FE; --kk-info-border:    #B6CFFA; --kk-info-text:  #1D5BD6;

  --kk-font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --kk-font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --kk-font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --kk-radius-md: 10px;
  --kk-radius-lg: 14px;
  --kk-radius-pill: 999px;

  --kk-shadow-1: 0 1px 2px rgba(30,0,38,.06), 0 1px 3px rgba(30,0,38,.08);
  --kk-shadow-2: 0 2px 6px rgba(30,0,38,.07), 0 4px 12px rgba(30,0,38,.08);

  --kk-bg-page: var(--kk-neutro-50);
  --kk-bg-surface: var(--kk-neutro-0);
  --kk-text-primary: var(--kk-neutro-900);
  --kk-text-secondary: var(--kk-neutro-600);
  --kk-text-muted: var(--kk-neutro-500);
  --kk-border-default: var(--kk-neutro-200);
  --kk-border-strong: var(--kk-neutro-300);

  --kk-interactive: var(--kk-roxo-800);
  --kk-interactive-hover: var(--kk-roxo-700);
  --kk-interactive-active: var(--kk-roxo-900);

  --kk-focus-ring: 0 0 0 2px var(--kk-bg-surface), 0 0 0 4px var(--kk-roxo-600);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kk-bg-page);
  color: var(--kk-text-primary);
  font-family: var(--kk-font-body);
  line-height: 1.5;
}

.container { max-width: 720px; margin: 0 auto; padding: 0 20px; }

code { font-family: var(--kk-font-mono); font-size: .85em; }

/* ---------- Cabeçalho ---------- */
.page-header {
  background: linear-gradient(155deg, var(--kk-roxo-950), var(--kk-roxo-800));
  color: #fff;
  padding: 40px 0 32px;
}
.page-header h1 { font-family: var(--kk-font-display); font-weight: 700; margin: 0 0 8px; font-size: 1.75rem; }
.page-header .accent { color: var(--kk-verde-400); }
.page-header .subtitle { margin: 0; color: var(--kk-roxo-300); font-size: .92rem; }

main.container { padding-top: 24px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 20px; }

/* ---------- Card ---------- */
.card {
  background: var(--kk-bg-surface);
  border: 1px solid var(--kk-border-default);
  border-radius: var(--kk-radius-lg);
  padding: 24px;
  box-shadow: var(--kk-shadow-1);
}
.card h2 { font-family: var(--kk-font-display); font-size: 1.125rem; margin: 0 0 14px; }
.help { font-size: .82rem; color: var(--kk-text-muted); margin: 4px 0 12px; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--kk-font-body);
  font-weight: 600; font-size: .9rem; border-radius: var(--kk-radius-md); padding: 10px 20px;
  border: 1.5px solid transparent; cursor: pointer; line-height: 1.2;
  transition: all .2s cubic-bezier(.16,1,.3,1);
}
.btn:focus-visible { outline: none; box-shadow: var(--kk-focus-ring); }
.btn-primary { background: var(--kk-interactive); color: #fff; }
.btn-primary:hover { background: var(--kk-interactive-hover); }
.btn-primary:active { background: var(--kk-interactive-active); }
.btn-primary[disabled] { background: var(--kk-neutro-200); color: var(--kk-neutro-400); cursor: not-allowed; }
.btn-outline { background: transparent; color: var(--kk-roxo-800); border-color: var(--kk-roxo-800); }
.btn-outline:hover { background: var(--kk-roxo-50); }
.btn-ghost { background: transparent; color: var(--kk-roxo-700); }
.btn-ghost:hover { background: var(--kk-roxo-50); }

/* ---------- Campos ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: .82rem; font-weight: 600; color: var(--kk-text-primary); }
.input {
  font-family: var(--kk-font-body); font-size: .92rem; padding: 10px 14px; width: 100%;
  border-radius: var(--kk-radius-md); border: 1.5px solid var(--kk-border-strong);
  background: var(--kk-bg-surface); color: var(--kk-text-primary);
}
.input:focus { outline: none; border-color: var(--kk-roxo-600); box-shadow: 0 0 0 3px var(--kk-roxo-100); }
textarea.input { font-family: var(--kk-font-mono); font-size: .78rem; resize: vertical; }
textarea.pergunta-regra { font-family: var(--kk-font-body); font-size: .92rem; }

.avancado { margin-top: 18px; border-top: 1px solid var(--kk-border-default); padding-top: 14px; }
.avancado summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--kk-roxo-700); }

/* ---------- Alertas ---------- */
.alert { display: flex; gap: 12px; padding: 14px 18px; border-radius: var(--kk-radius-md); border: 1px solid; font-size: .88rem; margin-bottom: 16px; }
.alert.success { background: var(--kk-success-bg); border-color: var(--kk-success-border); color: var(--kk-success-text); }
.alert.warning { background: var(--kk-warning-bg); border-color: var(--kk-warning-border); color: var(--kk-warning-text); }
.alert.error   { background: var(--kk-error-bg); border-color: var(--kk-error-border); color: var(--kk-error-text); }
.alert.info    { background: var(--kk-info-bg); border-color: var(--kk-info-border); color: var(--kk-info-text); }

.rodape { padding: 20px 0 40px; font-size: .78rem; color: var(--kk-text-muted); }

/* ---------- Evidências de regras de negócio ---------- */
#status-regra:not(:empty) { margin-top: 16px; }
.orientacao-regra { font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.evidencia-regra { border: 1px solid var(--kk-border-default); border-radius: var(--kk-radius-md); padding: 14px; margin-top: 12px; }
.evidencia-regra summary { cursor: pointer; color: var(--kk-roxo-800); font-size: .85rem; font-weight: 600; overflow-wrap: anywhere; }
.evidencia-regra .help { margin-top: 12px; }
.trecho-regra, .retorno-regra { margin: 12px 0 0; padding: 12px; border-radius: var(--kk-radius-md); background: var(--kk-neutro-50); font-family: var(--kk-font-mono); font-size: .78rem; }
.trecho-regra { overflow-x: auto; tab-size: 2; }
.trecho-regra code { font-size: inherit; }
.retorno-regra { white-space: pre-wrap; overflow-wrap: anywhere; }