/* Hapleo · Job Card component — variables y estilos aislados */
/* Solo incluir en páginas que usen <x-job-card> fuera del landing */

.hapleo-jc-scope {
  --hapleo-blue: #1E5BFF;
  --hapleo-blue-dark: #1240C2;
  --hapleo-green: #3DDC97;
  --hapleo-green-dark: #2BB67B;
  --ink: #0B1530;
  --ink-2: #1A2647;
  --muted: #5A6685;
  --muted-2: #8590AB;
  --line: #E6EAF3;
  --line-2: #EFF2F8;
  --bg: #FBFCFE;
  --bg-2: #F4F6FB;
  --radius-pill: 999px;
  --radius: 16px;
  --shadow-lg: 0 18px 50px -12px rgba(11, 21, 48, 0.18), 0 4px 12px rgba(11, 21, 48, 0.06);
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Chips */
.hapleo-jc-scope .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.hapleo-jc-scope .chip.green { background: rgba(61,220,151,0.1); color: var(--hapleo-green-dark); border-color: rgba(61,220,151,0.25); }
.hapleo-jc-scope .chip.blue  { background: rgba(30,91,255,0.08); color: var(--hapleo-blue); border-color: rgba(30,91,255,0.18); }

/* Job cards grid */
.hapleo-jc-scope .jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* Job card */
.hapleo-jc-scope .job-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  transition: all .25s;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  font-family: var(--font-sans);
  color: var(--ink);
  text-decoration: none;
}
.hapleo-jc-scope .job-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--hapleo-blue);
}
.hapleo-jc-scope .job-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}
.hapleo-jc-scope .job-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--bg-2), #fff);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--hapleo-blue);
  flex-shrink: 0;
}
.hapleo-jc-scope .job-company { font-size: 13px; color: var(--muted); }
.hapleo-jc-scope .job-status {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--hapleo-green-dark);
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
}
.hapleo-jc-scope .job-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hapleo-green);
  animation: hapleo-pulse 2s infinite;
}
.hapleo-jc-scope .job-status.closed { color: var(--muted-2); }
.hapleo-jc-scope .job-status.closed::before { background: var(--muted-2); animation: none; }
@keyframes hapleo-pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

.hapleo-jc-scope .job-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; line-height: 1.4; }
.hapleo-jc-scope .job-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.hapleo-jc-scope .job-meta .chip { font-size: 12px; padding: 4px 10px; }
.hapleo-jc-scope .job-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}
.hapleo-jc-scope .job-match {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hapleo-jc-scope .match-bar { width: 60px; height: 5px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.hapleo-jc-scope .match-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--hapleo-green), var(--hapleo-blue));
  border-radius: 3px;
}