/* ============================================================================
   SMARTIN JOBS - tarjeta de perfil y cara de las personas.
   ========================================================================== */

/* Quien tiene tarjeta, lo dice el cursor. */
[data-sj-usuario] { cursor: pointer; }
.sj-rap[data-sj-usuario],
header [data-sj-usuario],
.navbar [data-sj-usuario] { cursor: inherit; }

/* ----------------------------------------------------------------- velo */

.sj-pf__velo {
  position: fixed;
  inset: 0;
  /* La ficha flotante de la plataforma vive en un z-index de miles: la
     tarjeta tiene que poder abrirse DESDE ella, asi que va por encima.
     Medido el 2026-10-28: con 120 la tarjeta se creaba y no se veia. */
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(11, 25, 48, .38);
  backdrop-filter: blur(2px);
}

/* -------------------------------------------------------------- tarjeta */

.sj-pf {
  position: relative;
  width: min(380px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--sj-papel, #fff);
  border-radius: var(--sj-radio, 6px);
  box-shadow: var(--sj-sombra-g, 0 14px 30px rgba(11, 25, 48, .2));
  animation: sj-pf-entra 160ms cubic-bezier(.2, .7, .4, 1);
}
@keyframes sj-pf-entra {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* La banda del color de la persona: la tarjeta ES suya desde el primer
   vistazo, antes de leer nada. */
.sj-pf__banda {
  height: 64px;
  border-radius: var(--sj-radio, 6px) var(--sj-radio, 6px) 0 0;
}

.sj-pf__x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
}
.sj-pf__x:hover { background: rgba(255, 255, 255, .34); }

.sj-pf__cab {
  padding: 0 20px 14px;
  text-align: center;
}
.sj-pf__cara {
  width: 76px;
  height: 76px;
  margin-top: -38px;
  border: 4px solid var(--sj-papel, #fff);
  border-radius: 50%;
  box-shadow: var(--sj-sombra-m, 0 6px 16px rgba(11, 25, 48, .1));
}
.sj-pf__nombre {
  margin: .5rem 0 0;
  font-family: var(--sj-display, Georgia, serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--sj-tinta, #0b1930);
}
.sj-pf__rol {
  margin: .15rem 0 0;
  min-height: 1.1em;
  color: var(--sj-azul-alto, #066288);
  font-size: .82rem;
  font-weight: 600;
}
.sj-pf__cuenta {
  margin: .1rem 0 0;
  color: var(--sj-tinta-3, #8094aa);
  font-size: .76rem;
}

/* ----------------------------------------------------------------- cifras */

.sj-pf__cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--sj-linea, #dce5ef);
}
.sj-pf__cifras > div {
  padding: .7rem .4rem;
  text-align: center;
}
.sj-pf__cifras > div + div { border-inline-start: 1px solid var(--sj-linea, #dce5ef); }
.sj-pf__cifras b {
  display: block;
  font-family: var(--sj-display, Georgia, serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--sj-tinta, #0b1930);
}
.sj-pf__cifras span {
  display: block;
  margin-top: .1rem;
  color: var(--sj-tinta-3, #8094aa);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ------------------------------------------------------------------ lista */

.sj-pf__lista { padding: .7rem 20px .2rem; }
.sj-pf__rotulo {
  margin: 0 0 .35rem;
  color: var(--sj-tinta-3, #8094aa);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.sj-pf__lista a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: .42rem .5rem;
  margin: 0 -.5rem;
  border-radius: var(--sj-radio-s, 4px);
  color: var(--sj-tinta, #0b1930);
  font-size: .84rem;
  text-decoration: none;
}
.sj-pf__lista a:hover { background: var(--sj-fondo-2, #e7eef7); }
.sj-pf__lista a i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sj-linea-2, #c4d2e0);
}
.sj-pf__lista a i.sj-pf__pri--urge { background: var(--sj-rojo, #c0444a); }
.sj-pf__lista a i.sj-pf__pri--alta { background: var(--sj-ambar, #9a6b12); }
.sj-pf__lista a span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sj-pf__lista a time {
  color: var(--sj-tinta-3, #8094aa);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.sj-pf__vacio {
  margin: .2rem 0 .4rem;
  color: var(--sj-tinta-3, #8094aa);
  font-size: .82rem;
}

/* -------------------------------------------------------------------- pie */

.sj-pf__pie { padding: .8rem 20px 18px; }
.sj-pf__ver {
  width: 100%;
  padding: .55rem;
  border: 0;
  border-radius: 3px;
  background: var(--sj-azul, #087aa8);
  color: #fff;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color 140ms;
}
.sj-pf__ver:hover { background: var(--sj-azul-alto, #066288); }