@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* =========================================================
   IBV TECH — PAINEL DE RECRUTAMENTO
========================================================= */

:root {
  --bg: #f4f8f5;
  --surface: #ffffff;
  --surface-2: #f7faf8;

  --ink: #102019;
  --ink-soft: #32443a;
  --muted: #77867d;

  --line: #e2ebe5;
  --line-strong: #d5e1d8;

  --green: #138b45;
  --green-2: #25b65d;
  --green-3: #56d67e;
  --lime: #8ef25f;

  --deep: #02130c;
  --deep-2: #052218;
  --deep-3: #0a3824;

  --blue: #4267df;
  --amber: #d9961e;
  --purple: #7658c8;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;

  --shadow:
    0 8px 30px rgba(12, 48, 29, .055);

  --shadow-hover:
    0 18px 50px rgba(8, 48, 27, .11);
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background:
    radial-gradient(
      circle at 75% 0%,
      rgba(31, 176, 82, .055),
      transparent 30%
    ),
    var(--bg);

  color: var(--ink);

  font-family:
    'DM Sans',
    Arial,
    sans-serif;

  font-size: 14px;

  -webkit-font-smoothing: antialiased;
}

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

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

button {
  cursor: pointer;
}

button:disabled {
  opacity: .65;
  cursor: wait;
}


/* =========================================================
   APP
========================================================= */

#panel-app,
#demo-root {
  min-height: 100vh;
}

.demo-app {
  min-height: 100vh;

  display: grid;

  grid-template-columns:
    238px minmax(0, 1fr);
}


/* =========================================================
   SIDEBAR
========================================================= */

.demo-sidebar {
  position: sticky;
  top: 0;

  height: 100vh;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  padding:
    22px 15px 20px;

  color: #d2e2d7;

  background:
    radial-gradient(
      circle at 0 35%,
      rgba(79, 255, 132, .11),
      transparent 34%
    ),
    radial-gradient(
      circle at 100% 85%,
      rgba(32, 165, 87, .12),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #02130c 0%,
      #041d14 50%,
      #03170f 100%
    );

  border-right:
    1px solid rgba(255,255,255,.055);
}

.demo-sidebar::before {
  content: '';

  position: absolute;

  width: 240px;
  height: 240px;

  left: -150px;
  top: 34%;

  border-radius: 50%;

  border:
    1px solid rgba(115,255,154,.08);
}

.demo-sidebar::after {
  content: '';

  position: absolute;

  right: -70px;
  bottom: 80px;

  width: 190px;
  height: 190px;

  border-radius: 50%;

  background:
    rgba(36, 187, 88, .05);

  filter: blur(15px);
}

.demo-brand {
  position: relative;
  z-index: 2;

  min-height: 65px;

  display: flex;
  align-items: center;

  padding:
    0 10px 12px;
}

.demo-brand img {
  width: 165px;
  height: 60px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 5px 16px
      rgba(0,0,0,.2)
    );
}

.demo-label {
  position: relative;
  z-index: 2;

  display: block;

  margin:
    4px 10px
    18px;

  color:
    rgba(172, 231, 191, .72);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 1.8px;

  text-transform: uppercase;
}

.demo-nav {
  position: relative;
  z-index: 2;

  display: grid;

  gap: 5px;
}

.demo-nav a {
  position: relative;

  min-height: 45px;

  display: flex;
  align-items: center;

  gap: 11px;

  padding:
    0 13px;

  border-radius: 12px;

  color: #b7c9bd;

  font-size: 12px;
  font-weight: 500;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.demo-nav a:hover {
  color: #fff;

  background:
    rgba(55, 164, 91, .12);

  transform:
    translateX(2px);
}

.demo-nav a.active {
  color: #fff;

  background:
    linear-gradient(
      90deg,
      rgba(31, 149, 70, .33),
      rgba(39, 131, 74, .12)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(108, 239, 145, .06);
}

.demo-nav a.active::before {
  content: '';

  position: absolute;

  left: -15px;

  width: 5px;
  height: 27px;

  border-radius:
    0 5px 5px 0;

  background:
    linear-gradient(
      180deg,
      #8cff75,
      #2fe268
    );

  box-shadow:
    0 0 17px
    rgba(66,255,118,.42);
}

.nav-icon {
  width: 20px;

  display: grid;
  place-items: center;

  color: #8be0a5;

  font-size: 15px;
}


/* =========================================================
   SIDEBAR FOOT
========================================================= */

.demo-sidebar-foot {
  position: relative;
  z-index: 2;

  margin-top: auto;

  padding:
    18px 10px 0;

  border-top:
    1px solid
    rgba(255,255,255,.075);
}

.demo-sidebar-foot::before {
  content: 'Pessoas impulsionam o futuro.';

  display: block;

  margin-bottom: 16px;

  padding:
    16px;

  border:
    1px solid
    rgba(118,255,158,.11);

  border-radius:
    15px;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      rgba(22, 99, 56, .70),
      rgba(2, 27, 17, .56)
    );

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 16px;
  font-weight: 700;

  line-height: 1.1;
}

.demo-sidebar-foot b {
  display: block;

  color: #fff;

  font-size: 10px;
}

.demo-sidebar-foot span {
  display: block;

  margin-top: 3px;

  color: #82998b;

  font-size: 9px;
}


/* =========================================================
   MAIN
========================================================= */

.demo-main {
  min-width: 0;
}


/* =========================================================
   TOPBAR
========================================================= */

.demo-topbar {
  position: sticky;
  top: 0;

  z-index: 20;

  height: 68px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    0 27px;

  background:
    rgba(255,255,255,.91);

  backdrop-filter:
    blur(18px);

  border-bottom:
    1px solid
    rgba(218,229,221,.9);
}

.demo-topbar > small {
  position: relative;

  width:
    min(530px, 46vw);

  min-height: 41px;

  display: flex;
  align-items: center;

  padding:
    0 58px 0 43px;

  overflow: hidden;

  color: #7f8e85;

  font-size: 11px;

  white-space: nowrap;

  text-overflow: ellipsis;

  border:
    1px solid #e1e8e3;

  border-radius: 13px;

  background:
    #f6f9f7;
}

.demo-topbar > small::before {
  content: '⌕';

  position: absolute;

  left: 15px;

  color: #485a4f;

  font-size: 18px;
}

.demo-topbar > small::after {
  content: 'Ctrl K';

  position: absolute;

  right: 8px;

  padding:
    4px 7px;

  color: #7d8b83;

  font-size: 8px;

  border-radius: 6px;

  background: #e9efeb;
}

.top-actions {
  display: flex;
  align-items: center;

  gap: 10px;
}

.top-actions > button {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  padding: 0;

  overflow: hidden;

  color: transparent;

  border:
    1px solid #e2e9e4;

  border-radius: 50%;

  background: #fff;
}

.top-actions > button::after {
  content: '?';

  color: #3b4d42;

  font-weight: 800;
}

.user-chip {
  min-height: 46px;

  display: flex !important;
  align-items: center;

  gap: 10px;

  padding:
    4px 8px 4px 4px !important;

  border: 0 !important;

  border-radius:
    14px !important;

  background:
    transparent !important;

  transition:
    background .2s ease;
}

.user-chip:hover {
  background:
    #f1f6f3 !important;
}

.user-chip > span:not(.avatar) {
  color: #637269;

  font-size: 11px;
}


/* =========================================================
   AVATAR
========================================================= */

.avatar {
  width: 36px;
  height: 36px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  overflow: hidden;

  border-radius: 50%;

  color: #15763d;

  background:
    linear-gradient(
      145deg,
      #e2f8e8,
      #d4f0dc
    );

  font-size: 10px;
  font-weight: 800;

  box-shadow:
    0 0 0 2px #fff,
    0 4px 12px
    rgba(11,69,37,.12);
}

.avatar img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================================================
   CONTEÚDO
========================================================= */

.demo-content {
  width: 100%;

  max-width: 1600px;

  margin: 0 auto;

  padding:
    22px 28px 50px;
}


/* =========================================================
   HERO DO DASHBOARD
========================================================= */

.ibv-dashboard-hero {
  position: relative;

  min-height: 220px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.18fr)
    minmax(380px, .82fr);

  margin-bottom: -12px;

  overflow: hidden;

  border:
    1px solid #dfe9e2;

  border-radius:
    21px 21px 10px 10px;

  background:
    linear-gradient(
      102deg,
      #fff 0%,
      #fff 49%,
      #edf8f0 67%,
      #07351f 100%
    );

  box-shadow:
    var(--shadow);
}

.ibv-dashboard-hero::before {
  content: '';

  position: absolute;

  width: 340px;
  height: 340px;

  left: 38%;
  top: 50px;

  border-radius: 50%;

  background:
    rgba(43, 187, 89, .11);

  filter: blur(55px);
}

.ibv-hero-copy {
  position: relative;
  z-index: 2;

  padding:
    30px 35px 35px;
}

.ibv-hero-eyebrow {
  color: var(--green);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 1.8px;

  text-transform: uppercase;
}

.ibv-hero-copy h1 {
  margin:
    8px 0 7px;

  color: #11231a;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size:
    clamp(34px, 3.2vw, 47px);

  font-weight: 700;

  line-height: .95;

  letter-spacing: -2px;
}

.ibv-hero-copy h1 strong {
  color: #087a3c;
}

.hero-wave {
  display: inline-block;

  margin-left: 4px;

  font-size: .58em;

  transform:
    rotate(-7deg);
}

.ibv-hero-copy > p {
  max-width: 520px;

  margin:
    13px 0 16px;

  color: #536159;

  font-size: 13px;
}

.ibv-hero-copy blockquote {
  margin: 0;

  color: #48574f;

  font-size: 10px;
}

.ibv-hero-copy blockquote span {
  display: block;

  margin-top: 5px;

  color: #183123;

  font-size: 8px;
  font-weight: 800;
}


/* =========================================================
   HERO TECH
========================================================= */

.ibv-hero-art {
  position: relative;

  min-height: 220px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(60,255,118,.18),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #0c442b,
      #042317 56%,
      #0a4a2b
    );
}

.ibv-hero-art::before {
  content: '';

  position: absolute;

  inset: -100px;

  opacity: .55;

  background:
    repeating-linear-gradient(
      125deg,
      transparent 0 46px,
      rgba(255,255,255,.035)
      46px 47px
    );

  transform:
    rotate(-4deg);
}

.ibv-hero-art::after {
  content: '';

  position: absolute;

  left: 9%;
  top: 20%;

  width: 48%;
  height: 62%;

  border:
    1px solid
    rgba(123,255,160,.12);

  border-radius:
    30px;

  transform:
    rotate(-10deg);
}

