/* ============================================================================
   SMARTIN JOBS - la barra de opciones del alta rapida.
   Se pliega sola en pantallas estrechas; en un movil cada campo ocupa su fila.
   ========================================================================== */

.sj-nueva {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .55rem .9rem;
  margin: .55rem 0 0;
  padding: .65rem .8rem;
  background: var(--sj-fondo-2, #F1ECE2);
  border: 1px solid var(--sj-linea, #E4DCCF);
  border-radius: 8px;
}
html.dark .sj-nueva { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }

.sj-nueva__campo { display: flex; flex-direction: column; gap: .16rem; min-width: 0; }
.sj-nueva__campo > span {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8C8273;
}
.sj-nueva__campo select,
.sj-nueva__campo input {
  padding: .3rem .45rem;
  border: 1px solid var(--sj-linea, #E4DCCF);
  border-radius: 5px;
  background: var(--sj-papel, #fff);
  color: var(--sj-tinta, #0E1A2C);
  font: inherit;
  font-size: .8rem;
  max-width: 13rem;
}
html.dark .sj-nueva__campo select,
html.dark .sj-nueva__campo input {
  background: #16243A; color: #E6DECF; border-color: rgba(255,255,255,.14);
}

.sj-nueva__etiquetas { position: relative; }
.sj-nueva__abrir {
  padding: .33rem .7rem;
  border: 1px solid var(--sj-linea, #E4DCCF);
  border-radius: 999px;
  background: var(--sj-papel, #fff);
  color: var(--sj-tinta, #0E1A2C);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
html.dark .sj-nueva__abrir { background: #16243A; color: #E6DECF; border-color: rgba(255,255,255,.14); }

.sj-nueva__lista {
  position: absolute;
  z-index: 40;
  top: calc(100% + .3rem);
  left: 0;
  width: max-content;
  max-width: min(22rem, 80vw);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding: .55rem;
  background: var(--sj-papel, #fff);
  border: 1px solid var(--sj-linea, #E4DCCF);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(14, 26, 44, .16);
}
html.dark .sj-nueva__lista { background: #1B2C45; border-color: rgba(255,255,255,.12); }
.sj-nueva__lista[hidden] { display: none; }

.sj-nueva__et {
  padding: .12rem .55rem;
  border: 1px solid var(--et, #888);
  border-radius: 999px;
  background: transparent;
  color: var(--et, #888);
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
}
.sj-nueva__et--on { background: var(--et, #888); color: #fff; }
.sj-nueva__vacio { font-size: .78rem; color: #8C8273; }

.sj-nueva__aviso { align-self: center; font-size: .78rem; color: var(--sj-verde, #4E7A5A); }
.sj-nueva__aviso--malo { color: var(--sj-rojo, #B3443B); }
.sj-nueva__aviso[hidden] { display: none; }

@media (max-width: 48rem) {
  .sj-nueva { gap: .5rem; }
  .sj-nueva__campo { flex: 1 1 100%; }
  .sj-nueva__campo select,
  .sj-nueva__campo input { max-width: 100%; width: 100%; }
  .sj-nueva__etiquetas { flex: 1 1 100%; }
  .sj-nueva__abrir { width: 100%; }
}

/* El boton propio de la barra: hace explicito que se va a crear CON las opciones
   de al lado. Antes esto dependia del boton de la aplicacion, que hacia dos
   cosas distintas segun lo que hubiera puesto y no lo decia. */
.sj-nueva__crear {
  align-self: flex-end;
  padding: .36rem .9rem;
  border: 0;
  border-radius: 6px;
  background: var(--sj-azul, #B8862B);
  color: #fff;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.sj-nueva__crear:hover { filter: brightness(1.07); }
@media (max-width: 48rem) { .sj-nueva__crear { flex: 1 1 100%; } }