/* ============================================================
   Kratos UI — folha de estilo compartilhada
   Todas as telas do dashboard-v0 usam este arquivo.
   Fonte: Plus Jakarta Sans (kratos-fonts.css, importada abaixo)
   ============================================================ */

@import url("kratos-fonts.css");

:root {
  /* ===== TEMA DO CANDIDATO — o admin configura no setup =====
     Troque --primary e --secondary pela paleta do candidato.
     Todo o resto (soft/hover/ink) deriva sozinho e continua harmônico. */
  --primary: #dc5b48;      /* padrão = coral Kratos */
  --secondary: #e0a020;
  --p-soft:  color-mix(in srgb, var(--primary) 14%, #fff);
  --p-tint:  color-mix(in srgb, var(--primary) 8%, #fff);
  --p-hover: color-mix(in srgb, var(--primary) 87%, #000);
  --p-ink:   color-mix(in srgb, var(--primary) 60%, #000);
  --s-soft:  color-mix(in srgb, var(--secondary) 16%, #fff);
  --s-ink:   color-mix(in srgb, var(--secondary) 58%, #000);

  /* Cores base (neutras fixas) */
  --base: #f4f2ef;
  --white: #fdfbf9;
  --preto: #101010;
  /* tokens de marca agora derivam do tema do candidato */
  --coral: var(--primary);
  --coral-suave: color-mix(in srgb, var(--primary) 42%, #fff);
  --coral-hover: var(--p-hover);
  --pill-rosa: var(--p-soft);
  /* ===== SIGNIFICADO — FIXO, nunca muda com a paleta ===== */
  --verde: #7cc47c;
  --vermelho: #e05555;
  --pill-verde: #a7d5a7;
  --pill-azul: #a5c8e5;
  --pill-ambar: #f5d59c;
  --texto: #1c1c1c;
  --muted: #8a7a76;
  --border: #eee0da;
  --bg: var(--base);

  /* Spacing 4/8 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;

  /* Tipografia — ABSOLUTA, nunca escalar */
  --t-xs:11px; --t-sm:13px; --t-base:14px; --t-md:15px; --t-lg:20px; --t-xl:28px; --t-hero:96px;

  /* Radius */
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-full:999px;

  /* Motion */
  --ease:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:150ms; --dur-base:250ms;

  /* Fontes */
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

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

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--texto);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.tabular { font-variant-numeric: tabular-nums; }

/* ---------- shell ---------- */
.kr-shell { display:grid; grid-template-columns:230px 1fr; min-height:100vh; }

/* ---------- sidebar ---------- */
.kr-side {
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  padding:16px 14px; gap:12px; background:var(--white); border-right:1px solid var(--border);
  overflow-y:auto;
}
.kr-brand { display:flex; align-items:center; padding:4px 6px 2px; }
.kr-brand img { height:26px; width:auto; }
.kr-user {
  display:flex; align-items:center; gap:10px; background:var(--white);
  border:1px solid var(--border); border-radius:14px; padding:9px 11px;
}
.kr-avatar {
  width:34px; height:34px; border-radius:50%; background:var(--coral); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:none;
}
.kr-user .nm { font-weight:600; font-size:13px; }
.kr-user .rl { font-size:11px; color:var(--muted); }
.kr-nav { display:flex; flex-direction:column; gap:3px; }
.kr-nav a {
  display:flex; align-items:center; gap:11px; padding:7px 9px; border-radius:11px;
  font-size:13.5px; font-weight:500; color:var(--texto); text-decoration:none; cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.kr-nav a:hover { background:rgba(0,0,0,.03); }
.kr-nav a.active { background:var(--pill-rosa); font-weight:600; }
.kr-nav a .ic {
  width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  flex:none; background:var(--white); border:1px solid var(--coral-suave); color:var(--coral);
}
.kr-nav a.active .ic { background:var(--coral); border-color:var(--coral); color:#fff; }
.kr-nav a .ct {
  margin-left:auto; font-size:10.5px; font-weight:600; background:var(--coral); color:#fff;
  border-radius:999px; min-width:18px; height:18px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
}
.kr-nav .grp { font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); padding:12px 9px 3px; }
.kr-promo { margin-top:auto; background:var(--preto); border-radius:16px; padding:14px; color:#fff; }
.kr-promo p { font-size:12px; font-weight:600; margin-bottom:10px; }
.kr-promo button { width:100%; background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff; padding:7px; border-radius:999px; font-size:11px; font-weight:600; cursor:pointer; font-family:inherit; }
.kr-promo button:hover { background:rgba(255,255,255,.1); }

/* ---------- main ---------- */
.kr-main { min-width:0; display:flex; flex-direction:column; }
.kr-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; border-bottom:1px solid var(--border);
}
.kr-crumb { font-size:11px; color:var(--muted); font-weight:500; }
.kr-status { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:500; color:var(--muted); }
.kr-dot { width:7px; height:7px; border-radius:50%; background:var(--verde); animation:krpulse 2s infinite; }
@keyframes krpulse { 0%{box-shadow:0 0 0 0 rgba(124,196,124,.5);} 70%{box-shadow:0 0 0 6px rgba(124,196,124,0);} 100%{box-shadow:0 0 0 0 rgba(124,196,124,0);} }
@media (prefers-reduced-motion:reduce){ .kr-dot{animation:none;} }
.kr-content { padding:28px; }

/* ---------- headers ---------- */
.kr-h1 { font-size:var(--t-xl); font-weight:700; line-height:1.2; }
.kr-sub { font-size:var(--t-sm); color:var(--muted); margin-top:4px; }
.kr-screen-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap; }

/* ---------- cards ---------- */
.kr-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; }
.kr-card-dark { background:var(--preto); color:#fff; border-radius:var(--r-lg); padding:22px; position:relative; overflow:hidden; }
.kr-card-title { font-size:var(--t-md); font-weight:600; margin-bottom:14px; }
.kr-grid { display:grid; gap:16px; }

/* ---------- pills & buttons ---------- */
.kr-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; }
.kr-pill.mono { font-family:var(--font-mono); background:var(--border); color:var(--muted); }
.kr-pill.rosa { background:var(--pill-rosa); color:var(--p-ink); }
.kr-pill.verde { background:var(--pill-verde); color:#2c6e2c; }
.kr-pill.azul { background:var(--pill-azul); color:#274a63; }
.kr-pill.ambar { background:var(--pill-ambar); color:#7a5a10; }
.kr-pill.outline { background:transparent; border:1px solid var(--border); color:var(--muted); }

.kr-btn { font-family:inherit; font-size:12.5px; font-weight:600; padding:9px 18px; border-radius:999px; cursor:pointer; border:none; white-space:nowrap; transition:all var(--dur-fast) var(--ease); }
.kr-btn.outline { background:transparent; border:1px solid var(--border); color:var(--texto); }
.kr-btn.outline:hover { border-color:var(--coral-suave); }
.kr-btn.primary { background:var(--coral); color:#fff; }
.kr-btn.primary:hover { background:var(--coral-hover); }
.kr-btn.sm { padding:6px 13px; font-size:11.5px; }
.kr-btn:focus-visible { outline:2px solid var(--coral); outline-offset:2px; }

/* ---------- metric ---------- */
.kr-metric-label { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.kr-metric-value { font-size:var(--t-xl); font-weight:700; line-height:1; }
.kr-trend-up { color:var(--verde); font-size:12px; font-weight:600; }
.kr-trend-down { color:var(--vermelho); font-size:12px; font-weight:600; }

/* ---------- responsive ---------- */
@media (max-width:900px) {
  .kr-shell { grid-template-columns:1fr; }
  .kr-side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; }
  .kr-nav { flex-direction:row; flex-wrap:wrap; }
  .kr-nav .grp, .kr-promo { display:none; }
  .kr-nav a .ct { position:static; }
}