.hero-glow {
  position: absolute;

  right: 15%;
  top: 8%;

  width: 220px;
  height: 220px;

  border-radius: 50%;

  background:
    rgba(62,255,118,.15);

  filter: blur(55px);
}

.hero-orbit {
  position: absolute;

  border:
    1px solid
    rgba(107,255,148,.14);

  border-radius: 50%;
}

.orbit-one {
  width: 245px;
  height: 245px;

  right: -40px;
  top: -10px;
}

.orbit-two {
  width: 130px;
  height: 130px;

  left: 20px;
  bottom: -55px;
}

.hero-message {
  position: relative;
  z-index: 3;

  height: 100%;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  align-content: center;

  gap: 16px;

  padding: 33px;
}

.hero-message > small {
  grid-column:
    1 / -1;

  color: #89efa5;

  font-size: 8px;

  letter-spacing: 2px;
}

.hero-message > strong {
  color: #d9eee0;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 14px;

  line-height: 1.7;

  letter-spacing: 1.8px;

  text-transform: uppercase;
}

.hero-message > span {
  align-self: end;

  padding: 15px;

  color: #fff;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius: 13px;

  background:
    rgba(0,0,0,.16);

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 16px;
  font-weight: 600;

  line-height: 1.25;
}


/* =========================================================
   MÉTRICAS
========================================================= */

.metrics {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap: 13px;

  margin-bottom: 15px;
}

.premium-metrics {
  position: relative;
  z-index: 5;

  padding:
    0 15px;
}

.metric-card {
  background: #fff;

  border:
    1px solid var(--line);

  border-radius: 15px;

  box-shadow:
    var(--shadow);
}

.premium-card {
  position: relative;

  min-height: 150px;

  overflow: hidden;

  padding: 16px;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.premium-card:hover {
  transform:
    translateY(-3px);

  border-color:
    #cfe1d4;

  box-shadow:
    var(--shadow-hover);
}

.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.metric-icon-box {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  font-size: 17px;
  font-weight: 800;
}

.metric-icon-box.green {
  color: #08773a;
  background: #ddf8e5;
}

.metric-icon-box.blue {
  color: #4262cf;
  background: #e6ecff;
}

.metric-icon-box.amber {
  color: #c88612;
  background: #fff0d1;
}

.metric-icon-box.cyan {
  color: #15877c;
  background: #dff7f3;
}

.metric-menu {
  width: 28px;
  height: 28px;

  padding: 0;

  display: grid;
  place-items: center;

  border: 0;

  border-radius: 8px;

  color: #809087;

  background: transparent;

  font-size: 11px;
}

.metric-menu:hover {
  background: #f2f6f3;
}

.metric-number {
  margin-top: 9px;

  color: #13251b;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 27px;
  font-weight: 700;
}

.metric-title {
  margin-top: 1px;

  color: #526158;

  font-size: 10px;
}

.metric-growth {
  margin-top: 9px;

  color: #079143;

  font-size: 9px;
  font-weight: 800;
}

.metric-growth span {
  margin-left: 4px;

  color: #98a39c;

  font-weight: 500;
}

.metric-mini-chart {
  position: absolute;

  right: 14px;
  bottom: 16px;

  height: 27px;

  display: flex;
  align-items: flex-end;

  gap: 3px;
}

.metric-mini-chart i {
  width: 7px;

  display: block;

  border-radius:
    5px 5px 2px 2px;

  background:
    linear-gradient(
      180deg,
      #49d373,
      #abe9be
    );
}

.metric-mini-chart i:nth-child(1) {height: 23%}
.metric-mini-chart i:nth-child(2) {height: 43%}
.metric-mini-chart i:nth-child(3) {height: 36%}
.metric-mini-chart i:nth-child(4) {height: 68%}
.metric-mini-chart i:nth-child(5) {height: 57%}
.metric-mini-chart i:nth-child(6) {height: 92%}

.metric-mini-chart.second i {
  background:
    linear-gradient(
      180deg,
      #6383ff,
      #c1d0ff
    );
}

.metric-mini-chart.third i {
  background:
    linear-gradient(
      180deg,
      #e5a12b,
      #f9dfb8
    );
}

.metric-mini-chart.fourth i {
  background:
    linear-gradient(
      180deg,
      #26b99d,
      #b6ece1
    );
}


/* =========================================================
   SUPERFÍCIES
========================================================= */

.surface {
  background:
    rgba(255,255,255,.97);

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow);
}

.premium-surface {
  padding: 18px;
}

.surface-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 15px;
}

.surface-head h2 {
  margin: 0;

  color: #17281e;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 17px;

  letter-spacing: -.35px;
}

.surface-head p {
  margin:
    3px 0 0;

  color: #8b9890;

  font-size: 9px;
}

.surface-head a {
  color: var(--green);

  font-size: 10px;
  font-weight: 700;
}

.surface-action {
  flex: 0 0 auto;

  padding:
    8px 10px;

  color:
    #23392c !important;

  border:
    1px solid #e0e8e2;

  border-radius: 9px;

  background: #fff;

  font-size:
    9px !important;

  font-weight: 700;

  transition: .2s ease;
}

.surface-action:hover {
  color:
    var(--green) !important;

  border-color:
    #bfd8c6;
}


/* =========================================================
   GRIDS
========================================================= */

.dashboard-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(310px, .85fr);

  gap: 14px;
}

.dashboard-bottom-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 14px;

  margin-top: 14px;
}


/* =========================================================
   TABELAS
========================================================= */

.premium-table-wrap {
  width: 100%;

  overflow-x: auto;
}

.recent-table,
.candidate-table {
  width: 100%;

  border-collapse:
    separate;

  border-spacing: 0;
}

.premium-table thead {
  background:
    #f4f8f5;
}

.recent-table th,
.recent-table td,
.candidate-table th,
.candidate-table td {
  text-align: left;
}

.premium-table th {
  padding:
    9px 10px;

  color: #7d8b83;

  border-top:
    1px solid #e7eee9;

  border-bottom:
    1px solid #e3eae5;

  font-size: 8px;
  font-weight: 700;
}

.premium-table th:first-child {
  border-left:
    1px solid #e7eee9;

  border-radius:
    9px 0 0 9px;
}

.premium-table th:last-child {
  border-right:
    1px solid #e7eee9;

  border-radius:
    0 9px 9px 0;
}

.recent-table td {
  padding:
    10px 9px;

  border-bottom:
    1px solid #edf1ee;

  color: #3b4c42;

  font-size: 9px;
}

.candidate-table th {
  padding:
    11px 9px;

  color: #88958d;

  border-bottom:
    1px solid var(--line);

  font-size: 8px;

  text-transform: uppercase;

  letter-spacing: .6px;
}

.candidate-table td {
  padding:
    12px 9px;

  border-bottom:
    1px solid var(--line);

  font-size: 10px;
}

.candidate-cell {
  display: flex;
  align-items: center;

  gap: 8px;
}

.candidate-cell .avatar {
  width: 31px;
  height: 31px;

  font-size: 8px;
}

.candidate-cell b {
  display: block;

  color: #1d3024;

  font-size: 9px;
}

.candidate-cell small {
  display: block;

  margin-top: 2px;

  color: #8a968f;

  font-size: 7px;
}

.row-link {
  display: inline-flex;

  padding:
    6px 8px;

  color: var(--green);

  border:
    1px solid #dce8df;

  border-radius: 8px;

  background: #fff;

  font-size: 8px;
  font-weight: 700;
}


/* =========================================================
   STATUS
========================================================= */

.status-badge,
.tag {
  display: inline-block;

  padding:
    5px 8px;

  border-radius: 999px;

  color: #3c8148;

  background: #e6f7ea;

  font-size: 8px;
  font-weight: 700;
}

.status-badge.interview {
  color: #6647ad;
  background: #eee9ff;
}

.status-badge.approved {
  color: #176e3d;
  background: #dbf5e4;
}

.status-badge.new {
  color: #3158ad;
  background: #e5ecff;
}

.status-badge.analysis {
  color: #956510;
  background: #fff1d0;
}


/* =========================================================
   FUNIL PREMIUM
========================================================= */

.period-button {
  flex: 0 0 auto;

  padding:
    8px 10px;

  color: #58675f;

  border:
    1px solid #e1e8e3;

  border-radius: 9px;

  background: #fff;

  font-size: 8px;
}

.premium-funnel {
  display: grid;

  gap: 13px;
}

.premium-funnel-row {
  display: grid;

  grid-template-columns:
    103px minmax(0,1fr) 34px;

  align-items: center;

  gap: 8px;
}

.premium-funnel-row > b {
  font-size: 9px;
}

.premium-funnel-track {
  height: 18px;

  overflow: hidden;

  border-radius:
    4px 11px 11px 4px;

  background:
    linear-gradient(
      90deg,
      #edf4ef,
      #e5efe8
    );
}

.premium-funnel-track span {
  display: block;

  height: 100%;

  border-radius:
    3px 10px 10px 3px;

  background:
    linear-gradient(
      90deg,
      #004b2d,
      #108d42,
      #48c86b
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.24);
}

.premium-funnel-total {
  display: grid;
}

.premium-funnel-total strong {
  color: #183024;

  font-size: 10px;
}

.premium-funnel-total small {
  color: #929d96;

  font-size: 7px;
}

.conversion-box {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-top: 16px;

  padding:
    10px 11px;

  color: #17492c;

  border-radius: 11px;

  background:
    linear-gradient(
      90deg,
      #e0f9e8,
      #edfff2
    );
}

.conversion-box > span {
  width: 31px;
  height: 31px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  color: #0d7b39;

  border-radius: 9px;

  background: #c8f3d4;

  font-size: 18px;
}

.conversion-box strong {
  display: block;

  font-size: 9px;
}

.conversion-box small {
  display: block;

  margin-top: 2px;

  color: #687b70;

  font-size: 7px;
}


/* =========================================================
   ENTREVISTAS DO DASHBOARD
========================================================= */

.interview-preview-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 9px;
}

.interview-preview {
  min-height: 127px;

  display: flex;

  gap: 10px;

  padding: 11px;

  border:
    1px solid #e4ebe6;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      #fff,
      #fafcfb
    );
}

.interview-date {
  width: 42px;

  flex: 0 0 auto;

  display: flex;
  flex-direction: column;

  align-items: center;

  padding:
    7px 3px;

  border-radius: 9px;

  background: #f2f6f3;
}

.interview-date small,
.interview-date span {
  color: #6e7c74;

  font-size: 7px;
  font-weight: 700;
}

.interview-date strong {
  margin:
    3px 0;

  color: #173a24;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 18px;
}

