/* ============================================================================
   SMARTIN JOBS - paleta de mandos (Ctrl+K) y chip de vencimiento del kanban.
   ========================================================================== */

.sj-pal__velo {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
  background: rgba(11, 25, 48, .38);
  backdrop-filter: blur(2px);
}

.sj-pal {
  width: min(560px, 94vw);
  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));
  overflow: hidden;
  animation: sj-pal-entra 140ms cubic-bezier(.2, .7, .4, 1);
}
@keyframes sj-pal-entra {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.sj-pal__campo {
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-block-end: 1px solid var(--sj-linea, #dce5ef);
  font: inherit;
  font-size: 1rem;
  color: var(--sj-tinta, #0b1930);
  outline: none;
  background: transparent;
}
.sj-pal__campo::placeholder { color: var(--sj-tinta-3, #8094aa); }

.sj-pal__lista {
  max-height: min(430px, 55vh);
  overflow-y: auto;
  padding: 6px;
}

.sj-pal__fila {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--sj-radio-s, 4px);
  background: transparent;
  font: inherit;
  font-size: .88rem;
  color: var(--sj-tinta, #0b1930);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sj-pal__fila--on,
.sj-pal__fila:hover { background: var(--sj-fondo-2, #e7eef7); }
.sj-pal__fila--hecha { opacity: .55; }
.sj-pal__fila--hecha span { text-decoration: line-through; }

.sj-pal__fila span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sj-pal__fila span b { font-weight: 700; color: var(--sj-tinta-2, #60738a); }
.sj-pal__fila time,
.sj-pal__fila em {
  color: var(--sj-tinta-3, #8094aa);
  font-size: .72rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* La pista "Ctrl+Enter" solo en la fila activa: en todas seria ruido. */
.sj-pal__pista {
  display: none;
  padding: 1px 6px;
  border: 1px solid var(--sj-linea-2, #c4d2e0);
  border-radius: 4px;
  background: var(--sj-fondo, #f5f8fc);
  color: var(--sj-tinta-3, #8094aa);
  font-family: inherit;
  font-size: .64rem;
  white-space: nowrap;
}
.sj-pal__fila--on .sj-pal__pista { display: inline-block; }

.sj-pal__tipo {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sj-linea-2, #c4d2e0);
}
.sj-pal__tipo--tarea   { background: var(--sj-azul, #087aa8); }
.sj-pal__tipo--tablero { border-radius: 2px; background: var(--sj-tinta-2, #60738a); }
.sj-pal__tipo--mas     { background: var(--sj-verde, #0e7a64); }

.sj-pal__cara {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.sj-pal__fila--crear span b { color: var(--sj-verde, #0e7a64); }

.sj-pal__nada {
  margin: 0;
  padding: 18px 14px;
  color: var(--sj-tinta-3, #8094aa);
  font-size: .84rem;
}

.sj-pal__pie {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border-block-start: 1px solid var(--sj-linea, #dce5ef);
  background: var(--sj-fondo, #f5f8fc);
  color: var(--sj-tinta-3, #8094aa);
  font-size: .68rem;
}

/* ------------------------------------ la fecha en la tarjeta del kanban

   La plataforma ya pinta su chip .due-date cuando la tarea tiene fecha (la
   primera auditoria no lo vio: ninguna tarjeta la tenia puesta). Aqui solo se
   viste con la paleta; .overdue es su propia clase para lo vencido.        */

.kanban .task .due-date {
  padding: 0 7px;
  border-radius: 999px;
  background: var(--sj-fondo-2, #e7eef7);
  color: var(--sj-tinta-2, #60738a);
  font-size: .7rem;
  font-weight: 600;
}
.kanban .task .due-date.overdue,
.kanban .task.overdue .due-date {
  background: #FBE9EA;
  color: var(--sj-rojo, #c0444a);
}

/* ---------------------------------------------- marcar hecha, con gusto */

.fancy-checkbox svg,
.fancy-checkbox input + span {
  transition: transform 120ms cubic-bezier(.2, .7, .4, 1);
}
.fancy-checkbox:hover svg { transform: scale(1.08); }
.fancy-checkbox:active svg { transform: scale(1.18); }

/* ------------------------------------------------- oferta de avisos */

.sj-not__oferta {
  position: fixed;
  z-index: 80;
  inset-block-end: 18px;
  inset-inline-start: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 12px;
  background: var(--sj-papel, #fff);
  border: 1px solid var(--sj-linea-2, #c4d2e0);
  border-radius: var(--sj-radio, 6px);
  box-shadow: var(--sj-sombra-g, 0 14px 30px rgba(11, 25, 48, .11));
  font-size: .8rem;
  color: var(--sj-tinta-2, #60738a);
}
.sj-not__oferta p { margin: 0; line-height: 1.4; }
.sj-not__si {
  flex: 0 0 auto;
  padding: .4rem .7rem;
  border: 0;
  border-radius: 3px;
  background: var(--sj-azul, #087aa8);
  color: #fff;
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
}
.sj-not__si:hover { background: var(--sj-azul-alto, #066288); }
.sj-not__no {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--sj-tinta-3, #8094aa);
  font-size: .8rem;
  cursor: pointer;
}