/* La tarjeta ------------------------------------------------------------ */
.cmr-tarea {
  display: grid;
  gap: .4rem;
  padding: .75rem;
  background: var(--blanco);
  border-left: 3px solid var(--crema);
  border-radius: var(--radio);
  cursor: grab;
  box-shadow: 0 1px 2px rgba(8, 68, 56, .08);
  transition: box-shadow var(--transicion), opacity var(--transicion);
}

.cmr-tarea:hover { box-shadow: var(--sombra); }

.cmr-tarea:active { cursor: grabbing; }

.cmr-tarea.es-arrastrando { opacity: .4; }

.cmr-tarea.es-alta { border-left-color: #a3312a; }

.cmr-tarea.es-baja { border-left-color: #cfd8d4; }

.cmr-tarea h4 { font-family: var(--sans); font-weight: 600; font-size: .92rem; line-height: 1.35; }

.cmr-tarea-detalle { font-size: .78rem; line-height: 1.45; color: var(--gris); }

.cmr-tarea-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

.cmr-tarea-fecha { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; color: var(--gris); }

.cmr-tarea-fecha .cmr-ico { width: .9em; height: .9em; }

.cmr-tarea-fecha.es-vencida { color: #a3312a; font-weight: 600; }

.cmr-tarea-quien {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  margin-left: auto;
  font-size: .62rem; font-weight: 800; letter-spacing: .04em;
  color: var(--papel); background: var(--verde);
  border-radius: 50%;
}

.cmr-tarea-quien.es-libre { color: var(--gris); background: var(--crema); }

/* El hueco donde se suelta. Invisible hasta que hay algo encima, para que el
   tablero no parezca una rejilla de cajas vacías. */
.cmr-tarea-hueco { height: .35rem; border-radius: 2px; transition: all var(--transicion); }

.cmr-tarea-hueco.es-activo { height: 2.2rem; background: var(--crema); }

.cmr-tarea-nueva { display: grid; gap: .4rem; padding: .5rem; background: var(--blanco); border-radius: var(--radio); }

.cmr-tarea-nueva input {
  width: 100%; padding: .5rem; font-size: .9rem;
  border: 1px solid var(--crema); border-radius: var(--radio);
}

.cmr-tarea-nueva-acciones { display: flex; gap: .4rem; }