.interview-data {
  min-width: 0;
}

.interview-data > small {
  display: block;

  margin-bottom: 7px;

  color: #607067;

  font-size: 7px;
}

.interview-data strong {
  display: block;

  overflow: hidden;

  color: #203127;

  font-size: 9px;

  white-space: nowrap;

  text-overflow: ellipsis;
}

.interview-data span {
  display: block;

  margin-top: 2px;

  overflow: hidden;

  color: #859189;

  font-size: 7px;

  white-space: nowrap;

  text-overflow: ellipsis;
}

.interview-data p {
  margin:
    12px 0 0;

  color: #52645a;

  font-size: 7px;
}


/* =========================================================
   VAGAS EM DESTAQUE
========================================================= */

.featured-jobs {
  display: grid;

  gap: 8px;
}

.featured-job-card {
  display: flex;
  align-items: center;

  gap: 11px;

  padding: 10px;

  border:
    1px solid #e2eae4;

  border-radius: 12px;

  background: #fff;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.featured-job-card:hover {
  transform:
    translateX(3px);

  border-color: #bdd8c5;

  box-shadow:
    0 7px 18px
    rgba(13,70,37,.06);
}

.job-icon {
  width: 43px;
  height: 43px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  color: #91ff9c;

  border-radius: 10px;

  background:
    radial-gradient(
      circle at 30% 20%,
      #0a6137,
      #032a19 70%
    );

  box-shadow:
    inset 0 0 15px
    rgba(83,255,126,.10);

  font-family: monospace;

  font-size: 13px;
  font-weight: 700;
}

.featured-job-info {
  min-width: 0;

  flex: 1;
}

.featured-job-title {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 7px;
}

.featured-job-title strong {
  overflow: hidden;

  color: #1b3023;

  font-size: 9px;

  white-space: nowrap;

  text-overflow: ellipsis;
}

.featured-job-title > span {
  flex: 0 0 auto;

  padding:
    4px 7px;

  color: #1b7940;

  border-radius: 999px;

  background: #daf7e2;

  font-size: 7px;
  font-weight: 800;
}

.job-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 4px;

  margin:
    6px 0;
}

.job-tags small {
  padding:
    3px 6px;

  color: #66766d;

  border-radius: 5px;

  background: #f1f5f2;

  font-size: 7px;
}

.job-meta {
  display: flex;
  flex-wrap: wrap;

  gap: 11px;

  color: #738078;

  font-size: 7px;
}


/* =========================================================
   HEADINGS DAS OUTRAS TELAS
========================================================= */

.demo-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 25px;
}

.demo-kicker {
  color: var(--green);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 1.7px;

  text-transform: uppercase;
}

.demo-heading h1 {
  margin:
    7px 0 5px;

  color: #13251b;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 32px;

  letter-spacing: -1.2px;
}

.demo-heading p {
  margin: 0;

  color: var(--muted);

  font-size: 12px;
}


/* =========================================================
   BOTÕES
========================================================= */

.demo-btn {
  padding:
    10px 13px;

  color: var(--green);

  border:
    1px solid #bdd5c3;

  border-radius: 9px;

  background: #fff;

  font-size: 10px;
  font-weight: 700;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.demo-btn.primary {
  color: #fff;

  border-color: #12843e;

  background:
    linear-gradient(
      135deg,
      #159a47,
      #087535
    );

  box-shadow:
    0 7px 18px
    rgba(17,140,65,.15);
}

.demo-btn:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 8px 20px
    rgba(18,61,31,.09);
}


/* =========================================================
   SUBNAV
========================================================= */

.demo-subnav {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin:
    -4px 0 18px;
}

.demo-subnav a {
  padding:
    8px 11px;

  color: var(--muted);

  border:
    1px solid var(--line);

  border-radius: 8px;

  background: #fff;

  font-size: 9px;
}

.demo-subnav a.active {
  color: var(--green);

  border-color: #b8d9bf;

  background: #ecf8ef;
}


/* =========================================================
   FILTROS
========================================================= */

.filters {
  display: flex;

  gap: 9px;

  margin-bottom: 15px;
}

.filters input,
.filters select,
.demo-field input,
.demo-field textarea,
.demo-field select {
  padding:
    11px 12px;

  color: var(--ink);

  outline: none;

  border:
    1px solid #d5e0d8;

  border-radius: 9px;

  background: #fff;
}

.filters input {
  flex: 1;
}

.filters input:focus,
.filters select:focus,
.demo-field input:focus,
.demo-field textarea:focus,
.demo-field select:focus {
  border-color: #64ae79;

  box-shadow:
    0 0 0 3px
    rgba(56,168,88,.09);
}


/* =========================================================
   FORMULÁRIOS DO MODAL
========================================================= */

.demo-field {
  margin-top: 15px;
}

.demo-field label {
  display: block;

  margin-bottom: 6px;

  color: #34483b;

  font-size: 10px;
  font-weight: 700;
}

.demo-field input,
.demo-field textarea,
.demo-field select {
  width: 100%;
}


/* =========================================================
   LISTAS / CARDS
========================================================= */

.candidate-list {
  display: grid;

  gap: 11px;
}

.application-card {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding: 17px;
}

.application-card h2 {
  margin:
    8px 0 5px;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 17px;
}

.application-card p {
  margin: 0;

  color: var(--muted);

  font-size: 10px;

  line-height: 1.6;
}


/* =========================================================
   KANBAN
========================================================= */

.kanban {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(185px,1fr)
    );

  gap: 10px;

  overflow-x: auto;

  padding-bottom: 12px;
}

.kanban-col {
  min-height: 470px;

  padding: 10px;

  border-radius: 12px;

  background: #edf3ef;
}

.kanban-col h3 {
  display: flex;

  justify-content: space-between;

  margin:
    4px 4px 12px;

  color: #2f4336;

  font-size: 9px;
}

.kanban-col h3 span {
  color: var(--muted);

  font-weight: 400;
}

.kanban-card {
  margin-bottom: 8px;

  padding: 12px;

  cursor: grab;

  border:
    1px solid var(--line);

  border-radius: 10px;

  background: #fff;

  box-shadow:
    0 5px 14px
    rgba(18,48,22,.04);

  transition: .2s ease;
}

.kanban-card:hover {
  transform:
    translateY(-2px);

  box-shadow: var(--shadow);
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card p {
  margin:
    8px 0 10px;

  color: var(--muted);

  font-size: 8px;
}

.kanban-card small {
  color: #94a197;

  font-size: 7px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;

  gap: 5px;

  margin-top: 11px;
}

.tag-list .tag {
  padding:
    4px 7px;

  color: #51832d;

  background: #eff7f0;
}


/* =========================================================
   PERFIL DO CANDIDATO
========================================================= */

.profile-hero {
  display: flex;
  align-items: center;

  gap: 15px;

  margin-bottom: 20px;
}

.profile-hero .avatar {
  width: 63px;
  height: 63px;

  font-size: 17px;
}

.profile-hero h1 {
  margin:
    0 0 4px;

  color: #17281e;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 27px;
}

.profile-hero p {
  margin: 0;

  color: var(--muted);

  font-size: 11px;
}

.profile-actions {
  display: flex;

  gap: 7px;

  margin-left: auto;
}

.tabs {
  display: flex;

  gap: 22px;

  overflow-x: auto;

  margin-bottom: 17px;

  border-bottom:
    1px solid var(--line);
}

.tabs button {
  padding:
    10px 0;

  color: var(--muted);

  border: 0;
  border-bottom:
    2px solid transparent;

  background: none;

  font-size: 10px;

  white-space: nowrap;
}

.tabs button.active {
  color: var(--green);

  border-color:
    var(--green);

  font-weight: 700;
}

.profile-grid {
  display: grid;

  grid-template-columns:
    1fr .7fr;

  gap: 16px;
}

.profile-grid > .surface,
.profile-grid > aside.surface {
  padding: 19px;
}

.info-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 16px;
}

.info-item label {
  display: block;

  margin-bottom: 4px;

  color: var(--muted);

  font-size: 8px;
}

.info-item b {
  font-size: 10px;
}

.note {
  margin:
    9px 0;

  padding:
    10px 12px;

  color: #3b4f42;

  border-left:
    3px solid #64c77c;

  border-radius:
    0 8px 8px 0;

  background: #f2f9f4;

  font-size: 9px;

  line-height: 1.5;
}

.note small {
  display: block;

  margin-top: 6px;

  color: var(--muted);

  font-size: 7px;
}


/* =========================================================
   FUNIL ANTIGO / RELATÓRIOS
========================================================= */

.funnel {
  display: grid;

  gap: 12px;
}

.funnel-row {
  display: grid;

  grid-template-columns:
    105px 1fr 28px;

  align-items: center;

  gap: 8px;

  font-size: 9px;
}

.funnel-row b {
  font-size: 9px;
}

.funnel-bar {
  height: 8px;

  overflow: hidden;

  border-radius: 20px;

  background: #edf2ee;
}

.funnel-bar i {
  display: block;

  height: 100%;

  border-radius: 20px;

  background:
    linear-gradient(
      90deg,
      #138b45,
      #72d785
    );
}


/* =========================================================
   MODAL
========================================================= */

.modal-backdrop {
  position: fixed;

  inset: 0;

  z-index: 100;

  display: none;
  place-items: center;

  padding: 20px;

  background:
    rgba(2,18,11,.72);

  backdrop-filter:
    blur(7px);
}

.modal-backdrop.open {
  display: grid;
}

.modal {
  width:
    min(540px,100%);

  max-height:
    90vh;

  overflow-y: auto;

  padding: 25px;

  border:
    1px solid
    rgba(255,255,255,.45);

  border-radius: 18px;

  background: #fff;

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.28);
}

.modal-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;
}

.modal-head h2 {
  margin: 0;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 21px;
}

.modal-head > button {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  padding: 0;

  color: #64736a;

  border: 0;

  border-radius: 50%;

  background: #f2f6f3;

  font-size: 20px;
}


/* =========================================================
   PROFILE DROPDOWN
========================================================= */

#profile-dropdown {
  font-family:
    'DM Sans',
    sans-serif !important;

  border:
    1px solid #e2e9e4 !important;

  border-radius:
    15px !important;

  box-shadow:
    0 18px 55px
    rgba(9,40,24,.15) !important;
}

#profile-dropdown button {
  border-radius: 8px !important;
}

#profile-dropdown button:hover {
  background:
    #f4f8f5 !important;
}


/* =========================================================
   TOAST
========================================================= */

