/* ============================================================================
   Las tareas como fichas que se arrastran (sj-arrastre.js).

   El gesto tiene que verse, pero la lista NO puede convertirse en un tablero de
   juguete: se trabaja con ella todos los dias. Asi que en reposo no cambia
   nada; todo lo de aqui aparece durante el arrastre y desaparece al soltar.
   ========================================================================== */

/* La mano solo avisa de que se puede agarrar cuando el puntero esta encima. */
.sj-tarea[draggable="true"] { cursor: grab; }
.sj-tarea[draggable="true"]:active { cursor: grabbing; }

/* La ficha en viaje: se vacia de peso para que lo que se mire sea el hueco. */
.sj-arr--viajando {
  opacity: 0.4;
  transform: scale(0.99);
}

/* Mientras se guarda, la ficha se queda quieta y apagada: si algo falla, el
   aviso lo dira y la pagina se repintara con lo que diga el servidor. */
.sj-arr--guardando {
  opacity: 0.55;
  pointer-events: none;
}

/* La raya que ensena donde va a caer. Del color del grupo que la recibe, para
   que se lea como "aqui dentro" y no como una linea suelta. */
.sj-arr__raya {
  height: 0;
  margin: -1px 0;
  border-top: 2px solid var(--sj-gr-color, var(--sj-azul, #087aa8));
  border-radius: 2px;
  position: relative;
}
.sj-arr__raya::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sj-gr-color, var(--sj-azul, #087aa8));
}

/* El grupo que va a recibir la ficha. Un fondo tenue y su color en el borde:
   suficiente para saber donde se suelta, sin que la lista se mueva ni un pixel
   (cualquier cambio de alto haria bailar las filas bajo el puntero). */
.sj-grupo--recibe {
  background: color-mix(in srgb, var(--sj-gr-color, #087aa8) 7%, transparent);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--sj-gr-color, #087aa8) 35%, transparent);
  border-radius: var(--sj-radio, 6px);
}

/* Durante el arrastre no se selecciona texto por accidente. */
html.sj-arrastrando, html.sj-arrastrando * {
  user-select: none;
  -webkit-user-select: none;
}

/* El aviso de lo que paso. Abajo a la izquierda, lejos del robot, que vive en
   la esquina contraria. */
.sj-arr__aviso {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 60;
  max-width: 420px;
  padding: 9px 14px;
  border-radius: var(--sj-radio, 6px);
  border: 1px solid var(--sj-linea, #dce5ef);
  background: var(--sj-papel, #fff);
  color: var(--sj-tinta, #0b1930);
  box-shadow: var(--sj-sombra-m, 0 6px 16px rgba(11, 25, 48, .07));
  font-size: 0.9em;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.sj-arr__aviso--visible { opacity: 1; transform: translateY(0); }
.sj-arr__aviso--mal {
  border-color: var(--sj-rojo, #c0444a);
  color: var(--sj-rojo, #c0444a);
}

/* Teclado: la ficha enfocada se ve, que es como se sabe cual se va a mover. */
.sj-tarea[draggable="true"]:focus-visible {
  outline: 2px solid var(--sj-azul, #087aa8);
  outline-offset: 1px;
}

/* La sangria de la ficha -----------------------------------------------------

   Una tarea puede colgar de otra, y el nivel se ve con sangria y con un codo,
   como en un esquema. Se pidio el gesto -mover de lado para cambiar de nivel-
   y un gesto cuyo resultado no se ve es un gesto que nadie usa. */
.sj-tarea[data-nivel="2"] { padding-left: calc(26px + 14px); position: relative; }
.sj-tarea[data-nivel="2"]::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 50%;
  width: 10px;
  border-left: 1px solid var(--sj-linea-2, #c4d2e0);
  border-bottom: 1px solid var(--sj-linea-2, #c4d2e0);
  border-bottom-left-radius: 4px;
  pointer-events: none;
}

/* La raya de caida dice a que nivel cae y de quien colgara. Sin las palabras,
   la sangria sola se lee como un adorno. */
.sj-arr__raya[data-dice]::after {
  content: attr(data-dice);
  position: absolute;
  left: 10px;
  top: -9px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--sj-gr-color, var(--sj-azul, #087aa8));
  color: #fff;
  font-size: 0.72em;
  letter-spacing: 0.02em;
  white-space: nowrap;
}