.toast {
  position: fixed;

  right: 24px;
  bottom: 24px;

  z-index: 150;

  padding:
    12px 16px;

  opacity: 0;

  pointer-events: none;

  color: #fff;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      #062719,
      #0b4b2b
    );

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.20);

  font-size: 10px;

  transform:
    translateY(10px);

  transition: .2s ease;
}

.toast.show {
  opacity: 1;

  transform: none;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty-demo {
  padding:
    48px 20px;

  color: var(--muted);

  text-align: center;
}

.empty-demo strong {
  display: block;

  margin-bottom: 5px;

  color: #263b2e;
}


/* =========================================================
   RESPONSIVIDADE — NOTEBOOK
========================================================= */

@media (max-width: 1250px) {

  .demo-app {
    grid-template-columns:
      210px minmax(0,1fr);
  }

  .demo-sidebar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .premium-funnel-row {
    grid-template-columns:
      90px 1fr 32px;
  }

}


/* =========================================================
   RESPONSIVIDADE — TABLET
========================================================= */

@media (max-width: 1050px) {

  .ibv-dashboard-hero {
    grid-template-columns:
      1fr .8fr;
  }

  .hero-message {
    grid-template-columns: 1fr;
  }

  .hero-message > small {
    grid-column: auto;
  }

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

  .dashboard-grid,
  .dashboard-bottom-grid,
  .profile-grid {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   RESPONSIVIDADE — MOBILE
========================================================= */

@media (max-width: 760px) {

  .demo-app {
    display: block;
  }

  .demo-sidebar {
    position: relative;

    height: auto;

    padding:
      11px 14px;
  }

  .demo-sidebar::before,
  .demo-sidebar::after {
    display: none;
  }

  .demo-brand {
    min-height: auto;

    padding: 0;
  }

  .demo-brand img {
    width: 120px;
    height: 43px;
  }

  .demo-label {
    display: none;
  }

  .demo-nav {
    display: flex;

    gap: 4px;

    overflow-x: auto;

    margin-top: 9px;

    padding-bottom: 3px;
  }

  .demo-nav a {
    min-height: 38px;

    flex: 0 0 auto;

    padding:
      0 10px;

    white-space: nowrap;
  }

  .demo-nav a.active::before {
    display: none;
  }

  .demo-sidebar-foot {
    display: none;
  }

  .demo-topbar {
    height: 58px;

    padding:
      0 12px;
  }

  .demo-topbar > small {
    width: auto;

    min-width: 155px;

    padding-right: 12px;
  }

  .demo-topbar > small::after {
    display: none;
  }

  .demo-content {
    padding:
      14px 12px 35px;
  }

  .ibv-dashboard-hero {
    grid-template-columns: 1fr;

    min-height: 185px;
  }

  .ibv-hero-art {
    display: none;
  }

  .ibv-hero-copy {
    padding:
      24px 20px 34px;
  }

  .ibv-hero-copy h1 {
    font-size: 35px;
  }

  .premium-metrics {
    padding:
      0 5px;
  }

  .interview-preview-grid {
    grid-template-columns: 1fr;
  }

  .demo-heading {
    display: block;
  }

  .demo-heading .demo-btn {
    margin-top: 13px;
  }

  .filters {
    display: grid;

    grid-template-columns: 1fr;
  }

  .profile-hero {
    align-items: flex-start;

    flex-wrap: wrap;
  }

  .profile-actions {
    width: 100%;

    margin-left: 0;
  }

  .profile-actions .demo-btn {
    flex: 1;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .application-card {
    align-items: flex-start;

    flex-direction: column;
  }

}


/* =========================================================
   RESPONSIVIDADE — CELULAR PEQUENO
========================================================= */

@media (max-width: 480px) {

  .metrics {
    grid-template-columns: 1fr;
  }

  .premium-card {
    min-height: 135px;
  }

  .ibv-hero-copy h1 {
    font-size: 32px;
  }

  .user-chip > span:not(.avatar) {
    display: none;
  }

  .tabs {
    gap: 14px;
  }

}@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* =========================================================
   IBV TECH — PAINEL DE RECRUTAMENTO
========================================================= */

:root {
  --bg: #f4f8f5;
  --surface: #ffffff;
  --surface-2: #f7faf8;

  --ink: #102019;
  --ink-soft: #32443a;
  --muted: #77867d;

  --line: #e2ebe5;
  --line-strong: #d5e1d8;

  --green: #138b45;
  --green-2: #25b65d;
  --green-3: #56d67e;
  --lime: #8ef25f;

  --deep: #02130c;
  --deep-2: #052218;
  --deep-3: #0a3824;

  --blue: #4267df;
  --amber: #d9961e;
  --purple: #7658c8;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;

  --shadow:
    0 8px 30px rgba(12, 48, 29, .055);

  --shadow-hover:
    0 18px 50px rgba(8, 48, 27, .11);
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background:
    radial-gradient(
      circle at 75% 0%,
      rgba(31, 176, 82, .055),
      transparent 30%
    ),
    var(--bg);

  color: var(--ink);

  font-family:
    'DM Sans',
    Arial,
    sans-serif;

  font-size: 14px;

  -webkit-font-smoothing: antialiased;
}

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

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

button {
  cursor: pointer;
}

button:disabled {
  opacity: .65;
  cursor: wait;
}


/* =========================================================
   APP
========================================================= */

#panel-app,
#demo-root {
  min-height: 100vh;
}

.demo-app {
  min-height: 100vh;

  display: grid;

  grid-template-columns:
    238px minmax(0, 1fr);
}


/* =========================================================
   SIDEBAR
========================================================= */

.demo-sidebar {
  position: sticky;
  top: 0;

  height: 100vh;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  padding:
    22px 15px 20px;

  color: #d2e2d7;

  background:
    radial-gradient(
      circle at 0 35%,
      rgba(79, 255, 132, .11),
      transparent 34%
    ),
    radial-gradient(
      circle at 100% 85%,
      rgba(32, 165, 87, .12),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #02130c 0%,
      #041d14 50%,
      #03170f 100%
    );

  border-right:
    1px solid rgba(255,255,255,.055);
}

.demo-sidebar::before {
  content: '';

  position: absolute;

  width: 240px;
  height: 240px;

  left: -150px;
  top: 34%;

  border-radius: 50%;

  border:
    1px solid rgba(115,255,154,.08);
}

.demo-sidebar::after {
  content: '';

  position: absolute;

  right: -70px;
  bottom: 80px;

  width: 190px;
  height: 190px;

  border-radius: 50%;

  background:
    rgba(36, 187, 88, .05);

  filter: blur(15px);
}

.demo-brand {
  position: relative;
  z-index: 2;

  min-height: 65px;

  display: flex;
  align-items: center;

  padding:
    0 10px 12px;
}

.demo-brand img {
  width: 165px;
  height: 60px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 5px 16px
      rgba(0,0,0,.2)
    );
}

.demo-label {
  position: relative;
  z-index: 2;

  display: block;

  margin:
    4px 10px
    18px;

  color:
    rgba(172, 231, 191, .72);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 1.8px;

  text-transform: uppercase;
}

.demo-nav {
  position: relative;
  z-index: 2;

  display: grid;

  gap: 5px;
}

.demo-nav a {
  position: relative;

  min-height: 45px;

  display: flex;
  align-items: center;

  gap: 11px;

  padding:
    0 13px;

  border-radius: 12px;

  color: #b7c9bd;

  font-size: 12px;
  font-weight: 500;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.demo-nav a:hover {
  color: #fff;

  background:
    rgba(55, 164, 91, .12);

  transform:
    translateX(2px);
}

.demo-nav a.active {
  color: #fff;

  background:
    linear-gradient(
      90deg,
      rgba(31, 149, 70, .33),
      rgba(39, 131, 74, .12)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(108, 239, 145, .06);
}

.demo-nav a.active::before {
  content: '';

  position: absolute;

  left: -15px;

  width: 5px;
  height: 27px;

  border-radius:
    0 5px 5px 0;

  background:
    linear-gradient(
      180deg,
      #8cff75,
      #2fe268
    );

  box-shadow:
    0 0 17px
    rgba(66,255,118,.42);
}

.nav-icon {
  width: 20px;

  display: grid;
  place-items: center;

  color: #8be0a5;

  font-size: 15px;
}


/* =========================================================
   SIDEBAR FOOT
========================================================= */

.demo-sidebar-foot {
  position: relative;
  z-index: 2;

  margin-top: auto;

  padding:
    18px 10px 0;

  border-top:
    1px solid
    rgba(255,255,255,.075);
}

.demo-sidebar-foot::before {
  content: 'Pessoas impulsionam o futuro.';

  display: block;

  margin-bottom: 16px;

  padding:
    16px;

  border:
    1px solid
    rgba(118,255,158,.11);

  border-radius:
    15px;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      rgba(22, 99, 56, .70),
      rgba(2, 27, 17, .56)
    );

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 16px;
  font-weight: 700;

  line-height: 1.1;
}

.demo-sidebar-foot b {
  display: block;

  color: #fff;

  font-size: 10px;
}

.demo-sidebar-foot span {
  display: block;

  margin-top: 3px;

  color: #82998b;

  font-size: 9px;
}


/* =========================================================
   MAIN
========================================================= */

.demo-main {
  min-width: 0;
}


/* =========================================================
   TOPBAR
========================================================= */

.demo-topbar {
  position: sticky;
  top: 0;

  z-index: 20;

  height: 68px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    0 27px;

  background:
    rgba(255,255,255,.91);

  backdrop-filter:
    blur(18px);

  border-bottom:
    1px solid
    rgba(218,229,221,.9);
}

.demo-topbar > small {
  position: relative;

  width:
    min(530px, 46vw);

  min-height: 41px;

  display: flex;
  align-items: center;

  padding:
    0 58px 0 43px;

  overflow: hidden;

  color: #7f8e85;

  font-size: 11px;

  white-space: nowrap;

  text-overflow: ellipsis;

  border:
    1px solid #e1e8e3;

  border-radius: 13px;

  background:
    #f6f9f7;
}

.demo-topbar > small::before {
  content: '⌕';

  position: absolute;

  left: 15px;

  color: #485a4f;

  font-size: 18px;
}

.demo-topbar > small::after {
  content: 'Ctrl K';

  position: absolute;

  right: 8px;

  padding:
    4px 7px;

  color: #7d8b83;

  font-size: 8px;

  border-radius: 6px;

  background: #e9efeb;
}

.top-actions {
  display: flex;
  align-items: center;

  gap: 10px;
}

.top-actions > button {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  padding: 0;

  overflow: hidden;

  color: transparent;

  border:
    1px solid #e2e9e4;

  border-radius: 50%;

  background: #fff;
}

.top-actions > button::after {
  content: '?';

  color: #3b4d42;

  font-weight: 800;
}

.user-chip {
  min-height: 46px;

  display: flex !important;
  align-items: center;

  gap: 10px;

  padding:
    4px 8px 4px 4px !important;

  border: 0 !important;

  border-radius:
    14px !important;

  background:
    transparent !important;

  transition:
    background .2s ease;
}

.user-chip:hover {
  background:
    #f1f6f3 !important;
}

.user-chip > span:not(.avatar) {
  color: #637269;

  font-size: 11px;
}


/* =========================================================
   AVATAR
========================================================= */

.avatar {
  width: 36px;
  height: 36px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  overflow: hidden;

  border-radius: 50%;

  color: #15763d;

  background:
    linear-gradient(
      145deg,
      #e2f8e8,
      #d4f0dc
    );

  font-size: 10px;
  font-weight: 800;

  box-shadow:
    0 0 0 2px #fff,
    0 4px 12px
    rgba(11,69,37,.12);
}

.avatar img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================================================
   CONTEÚDO
========================================================= */

.demo-content {
  width: 100%;

  max-width: 1600px;

  margin: 0 auto;

  padding:
    22px 28px 50px;
}


/* =========================================================
   HERO DO DASHBOARD
========================================================= */

.ibv-dashboard-hero {
  position: relative;

  min-height: 220px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.18fr)
    minmax(380px, .82fr);

  margin-bottom: -12px;

  overflow: hidden;

  border:
    1px solid #dfe9e2;

  border-radius:
    21px 21px 10px 10px;

  background:
    linear-gradient(
      102deg,
      #fff 0%,
      #fff 49%,
      #edf8f0 67%,
      #07351f 100%
    );

  box-shadow:
    var(--shadow);
}

.ibv-dashboard-hero::before {
  content: '';

  position: absolute;

  width: 340px;
  height: 340px;

  left: 38%;
  top: 50px;

  border-radius: 50%;

  background:
    rgba(43, 187, 89, .11);

  filter: blur(55px);
}

.ibv-hero-copy {
  position: relative;
  z-index: 2;

  padding:
    30px 35px 35px;
}

.ibv-hero-eyebrow {
  color: var(--green);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 1.8px;

  text-transform: uppercase;
}

.ibv-hero-copy h1 {
  margin:
    8px 0 7px;

  color: #11231a;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size:
    clamp(34px, 3.2vw, 47px);

  font-weight: 700;

  line-height: .95;

  letter-spacing: -2px;
}

.ibv-hero-copy h1 strong {
  color: #087a3c;
}

.hero-wave {
  display: inline-block;

  margin-left: 4px;

  font-size: .58em;

  transform:
    rotate(-7deg);
}

.ibv-hero-copy > p {
  max-width: 520px;

  margin:
    13px 0 16px;

  color: #536159;

  font-size: 13px;
}

.ibv-hero-copy blockquote {
  margin: 0;

  color: #48574f;

  font-size: 10px;
}

.ibv-hero-copy blockquote span {
  display: block;

  margin-top: 5px;

  color: #183123;

  font-size: 8px;
  font-weight: 800;
}


/* =========================================================
   HERO TECH
========================================================= */

.ibv-hero-art {
  position: relative;

  min-height: 220px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(60,255,118,.18),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #0c442b,
      #042317 56%,
      #0a4a2b
    );
}

.ibv-hero-art::before {
  content: '';

  position: absolute;

  inset: -100px;

  opacity: .55;

  background:
    repeating-linear-gradient(
      125deg,
      transparent 0 46px,
      rgba(255,255,255,.035)
      46px 47px
    );

  transform:
    rotate(-4deg);
}

.ibv-hero-art::after {
  content: '';

  position: absolute;

  left: 9%;
  top: 20%;

  width: 48%;
  height: 62%;

  border:
    1px solid
    rgba(123,255,160,.12);

  border-radius:
    30px;

  transform:
    rotate(-10deg);
}

.hero-glow {
  position: absolute;

  right: 15%;
  top: 8%;

  width: 220px;
  height: 220px;

  border-radius: 50%;

  background:
    rgba(62,255,118,.15);

  filter: blur(55px);
}

.hero-orbit {
  position: absolute;

  border:
    1px solid
    rgba(107,255,148,.14);

  border-radius: 50%;
}

.orbit-one {
  width: 245px;
  height: 245px;

  right: -40px;
  top: -10px;
}

.orbit-two {
  width: 130px;
  height: 130px;

  left: 20px;
  bottom: -55px;
}

.hero-message {
  position: relative;
  z-index: 3;

  height: 100%;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  align-content: center;

  gap: 16px;

  padding: 33px;
}

.hero-message > small {
  grid-column:
    1 / -1;

  color: #89efa5;

  font-size: 8px;

  letter-spacing: 2px;
}

.hero-message > strong {
  color: #d9eee0;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 14px;

  line-height: 1.7;

  letter-spacing: 1.8px;

  text-transform: uppercase;
}

.hero-message > span {
  align-self: end;

  padding: 15px;

  color: #fff;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius: 13px;

  background:
    rgba(0,0,0,.16);

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 16px;
  font-weight: 600;

  line-height: 1.25;
}


/* =========================================================
   MÉTRICAS
========================================================= */

.metrics {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap: 13px;

  margin-bottom: 15px;
}

.premium-metrics {
  position: relative;
  z-index: 5;

  padding:
    0 15px;
}

.metric-card {
  background: #fff;

  border:
    1px solid var(--line);

  border-radius: 15px;

  box-shadow:
    var(--shadow);
}

.premium-card {
  position: relative;

  min-height: 150px;

  overflow: hidden;

  padding: 16px;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.premium-card:hover {
  transform:
    translateY(-3px);

  border-color:
    #cfe1d4;

  box-shadow:
    var(--shadow-hover);
}

.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.metric-icon-box {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  font-size: 17px;
  font-weight: 800;
}

.metric-icon-box.green {
  color: #08773a;
  background: #ddf8e5;
}

.metric-icon-box.blue {
  color: #4262cf;
  background: #e6ecff;
}

.metric-icon-box.amber {
  color: #c88612;
  background: #fff0d1;
}

.metric-icon-box.cyan {
  color: #15877c;
  background: #dff7f3;
}

.metric-menu {
  width: 28px;
  height: 28px;

  padding: 0;

  display: grid;
  place-items: center;

  border: 0;

  border-radius: 8px;

  color: #809087;

  background: transparent;

  font-size: 11px;
}

.metric-menu:hover {
  background: #f2f6f3;
}

.metric-number {
  margin-top: 9px;

  color: #13251b;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 27px;
  font-weight: 700;
}

.metric-title {
  margin-top: 1px;

  color: #526158;

  font-size: 10px;
}

.metric-growth {
  margin-top: 9px;

  color: #079143;

  font-size: 9px;
  font-weight: 800;
}

.metric-growth span {
  margin-left: 4px;

  color: #98a39c;

  font-weight: 500;
}

.metric-mini-chart {
  position: absolute;

  right: 14px;
  bottom: 16px;

  height: 27px;

  display: flex;
  align-items: flex-end;

  gap: 3px;
}

.metric-mini-chart i {
  width: 7px;

  display: block;

  border-radius:
    5px 5px 2px 2px;

  background:
    linear-gradient(
      180deg,
      #49d373,
      #abe9be
    );
}

.metric-mini-chart i:nth-child(1) {height: 23%}
.metric-mini-chart i:nth-child(2) {height: 43%}
.metric-mini-chart i:nth-child(3) {height: 36%}
.metric-mini-chart i:nth-child(4) {height: 68%}
.metric-mini-chart i:nth-child(5) {height: 57%}
.metric-mini-chart i:nth-child(6) {height: 92%}

.metric-mini-chart.second i {
  background:
    linear-gradient(
      180deg,
      #6383ff,
      #c1d0ff
    );
}

.metric-mini-chart.third i {
  background:
    linear-gradient(
      180deg,
      #e5a12b,
      #f9dfb8
    );
}

.metric-mini-chart.fourth i {
  background:
    linear-gradient(
      180deg,
      #26b99d,
      #b6ece1
    );
}


/* =========================================================
   SUPERFÍCIES
========================================================= */

.surface {
  background:
    rgba(255,255,255,.97);

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow);
}

.premium-surface {
  padding: 18px;
}

.surface-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 15px;
}

.surface-head h2 {
  margin: 0;

  color: #17281e;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 17px;

  letter-spacing: -.35px;
}

.surface-head p {
  margin:
    3px 0 0;

  color: #8b9890;

  font-size: 9px;
}

.surface-head a {
  color: var(--green);

  font-size: 10px;
  font-weight: 700;
}

.surface-action {
  flex: 0 0 auto;

  padding:
    8px 10px;

  color:
    #23392c !important;

  border:
    1px solid #e0e8e2;

  border-radius: 9px;

  background: #fff;

  font-size:
    9px !important;

  font-weight: 700;

  transition: .2s ease;
}

.surface-action:hover {
  color:
    var(--green) !important;

  border-color:
    #bfd8c6;
}


/* =========================================================
   GRIDS
========================================================= */

.dashboard-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(310px, .85fr);

  gap: 14px;
}

.dashboard-bottom-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 14px;

  margin-top: 14px;
}


/* =========================================================
   TABELAS
========================================================= */

.premium-table-wrap {
  width: 100%;

  overflow-x: auto;
}

.recent-table,
.candidate-table {
  width: 100%;

  border-collapse:
    separate;

  border-spacing: 0;
}

.premium-table thead {
  background:
    #f4f8f5;
}

.recent-table th,
.recent-table td,
.candidate-table th,
.candidate-table td {
  text-align: left;
}

.premium-table th {
  padding:
    9px 10px;

  color: #7d8b83;

  border-top:
    1px solid #e7eee9;

  border-bottom:
    1px solid #e3eae5;

  font-size: 8px;
  font-weight: 700;
}

.premium-table th:first-child {
  border-left:
    1px solid #e7eee9;

  border-radius:
    9px 0 0 9px;
}

.premium-table th:last-child {
  border-right:
    1px solid #e7eee9;

  border-radius:
    0 9px 9px 0;
}

.recent-table td {
  padding:
    10px 9px;

  border-bottom:
    1px solid #edf1ee;

  color: #3b4c42;

  font-size: 9px;
}

.candidate-table th {
  padding:
    11px 9px;

  color: #88958d;

  border-bottom:
    1px solid var(--line);

  font-size: 8px;

  text-transform: uppercase;

  letter-spacing: .6px;
}

.candidate-table td {
  padding:
    12px 9px;

  border-bottom:
    1px solid var(--line);

  font-size: 10px;
}

.candidate-cell {
  display: flex;
  align-items: center;

  gap: 8px;
}

.candidate-cell .avatar {
  width: 31px;
  height: 31px;

  font-size: 8px;
}

.candidate-cell b {
  display: block;

  color: #1d3024;

  font-size: 9px;
}

.candidate-cell small {
  display: block;

  margin-top: 2px;

  color: #8a968f;

  font-size: 7px;
}

.row-link {
  display: inline-flex;

  padding:
    6px 8px;

  color: var(--green);

  border:
    1px solid #dce8df;

  border-radius: 8px;

  background: #fff;

  font-size: 8px;
  font-weight: 700;
}


/* =========================================================
   STATUS
========================================================= */

.status-badge,
.tag {
  display: inline-block;

  padding:
    5px 8px;

  border-radius: 999px;

  color: #3c8148;

  background: #e6f7ea;

  font-size: 8px;
  font-weight: 700;
}

.status-badge.interview {
  color: #6647ad;
  background: #eee9ff;
}

.status-badge.approved {
  color: #176e3d;
  background: #dbf5e4;
}

.status-badge.new {
  color: #3158ad;
  background: #e5ecff;
}

.status-badge.analysis {
  color: #956510;
  background: #fff1d0;
}


/* =========================================================
   FUNIL PREMIUM
========================================================= */

.period-button {
  flex: 0 0 auto;

  padding:
    8px 10px;

  color: #58675f;

  border:
    1px solid #e1e8e3;

  border-radius: 9px;

  background: #fff;

  font-size: 8px;
}

.premium-funnel {
  display: grid;

  gap: 13px;
}

.premium-funnel-row {
  display: grid;

  grid-template-columns:
    103px minmax(0,1fr) 34px;

  align-items: center;

  gap: 8px;
}

.premium-funnel-row > b {
  font-size: 9px;
}

.premium-funnel-track {
  height: 18px;

  overflow: hidden;

  border-radius:
    4px 11px 11px 4px;

  background:
    linear-gradient(
      90deg,
      #edf4ef,
      #e5efe8
    );
}

.premium-funnel-track span {
  display: block;

  height: 100%;

  border-radius:
    3px 10px 10px 3px;

  background:
    linear-gradient(
      90deg,
      #004b2d,
      #108d42,
      #48c86b
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.24);
}

.premium-funnel-total {
  display: grid;
}

.premium-funnel-total strong {
  color: #183024;

  font-size: 10px;
}

.premium-funnel-total small {
  color: #929d96;

  font-size: 7px;
}

.conversion-box {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-top: 16px;

  padding:
    10px 11px;

  color: #17492c;

  border-radius: 11px;

  background:
    linear-gradient(
      90deg,
      #e0f9e8,
      #edfff2
    );
}

.conversion-box > span {
  width: 31px;
  height: 31px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  color: #0d7b39;

  border-radius: 9px;

  background: #c8f3d4;

  font-size: 18px;
}

.conversion-box strong {
  display: block;

  font-size: 9px;
}

.conversion-box small {
  display: block;

  margin-top: 2px;

  color: #687b70;

  font-size: 7px;
}


/* =========================================================
   ENTREVISTAS DO DASHBOARD
========================================================= */

.interview-preview-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 9px;
}

.interview-preview {
  min-height: 127px;

  display: flex;

  gap: 10px;

  padding: 11px;

  border:
    1px solid #e4ebe6;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      #fff,
      #fafcfb
    );
}

.interview-date {
  width: 42px;

  flex: 0 0 auto;

  display: flex;
  flex-direction: column;

  align-items: center;

  padding:
    7px 3px;

  border-radius: 9px;

  background: #f2f6f3;
}

.interview-date small,
.interview-date span {
  color: #6e7c74;

  font-size: 7px;
  font-weight: 700;
}

.interview-date strong {
  margin:
    3px 0;

  color: #173a24;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 18px;
}

.interview-data {
  min-width: 0;
}

.interview-data > small {
  display: block;

  margin-bottom: 7px;

  color: #607067;

  font-size: 7px;
}

.interview-data strong {
  display: block;

  overflow: hidden;

  color: #203127;

  font-size: 9px;

  white-space: nowrap;

  text-overflow: ellipsis;
}

.interview-data span {
  display: block;

  margin-top: 2px;

  overflow: hidden;

  color: #859189;

  font-size: 7px;

  white-space: nowrap;

  text-overflow: ellipsis;
}

.interview-data p {
  margin:
    12px 0 0;

  color: #52645a;

  font-size: 7px;
}


/* =========================================================
   VAGAS EM DESTAQUE
========================================================= */

.featured-jobs {
  display: grid;

  gap: 8px;
}

.featured-job-card {
  display: flex;
  align-items: center;

  gap: 11px;

  padding: 10px;

  border:
    1px solid #e2eae4;

  border-radius: 12px;

  background: #fff;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.featured-job-card:hover {
  transform:
    translateX(3px);

  border-color: #bdd8c5;

  box-shadow:
    0 7px 18px
    rgba(13,70,37,.06);
}

.job-icon {
  width: 43px;
  height: 43px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  color: #91ff9c;

  border-radius: 10px;

  background:
    radial-gradient(
      circle at 30% 20%,
      #0a6137,
      #032a19 70%
    );

  box-shadow:
    inset 0 0 15px
    rgba(83,255,126,.10);

  font-family: monospace;

  font-size: 13px;
  font-weight: 700;
}

.featured-job-info {
  min-width: 0;

  flex: 1;
}

.featured-job-title {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 7px;
}

.featured-job-title strong {
  overflow: hidden;

  color: #1b3023;

  font-size: 9px;

  white-space: nowrap;

  text-overflow: ellipsis;
}

.featured-job-title > span {
  flex: 0 0 auto;

  padding:
    4px 7px;

  color: #1b7940;

  border-radius: 999px;

  background: #daf7e2;

  font-size: 7px;
  font-weight: 800;
}

.job-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 4px;

  margin:
    6px 0;
}

.job-tags small {
  padding:
    3px 6px;

  color: #66766d;

  border-radius: 5px;

  background: #f1f5f2;

  font-size: 7px;
}

.job-meta {
  display: flex;
  flex-wrap: wrap;

  gap: 11px;

  color: #738078;

  font-size: 7px;
}


/* =========================================================
   HEADINGS DAS OUTRAS TELAS
========================================================= */

.demo-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 25px;
}

.demo-kicker {
  color: var(--green);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 1.7px;

  text-transform: uppercase;
}

.demo-heading h1 {
  margin:
    7px 0 5px;

  color: #13251b;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 32px;

  letter-spacing: -1.2px;
}

.demo-heading p {
  margin: 0;

  color: var(--muted);

  font-size: 12px;
}


/* =========================================================
   BOTÕES
========================================================= */

.demo-btn {
  padding:
    10px 13px;

  color: var(--green);

  border:
    1px solid #bdd5c3;

  border-radius: 9px;

  background: #fff;

  font-size: 10px;
  font-weight: 700;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.demo-btn.primary {
  color: #fff;

  border-color: #12843e;

  background:
    linear-gradient(
      135deg,
      #159a47,
      #087535
    );

  box-shadow:
    0 7px 18px
    rgba(17,140,65,.15);
}

.demo-btn:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 8px 20px
    rgba(18,61,31,.09);
}


/* =========================================================
   SUBNAV
========================================================= */

.demo-subnav {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin:
    -4px 0 18px;
}

.demo-subnav a {
  padding:
    8px 11px;

  color: var(--muted);

  border:
    1px solid var(--line);

  border-radius: 8px;

  background: #fff;

  font-size: 9px;
}

.demo-subnav a.active {
  color: var(--green);

  border-color: #b8d9bf;

  background: #ecf8ef;
}


/* =========================================================
   FILTROS
========================================================= */

.filters {
  display: flex;

  gap: 9px;

  margin-bottom: 15px;
}

.filters input,
.filters select,
.demo-field input,
.demo-field textarea,
.demo-field select {
  padding:
    11px 12px;

  color: var(--ink);

  outline: none;

  border:
    1px solid #d5e0d8;

  border-radius: 9px;

  background: #fff;
}

.filters input {
  flex: 1;
}

.filters input:focus,
.filters select:focus,
.demo-field input:focus,
.demo-field textarea:focus,
.demo-field select:focus {
  border-color: #64ae79;

  box-shadow:
    0 0 0 3px
    rgba(56,168,88,.09);
}


/* =========================================================
   FORMULÁRIOS DO MODAL
========================================================= */

.demo-field {
  margin-top: 15px;
}

.demo-field label {
  display: block;

  margin-bottom: 6px;

  color: #34483b;

  font-size: 10px;
  font-weight: 700;
}

.demo-field input,
.demo-field textarea,
.demo-field select {
  width: 100%;
}


/* =========================================================
   LISTAS / CARDS
========================================================= */

.candidate-list {
  display: grid;

  gap: 11px;
}

.application-card {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding: 17px;
}

.application-card h2 {
  margin:
    8px 0 5px;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 17px;
}

.application-card p {
  margin: 0;

  color: var(--muted);

  font-size: 10px;

  line-height: 1.6;
}


/* =========================================================
   KANBAN
========================================================= */

.kanban {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(185px,1fr)
    );

  gap: 10px;

  overflow-x: auto;

  padding-bottom: 12px;
}

.kanban-col {
  min-height: 470px;

  padding: 10px;

  border-radius: 12px;

  background: #edf3ef;
}

.kanban-col h3 {
  display: flex;

  justify-content: space-between;

  margin:
    4px 4px 12px;

  color: #2f4336;

  font-size: 9px;
}

.kanban-col h3 span {
  color: var(--muted);

  font-weight: 400;
}

.kanban-card {
  margin-bottom: 8px;

  padding: 12px;

  cursor: grab;

  border:
    1px solid var(--line);

  border-radius: 10px;

  background: #fff;

  box-shadow:
    0 5px 14px
    rgba(18,48,22,.04);

  transition: .2s ease;
}

.kanban-card:hover {
  transform:
    translateY(-2px);

  box-shadow: var(--shadow);
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card p {
  margin:
    8px 0 10px;

  color: var(--muted);

  font-size: 8px;
}

.kanban-card small {
  color: #94a197;

  font-size: 7px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;

  gap: 5px;

  margin-top: 11px;
}

.tag-list .tag {
  padding:
    4px 7px;

  color: #51832d;

  background: #eff7f0;
}


/* =========================================================
   PERFIL DO CANDIDATO
========================================================= */

.profile-hero {
  display: flex;
  align-items: center;

  gap: 15px;

  margin-bottom: 20px;
}

.profile-hero .avatar {
  width: 63px;
  height: 63px;

  font-size: 17px;
}

.profile-hero h1 {
  margin:
    0 0 4px;

  color: #17281e;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 27px;
}

.profile-hero p {
  margin: 0;

  color: var(--muted);

  font-size: 11px;
}

.profile-actions {
  display: flex;

  gap: 7px;

  margin-left: auto;
}

.tabs {
  display: flex;

  gap: 22px;

  overflow-x: auto;

  margin-bottom: 17px;

  border-bottom:
    1px solid var(--line);
}

.tabs button {
  padding:
    10px 0;

  color: var(--muted);

  border: 0;
  border-bottom:
    2px solid transparent;

  background: none;

  font-size: 10px;

  white-space: nowrap;
}

.tabs button.active {
  color: var(--green);

  border-color:
    var(--green);

  font-weight: 700;
}

.profile-grid {
  display: grid;

  grid-template-columns:
    1fr .7fr;

  gap: 16px;
}

.profile-grid > .surface,
.profile-grid > aside.surface {
  padding: 19px;
}

.info-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 16px;
}

.info-item label {
  display: block;

  margin-bottom: 4px;

  color: var(--muted);

  font-size: 8px;
}

.info-item b {
  font-size: 10px;
}

.note {
  margin:
    9px 0;

  padding:
    10px 12px;

  color: #3b4f42;

  border-left:
    3px solid #64c77c;

  border-radius:
    0 8px 8px 0;

  background: #f2f9f4;

  font-size: 9px;

  line-height: 1.5;
}

.note small {
  display: block;

  margin-top: 6px;

  color: var(--muted);

  font-size: 7px;
}


/* =========================================================
   FUNIL ANTIGO / RELATÓRIOS
========================================================= */

.funnel {
  display: grid;

  gap: 12px;
}

.funnel-row {
  display: grid;

  grid-template-columns:
    105px 1fr 28px;

  align-items: center;

  gap: 8px;

  font-size: 9px;
}

.funnel-row b {
  font-size: 9px;
}

.funnel-bar {
  height: 8px;

  overflow: hidden;

  border-radius: 20px;

  background: #edf2ee;
}

.funnel-bar i {
  display: block;

  height: 100%;

  border-radius: 20px;

  background:
    linear-gradient(
      90deg,
      #138b45,
      #72d785
    );
}


/* =========================================================
   MODAL
========================================================= */

.modal-backdrop {
  position: fixed;

  inset: 0;

  z-index: 100;

  display: none;
  place-items: center;

  padding: 20px;

  background:
    rgba(2,18,11,.72);

  backdrop-filter:
    blur(7px);
}

.modal-backdrop.open {
  display: grid;
}

.modal {
  width:
    min(540px,100%);

  max-height:
    90vh;

  overflow-y: auto;

  padding: 25px;

  border:
    1px solid
    rgba(255,255,255,.45);

  border-radius: 18px;

  background: #fff;

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.28);
}

.modal-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;
}

.modal-head h2 {
  margin: 0;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size: 21px;
}

.modal-head > button {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  padding: 0;

  color: #64736a;

  border: 0;

  border-radius: 50%;

  background: #f2f6f3;

  font-size: 20px;
}


/* =========================================================
   PROFILE DROPDOWN
========================================================= */

#profile-dropdown {
  font-family:
    'DM Sans',
    sans-serif !important;

  border:
    1px solid #e2e9e4 !important;

  border-radius:
    15px !important;

  box-shadow:
    0 18px 55px
    rgba(9,40,24,.15) !important;
}

#profile-dropdown button {
  border-radius: 8px !important;
}

#profile-dropdown button:hover {
  background:
    #f4f8f5 !important;
}


/* =========================================================
   TOAST
========================================================= */

.toast {
  position: fixed;

  right: 24px;
  bottom: 24px;

  z-index: 150;

  padding:
    12px 16px;

  opacity: 0;

  pointer-events: none;

  color: #fff;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      #062719,
      #0b4b2b
    );

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.20);

  font-size: 10px;

  transform:
    translateY(10px);

  transition: .2s ease;
}

.toast.show {
  opacity: 1;

  transform: none;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty-demo {
  padding:
    48px 20px;

  color: var(--muted);

  text-align: center;
}

.empty-demo strong {
  display: block;

  margin-bottom: 5px;

  color: #263b2e;
}


/* =========================================================
   RESPONSIVIDADE — NOTEBOOK
========================================================= */

@media (max-width: 1250px) {

  .demo-app {
    grid-template-columns:
      210px minmax(0,1fr);
  }

  .demo-sidebar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .premium-funnel-row {
    grid-template-columns:
      90px 1fr 32px;
  }

}


/* =========================================================
   RESPONSIVIDADE — TABLET
========================================================= */

@media (max-width: 1050px) {

  .ibv-dashboard-hero {
    grid-template-columns:
      1fr .8fr;
  }

  .hero-message {
    grid-template-columns: 1fr;
  }

  .hero-message > small {
    grid-column: auto;
  }

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

  .dashboard-grid,
  .dashboard-bottom-grid,
  .profile-grid {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   RESPONSIVIDADE — MOBILE
========================================================= */

@media (max-width: 760px) {

  .demo-app {
    display: block;
  }

  .demo-sidebar {
    position: relative;

    height: auto;

    padding:
      11px 14px;
  }

  .demo-sidebar::before,
  .demo-sidebar::after {
    display: none;
  }

  .demo-brand {
    min-height: auto;

    padding: 0;
  }

  .demo-brand img {
    width: 120px;
    height: 43px;
  }

  .demo-label {
    display: none;
  }

  .demo-nav {
    display: flex;

    gap: 4px;

    overflow-x: auto;

    margin-top: 9px;

    padding-bottom: 3px;
  }

  .demo-nav a {
    min-height: 38px;

    flex: 0 0 auto;

    padding:
      0 10px;

    white-space: nowrap;
  }

  .demo-nav a.active::before {
    display: none;
  }

  .demo-sidebar-foot {
    display: none;
  }

  .demo-topbar {
    height: 58px;

    padding:
      0 12px;
  }

  .demo-topbar > small {
    width: auto;

    min-width: 155px;

    padding-right: 12px;
  }

  .demo-topbar > small::after {
    display: none;
  }

  .demo-content {
    padding:
      14px 12px 35px;
  }

  .ibv-dashboard-hero {
    grid-template-columns: 1fr;

    min-height: 185px;
  }

  .ibv-hero-art {
    display: none;
  }

  .ibv-hero-copy {
    padding:
      24px 20px 34px;
  }

  .ibv-hero-copy h1 {
    font-size: 35px;
  }

  .premium-metrics {
    padding:
      0 5px;
  }

  .interview-preview-grid {
    grid-template-columns: 1fr;
  }

  .demo-heading {
    display: block;
  }

  .demo-heading .demo-btn {
    margin-top: 13px;
  }

  .filters {
    display: grid;

    grid-template-columns: 1fr;
  }

  .profile-hero {
    align-items: flex-start;

    flex-wrap: wrap;
  }

  .profile-actions {
    width: 100%;

    margin-left: 0;
  }

  .profile-actions .demo-btn {
    flex: 1;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .application-card {
    align-items: flex-start;

    flex-direction: column;
  }

}


/* =========================================================
   RESPONSIVIDADE — CELULAR PEQUENO
========================================================= */

@media (max-width: 480px) {

  .metrics {
    grid-template-columns: 1fr;
  }

  .premium-card {
    min-height: 135px;
  }

  .ibv-hero-copy h1 {
    font-size: 32px;
  }

  .user-chip > span:not(.avatar) {
    display: none;
  }

  .tabs {
    gap: 14px;
  }

}
/* =========================================================
   IBV TECH — PREMIUM JOBS UI
========================================================= */

.jobs-page-header{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:28px;
}

.jobs-eyebrow{
  margin-bottom:10px;
  color:#5a9e1e;
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
}

.jobs-page-header h1{
  margin:0;
  font-family:'Space Grotesk',sans-serif;
  font-size:36px;
  line-height:1.05;
  letter-spacing:-1.4px;
  color:#10251a;
}

.jobs-page-header p{
  margin:9px 0 0;
  color:#738079;
  font-size:13px;
}

.jobs-new-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:45px;
  padding:0 19px;
  border:0;
  border-radius:12px;
  background:
    linear-gradient(
      135deg,
      #65aa1d,
      #3f8610
    );
  color:#fff;
  font-weight:800;
  font-size:12px;
  box-shadow:
    0 10px 24px rgba(79,148,16,.22),
    inset 0 1px rgba(255,255,255,.2);
  transition:.2s ease;
}

.jobs-new-button:hover{
  transform:translateY(-2px);
  box-shadow:
    0 15px 32px rgba(79,148,16,.3);
}

.jobs-new-button span{
  font-size:18px;
  font-weight:400;
}


/* STATS */

.jobs-stats{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-bottom:20px;
}

.jobs-stat-card{
  position:relative;
  min-height:104px;
  display:flex;
  align-items:center;
  gap:14px;
  overflow:hidden;
  padding:18px;
  background:
    linear-gradient(
      145deg,
      #fff,
      #fbfdfb
    );
  border:1px solid #e1e9e2;
  border-radius:16px;
  box-shadow:
    0 8px 25px rgba(22,52,29,.04);
}

.jobs-stat-card strong{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-size:25px;
  color:#16311f;
}

.jobs-stat-card span{
  display:block;
  margin-top:2px;
  color:#7b887f;
  font-size:10px;
  font-weight:600;
}

.jobs-stat-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#eef7e9;
  color:#4e9516;
  font-size:17px;
  font-weight:800;
}

.jobs-stat-card.published .jobs-stat-icon{
  background:#e5f7e9;
  color:#21824b;
}

.jobs-stat-card.draft .jobs-stat-icon{
  background:#f1f3f2;
  color:#68766e;
}

.jobs-stat-card.paused .jobs-stat-icon{
  background:#fff4dc;
  color:#a36d13;
}

.jobs-stat-card.closed .jobs-stat-icon{
  background:#edf0ef;
  color:#67736c;
}

.jobs-stat-glow{
  position:absolute;
  width:75px;
  height:75px;
  right:-28px;
  bottom:-32px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(123,205,45,.14),
      transparent 70%
    );
}


/* WORKSPACE */

.jobs-workspace{
  overflow:visible;
  background:#fff;
  border:1px solid #e1e9e2;
  border-radius:18px;
  box-shadow:
    0 12px 35px rgba(16,47,25,.05);
}

.jobs-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:17px;
  border-bottom:1px solid #edf1ed;
}

.jobs-search{
  min-width:260px;
  flex:1;
  display:flex;
  align-items:center;
  gap:9px;
  height:43px;
  padding:0 13px;
  background:#f8faf8;
  border:1px solid #dfe7df;
  border-radius:11px;
}

.jobs-search span{
  color:#87938a;
  font-size:18px;
}

.jobs-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#1d2e23;
  font-size:12px;
}

.jobs-toolbar select{
  height:43px;
  min-width:155px;
  padding:0 13px;
  border:1px solid #dfe7df;
  border-radius:11px;
  outline:0;
  background:#fff;
  color:#526159;
  font-size:11px;
}

.jobs-result-count{
  padding:0 8px;
  white-space:nowrap;
  color:#87928b;
  font-size:10px;
}

.jobs-result-count strong{
  color:#438813;
}


/* JOB LIST */

.jobs-list{
  display:grid;
  gap:12px;
  padding:16px;
}

.premium-job-card{
  position:relative;
  overflow:visible;
  display:flex;
  background:
    linear-gradient(
      135deg,
      #fff 0%,
      #fff 75%,
      #fbfdf9 100%
    );
  border:1px solid #e2e9e2;
  border-radius:15px;
  transition:.2s ease;
}

.premium-job-card:hover{
  transform:translateY(-2px);
  border-color:#bfd7b3;
  box-shadow:
    0 13px 30px rgba(30,72,36,.08);
}

.job-card-accent{
  width:4px;
  flex:0 0 4px;
  border-radius:15px 0 0 15px;
  background:
    linear-gradient(
      180deg,
      #91e52c,
      #4d9212
    );
}

.job-card-main{
  width:100%;
  padding:18px 20px 16px;
}

.job-card-top{
  display:flex;
  align-items:center;
  gap:13px;
}

.job-company-avatar{
  width:43px;
  height:43px;
  flex:0 0 43px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:
    linear-gradient(
      145deg,
      #e7f7db,
      #f3faee
    );
  border:1px solid #d8eacc;
  color:#438512;
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;
  font-weight:800;
}

.job-card-title{
  min-width:0;
  flex:1;
}

.job-title-line{
  display:flex;
  align-items:center;
  gap:10px;
}

.job-card-title h2{
  margin:0;
  color:#182b20;
  font:600 16px 'Space Grotesk',sans-serif;
}

.job-card-title p{
  margin:3px 0 0;
  color:#89948d;
  font-size:10px;
}

.premium-job-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border-radius:30px;
  background:#f1f4f2;
  color:#68766e;
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.premium-job-status i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
}

.premium-job-status.published{
  background:#e6f7e9;
  color:#25804b;
}

.premium-job-status.paused{
  background:#fff3dc;
  color:#a56b0d;
}

.premium-job-status.draft{
  background:#f0f2f1;
  color:#6d7971;
}

.premium-job-status.closed,
.premium-job-status.archived{
  background:#f1eeee;
  color:#806b6b;
}

.job-more-button{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid #e2e8e2;
  border-radius:9px;
  background:#fff;
  color:#738078;
  font-size:12px;
}

.job-more-button:hover{
  background:#f4f8f2;
  color:#4c8d18;
}


/* META */

.job-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin:15px 0 10px 56px;
}

.job-meta span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 9px;
  border-radius:7px;
  background:#f6f8f6;
  border:1px solid #edf1ed;
  color:#68756d;
  font-size:9px;
  font-weight:600;
}

.job-meta b{
  color:#55931f;
}

.job-card-description{
  max-width:850px;
  margin:9px 56px 15px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  color:#7a877f;
  font-size:10px;
  line-height:1.6;
}


/* FOOTER */

.job-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-left:56px;
  padding-top:13px;
  border-top:1px solid #edf1ed;
}

.job-card-info{
  display:flex;
  align-items:center;
  gap:10px;
  color:#8b968f;
  font-size:9px;
}

.job-card-info strong{
  color:#3f8212;
  font-size:13px;
}

.job-card-info div:first-child{
  display:flex;
  align-items:baseline;
  gap:4px;
}

.job-card-info i{
  width:3px;
  height:3px;
  border-radius:50%;
  background:#c0c8c2;
}

.job-card-actions{
  display:flex;
  gap:7px;
}

.job-secondary-action,
.job-primary-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 11px;
  border-radius:8px;
  font-size:9px;
  font-weight:800;
}

.job-secondary-action{
  border:1px solid #dce6dc;
  background:#fff;
  color:#5d7163;
}

.job-secondary-action:hover{
  background:#f4f8f2;
  color:#458614;
}

.job-primary-action{
  border:1px solid #4f9410;
  background:#4f9410;
  color:#fff;
}


/* MENU */

.job-actions-dropdown{
  position:absolute;
  z-index:200;
  top:55px;
  right:18px;
  width:185px;
  display:none;
  padding:7px;
  background:#fff;
  border:1px solid #dfe7df;
  border-radius:12px;
  box-shadow:
    0 18px 45px rgba(13,39,20,.16);
}

.job-actions-dropdown.open{
  display:grid;
}

.job-actions-dropdown a{
  padding:9px 10px;
  border-radius:7px;
  color:#56655c;
  font-size:10px;
  font-weight:600;
}

.job-actions-dropdown a:hover{
  background:#f2f7ef;
  color:#438614;
}

.job-actions-dropdown div{
  height:1px;
  margin:5px;
  background:#edf1ed;
}

.job-actions-dropdown a.danger{
  color:#b34b4b;
}


/* EMPTY */

.jobs-empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:330px;
  padding:50px 20px;
  text-align:center;
}

.jobs-empty-visual,
.jobs-empty-icon{
  width:65px;
  height:65px;
  display:grid;
  place-items:center;
  margin-bottom:17px;
  border-radius:20px;
  background:
    linear-gradient(
      145deg,
      #e6f6da,
      #f7fbf4
    );
  border:1px solid #d7eacb;
  color:#4b8d17;
  font-size:25px;
}

.jobs-empty-kicker{
  margin-bottom:7px;
  color:#59951f;
  font-size:8px;
  font-weight:800;
  letter-spacing:1.5px;
}

.jobs-empty-state h2{
  margin:0;
  color:#1a3021;
  font:600 20px 'Space Grotesk',sans-serif;
}

.jobs-empty-state p{
  max-width:420px;
  margin:8px 0 20px;
  color:#849087;
  font-size:11px;
}


/* LOADING */

.jobs-loading{
  min-height:350px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#718078;
  font-size:11px;
}

.jobs-loading-ring{
  width:30px;
  height:30px;
  border:3px solid #e2eadf;
  border-top-color:#58a119;
  border-radius:50%;
  animation:jobsSpin .7s linear infinite;
}

@keyframes jobsSpin{
  to{transform:rotate(360deg)}
}


/* =========================================================
   PREMIUM JOB FORM
========================================================= */

.premium-job-form{
  display:grid;
  gap:16px;
}

.job-form-section{
  padding:26px;
  background:#fff;
  border:1px solid #e1e9e2;
  border-radius:17px;
  box-shadow:
    0 10px 30px rgba(17,49,25,.04);
}

.job-form-section-head{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:23px;
  padding-bottom:17px;
  border-bottom:1px solid #edf1ed;
}

.job-form-number{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  border-radius:11px;
  background:
    linear-gradient(
      145deg,
      #dff2cf,
      #f2faec
    );
  color:#4c8d17;
  font-family:'Space Grotesk';
  font-size:10px;
  font-weight:800;
}

.job-form-section-head h2{
  margin:0;
  color:#1b3022;
  font:600 17px 'Space Grotesk',sans-serif;
}

.job-form-section-head p{
  margin:3px 0 0;
  color:#89958d;
  font-size:10px;
}

.premium-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.job-textarea-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.premium-field{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.premium-field label{
  color:#415047;
  font-size:10px;
  font-weight:800;
}

.premium-field label b{
  color:#5e9d25;
}

.premium-field input,
.premium-field select,
.premium-field textarea{
  width:100%;
  border:1px solid #dce5dc;
  border-radius:10px;
  outline:0;
  background:#fbfcfb;
  color:#24362b;
  font:500 11px 'DM Sans',sans-serif;
  transition:.18s;
}

.premium-field input,
.premium-field select{
  height:44px;
  padding:0 13px;
}

.premium-field textarea{
  resize:vertical;
  padding:13px;
  line-height:1.6;
}

.premium-field input:focus,
.premium-field select:focus,
.premium-field textarea:focus{
  border-color:#76ae49;
  background:#fff;
  box-shadow:
    0 0 0 3px rgba(91,155,36,.09);
}

.premium-field small{
  color:#98a19b;
  font-size:9px;
}

.job-form-footer{
  position:sticky;
  bottom:15px;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 17px;
  background:
    rgba(255,255,255,.94);
  border:1px solid #dfe7df;
  border-radius:14px;
  box-shadow:
    0 12px 40px rgba(14,44,21,.12);
  backdrop-filter:blur(12px);
}

.job-form-footer > div{
  display:flex;
  align-items:center;
  gap:8px;
  color:#849088;
  font-size:9px;
}

.job-save-indicator{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#77bf39;
  box-shadow:
    0 0 0 4px rgba(119,191,57,.12);
}

.job-cancel-button,
.job-back-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:43px;
  padding:0 16px;
  border:1px solid #dce5dc;
  border-radius:10px;
  background:#fff;
  color:#65736a;
  font-size:10px;
  font-weight:700;
}

.job-cancel-button:hover,
.job-back-button:hover{
  background:#f4f8f2;
  color:#4c8d18;
}


/* RESPONSIVO */

@media(max-width:1150px){
  .jobs-stats{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:760px){

  .jobs-page-header{
    display:block;
  }

  .jobs-page-header .jobs-new-button,
  .jobs-page-header .job-back-button{
    margin-top:18px;
  }

  .jobs-page-header h1{
    font-size:29px;
  }

  .jobs-stats{
    grid-template-columns:1fr 1fr;
  }

  .jobs-toolbar{
    display:grid;
  }

  .jobs-search{
    min-width:0;
  }

  .jobs-toolbar select{
    width:100%;
  }

  .job-meta,
  .job-card-description,
  .job-card-footer{
    margin-left:0;
  }

  .job-title-line{
    align-items:flex-start;
    flex-direction:column;
  }

  .job-card-footer{
    align-items:flex-start;
    flex-direction:column;
  }

  .job-card-actions{
    width:100%;
  }

  .job-card-actions a{
    flex:1;
  }

  .premium-form-grid,
  .job-textarea-grid{
    grid-template-columns:1fr;
  }

  .job-form-footer{
    position:static;
    align-items:stretch;
    flex-direction:column;
  }

  .job-form-footer > div:last-child{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}